FEATURE: Support collapsing array sections in JSON Schema field types (#20118)

This allows users to collapse array-type data tables in JSON Schema
fields. Note that this data type is currently only used in themes and
plugins.

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

@@ -34,7 +34,7 @@ export default Component.extend({
           enable_array_copy: true,
           disable_edit_json: true,
           disable_properties: true,
-          disable_collapse: true,
+          disable_collapse: false,
           remove_button_labels: true,
           show_errors: "never",
           startval: this.model.value ? JSON.parse(this.model.value) : null,
@@ -77,6 +77,8 @@ class DiscourseJsonSchemaEditorIconlib {
       moveup: "arrow-up",
       movedown: "arrow-down",
       copy: "copy",
+      collapse: "chevron-down",
+      expand: "chevron-up",
     };
   }
 

app/assets/stylesheets/common/admin/json_schema_editor.scss

@@ -98,10 +98,25 @@
   .row div[data-schematype="array"] {
     padding: 0.5em;
     background-color: var(--primary-very-low);
+
+    > .card-title {
+      width: 100%;
+      border-bottom: 1px solid var(--primary-low);
+      > .json-editor-btn-collapse {
+        float: right;
+      }
+    }
   }
 
   .desktop-view & .modal-inner-container {
     --modal-max-width: 75vw;
     min-width: 55vw;
   }
+
+  .card-title.level-1,
+  .card-title.je-object__title {
+    > .json-editor-btn-collapse {
+      display: none;
+    }
+  }
 }

app/assets/stylesheets/common/base/modal.scss

@@ -760,3 +760,14 @@
     top: 21px;
   }
 }
+
+.json-editor-btn-delete {
+  @extend .btn-danger;
+  @extend .no-text;
+}
+
+.json-editor-btn-collapse {
+  @extend .no-text;
+  @extend .btn-flat;
+  @extend .btn-small;
+}

app/assets/stylesheets/desktop/modal.scss

@@ -123,8 +123,3 @@
     max-width: 100vw; // prevent overflow if user font-size is enormous
   }
 }
-
-.json-editor-btn-delete {
-  @extend .btn-danger !optional;
-  @extend .no-text !optional;
-}