FIX: hidden improvements

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

@@ -6,7 +6,7 @@ import icon from "discourse-common/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 export default class AdminConfigAreaCard extends Component {
-  @tracked collapsed = false;
+  @tracked collapsed = this.args.collapsed;
 
   get computedHeading() {
     if (this.args.heading) {

app/assets/javascripts/admin/addon/controllers/admin-embedding-index.js

@@ -10,11 +10,6 @@ export default class AdminEmbeddingIndexController extends Controller {
   @controller adminEmbedding;
   @alias("adminEmbedding.embedding") embedding;
 
-  get showEmbeddingCode() {
-    const hosts = this.get("embedding.embeddable_hosts");
-    return hosts.length > 0 && !this.site.isMobileDevice;
-  }
-
   @discourseComputed("embedding.base_url")
   embeddingCode(baseUrl) {
     const html = `<div id='discourse-comments'></div>

app/assets/javascripts/admin/addon/templates/embedding-index.hbs

@@ -1,4 +1,18 @@
 {{#if this.embedding.embeddable_hosts}}
+
+  <AdminConfigAreaCard
+    @heading="admin.embedding.configuration_snippet"
+    @collapsable={{true}}
+    @collapsed={{true}}
+  >
+    <:content>
+      <div class="admin-embedding-index__code">
+        {{html-safe (i18n "admin.embedding.sample")}}
+        <HighlightedCode @code={{this.embeddingCode}} @lang="html" />
+      </div>
+    </:content>
+  </AdminConfigAreaCard>
+
   <table class="d-admin-table">
     <thead>
       <th>{{i18n "admin.embedding.host"}}</th>
@@ -7,7 +21,7 @@
       <th>{{i18n "admin.embedding.tags"}}</th>
       {{#if this.embedding.embed_by_username}}
         <th>{{i18n
-            "admin.embedding.post_author"
+            "admin.embedding.post_author_with_default"
             author=this.embedding.embed_by_username
           }}</th>
       {{else}}
@@ -32,14 +46,4 @@
 <PluginOutlet
   @name="after-embeddable-hosts-table"
   @outletArgs={{hash embedding=this.embedding}}
-/>
-
-{{#if this.showEmbeddingCode}}
-  <div class="admin-embedding-index__code">
-    <details>
-      <summary>{{i18n "admin.embedding.configuration_snippet"}}</summary>
-      {{html-safe (i18n "admin.embedding.sample")}}
-      <HighlightedCode @code={{this.embeddingCode}} @lang="html" />
-    </details>
-  </div>
-{{/if}}
+/>

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

@@ -36,6 +36,20 @@ module("Integration | Component | AdminConfigAreaCard", function (hooks) {
     assert.dom(".admin-config-area-card__content").exists();
   });
 
+  test("renders admin config area card with toggle button and collapsed by default", async function (assert) {
+    await render(<template>
+      <AdminConfigAreaCard
+        @translatedHeading="test heading"
+        @collapsable={{true}}
+        @collapsed={{true}}
+      ><:content>test</:content></AdminConfigAreaCard>
+    </template>);
+
+    assert.dom(".admin-config-area-card__title").exists();
+    assert.dom(".admin-config-area-card__toggle-button").exists();
+    assert.dom(".admin-config-area-card__content").doesNotExist();
+  });
+
   test("renders admin config area card with header action", async function (assert) {
     await render(<template>
       <AdminConfigAreaCard

config/locales/client.en.yml

@@ -7312,13 +7312,14 @@ en:
           <p>Replace <b>DISCOURSE_USERNAME</b> with the Discourse username of the author that should create the topic. Discourse will automatically lookup the user by the <code>content</code> attribute of the <code>&lt;meta&gt;</code> tags with <code>name</code> attribute set to <code>discourse-username</code> or <code>author</code>. The <code>discourseUserName</code> parameter has been deprecated and will be removed in Discourse 3.2.</p>
         title: "Embedding"
         description: "Discourse has the ability to embed the comments from a topic in a remote site using a Javascript API that creates an IFRAME"
-        host: "Allowed Hosts"
-        allowed_paths: "Path Allowlist"
+        host: "Allowed hosts"
+        allowed_paths: "Path allowlist"
         edit: "Edit"
-        category: "Post to Category"
-        tags: "Topic Tags"
-        post_author: "Post Author - Defaults to %{author}"
-        add_host: "Add Host"
+        category: "Post to category"
+        tags: "Topic tags"
+        post_author: "Post author"
+        post_author_with_default: "Post author (defaults to %{author})"
+        add_host: "Add host"
         posts_and_topics: "Posts and Topics configuration"
         crawlers: "Crawlers configuration"
         crawlers_description: "When Discourse creates topics for your posts, if no RSS/ATOM feed is present it will attempt to parse your content out of your HTML. Sometimes it can be challenging to extract your content, so we provide the ability to specify CSS rules to make extraction easier."