DEV: Refactor forcing admin sidebar logic in hamburger nav mode (#32257)

This PR allows for other code to force the sidebar, but making the
language not admin-specific. There is a general problem to solve of "how
can I force the sidebar to appear, while keeping the hamburger menu in
the header as-is". This problem is solved for admin interface, but the
variable naming made it seem like the logic was directly tied to the
admin UI.

It is easy with this change, to have another sidebar manager force the
sidebar to be open for a route. Technically it was easy before, but it
would look like you were doing awful hacks.

---------

Co-authored-by: Isaac Janzen <isaac.janzen@discourse.org>

app/assets/javascripts/admin/addon/services/admin-sidebar-state-manager.js

@@ -1,4 +1,3 @@
-import { alias } from "@ember/object/computed";
 import Service, { service } from "@ember/service";
 import KeyValueStore from "discourse/lib/key-value-store";
 import { ADMIN_PANEL, MAIN_PANEL } from "discourse/lib/sidebar/panels";
@@ -6,14 +5,18 @@ import { ADMIN_PANEL, MAIN_PANEL } from "discourse/lib/sidebar/panels";
 export default class AdminSidebarStateManager extends Service {
   @service sidebarState;
 
-  @alias("sidebarState.isForcingAdminSidebar") isForcingAdminSidebar;
-
-  keywords = {};
-
   STORE_NAMESPACE = "discourse_admin_sidebar_experiment_";
-
+  keywords = {};
   store = new KeyValueStore(this.STORE_NAMESPACE);
 
+  get navConfig() {
+    return this.store.getObject("navConfig");
+  }
+
+  set navConfig(value) {
+    this.store.setObject({ key: "navConfig", value });
+  }
+
   setLinkKeywords(link_name, keywords) {
     if (!this.keywords[link_name]) {
       this.keywords[link_name] = {
@@ -31,14 +34,6 @@ export default class AdminSidebarStateManager extends Service {
     ];
   }
 
-  get navConfig() {
-    return this.store.getObject("navConfig");
-  }
-
-  set navConfig(value) {
-    this.store.setObject({ key: "navConfig", value });
-  }
-
   maybeForceAdminSidebar(opts = {}) {
     opts.onlyIfAlreadyActive ??= true;
 
@@ -52,21 +47,21 @@ export default class AdminSidebarStateManager extends Service {
     if (isAdminSidebarActive) {
       return this.#forceAdminSidebar();
     } else {
-      this.isForcingAdminSidebar = false;
+      this.sidebarState.isForcingSidebar = false;
       return false;
     }
   }
 
   stopForcingAdminSidebar() {
     this.sidebarState.setPanel(MAIN_PANEL);
-    this.isForcingAdminSidebar = false;
+    this.sidebarState.isForcingSidebar = false;
   }
 
   #forceAdminSidebar() {
     this.sidebarState.setPanel(ADMIN_PANEL);
     this.sidebarState.setSeparatedMode();
     this.sidebarState.hideSwitchPanelButtons();
-    this.isForcingAdminSidebar = true;
+    this.sidebarState.isForcingSidebar = true;
     return true;
   }
 }

app/assets/javascripts/discourse/app/components/header/contents.gjs

@@ -17,11 +17,11 @@ export default class Contents extends Component {
   @service siteSettings;
   @service header;
   @service router;
-  @service sidebarState;
+  @service navigationMenu;
   @service search;
 
   get sidebarIcon() {
-    if (this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu) {
+    if (this.navigationMenu.isDesktopDropdownMode) {
       return "discourse-sidebar";
     }
 

app/assets/javascripts/discourse/app/components/header/hamburger-dropdown-wrapper.gjs

@@ -17,14 +17,12 @@ const CLOSE_ON_CLICK_SELECTORS =
 export default class HamburgerDropdownWrapper extends Component {
   @service currentUser;
   @service siteSettings;
-  @service sidebarState;
+  @service navigationMenu;
 
   @action
   toggleNavigation() {
     this.args.toggleNavigationMenu(
-      this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu
-        ? "hamburger"
-        : null
+      this.navigationMenu.isDesktopDropdownMode ? "hamburger" : null
     );
   }
 
@@ -74,13 +72,10 @@ export default class HamburgerDropdownWrapper extends Component {
   }
 
   get forceMainSidebarPanel() {
-    // NOTE: In this scenario, we are forcing the sidebar on admin users,
-    // so we need to still show the hamburger menu and always show the main
-    // panel in that menu.
-    if (
-      this.args.sidebarEnabled &&
-      this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu
-    ) {
+    // NOTE: In this scenario, we are forcing the sidebar to be shown
+    // when the navigation mode is hamburger. We still need to show the
+    // main panel in the hamburger menu, regardless of what is in the sidebar.
+    if (this.args.sidebarEnabled && this.navigationMenu.isDesktopDropdownMode) {
       return true;
     }
 

app/assets/javascripts/discourse/app/components/header/icons.gjs

@@ -31,7 +31,7 @@ export default class Icons extends Component {
   @service site;
   @service currentUser;
   @service siteSettings;
-  @service sidebarState;
+  @service navigationMenu;
   @service header;
   @service search;
   @service interfaceColor;
@@ -44,10 +44,7 @@ export default class Icons extends Component {
       return false;
     }
 
-    if (
-      this.args.sidebarEnabled &&
-      this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu
-    ) {
+    if (this.args.sidebarEnabled && this.navigationMenu.isDesktopDropdownMode) {
       return true;
     }
 
@@ -69,7 +66,7 @@ export default class Icons extends Component {
 
   @action
   toggleHamburger() {
-    if (this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu) {
+    if (this.navigationMenu.isDesktopDropdownMode) {
       this.args.toggleNavigationMenu("hamburger");
     } else {
       this.args.toggleNavigationMenu();

app/assets/javascripts/discourse/app/components/header/sidebar-toggle.gjs

@@ -8,11 +8,11 @@ import { i18n } from "discourse-i18n";
 
 export default class SidebarToggle extends Component {
   @service site;
-  @service sidebarState;
+  @service navigationMenu;
 
   @action
   toggleWithBlur(e) {
-    if (this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu) {
+    if (this.navigationMenu.isDesktopDropdownMode) {
       this.args.toggleNavigationMenu("sidebar");
     } else {
       this.args.toggleNavigationMenu();

app/assets/javascripts/discourse/app/controllers/application.js

@@ -94,8 +94,8 @@ export default class ApplicationController extends Controller {
       return false;
     }
 
-    // Always show sidebar for admin if user can see the admin sidbar
-    if (this.sidebarState.isForcingAdminSidebar) {
+    // Always show sidebar for admin if user can see the admin sidebar
+    if (this.sidebarState.isForcingSidebar) {
       return true;
     }
 

app/assets/javascripts/discourse/app/services/sidebar-state.js

@@ -25,7 +25,7 @@ export default class SidebarState extends Service {
   @tracked mode = COMBINED_MODE;
   @tracked displaySwitchPanelButtons = false;
   @tracked filter = "";
-  @tracked isForcingAdminSidebar = false;
+  @tracked isForcingSidebar = false;
 
   panels = panels;
   activeExpandedSections = new TrackedSet();
@@ -132,13 +132,6 @@ export default class SidebarState extends Service {
     return this.currentPanelKey === MAIN_PANEL;
   }
 
-  get adminSidebarAllowedWithLegacyNavigationMenu() {
-    return (
-      this.currentUser?.staff &&
-      this.siteSettings.navigation_menu === "header dropdown"
-    );
-  }
-
   get sanitizedFilter() {
     return escapeRegExp(this.filter.toLowerCase().trim());
   }