From 74f24d5973e7995fe0ea637fbcf4812c1539a156 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Mon, 13 May 2024 12:36:03 +1000
Subject: [PATCH] FIX: bold sidebar header when admin sidebar is disabled
 (#26993)

Recently a bug was introduced when the admin sidebar section was made bold.

When the admin sidebar is disabled, we display the original sidebar in the admin panel. In that case, an incorrect CSS rule is executed.
```CSS
.admin-area .sidebar-wrapper {
  background-color: var(--d-sidebar-admin-background);
  .sidebar-section-header-text {
    font-weight: bold;
  }
}
```
Bug in this PR: https://github.com/discourse/discourse/pull/26801

To solve it, a custom CSS class with a panel key was added which will allow granular customisations.
---
 .../app/components/sidebar/api-panels.gjs     | 20 +++++++++++++------
 .../acceptance/sidebar-plugin-api-test.js     |  8 +++++---
 .../common/admin/admin_revamp.scss            |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/api-panels.gjs b/app/assets/javascripts/discourse/app/components/sidebar/api-panels.gjs
index 80a2b1d9c93..61562707abb 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/api-panels.gjs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/api-panels.gjs
@@ -1,9 +1,17 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
 import ApiSections from "./api-sections";
 
-const SidebarApiPanels = <template>
-  <div class="sidebar-sections">
-    <ApiSections @collapsable={{@collapsableSections}} />
-  </div>
-</template>;
+export default class SidebarApiPanels extends Component {
+  @service sidebarState;
 
-export default SidebarApiPanels;
+  get panelCssClass() {
+    return `${this.sidebarState.currentPanel.key}-panel`;
+  }
+
+  <template>
+    <div class="sidebar-sections {{this.panelCssClass}}">
+      <ApiSections @collapsable={{@collapsableSections}} />
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
index e124de40230..3f5c6ce5a96 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
@@ -921,7 +921,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
       api.addSidebarPanel((BaseCustomSidebarPanel) => {
         const AdminSidebarPanel = class extends BaseCustomSidebarPanel {
           get key() {
-            return "admin-panel";
+            return "admin";
           }
 
           get hidden() {
@@ -1004,9 +1004,9 @@ acceptance("Sidebar - Plugin API", function (needs) {
             }
           };
         },
-        "admin-panel"
+        "admin"
       );
-      api.setSidebarPanel("admin-panel");
+      api.setSidebarPanel("admin");
       api.setSeparatedSidebarMode();
     });
 
@@ -1019,12 +1019,14 @@ acceptance("Sidebar - Plugin API", function (needs) {
       "test admin section",
       "displays header with correct text"
     );
+    assert.dom(".admin-panel").exists();
     withPluginApi(PLUGIN_API_VERSION, (api) => {
       api.setSidebarPanel("main-panel");
       api.setCombinedSidebarMode();
     });
     await visit("/");
     assert.dom(".sidebar__panel-switch-button").doesNotExist();
+    assert.dom(".admin-panel").doesNotExist();
     assert
       .dom(".sidebar-section[data-section-name='test-admin-section']")
       .doesNotExist();
diff --git a/app/assets/stylesheets/common/admin/admin_revamp.scss b/app/assets/stylesheets/common/admin/admin_revamp.scss
index 03a77ddaa17..f4e9028b056 100644
--- a/app/assets/stylesheets/common/admin/admin_revamp.scss
+++ b/app/assets/stylesheets/common/admin/admin_revamp.scss
@@ -26,7 +26,7 @@
   }
 }
 
-.admin-area .sidebar-wrapper {
+.admin-area .sidebar-wrapper .admin-panel {
   background-color: var(--d-sidebar-admin-background);
   .sidebar-section-header-text {
     font-weight: bold;