UX: the ability to collapse AdminConfigAreaCard (#30310)

Additional `collapsable` argument which makes area cards collapsible.

app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs

@@ -1,5 +1,8 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 export default class AdminConfigAreaCard extends Component {
@@ -27,6 +30,15 @@ export default class AdminConfigAreaCard extends Component {
     return this.args.description || this.args.translatedDescription;
   }
 
+  get headerCaretIcon() {
+    return this.collapsed ? "angle-right" : "angle-down";
+  }
+
+  @action
+  toggleCardDisplay() {
+    this.collapsed = !this.collapsed;
+  }
+
   <template>
     <section class="admin-config-area-card" ...attributes>
       <div class="admin-config-area-card__header-wrapper">
@@ -44,15 +56,27 @@ export default class AdminConfigAreaCard extends Component {
             {{yield to="headerAction"}}
           </div>
         {{/if}}
-      </div>
-      <div class="admin-config-area-card__content">
-        {{#if this.hasDescription}}
-          <p class="admin-config-area-card__description">
-            {{this.computedDescription}}
-          </p>
+
+        {{#if @collapsable}}
+          <DButton
+            @title="sidebar.toggle_section"
+            @action={{this.toggleCardDisplay}}
+            class="admin-config-area-card__toggle-button btn-transparent"
+          >
+            {{icon this.headerCaretIcon}}
+          </DButton>
         {{/if}}
-        {{yield to="content"}}
       </div>
+      {{#unless this.collapsed}}
+        <div class="admin-config-area-card__content">
+          {{#if this.hasDescription}}
+            <p class="admin-config-area-card__description">
+              {{this.computedDescription}}
+            </p>
+          {{/if}}
+          {{yield to="content"}}
+        </div>
+      {{/unless}}
     </section>
   </template>
 }

app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs

@@ -53,6 +53,7 @@ export default class AdminConfigAreasAbout extends Component {
       <div class="admin-config-area__primary-content">
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.general_settings"
+          @collapsable={{true}}
           class="admin-config-area-about__general-settings-section"
         >
           <:content>
@@ -65,6 +66,7 @@ export default class AdminConfigAreasAbout extends Component {
         </AdminConfigAreaCard>
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.contact_information"
+          @collapsable={{true}}
           class="admin-config-area-about__contact-information-section"
         >
           <:content>
@@ -78,6 +80,7 @@ export default class AdminConfigAreasAbout extends Component {
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.your_organization"
           @description="admin.config_areas.about.your_organization_description"
+          @collapsable={{true}}
           class="admin-config-area-about__your-organization-section"
         >
           <:content>

app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-test.gjs

@@ -0,0 +1,52 @@
+import { click, render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
+
+module("Integration | Component | AdminConfigAreaCard", function (hooks) {
+  hooks.beforeEach(function () {});
+  setupRenderingTest(hooks);
+
+  test("renders admin config area card without toggle button", async function (assert) {
+    await render(<template>
+      <AdminConfigAreaCard @translatedHeading="test heading"><:content
+        >test</:content></AdminConfigAreaCard>
+    </template>);
+
+    assert.dom(".admin-config-area-card__title").exists();
+    assert.dom(".admin-config-area-card__content").exists();
+    assert.dom(".admin-config-area-card__toggle-button").doesNotExist();
+  });
+
+  test("renders admin config area card with toggle button", async function (assert) {
+    await render(<template>
+      <AdminConfigAreaCard
+        @translatedHeading="test heading"
+        @collapsable={{true}}
+      ><:content>test</:content></AdminConfigAreaCard>
+    </template>);
+
+    assert.dom(".admin-config-area-card__title").exists();
+    assert.dom(".admin-config-area-card__content").exists();
+    assert.dom(".admin-config-area-card__toggle-button").exists();
+
+    await click(".admin-config-area-card__toggle-button");
+    assert.dom(".admin-config-area-card__content").doesNotExist();
+
+    await click(".admin-config-area-card__toggle-button");
+    assert.dom(".admin-config-area-card__content").exists();
+  });
+
+  test("renders admin config area card with header action", async function (assert) {
+    await render(<template>
+      <AdminConfigAreaCard
+        @translatedHeading="test heading"
+        @collapsable={{true}}
+      >
+        <:headerAction><button>test</button></:headerAction>
+        <:content>test</:content></AdminConfigAreaCard>
+    </template>);
+
+    assert.dom(".admin-config-area-card__header-action button").exists();
+  });
+});

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

@@ -4,7 +4,7 @@
   }
 }
 .admin-config-area-card {
-  padding: 20px;
+  padding: 20px 5px 20px 20px;
   border: 1px solid var(--primary-low);
   border-radius: 2px;
   background-color: var(--secondary);
@@ -43,9 +43,12 @@
 
   &__header-wrapper {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     flex: 1;
-    margin-bottom: 0.5rem;
+  }
+  &__content {
+    margin-top: 0.5rem;
+    padding-right: 15px;
   }
 }