DEV: Open theme settings objects editor from admin customize theme page (#26006)

Why this change?

The `/admin/customize/themes/:id/schema/name` route is a work in
progress but we want to be able to start navigating to it from the
`/admin/customize/themes/:id` route.

What does this change do?

1. Move `adminCustomizeThemes.schema` to a child route of
   `adminCustomizeThemes.show`. This is because we need the model
   from the parent route and if it isn't a child route we end up
   having to load the theme model again from the server.

1. Add the `objects_schema` attribute to `ThemeSettingsSerializer`

1. Refactor `SiteSettingComponent` to be able to render a button
   so that we don't have to hardcode the button rendering into the
   `SiteSettings::String` component

app/assets/javascripts/admin/addon/components/site-setting.hbs

@@ -25,16 +25,25 @@
 </div>
 
 <div class="setting-value">
-  {{component
-    this.componentName
-    setting=this.setting
-    value=this.buffered.value
-    validationMessage=this.validationMessage
-    preview=this.preview
-    isSecret=this.isSecret
-    allowAny=this.allowAny
-    changeValueCallback=this.changeValueCallback
-  }}
+  {{#if this.settingEditButton}}
+    <DButton
+      @action={{this.settingEditButton.action}}
+      @icon={{this.settingEditButton.icon}}
+      @label={{this.settingEditButton.label}}
+      class="setting-value-edit-button"
+    />
+  {{else}}
+    {{component
+      this.componentName
+      setting=this.setting
+      value=this.buffered.value
+      validationMessage=this.validationMessage
+      preview=this.preview
+      isSecret=this.isSecret
+      allowAny=this.allowAny
+      changeValueCallback=this.changeValueCallback
+    }}
+  {{/if}}
 </div>
 
 {{#if this.dirty}}

app/assets/javascripts/admin/addon/components/site-settings/string.hbs

@@ -1,11 +1,5 @@
 {{#if this.setting.textarea}}
   <Textarea @value={{this.value}} class="input-setting-textarea" />
-{{else if this.setting.json_schema}}
-  <DButton
-    @action={{fn (mut this.showJsonEditorModal) true}}
-    @icon="pencil-alt"
-    @label="admin.site_settings.json_schema.edit"
-  />
 {{else if this.isSecret}}
   <Input @type="password" @value={{this.value}} class="input-setting-string" />
 {{else}}
@@ -13,14 +7,4 @@
 {{/if}}
 
 <SettingValidationMessage @message={{this.validationMessage}} />
-<div class="desc">{{html-safe this.setting.description}}</div>
-
-{{#if this.showJsonEditorModal}}
-  <Modal::JsonSchemaEditor
-    @updateValue={{fn (mut this.value)}}
-    @value={{this.value}}
-    @settingName={{this.setting.setting}}
-    @jsonSchema={{this.setting.json_schema}}
-    @closeModal={{fn (mut this.showJsonEditorModal) false}}
-  />
-{{/if}}
+<div class="desc">{{html-safe this.setting.description}}</div>

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

@@ -1,98 +0,0 @@
-import Controller from "@ember/controller";
-
-export default class AdminCustomizeThemesSchemaController extends Controller {
-  data = [
-    {
-      name: "item 1",
-      width: 143,
-      is_valid: true,
-      enum_prop: 11,
-      children: [
-        {
-          name: "child 1-1",
-          grandchildren: [
-            {
-              name: "grandchild 1-1-1",
-            },
-          ],
-        },
-        {
-          name: "child 1-2",
-          grandchildren: [
-            {
-              name: "grandchild 1-2-1",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: "item 2",
-      width: 803,
-      is_valid: false,
-      enum_prop: 22,
-      children: [
-        {
-          name: "child 2-1",
-          grandchildren: [
-            {
-              name: "grandchild 2-1-1",
-            },
-          ],
-        },
-        {
-          name: "child 2-2",
-          grandchildren: [
-            {
-              name: "grandchild 2-2-1",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  schema = {
-    name: "item",
-    identifier: "name",
-    properties: {
-      name: {
-        type: "string",
-      },
-      width: {
-        type: "integer",
-      },
-      is_valid: {
-        type: "boolean",
-      },
-      enum_prop: {
-        type: "enum",
-        choices: [11, 22],
-      },
-      children: {
-        type: "objects",
-        schema: {
-          name: "child",
-          identifier: "name",
-          properties: {
-            name: {
-              type: "string",
-            },
-            grandchildren: {
-              type: "objects",
-              schema: {
-                name: "grandchild",
-                identifier: "name",
-                properties: {
-                  name: {
-                    type: "string",
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-}

app/assets/javascripts/admin/addon/mixins/setting-component.js

@@ -5,6 +5,7 @@ import Mixin from "@ember/object/mixin";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { isNone } from "@ember/utils";
+import JsonSchemaEditorModal from "discourse/components/modal/json-schema-editor";
 import { ajax } from "discourse/lib/ajax";
 import { fmt, propertyNotEqual } from "discourse/lib/computed";
 import { splitString } from "discourse/lib/utilities";
@@ -78,6 +79,7 @@ const DEFAULT_USER_PREFERENCES = [
 
 export default Mixin.create({
   modal: service(),
+  router: service(),
   site: service(),
   attributeBindings: ["setting.setting:data-setting"],
   classNameBindings: [":row", ":setting", "overridden", "typeClass"],
@@ -168,6 +170,39 @@ export default Mixin.create({
     );
   },
 
+  @discourseComputed("setting")
+  settingEditButton(setting) {
+    if (setting.json_schema) {
+      return {
+        action: () => {
+          this.modal.show(JsonSchemaEditorModal, {
+            model: {
+              updateValue: (value) => {
+                this.buffered.set("value", value);
+              },
+              value: this.buffered.get("value"),
+              settingName: setting.setting,
+              jsonSchema: setting.json_schema,
+            },
+          });
+        },
+        label: "admin.site_settings.json_schema.edit",
+        icon: "pencil-alt",
+      };
+    } else if (setting.objects_schema) {
+      return {
+        action: () => {
+          this.router.transitionTo(
+            "adminCustomizeThemes.show.schema",
+            setting.setting
+          );
+        },
+        label: "admin.customize.theme.edit_objects_theme_setting",
+        icon: "pencil-alt",
+      };
+    }
+  },
+
   @action
   async update() {
     const key = this.buffered.get("setting");

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

@@ -1,8 +0,0 @@
-import Route from "@ember/routing/route";
-
-export default class AdminCustomizeThemesSchemaRoute extends Route {
-  setupController() {
-    super.setupController(...arguments);
-    this.controllerFor("adminCustomizeThemes").set("editingTheme", true);
-  }
-}

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

@@ -0,0 +1,32 @@
+import Route from "@ember/routing/route";
+
+export default class AdminCustomizeThemesShowSchemaRoute extends Route {
+  model(params) {
+    const theme = this.modelFor("adminCustomizeThemesShow");
+    const setting = theme.settings.findBy("setting", params.setting_name);
+
+    return {
+      data: setting.value,
+      schema: setting.objects_schema,
+    };
+  }
+
+  setupController() {
+    super.setupController(...arguments);
+    this.controllerFor("adminCustomizeThemes").set("editingTheme", true);
+
+    this.controllerFor("adminCustomizeThemes.show").set(
+      "editingThemeSetting",
+      true
+    );
+  }
+
+  deactivate() {
+    this.controllerFor("adminCustomizeThemes").set("editingTheme", false);
+
+    this.controllerFor("adminCustomizeThemes.show").set(
+      "editingThemeSetting",
+      false
+    );
+  }
+}

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

@@ -40,6 +40,7 @@ export default class AdminCustomizeThemesShowRoute extends Route {
       colorSchemeId: model.get("color_scheme_id"),
       colorSchemes: parentController.get("model.extras.color_schemes"),
       editingName: false,
+      editingThemeSetting: false,
     });
 
     this.handleHighlight(model);

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

@@ -57,9 +57,10 @@ export default function () {
           "adminCustomizeThemes",
           { path: "themes", resetNamespace: true },
           function () {
-            this.route("show", { path: "/:theme_id" });
+            this.route("show", { path: "/:theme_id" }, function () {
+              this.route("schema", { path: "schema/:setting_name" });
+            });
             this.route("edit", { path: "/:theme_id/:target/:field_name/edit" });
-            this.route("schema", { path: "/:theme_id/schema/:setting_name" });
           }
         );
 

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

@@ -1 +0,0 @@
-<SchemaThemeSetting::Editor @schema={{this.schema}} @data={{this.data}} />

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

@@ -0,0 +1,4 @@
+<SchemaThemeSetting::Editor
+  @schema={{this.model.schema}}
+  @data={{this.model.data}}
+/>

app/assets/javascripts/discourse/app/components/modal/json-schema-editor.hbs

@@ -4,7 +4,7 @@
   @closeModal={{@closeModal}}
   @title={{i18n
     "admin.site_settings.json_schema.modal_title"
-    name=@settingName
+    name=@model.settingName
   }}
   class="json-schema-editor-modal"
 >

app/assets/javascripts/discourse/app/components/modal/json-schema-editor.js

@@ -8,12 +8,12 @@ import { afterRender } from "discourse-common/utils/decorators";
 
 export default class JsonSchemaEditorModal extends Component {
   @tracked editor = null;
-  @tracked value = this.args.value;
+  @tracked value = this.args.model.value;
   @tracked flash;
   @tracked flashType;
 
   get settingName() {
-    return this.args.settingName.replace(/\_/g, " ");
+    return this.args.model.settingName.replace(/\_/g, " ");
   }
 
   @action
@@ -34,7 +34,7 @@ export default class JsonSchemaEditorModal extends Component {
 
     if (!errors.length) {
       this.value = JSON.stringify(this.editor.getValue());
-      this.args.updateValue(this.value);
+      this.args.model.updateValue(this.value);
       this.args.closeModal();
     } else {
       this.flash = errors.mapBy("message").join("\n");
@@ -53,7 +53,7 @@ export default class JsonSchemaEditorModal extends Component {
     JSONEditor.defaults.options.iconlib = "discourseIcons";
 
     this.editor = new JSONEditor(editor, {
-      schema: this.args.jsonSchema,
+      schema: this.args.model.jsonSchema,
       disable_array_delete_all_rows: true,
       disable_array_delete_last_row: true,
       disable_array_reorder: false,