Skip to content
This repository was archived by the owner on Jul 22, 2025. It is now read-only.

Commit 60e83fe

Browse files
martin-brennanmartin-brennan
committed
WIP: Applying more admin UI guidelines
1 parent 54f2d34 commit 60e83fe

File tree

7 files changed

+179
-183
lines changed

7 files changed

+179
-183
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<AiToolEditor
2-
@tools={{this.allTools}}
3-
@model={{this.model}}
4-
@presets={{this.presets}}
5-
/>
1+
<section class="ai-persona-tool-editor__current admin-detail pull-left">
2+
<AiToolEditor
3+
@tools={{this.allTools}}
4+
@model={{this.model}}
5+
@presets={{this.presets}}
6+
/>
7+
</section>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<AiToolEditor
2-
@tools={{this.allTools}}
3-
@model={{this.model}}
4-
@presets={{this.presets}}
5-
/>
1+
<section class="ai-persona-tool-editor__current admin-detail pull-left">
2+
<AiToolEditor
3+
@tools={{this.allTools}}
4+
@model={{this.model}}
5+
@presets={{this.presets}}
6+
/>
7+
</section>

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

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,10 @@ export default class AiLlmsListEditor extends Component {
124124
<section class="ai-llms-list-editor__configured">
125125
<AdminPageSubheader
126126
@titleLabel="discourse_ai.llms.configured.title"
127+
@descriptionLabel="discourse_ai.llms.preconfigured.description"
128+
@learnMoreUrl="https://meta.discourse.org/t/discourse-ai-large-language-model-llm-settings-page/319903"
127129
/>
128-
<table>
130+
<table class="d-admin-table">
129131
<thead>
130132
<tr>
131133
<th>{{i18n "discourse_ai.llms.display_name"}}</th>
@@ -135,8 +137,14 @@ export default class AiLlmsListEditor extends Component {
135137
</thead>
136138
<tbody>
137139
{{#each @llms as |llm|}}
138-
<tr data-llm-id={{llm.name}} class="ai-llm-list__row">
139-
<td class="column-name">
140+
<tr
141+
data-llm-id={{llm.name}}
142+
class="ai-llm-list__row d-admin-row__content"
143+
>
144+
<td class="d-admin-row__overview">
145+
<div class="d-admin-row__mobile-label">
146+
{{i18n "discourse_ai.llms.display_name"}}
147+
</div>
140148
<h3>{{llm.display_name}}</h3>
141149
<p>
142150
{{this.modelDescription llm}}
@@ -149,18 +157,20 @@ export default class AiLlmsListEditor extends Component {
149157
</ul>
150158
{{/if}}
151159
</td>
152-
<td class="column-provider">
160+
<td class="d-admin-row__detail">
161+
<div class="d-admin-row__mobile-label">
162+
{{i18n "discourse_ai.llms.provider"}}
163+
</div>
153164
{{i18n
154165
(concat "discourse_ai.llms.providers." llm.provider)
155166
}}
156167
</td>
157-
<td class="column-edit">
168+
<td class="d-admin-row__controls">
158169
<LinkTo
159170
@route="adminPlugins.show.discourse-ai-llms.show"
160-
class="btn btn-default"
171+
class="btn btn-default btn-small"
161172
@model={{llm.id}}
162173
>
163-
{{icon "wrench"}}
164174
<div class="d-button-label">
165175
{{i18n "discourse_ai.llms.edit"}}
166176
</div>
@@ -173,7 +183,17 @@ export default class AiLlmsListEditor extends Component {
173183
</section>
174184
{{/if}}
175185
<section class="ai-llms-list-editor__templates">
176-
<AdminPageSubheader @titleLabel={{this.preconfiguredTitle}} />
186+
<AdminPageSubheader
187+
@titleLabel={{this.preconfiguredTitle}}
188+
@descriptionLabel={{unless
189+
this.hasLlmElements
190+
"discourse_ai.llms.preconfigured.description"
191+
}}
192+
@learnMoreUrl={{unless
193+
this.hasLlmElements
194+
"https://meta.discourse.org/t/discourse-ai-large-language-model-llm-settings-page/319903"
195+
}}
196+
/>
177197

178198
<AdminSectionLandingWrapper
179199
class="ai-llms-list-editor__templates-list"

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

Lines changed: 69 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Component from "@glimmer/component";
2+
import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
23
import { tracked } from "@glimmer/tracking";
34
import { fn } from "@ember/helper";
45
import { on } from "@ember/modifier";
@@ -10,25 +11,13 @@ import DToggleSwitch from "discourse/components/d-toggle-switch";
1011
import concatClass from "discourse/helpers/concat-class";
1112
import { popupAjaxError } from "discourse/lib/ajax-error";
1213
import { cook } from "discourse/lib/text";
13-
import icon from "discourse-common/helpers/d-icon";
1414
import i18n from "discourse-common/helpers/i18n";
1515
import I18n from "discourse-i18n";
16+
import AdminPageSubheader from "admin/components/admin-page-subheader";
1617
import AiPersonaEditor from "./ai-persona-editor";
1718

1819
export default class AiPersonaListEditor extends Component {
1920
@service adminPluginNavManager;
20-
@tracked _noPersonaText = null;
21-
22-
get noPersonaText() {
23-
if (this._noPersonaText === null) {
24-
const raw = I18n.t("discourse_ai.ai_persona.no_persona_selected");
25-
cook(raw).then((result) => {
26-
this._noPersonaText = result;
27-
});
28-
}
29-
30-
return this._noPersonaText;
31-
}
3221

3322
@action
3423
async toggleEnabled(persona) {
@@ -53,74 +42,76 @@ export default class AiPersonaListEditor extends Component {
5342
{{#if @currentPersona}}
5443
<AiPersonaEditor @model={{@currentPersona}} @personas={{@personas}} />
5544
{{else}}
56-
<div class="ai-persona-list-editor__header">
57-
<h3>{{i18n "discourse_ai.ai_persona.short_title"}}</h3>
58-
{{#unless @currentPersona.isNew}}
59-
<LinkTo
45+
<AdminPageSubheader
46+
@titleLabel="discourse_ai.ai_persona.short_title"
47+
@descriptionLabel="discourse_ai.ai_persona.persona_description"
48+
@learnMoreUrl="https://meta.discourse.org/t/ai-bot-personas/306099"
49+
>
50+
<:actions as |actions|>
51+
<actions.Primary
52+
@label="discourse_ai.ai_persona.new"
6053
@route="adminPlugins.show.discourse-ai-personas.new"
61-
class="btn btn-small btn-primary"
62-
>
63-
{{icon "plus"}}
64-
<span>{{I18n.t "discourse_ai.ai_persona.new"}}</span>
65-
</LinkTo>
66-
{{/unless}}
67-
</div>
54+
@icon="plus"
55+
class="ai-persona-list-editor__new-button"
56+
/>
57+
</:actions>
58+
</AdminPageSubheader>
6859

69-
<div class="ai-persona-list-editor__empty">
70-
<details class="details__boxed">
71-
<summary>{{i18n
72-
"discourse_ai.ai_persona.what_are_personas"
73-
}}</summary>
74-
{{this.noPersonaText}}
75-
</details>
76-
</div>
77-
78-
<table class="content-list ai-persona-list-editor">
79-
<thead>
80-
<tr>
81-
<th>{{i18n "discourse_ai.ai_persona.name"}}</th>
82-
<th>{{i18n "discourse_ai.ai_persona.enabled"}}</th>
83-
<th></th>
84-
</tr>
85-
</thead>
86-
<tbody>
87-
{{#each @personas as |persona|}}
88-
<tr
89-
data-persona-id={{persona.id}}
90-
class={{concatClass
91-
"ai-persona-list__row"
92-
(if persona.priority "priority")
93-
}}
94-
>
95-
<td>
96-
<div class="ai-persona-list__name-with-description">
97-
<div class="ai-persona-list__name">
98-
<strong>
99-
{{persona.name}}
100-
</strong>
101-
</div>
102-
<div class="ai-persona-list__description">
103-
{{persona.description}}
104-
</div>
105-
</div>
106-
</td>
107-
<td>
108-
<DToggleSwitch
109-
@state={{persona.enabled}}
110-
{{on "click" (fn this.toggleEnabled persona)}}
111-
/>
112-
</td>
113-
<td>
114-
<LinkTo
115-
@route="adminPlugins.show.discourse-ai-personas.show"
116-
@model={{persona}}
117-
class="btn btn-text btn-small"
118-
>{{i18n "discourse_ai.ai_persona.edit"}} </LinkTo>
119-
</td>
60+
{{#if @personas}}
61+
<table class="content-list ai-persona-list-editor d-admin-table">
62+
<thead>
63+
<tr>
64+
<th>{{i18n "discourse_ai.ai_persona.name"}}</th>
65+
<th>{{i18n "discourse_ai.ai_persona.enabled"}}</th>
66+
<th></th>
12067
</tr>
121-
{{/each}}
122-
</tbody>
123-
</table>
68+
</thead>
69+
<tbody>
70+
{{#each @personas as |persona|}}
71+
<tr
72+
data-persona-id={{persona.id}}
73+
class={{concatClass
74+
"ai-persona-list__row d-admin-row__content"
75+
(if persona.priority "priority")
76+
}}
77+
>
78+
<td class="d-admin-row__overview">
79+
<div class="ai-persona-list__name-with-description">
80+
<div class="ai-persona-list__name">
81+
<strong>
82+
{{persona.name}}
83+
</strong>
84+
</div>
85+
<div class="ai-persona-list__description">
86+
{{persona.description}}
87+
</div>
88+
</div>
89+
</td>
90+
<td class="d-admin-row__detail">
91+
<DToggleSwitch
92+
@state={{persona.enabled}}
93+
{{on "click" (fn this.toggleEnabled persona)}}
94+
/>
95+
</td>
96+
<td class="d-admin-row__controls">
97+
<LinkTo
98+
@route="adminPlugins.show.discourse-ai-personas.show"
99+
@model={{persona}}
100+
class="btn btn-text btn-small"
101+
>{{i18n "discourse_ai.ai_persona.edit"}} </LinkTo>
102+
</td>
103+
</tr>
104+
{{/each}}
105+
</tbody>
106+
</table>
107+
{{else}}
108+
<AdminConfigAreaEmptyList
109+
@ctaLabel="discourse_ai.ai_persona.new"
110+
@ctaRoute="adminPlugins.show.discourse-ai-personas.new"
111+
@ctaClass="ai-persona-list-editor__new-button"
112+
@emptyLabel="discourse_ai.ai_persona.no_personas"
113+
/>
114+
{{/if}}
124115
{{/if}}
125116
</section>
126117
</template>

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

Lines changed: 61 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Component from "@glimmer/component";
2+
import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
23
import { LinkTo } from "@ember/routing";
34
import { service } from "@ember/service";
45
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
5-
import icon from "discourse-common/helpers/d-icon";
66
import i18n from "discourse-common/helpers/i18n";
77
import I18n from "discourse-i18n";
8+
import AdminPageSubheader from "admin/components/admin-page-subheader";
89

910
export default class AiToolListEditor extends Component {
1011
@service adminPluginNavManager;
@@ -15,44 +16,67 @@ export default class AiToolListEditor extends Component {
1516
@label={{i18n "discourse_ai.tools.short_title"}}
1617
/>
1718
<section class="ai-tool-list-editor__current admin-detail pull-left">
18-
<div class="ai-tool-list-editor__header">
19-
<h3>{{I18n.t "discourse_ai.tools.short_title"}}</h3>
20-
<LinkTo
21-
@route="adminPlugins.show.discourse-ai-tools.new"
22-
class="btn btn-small btn-primary ai-tool-list-editor__new-button"
23-
>
24-
{{icon "plus"}}
25-
<span>{{I18n.t "discourse_ai.tools.new"}}</span>
26-
</LinkTo>
27-
</div>
19+
<AdminPageSubheader
20+
@titleLabel="discourse_ai.tools.short_title"
21+
@learnMoreUrl="https://meta.discourse.org/t/ai-bot-custom-tools/314103"
22+
@descriptionLabel="discourse_ai.tools.subheader_description"
23+
>
24+
<:actions as |actions|>
25+
<actions.Primary
26+
@label="discourse_ai.tools.new"
27+
@route="adminPlugins.show.discourse-ai-tools.new"
28+
@icon="plus"
29+
class="ai-tool-list-editor__new-button"
30+
/>
31+
</:actions>
32+
</AdminPageSubheader>
2833

29-
<table class="content-list ai-tool-list-editor">
30-
<tbody>
31-
{{#each @tools as |tool|}}
32-
<tr data-tool-id={{tool.id}} class="ai-tool-list__row">
33-
<td>
34-
<div class="ai-tool-list__name-with-description">
35-
<div class="ai-tool-list__name">
36-
<strong>
37-
{{tool.name}}
38-
</strong>
34+
{{#if @tools}}
35+
<table class="d-admin-table ai-tool-list-editor">
36+
<thead>
37+
<th>{{i18n "discourse_ai.tools.name"}}</th>
38+
<th></th>
39+
</thead>
40+
<tbody>
41+
{{#each @tools as |tool|}}
42+
<tr
43+
data-tool-id={{tool.id}}
44+
class="ai-tool-list__row d-admin-row__content"
45+
>
46+
<td class="d-admin-row__overview">
47+
<div class="ai-tool-list__name-with-description">
48+
<div class="d-admin-row__mobile-label">
49+
{{i18n "discourse_ai.tools.name"}}
50+
</div>
51+
<div class="ai-tool-list__name">
52+
<strong>
53+
{{tool.name}}
54+
</strong>
55+
</div>
56+
<div class="ai-tool-list__description">
57+
{{tool.description}}
58+
</div>
3959
</div>
40-
<div class="ai-tool-list__description">
41-
{{tool.description}}
42-
</div>
43-
</div>
44-
</td>
45-
<td>
46-
<LinkTo
47-
@route="adminPlugins.show.discourse-ai-tools.show"
48-
@model={{tool}}
49-
class="btn btn-text btn-small"
50-
>{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
51-
</td>
52-
</tr>
53-
{{/each}}
54-
</tbody>
55-
</table>
60+
</td>
61+
<td class="d-admin-row__controls">
62+
<LinkTo
63+
@route="adminPlugins.show.discourse-ai-tools.show"
64+
@model={{tool}}
65+
class="btn btn-text btn-small"
66+
>{{I18n.t "discourse_ai.tools.edit"}}</LinkTo>
67+
</td>
68+
</tr>
69+
{{/each}}
70+
</tbody>
71+
</table>
72+
{{else}}
73+
<AdminConfigAreaEmptyList
74+
@ctaLabel="discourse_ai.tools.new"
75+
@ctaRoute="adminPlugins.show.discourse-ai-tools.new"
76+
@ctaClass="ai-tool-list-editor__new-button"
77+
@emptyLabel="discourse_ai.tools.no_tools"
78+
/>
79+
{{/if}}
5680
</section>
5781
</template>
5882
}

0 commit comments

Comments
 (0)