FIX: Restore old admin themes/components page (#31887)

Follow-up to https://github.com/discourse/discourse/pull/30953

This PR is a partial revert of the linked PR — it changes the "Themes
and components" link in the admin sidebar back to the legacy
`/admin/customize/themes` page and adds the themes list/sidebar back to
the left hand side of the page. The new `/admin/config/customize/` route
is still available, but it's not linked from anywhere. When accessing
the new page and then navigating to a theme, the old components (e.g.
the themes list) of the page are hidden. This allows us to iterate on
the new page and improve until we're more ready to make it available
more widely.

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

@@ -1,8 +1,10 @@
+import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse/lib/decorators";
 import { THEMES } from "admin/models/theme";
 
 export default class AdminCustomizeThemesController extends Controller {
+  @tracked fromNewConfigPage = false;
   currentTab = THEMES;
 
   @discourseComputed("model", "model.@each.component")

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

@@ -23,14 +23,20 @@ export default class AdminCustomizeThemesShowRoute extends Route {
     }
   }
 
-  setupController(controller, model) {
+  setupController(controller, model, transition) {
     super.setupController(...arguments);
 
     const parentController = this.controllerFor("adminCustomizeThemes");
 
+    const fromNewConfigPage = [
+      "adminConfig.customize.themes",
+      "adminConfig.customize.components",
+    ].includes(transition?.from?.name);
+
     parentController.setProperties({
       editingTheme: false,
       currentTab: model.get("component") ? COMPONENTS : THEMES,
+      fromNewConfigPage,
     });
 
     controller.setProperties({
@@ -42,6 +48,7 @@ export default class AdminCustomizeThemesShowRoute extends Route {
       editingName: false,
       editingThemeSetting: false,
       userLocale: parentController.get("model.extras.locale"),
+      fromNewConfigPage,
     });
 
     this.handleHighlight(model);

app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs

@@ -1,25 +1,32 @@
 {{#if this.editingThemeSetting}}
   {{outlet}}
 {{else}}
-  <div class="back-to-themes-and-components">
+  {{#if this.fromNewConfigPage}}
-    <LinkTo
+    <div class="back-to-themes-and-components">
-      @route={{if
+      <LinkTo
-        this.model.component
+        @route={{if
-        "adminConfig.customize.components"
-        "adminConfig.customize.themes"
-      }}
-    >
-      {{dIcon "angle-left"}}
-      {{i18n
-        (if
           this.model.component
-          "admin.config_areas.themes_and_components.components.back"
+          "adminConfig.customize.components"
-          "admin.config_areas.themes_and_components.themes.back"
+          "adminConfig.customize.themes"
-        )
+        }}
-      }}
+      >
-    </LinkTo>
+        {{dIcon "angle-left"}}
-  </div>
+        {{i18n
-  <div class="show-current-style">
+          (if
+            this.model.component
+            "admin.config_areas.themes_and_components.components.back"
+            "admin.config_areas.themes_and_components.themes.back"
+          )
+        }}
+      </LinkTo>
+    </div>
+  {{/if}}
+  <div
+    class={{concat-class
+      "show-current-style"
+      (unless this.fromNewConfigPage "legacy")
+    }}
+  >
     <span>
       <PluginOutlet
         @name="admin-customize-themes-show-top"

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

@@ -1,3 +1,44 @@
+{{#unless this.fromNewConfigPage}}
+  {{#if (eq this.currentTab "themes")}}
+    <DPageHeader
+      @titleLabel={{i18n "admin.config.themes.title"}}
+      @descriptionLabel={{i18n "admin.config.themes.header_description"}}
+      @learnMoreUrl="https://meta.discourse.org/t/91966"
+      @hideTabs={{true}}
+    >
+      <:breadcrumbs>
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem
+          @path="/admin/customize/themes"
+          @label={{i18n "admin.config.themes.title"}}
+        />
+      </:breadcrumbs>
+    </DPageHeader>
+  {{else}}
+    <DPageHeader
+      @titleLabel={{i18n "admin.config.components.title"}}
+      @descriptionLabel={{i18n "admin.config.components.header_description"}}
+      @hideTabs={{true}}
+    >
+      <:breadcrumbs>
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem
+          @path="/admin/customize/components"
+          @label={{i18n "admin.config.components.title"}}
+        />
+      </:breadcrumbs>
+    </DPageHeader>
+  {{/if}}
+{{/unless}}
+
 <PluginOutlet @name="admin-customize-themes">
+  {{#unless (or this.editingTheme this.fromNewConfigPage)}}
+    <ThemesList
+      @themes={{this.fullThemes}}
+      @components={{this.childThemes}}
+      @currentTab={{this.currentTab}}
+      @installModal={{route-action "installModal"}}
+    />
+  {{/unless}}
   {{outlet}}
 </PluginOutlet>

app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js

@@ -241,9 +241,9 @@ export const ADMIN_NAV_MAP = [
       },
       {
         name: "admin_themes_and_components",
-        route: "adminConfig.customize.themes",
+        route: "adminCustomizeThemes",
-        currentWhen:
+        routeModels: ["themes"],
-          "adminConfig.customize.themes adminConfig.customize.components",
+        currentWhen: "adminCustomizeThemes",
         label: "admin.config.themes_and_components.title",
         description: "admin.config.themes_and_components.header_description",
         icon: "paintbrush",

app/assets/stylesheets/admin/customize.scss

@@ -1203,9 +1203,12 @@
 
 .desktop-view .admin-customize {
   .show-current-style {
-    padding-left: 0;
     width: 68%;
 
+    &.legacy {
+      padding-left: 2%;
+    }
+
     .title {
       input {
         width: 80%;

spec/system/admin_customize_themes_spec.rb

@@ -144,8 +144,10 @@ describe "Admin Customize Themes", type: :system do
     end
   end
 
+  # TODO(osama) unskip this test when the "Themes and components" link is
+  # changed to the new config customize page
   context "when visting a theme's page" do
-    it "has a link to the themes page" do
+    xit "has a link to the themes page" do
       visit("/admin/customize/themes/#{theme.id}")
       expect(admin_customize_themes_page).to have_back_button_to_themes_page
     end
@@ -154,7 +156,7 @@ describe "Admin Customize Themes", type: :system do
   context "when visting a component's page" do
     fab!(:component) { Fabricate(:theme, component: true, name: "Cool component 493") }
 
-    it "has a link to the components page" do
+    xit "has a link to the components page" do
       visit("/admin/customize/themes/#{component.id}")
       expect(admin_customize_themes_page).to have_back_button_to_components_page
     end

spec/system/admin_sidebar_navigation_spec.rb

@@ -302,13 +302,15 @@ describe "Admin | Sidebar Navigation", type: :system do
   end
 
   it "highlights the 'Themes and components' link when the themes page is visited" do
-    visit("/admin/config/customize/themes")
+    visit("/admin/customize/themes")
     expect(page).to have_css(
       '.sidebar-section-link-wrapper[data-list-item-name="admin_themes_and_components"] a.active',
     )
   end
 
-  it "highlights the 'Themes and components' link when the components page is visited" do
+  # TODO(osama) unskip this test when the "Themes and components" link is
+  # changed to the new config customize page
+  xit "highlights the 'Themes and components' link when the components page is visited" do
     visit("/admin/config/customize/components")
     expect(page).to have_css(
       '.sidebar-section-link-wrapper[data-list-item-name="admin_themes_and_components"] a.active',