FEATURE: Add breadcrumbs to LLMs and Persona admin pages (#666)

Followup to https://github.com/discourse/discourse-ai/pull/656,
adding these back in with the new core component.

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

@@ -3,6 +3,8 @@ import { concat, fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
+import { inject as service } from "@ember/service";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import icon from "discourse-common/helpers/d-icon";
@@ -11,6 +13,8 @@ import I18n from "discourse-i18n";
 import AiLlmEditor from "./ai-llm-editor";
 
 export default class AiLlmsListEditor extends Component {
+  @service adminPluginNavManager;
+
   get hasLLMElements() {
     return this.args.llms.length !== 0;
   }
@@ -31,7 +35,12 @@ export default class AiLlmsListEditor extends Component {
   }
 
   <template>
+    <DBreadcrumbsItem
+      @path="/admin/plugins/{{this.adminPluginNavManager.currentPlugin.name}}/ai-llms"
+      @label={{i18n "discourse_ai.llms.short_title"}}
+    />
     <section class="ai-llms-list-editor admin-detail pull-left">
+
       {{#if @currentLlm}}
         <AiLlmEditor @model={{@currentLlm}} @llms={{@llms}} />
       {{else}}

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

@@ -4,6 +4,8 @@ import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
+import { inject as service } from "@ember/service";
+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";
@@ -14,6 +16,7 @@ import I18n from "discourse-i18n";
 import AiPersonaEditor from "./ai-persona-editor";
 
 export default class AiPersonaListEditor extends Component {
+  @service adminPluginNavManager;
   @tracked _noPersonaText = null;
 
   get noPersonaText() {
@@ -42,6 +45,10 @@ export default class AiPersonaListEditor extends Component {
   }
 
   <template>
+    <DBreadcrumbsItem
+      @path="/admin/plugins/{{this.adminPluginNavManager.currentPlugin.name}}/ai-personas"
+      @label={{i18n "discourse_ai.ai_persona.short_title"}}
+    />
     <section class="ai-persona-list-editor__current admin-detail pull-left">
       {{#if @currentPersona}}
         <AiPersonaEditor @model={{@currentPersona}} @personas={{@personas}} />

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

@@ -1,46 +1,58 @@
+import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
+import { inject as 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";
 
-<template>
+export default class AiToolListEditor extends Component {
-  <section class="ai-tool-list-editor__current admin-detail pull-left">
+  @service adminPluginNavManager;
-    <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>
 
-    <table class="content-list ai-tool-list-editor">
+  <template>
-      <tbody>
+    <DBreadcrumbsItem
-        {{#each @tools as |tool|}}
+      @path="/admin/plugins/{{this.adminPluginNavManager.currentPlugin.name}}/ai-tools"
-          <tr data-tool-id={{tool.id}} class="ai-tool-list__row">
+      @label={{i18n "discourse_ai.tools.short_title"}}
-            <td>
+    />
-              <div class="ai-tool-list__name-with-description">
+    <section class="ai-tool-list-editor__current admin-detail pull-left">
-                <div class="ai-tool-list__name">
+      <div class="ai-tool-list-editor__header">
-                  <strong>
+        <h3>{{I18n.t "discourse_ai.tools.short_title"}}</h3>
-                    {{tool.name}}
+        <LinkTo
-                  </strong>
+          @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>
+
+      <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>
+                  </div>
+                  <div class="ai-tool-list__description">
+                    {{tool.description}}
+                  </div>
                 </div>
-                <div class="ai-tool-list__description">
+              </td>
-                  {{tool.description}}
+              <td>
-                </div>
+                <LinkTo
-              </div>
+                  @route="adminPlugins.show.discourse-ai-tools.show"
-            </td>
+                  @model={{tool}}
-            <td>
+                  class="btn btn-text btn-small"
-              <LinkTo
+                >{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
-                @route="adminPlugins.show.discourse-ai-tools.show"
+              </td>
-                @model={{tool}}
+            </tr>
-                class="btn btn-text btn-small"
+          {{/each}}
-              >{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
+        </tbody>
-            </td>
+      </table>
-          </tr>
+    </section>
-        {{/each}}
+  </template>
-      </tbody>
+}
-    </table>
-  </section>
-</template>

spec/system/admin_ai_persona_spec.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+RSpec.describe "Admin AI persona configuration", type: :system, js: true do
+  fab!(:admin)
+
+  before do
+    SiteSetting.ai_bot_enabled = true
+    SiteSetting.ai_bot_enabled_chat_bots = "gpt-4"
+    sign_in(admin)
+  end
+
+  it "allows creation of a persona" do
+    visit "/admin/plugins/discourse-ai/ai-personas"
+    find(".ai-persona-list-editor__header .btn-primary").click()
+    find(".ai-persona-editor__name").set("Test Persona")
+    find(".ai-persona-editor__description").fill_in(with: "I am a test persona")
+    find(".ai-persona-editor__system_prompt").fill_in(with: "You are a helpful bot")
+
+    tool_selector = PageObjects::Components::SelectKit.new(".ai-persona-editor__tools")
+    tool_selector.expand
+    tool_selector.select_row_by_value("Read")
+
+    find(".ai-persona-editor__save").click()
+
+    expect(page).not_to have_current_path("/admin/plugins/discourse-ai/ai-personas/new")
+
+    persona_id = page.current_path.split("/").last.to_i
+
+    persona = AiPersona.find(persona_id)
+    expect(persona.name).to eq("Test Persona")
+    expect(persona.description).to eq("I am a test persona")
+    expect(persona.system_prompt).to eq("You are a helpful bot")
+    expect(persona.tools).to eq([["Read", { "read_private" => nil }]])
+  end
+
+  it "will not allow deletion or editing of system personas" do
+    visit "/admin/plugins/discourse-ai/ai-personas/#{DiscourseAi::AiBot::Personas::Persona.system_personas.values.first}"
+    expect(page).not_to have_selector(".ai-persona-editor__delete")
+    expect(find(".ai-persona-editor__system_prompt")).to be_disabled
+  end
+
+  it "will enable persona right away when you click on enable but does not save side effects" do
+    persona = Fabricate(:ai_persona, enabled: false)
+
+    visit "/admin/plugins/discourse-ai/ai-personas/#{persona.id}"
+
+    find(".ai-persona-editor__name").set("Test Persona 1")
+    PageObjects::Components::DToggleSwitch.new(".ai-persona-editor__enabled").toggle
+
+    try_until_success { expect(persona.reload.enabled).to eq(true) }
+
+    persona.reload
+    expect(persona.enabled).to eq(true)
+    expect(persona.name).not_to eq("Test Persona 1")
+  end
+
+  it "can navigate the AI plugin with breadcrumbs" do
+    visit "/admin/plugins/discourse-ai/ai-personas"
+    expect(page).to have_css(".d-breadcrumbs")
+    expect(page).to have_css(".d-breadcrumbs__item", count: 4)
+    find(".d-breadcrumbs__item", text: I18n.t("admin_js.admin.plugins.title")).click
+    expect(page).to have_current_path("/admin/plugins")
+  end
+end

spec/system/ai_bot/persona_spec.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 RSpec.describe "AI personas", type: :system, js: true do
   fab!(:admin)
   fab!(:gpt_4) { Fabricate(:llm_model, name: "gpt-4") }
@@ -7,8 +8,6 @@ RSpec.describe "AI personas", type: :system, js: true do
     SiteSetting.ai_bot_enabled = true
     toggle_enabled_bots(bots: [gpt_4])
     sign_in(admin)
-
-    Group.refresh_automatic_groups!
   end
 
   it "remembers the last selected persona" do
@@ -31,49 +30,4 @@ RSpec.describe "AI personas", type: :system, js: true do
     persona_selector.expand
     expect(persona_selector).to have_selected_value(-2)
   end
-
-  it "allows creation of a persona" do
-    visit "/admin/plugins/discourse-ai/ai-personas"
-    find(".ai-persona-list-editor__header .btn-primary").click()
-    find(".ai-persona-editor__name").set("Test Persona")
-    find(".ai-persona-editor__description").fill_in(with: "I am a test persona")
-    find(".ai-persona-editor__system_prompt").fill_in(with: "You are a helpful bot")
-
-    tool_selector = PageObjects::Components::SelectKit.new(".ai-persona-editor__tools")
-    tool_selector.expand
-    tool_selector.select_row_by_value("Read")
-
-    find(".ai-persona-editor__save").click()
-
-    expect(page).not_to have_current_path("/admin/plugins/discourse-ai/ai-personas/new")
-
-    persona_id = page.current_path.split("/").last.to_i
-
-    persona = AiPersona.find(persona_id)
-    expect(persona.name).to eq("Test Persona")
-    expect(persona.description).to eq("I am a test persona")
-    expect(persona.system_prompt).to eq("You are a helpful bot")
-    expect(persona.tools).to eq([["Read", { "read_private" => nil }]])
-  end
-
-  it "will not allow deletion or editing of system personas" do
-    visit "/admin/plugins/discourse-ai/ai-personas/#{DiscourseAi::AiBot::Personas::Persona.system_personas.values.first}"
-    expect(page).not_to have_selector(".ai-persona-editor__delete")
-    expect(find(".ai-persona-editor__system_prompt")).to be_disabled
-  end
-
-  it "will enable persona right away when you click on enable but does not save side effects" do
-    persona = Fabricate(:ai_persona, enabled: false)
-
-    visit "/admin/plugins/discourse-ai/ai-personas/#{persona.id}"
-
-    find(".ai-persona-editor__name").set("Test Persona 1")
-    PageObjects::Components::DToggleSwitch.new(".ai-persona-editor__enabled").toggle
-
-    try_until_success { expect(persona.reload.enabled).to eq(true) }
-
-    persona.reload
-    expect(persona.enabled).to eq(true)
-    expect(persona.name).not_to eq("Test Persona 1")
-  end
 end