UX: Applying more admin UI guidelines

admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-ai-tools/new.hbs

@@ -1,5 +1,7 @@
-<AiToolEditor
-  @tools={{this.allTools}}
-  @model={{this.model}}
-  @presets={{this.presets}}
-/>
+<section class="ai-persona-tool-editor__current admin-detail pull-left">
+  <AiToolEditor
+    @tools={{this.allTools}}
+    @model={{this.model}}
+    @presets={{this.presets}}
+  />
+</section>

admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-ai-tools/show.hbs

@@ -1,5 +1,7 @@
-<AiToolEditor
-  @tools={{this.allTools}}
-  @model={{this.model}}
-  @presets={{this.presets}}
-/>
+<section class="ai-persona-tool-editor__current admin-detail pull-left">
+  <AiToolEditor
+    @tools={{this.allTools}}
+    @model={{this.model}}
+    @presets={{this.presets}}
+  />
+</section>

assets/javascripts/discourse/components/ai-llms-list-editor.gjs

@@ -4,7 +4,6 @@ import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
 import AdminPageSubheader from "admin/components/admin-page-subheader";
@@ -124,8 +123,10 @@ export default class AiLlmsListEditor extends Component {
           <section class="ai-llms-list-editor__configured">
             <AdminPageSubheader
               @titleLabel="discourse_ai.llms.configured.title"
+              @descriptionLabel="discourse_ai.llms.preconfigured.description"
+              @learnMoreUrl="https://meta.discourse.org/t/discourse-ai-large-language-model-llm-settings-page/319903"
             />
-            <table>
+            <table class="d-admin-table">
               <thead>
                 <tr>
                   <th>{{i18n "discourse_ai.llms.display_name"}}</th>
@@ -135,8 +136,11 @@ export default class AiLlmsListEditor extends Component {
               </thead>
               <tbody>
                 {{#each @llms as |llm|}}
-                  <tr data-llm-id={{llm.name}} class="ai-llm-list__row">
-                    <td class="column-name">
+                  <tr
+                    data-llm-id={{llm.name}}
+                    class="ai-llm-list__row d-admin-row__content"
+                  >
+                    <td class="d-admin-row__overview">
                       <h3>{{llm.display_name}}</h3>
                       <p>
                         {{this.modelDescription llm}}
@@ -149,18 +153,20 @@ export default class AiLlmsListEditor extends Component {
                         </ul>
                       {{/if}}
                     </td>
-                    <td class="column-provider">
+                    <td class="d-admin-row__detail">
+                      <div class="d-admin-row__mobile-label">
+                        {{i18n "discourse_ai.llms.provider"}}
+                      </div>
                       {{i18n
                         (concat "discourse_ai.llms.providers." llm.provider)
                       }}
                     </td>
-                    <td class="column-edit">
+                    <td class="d-admin-row__controls">
                       <LinkTo
                         @route="adminPlugins.show.discourse-ai-llms.show"
-                        class="btn btn-default"
+                        class="btn btn-default btn-small ai-llm-list__edit-button"
                         @model={{llm.id}}
                       >
-                        {{icon "wrench"}}
                         <div class="d-button-label">
                           {{i18n "discourse_ai.llms.edit"}}
                         </div>
@@ -173,7 +179,17 @@ export default class AiLlmsListEditor extends Component {
           </section>
         {{/if}}
         <section class="ai-llms-list-editor__templates">
-          <AdminPageSubheader @titleLabel={{this.preconfiguredTitle}} />
+          <AdminPageSubheader
+            @titleLabel={{this.preconfiguredTitle}}
+            @descriptionLabel={{unless
+              this.hasLlmElements
+              "discourse_ai.llms.preconfigured.description"
+            }}
+            @learnMoreUrl={{unless
+              this.hasLlmElements
+              "https://meta.discourse.org/t/discourse-ai-large-language-model-llm-settings-page/319903"
+            }}
+          />
 
           <AdminSectionLandingWrapper
             class="ai-llms-list-editor__templates-list"

assets/javascripts/discourse/components/ai-persona-list-editor.gjs

@@ -1,5 +1,4 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
 import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
@@ -9,26 +8,13 @@ import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { cook } from "discourse/lib/text";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
-import I18n from "discourse-i18n";
+import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 import AiPersonaEditor from "./ai-persona-editor";
 
 export default class AiPersonaListEditor extends Component {
   @service adminPluginNavManager;
-  @tracked _noPersonaText = null;
-
-  get noPersonaText() {
-    if (this._noPersonaText === null) {
-      const raw = I18n.t("discourse_ai.ai_persona.no_persona_selected");
-      cook(raw).then((result) => {
-        this._noPersonaText = result;
-      });
-    }
-
-    return this._noPersonaText;
-  }
 
   @action
   async toggleEnabled(persona) {
@@ -53,74 +39,76 @@ export default class AiPersonaListEditor extends Component {
       {{#if @currentPersona}}
         <AiPersonaEditor @model={{@currentPersona}} @personas={{@personas}} />
       {{else}}
-        <div class="ai-persona-list-editor__header">
-          <h3>{{i18n "discourse_ai.ai_persona.short_title"}}</h3>
-          {{#unless @currentPersona.isNew}}
-            <LinkTo
+        <AdminPageSubheader
+          @titleLabel="discourse_ai.ai_persona.short_title"
+          @descriptionLabel="discourse_ai.ai_persona.persona_description"
+          @learnMoreUrl="https://meta.discourse.org/t/ai-bot-personas/306099"
+        >
+          <:actions as |actions|>
+            <actions.Primary
+              @label="discourse_ai.ai_persona.new"
               @route="adminPlugins.show.discourse-ai-personas.new"
-              class="btn btn-small btn-primary"
-            >
-              {{icon "plus"}}
-              <span>{{I18n.t "discourse_ai.ai_persona.new"}}</span>
-            </LinkTo>
-          {{/unless}}
-        </div>
+              @icon="plus"
+              class="ai-persona-list-editor__new-button"
+            />
+          </:actions>
+        </AdminPageSubheader>
 
-        <div class="ai-persona-list-editor__empty">
-          <details class="details__boxed">
-            <summary>{{i18n
-                "discourse_ai.ai_persona.what_are_personas"
-              }}</summary>
-            {{this.noPersonaText}}
-          </details>
-        </div>
-
-        <table class="content-list ai-persona-list-editor">
-          <thead>
-            <tr>
-              <th>{{i18n "discourse_ai.ai_persona.name"}}</th>
-              <th>{{i18n "discourse_ai.ai_persona.enabled"}}</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each @personas as |persona|}}
-              <tr
-                data-persona-id={{persona.id}}
-                class={{concatClass
-                  "ai-persona-list__row"
-                  (if persona.priority "priority")
-                }}
-              >
-                <td>
-                  <div class="ai-persona-list__name-with-description">
-                    <div class="ai-persona-list__name">
-                      <strong>
-                        {{persona.name}}
-                      </strong>
-                    </div>
-                    <div class="ai-persona-list__description">
-                      {{persona.description}}
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <DToggleSwitch
-                    @state={{persona.enabled}}
-                    {{on "click" (fn this.toggleEnabled persona)}}
-                  />
-                </td>
-                <td>
-                  <LinkTo
-                    @route="adminPlugins.show.discourse-ai-personas.show"
-                    @model={{persona}}
-                    class="btn btn-text btn-small"
-                  >{{i18n "discourse_ai.ai_persona.edit"}} </LinkTo>
-                </td>
+        {{#if @personas}}
+          <table class="content-list ai-persona-list-editor d-admin-table">
+            <thead>
+              <tr>
+                <th>{{i18n "discourse_ai.ai_persona.name"}}</th>
+                <th>{{i18n "discourse_ai.ai_persona.enabled"}}</th>
+                <th></th>
               </tr>
-            {{/each}}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {{#each @personas as |persona|}}
+                <tr
+                  data-persona-id={{persona.id}}
+                  class={{concatClass
+                    "ai-persona-list__row d-admin-row__content"
+                    (if persona.priority "priority")
+                  }}
+                >
+                  <td class="d-admin-row__overview">
+                    <div class="ai-persona-list__name-with-description">
+                      <div class="ai-persona-list__name">
+                        <strong>
+                          {{persona.name}}
+                        </strong>
+                      </div>
+                      <div class="ai-persona-list__description">
+                        {{persona.description}}
+                      </div>
+                    </div>
+                  </td>
+                  <td class="d-admin-row__detail">
+                    <DToggleSwitch
+                      @state={{persona.enabled}}
+                      {{on "click" (fn this.toggleEnabled persona)}}
+                    />
+                  </td>
+                  <td class="d-admin-row__controls">
+                    <LinkTo
+                      @route="adminPlugins.show.discourse-ai-personas.show"
+                      @model={{persona}}
+                      class="btn btn-text btn-small"
+                    >{{i18n "discourse_ai.ai_persona.edit"}} </LinkTo>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        {{else}}
+          <AdminConfigAreaEmptyList
+            @ctaLabel="discourse_ai.ai_persona.new"
+            @ctaRoute="adminPlugins.show.discourse-ai-personas.new"
+            @ctaClass="ai-persona-list-editor__empty-new-button"
+            @emptyLabel="discourse_ai.ai_persona.no_personas"
+          />
+        {{/if}}
       {{/if}}
     </section>
   </template>

assets/javascripts/discourse/components/ai-tool-list-editor.gjs

@@ -2,9 +2,10 @@ import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
+import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 
 export default class AiToolListEditor extends Component {
   @service adminPluginNavManager;
@@ -15,44 +16,64 @@ export default class AiToolListEditor extends Component {
       @label={{i18n "discourse_ai.tools.short_title"}}
     />
     <section class="ai-tool-list-editor__current admin-detail pull-left">
-      <div class="ai-tool-list-editor__header">
-        <h3>{{I18n.t "discourse_ai.tools.short_title"}}</h3>
-        <LinkTo
-          @route="adminPlugins.show.discourse-ai-tools.new"
-          class="btn btn-small btn-primary ai-tool-list-editor__new-button"
-        >
-          {{icon "plus"}}
-          <span>{{I18n.t "discourse_ai.tools.new"}}</span>
-        </LinkTo>
-      </div>
+      <AdminPageSubheader
+        @titleLabel="discourse_ai.tools.short_title"
+        @learnMoreUrl="https://meta.discourse.org/t/ai-bot-custom-tools/314103"
+        @descriptionLabel="discourse_ai.tools.subheader_description"
+      >
+        <:actions as |actions|>
+          <actions.Primary
+            @label="discourse_ai.tools.new"
+            @route="adminPlugins.show.discourse-ai-tools.new"
+            @icon="plus"
+            class="ai-tool-list-editor__new-button"
+          />
+        </:actions>
+      </AdminPageSubheader>
 
-      <table class="content-list ai-tool-list-editor">
-        <tbody>
-          {{#each @tools as |tool|}}
-            <tr data-tool-id={{tool.id}} class="ai-tool-list__row">
-              <td>
-                <div class="ai-tool-list__name-with-description">
-                  <div class="ai-tool-list__name">
-                    <strong>
-                      {{tool.name}}
-                    </strong>
+      {{#if @tools}}
+        <table class="d-admin-table ai-tool-list-editor">
+          <thead>
+            <th>{{i18n "discourse_ai.tools.name"}}</th>
+            <th></th>
+          </thead>
+          <tbody>
+            {{#each @tools as |tool|}}
+              <tr
+                data-tool-id={{tool.id}}
+                class="ai-tool-list__row d-admin-row__content"
+              >
+                <td class="d-admin-row__overview">
+                  <div class="ai-tool-list__name-with-description">
+                    <div class="ai-tool-list__name">
+                      <strong>
+                        {{tool.name}}
+                      </strong>
+                    </div>
+                    <div class="ai-tool-list__description">
+                      {{tool.description}}
+                    </div>
                   </div>
-                  <div class="ai-tool-list__description">
-                    {{tool.description}}
-                  </div>
-                </div>
-              </td>
-              <td>
-                <LinkTo
-                  @route="adminPlugins.show.discourse-ai-tools.show"
-                  @model={{tool}}
-                  class="btn btn-text btn-small"
-                >{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
-              </td>
-            </tr>
-          {{/each}}
-        </tbody>
-      </table>
+                </td>
+                <td class="d-admin-row__controls">
+                  <LinkTo
+                    @route="adminPlugins.show.discourse-ai-tools.show"
+                    @model={{tool}}
+                    class="btn btn-text btn-small"
+                  >{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      {{else}}
+        <AdminConfigAreaEmptyList
+          @ctaLabel="discourse_ai.tools.new"
+          @ctaRoute="adminPlugins.show.discourse-ai-tools.new"
+          @ctaClass="ai-tool-list-editor__empty-new-button"
+          @emptyLabel="discourse_ai.tools.no_tools"
+        />
+      {{/if}}
     </section>
   </template>
 }