DEV: API to show and hide switch panel buttons (#23022)

There is a case when developer would like to go to separated mode but not show switch panel buttons. We need additional functions to show/add buttons to support this case.

app/assets/javascripts/discourse/app/components/sidebar.js

@@ -23,7 +23,7 @@ export default class Sidebar extends Component {
 
   get switchPanelButtons() {
     if (
-      this.sidebarState.combinedMode ||
+      !this.sidebarState.displaySwitchPanelButtons ||
       this.sidebarState.panels.length === 1 ||
       !this.currentUser
     ) {

app/assets/javascripts/discourse/app/components/sidebar/switch-panel-buttons.js

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
+import { defaultHomepage } from "discourse/lib/utilities";
 
 export default class SwitchPanelButtons extends Component {
   @service router;
@@ -14,7 +15,7 @@ export default class SwitchPanelButtons extends Component {
     this.sidebarState.currentPanel.lastKnownURL = this.router.currentURL;
 
     const url = panel.lastKnownURL || panel.switchButtonDefaultUrl;
-    const destination = url === "/" ? "/latest" : url;
+    const destination = url === "/" ? `discovery.${defaultHomepage()}` : url;
     this.router.transitionTo(destination).finally(() => {
       this.isSwitching = false;
       this.sidebarState.setPanel(panel.key);

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -130,7 +130,7 @@ import { _addBulkButton } from "discourse/components/modal/topic-bulk-actions";
 // based on Semantic Versioning 2.0.0. Please update the changelog at
 // docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
 // using the format described at https://keepachangelog.com/en/1.0.0/.
-export const PLUGIN_API_VERSION = "1.8.1";
+export const PLUGIN_API_VERSION = "1.9.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {
@@ -2107,6 +2107,22 @@ class PluginApi {
     this._lookupContainer("service:sidebar-state").setSeparatedMode();
   }
 
+  /**
+   * EXPERIMENTAL. Do not use.
+   * Show sidebar switch panels buttons in separated mode.
+   */
+  showSidebarSwitchPanelButtons() {
+    this._lookupContainer("service:sidebar-state").showSwitchPanelButtons();
+  }
+
+  /**
+   * EXPERIMENTAL. Do not use.
+   * Hide sidebar switch panels buttons in separated mode.
+   */
+  hideSidebarSwitchPanelButtons() {
+    this._lookupContainer("service:sidebar-state").hideSwitchPanelButtons();
+  }
+
   /**
    * Support for adding a Sidebar section by returning a class which extends from the BaseCustomSidebarSection
    * class interface. See `lib/sidebar/user/base-custom-sidebar-section.js` for documentation on the BaseCustomSidebarSection class

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

@@ -14,6 +14,7 @@ export default class SidebarState extends Service {
   @tracked currentPanelKey = currentPanelKey;
   @tracked panels = panels;
   @tracked mode = COMBINED_MODE;
+  @tracked displaySwitchPanelButtons = false;
 
   constructor() {
     super(...arguments);
@@ -23,7 +24,7 @@ export default class SidebarState extends Service {
 
   setPanel(name) {
     this.currentPanelKey = name;
-    this.mode = SEPARATED_MODE;
+    this.setSeparatedMode();
   }
 
   get currentPanel() {
@@ -32,11 +33,21 @@ export default class SidebarState extends Service {
 
   setSeparatedMode() {
     this.mode = SEPARATED_MODE;
+    this.showSwitchPanelButtons();
   }
 
   setCombinedMode() {
     this.mode = COMBINED_MODE;
     this.currentPanelKey = MAIN_PANEL;
+    this.hideSwitchPanelButtons();
+  }
+
+  showSwitchPanelButtons() {
+    this.displaySwitchPanelButtons = true;
+  }
+
+  hideSwitchPanelButtons() {
+    this.displaySwitchPanelButtons = false;
   }
 
   get combinedMode() {

app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js

@@ -915,7 +915,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
     }
   });
 
-  test("New custom sidebar panel and option to set default", async function (assert) {
+  test("New custom sidebar panel and option to set default and show/hide switch buttons", async function (assert) {
     withPluginApi(PLUGIN_API_VERSION, (api) => {
       api.addSidebarPanel((BaseCustomSidebarPanel) => {
         const ChatSidebarPanel = class extends BaseCustomSidebarPanel {
@@ -1067,5 +1067,20 @@ acceptance("Sidebar - Plugin API", function (needs) {
         ".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-text"
       )
       .exists();
+
+    withPluginApi(PLUGIN_API_VERSION, (api) => {
+      api.setSidebarPanel("new-panel");
+      api.hideSidebarSwitchPanelButtons();
+    });
+    await visit("/");
+    assert.dom(".sidebar__panel-switch-button").doesNotExist();
+
+    withPluginApi(PLUGIN_API_VERSION, (api) => {
+      api.setSidebarPanel("new-panel");
+      api.hideSidebarSwitchPanelButtons();
+      api.showSidebarSwitchPanelButtons();
+    });
+    await visit("/");
+    assert.dom(".sidebar__panel-switch-button").exists();
   });
 });

docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md

@@ -7,6 +7,14 @@ in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.0] - 2023-08-09
+
+### Added
+
+- Adds `showSidebarSwitchPanelButtons` which is experimental, and allows plugins to show sidebar switch panel buttons in separated mode
+
+- Adds `hideSidebarSwitchPanelButtons` which is experimental, and allows plugins to hide sidebar switch panel buttons in separated mode
+
 ## [1.8.1] - 2023-08-08
 
 ### Added