FEATURE: Add theme-components route for admin (#24264)

This commit adds an /admin/customize/theme-components route,
that opens the theme page with the components tab pre-selected,
so people can navigate to that directly.

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

@@ -0,0 +1,14 @@
+import Route from "@ember/routing/route";
+import { inject as 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,6 +13,7 @@ export default class AdminCustomizeThemesRoute extends Route {
   queryParams = {
     repoUrl: null,
     repoName: null,
+    tab: null,
   };
 
   model() {
@@ -21,7 +22,17 @@ export default class AdminCustomizeThemesRoute extends Route {
 
   setupController(controller, model) {
     super.setupController(controller, model);
-    controller.set("editingTheme", false);
+
+    if (controller.tab) {
+      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,
+      });
+    }
+
     if (controller.repoUrl) {
       next(() => {
         this.modal.show(InstallThemeModal, {

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

@@ -58,6 +58,11 @@ export default function () {
           }
         );
 
+        this.route("adminCustomizeThemeComponents", {
+          path: "theme-components",
+          resetNamespace: true,
+        });
+
         this.route(
           "adminSiteText",
           { path: "/site_texts", resetNamespace: true },

config/routes.rb

@@ -221,6 +221,7 @@ Discourse::Application.routes.draw do
 
       get "customize" => "color_schemes#index", :constraints => AdminConstraint.new
       get "customize/themes" => "themes#index", :constraints => AdminConstraint.new
+      get "customize/theme-components" => "themes#index", :constraints => AdminConstraint.new
       get "customize/colors" => "color_schemes#index", :constraints => AdminConstraint.new
       get "customize/colors/:id" => "color_schemes#index", :constraints => AdminConstraint.new
       get "customize/permalinks" => "permalinks#index", :constraints => AdminConstraint.new

spec/system/admin_customize_themes_spec.rb

@@ -40,9 +40,19 @@ describe "Admin Customize Themes", type: :system do
 
       expect(admin_customize_themes_page).to have_no_inactive_themes
     end
+
+    it "selects the themes tab by default" do
+      visit("/admin/customize/themes")
+      expect(find(".themes-list-header")).to have_css(".themes-tab.active")
     end
 
-  describe "when visiting the page to customize the theme" do
+    it "selects the component tab when visiting the theme-components route" do
+      visit("/admin/customize/theme-components")
+      expect(find(".themes-list-header")).to have_css(".components-tab.active")
+    end
+  end
+
+  describe "when visiting the page to customize a single theme" do
     it "should allow admin to update the color scheme of the theme" do
       visit("/admin/customize/themes/#{theme.id}")