discourse/app/assets/javascripts/admin/addon/components/admin-page-header.gjs
Martin Brennan 61c1d35f17
FEATURE: Convert chat plugin UI to new show plugin and admin UI guidelines (#28632)
This commit converts the current chat plugin UI into the
new "show plugin" UI already followed by AI and Gamification.

In the process, I also:

* Made a dedicated /new route to create new webhooks
* Converted the webhook form to FormKit
* Made some fixes and improvements to the `AdminPluginConfigPage`, `AdminPageHeader`,
   and `AdminPageSubheader` generic components, so more plugins can
   adopt the UI guidelines too. This includes adding a header outlet so plugins
   can add action buttons to the plugin show page header.
* Fixes the submit button loading state for FormKit (by Joffrey)

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-09-10 15:16:16 +10:00

73 lines
2.1 KiB
Plaintext

import Component from "@glimmer/component";
import { hash } from "@ember/helper";
import { htmlSafe } from "@ember/template";
import DBreadcrumbsContainer from "discourse/components/d-breadcrumbs-container";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
import i18n from "discourse-common/helpers/i18n";
import {
DangerButton,
DefaultButton,
PrimaryButton,
} from "admin/components/admin-page-action-button";
export default class AdminPageHeader extends Component {
get title() {
if (this.args.titleLabelTranslated) {
return this.args.titleLabelTranslated;
} else if (this.args.titleLabel) {
return i18n(this.args.titleLabel);
}
}
get description() {
if (this.args.descriptionLabelTranslated) {
return this.args.descriptionLabelTranslated;
} else if (this.args.descriptionLabel) {
return i18n(this.args.descriptionLabel);
}
}
<template>
<div class="admin-page-header">
<div class="admin-page-header__breadcrumbs">
<DBreadcrumbsContainer />
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
{{yield to="breadcrumbs"}}
</div>
<div class="admin-page-header__title-row">
{{#if this.title}}
<h1 class="admin-page-header__title">{{this.title}}</h1>
{{/if}}
<div class="admin-page-header__actions">
{{yield
(hash
Primary=PrimaryButton Default=DefaultButton Danger=DangerButton
)
to="actions"
}}
</div>
</div>
{{#if this.description}}
<p class="admin-page-header__description">
{{htmlSafe this.description}}
{{#if @learnMoreUrl}}
{{htmlSafe (i18n "learn_more_with_link" url=@learnMoreUrl)}}
{{/if}}
</p>
{{/if}}
{{#unless @hideTabs}}
<div class="admin-nav-submenu">
<HorizontalOverflowNav class="admin-nav-submenu__tabs">
{{yield to="tabs"}}
</HorizontalOverflowNav>
</div>
{{/unless}}
</div>
</template>
}