FEATURE: direct link to components for admin sidebar (#26644)

To add a components link to the sidebar refactoring was required to create unique URLs for themes and components. Before the query param was used. After changes, we have two URLs `/admin/customize/themes` and `/admin/customize/components`.

app/assets/javascripts/admin/addon/components/themes-list.js

@@ -77,6 +77,13 @@ export default class ThemesList extends Component {
   @equal("filter", ACTIVE_FILTER) activeFilter;
   @equal("filter", INACTIVE_FILTER) inactiveFilter;
 
+  willRender() {
+    super.willRender(...arguments);
+    if (!this.showSearchAndFilter) {
+      this.set("searchTerm", null);
+    }
+  }
+
   @discourseComputed("themes", "components", "currentTab")
   themesList(themes, components) {
     if (this.themesTabActive) {
@@ -208,11 +215,8 @@ export default class ThemesList extends Component {
   changeView(newTab) {
     if (newTab !== this.currentTab) {
       this.set("selectInactiveMode", false);
-      this.set("currentTab", newTab);
       this.set("filter", ALL_FILTER);
-      if (!this.showSearchAndFilter) {
-        this.set("searchTerm", null);
-      }
+      this.router.transitionTo("adminCustomizeThemes", newTab);
     }
   }
 

app/assets/javascripts/admin/addon/routes/admin-customize-theme-components.js

@@ -1,14 +0,0 @@
-import Route from "@ember/routing/route";
-import { service } from "@ember/service";
-import { COMPONENTS } from "admin/models/theme";
-
-export default class AdminCustomizeThemeComponents extends Route {
-  @service router;
-
-  beforeModel(transition) {
-    transition.abort();
-    this.router.transitionTo("adminCustomizeThemes", {
-      queryParams: { tab: COMPONENTS },
-    });
-  }
-}

app/assets/javascripts/admin/addon/routes/admin-customize-themes.js

@@ -13,23 +13,20 @@ export default class AdminCustomizeThemesRoute extends Route {
   queryParams = {
     repoUrl: null,
     repoName: null,
-    tab: null,
   };
 
-  model() {
+  model(params) {
+    this.currentTab = params.type;
     return this.store.findAll("theme");
   }
 
   setupController(controller, model) {
     super.setupController(controller, model);
 
-    if (controller.tab) {
+    if (this.currentTab) {
       controller.setProperties({
         editingTheme: false,
-        currentTab: controller.tab,
-
-        // this is to get rid of the queryString since we don't want it hanging around
-        tab: undefined,
+        currentTab: this.currentTab,
       });
     }
 

app/assets/javascripts/admin/addon/routes/admin-route-map.js

@@ -55,7 +55,7 @@ export default function () {
 
         this.route(
           "adminCustomizeThemes",
-          { path: "themes", resetNamespace: true },
+          { path: "/:type", resetNamespace: true },
           function () {
             this.route("show", { path: "/:theme_id" }, function () {
               this.route("schema", { path: "schema/:setting_name" });
@@ -64,11 +64,6 @@ export default function () {
           }
         );
 
-        this.route("adminCustomizeThemeComponents", {
-          path: "theme-components",
-          resetNamespace: true,
-        });
-
         this.route(
           "adminSiteText",
           { path: "/site_texts", resetNamespace: true },

app/assets/javascripts/admin/addon/templates/admin.hbs

@@ -25,7 +25,11 @@
             <NavItem @route="adminEmail" @label="admin.email.title" />
           {{/if}}
           <NavItem @route="adminLogs" @label="admin.logs.title" />
-          <NavItem @route="adminCustomize" @label="admin.customize.title" />
+          <NavItem
+            @route="adminCustomizeThemes"
+            @routeParam="themes"
+            @label="admin.customize.title"
+          />
           {{#if this.currentUser.admin}}
             <NavItem @route="adminApi" @label="admin.api.title" />
             {{#if this.siteSettings.enable_backups}}

app/assets/javascripts/admin/addon/templates/customize.hbs

@@ -3,6 +3,7 @@
     {{#if this.currentUser.admin}}
       <NavItem
         @route="adminCustomizeThemes"
+        @routeParam="themes"
         @label="admin.customize.theme.title"
         class="admin-customize-themes"
       />