web/a11y: More Consistent UI Labelling

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -7,6 +7,7 @@ import "#elements/buttons/SpinnerButton/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { EventWithContext } from "#common/events";
+import { EntityLabel } from "#common/i18n/nouns";
 import { actionToLabel } from "#common/labels";
 
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
@@ -16,7 +17,7 @@ import { EventGeo, renderEventUser } from "#admin/events/utils";
 
 import { Event, EventsApi } from "@goauthentik/api";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { css, CSSResult, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -28,6 +29,11 @@ export class RecentEventsCard extends Table<Event> {
     public override ariaLabel = msg("Recent events");
     public override label = msg("Events");
 
+    protected override entityLabel: EntityLabel = {
+        singular: msg("event"),
+        plural: msg("events"),
+    };
+
     @property()
     order = "-created";
 
@@ -89,7 +95,7 @@ export class RecentEventsCard extends Table<Event> {
 
         return super.renderEmpty(
             html`<ak-empty-state
-                ><span>${msg("No Events found.")}</span>
+                ><span>${msg(msg(str`No ${this.entityLabel.plural.toLowerCase()} found.`))}</span>
                 <div slot="body">${msg("No matching events could be found.")}</div>
             </ak-empty-state>`,
         );

web/src/admin/admin-settings/AdminSettingsForm.ts

@@ -46,9 +46,8 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
     @property({ attribute: false })
     public settings!: Settings;
 
-    getSuccessMessage(): string {
-        return msg("Successfully updated settings.");
-    }
+    protected override readonly actionName = "save";
+    protected override entityLabel = msg("settings");
 
     async send(settingsRequest: SettingsRequest): Promise<Settings> {
         const result = await new AdminApi(DEFAULT_CONFIG).adminSettingsUpdate({

web/src/admin/applications/ApplicationCheckAccessForm.ts

@@ -32,9 +32,9 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
     @property({ attribute: false })
     request?: number;
 
-    getSuccessMessage(): string {
-        return msg("Successfully sent test-request.");
-    }
+    protected override readonly actionName = "send";
+
+    protected override entityLabel = msg("test-request");
 
     async send(data: { forUser: number }): Promise<PolicyTestResult> {
         this.request = data.forUser;

web/src/admin/applications/ApplicationForm.ts

@@ -57,11 +57,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
     @property({ type: Boolean })
     public clearIcon = false;
 
-    protected override getSuccessMessage(): string {
-        return this.instance
-            ? msg("Successfully updated application.")
-            : msg("Successfully created application.");
-    }
+    protected override entityLabel = msg("application");
 
     public override async send(applicationRequest: Application): Promise<Application | void> {
         applicationRequest.backchannelProviders = this.backchannelProviders.map((p) => p.pk);

web/src/admin/applications/ApplicationListPage.ts

@@ -45,7 +45,15 @@ export const applicationListStyle = css`
 @customElement("ak-application-list")
 export class ApplicationListPage extends WithBrandConfig(TablePage<Application>) {
     protected override searchEnabled = true;
-    public pageTitle = msg("Applications");
+    protected override entityLabel = {
+        singular: msg("Application"),
+        plural: msg("Applications"),
+    };
+
+    protected override get searchPlaceholder() {
+        return msg("Search for an application by name or group...");
+    }
+
     public get pageDescription() {
         return msg(
             str`External applications that use ${this.brandingTitle} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`,
@@ -132,7 +140,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
             html`${item.providerObj?.verboseName || msg("-")}`,
             html`<div>
                 <ak-forms-modal>
-                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="submit">${this.updateEntityLabel}</span>
                     <span slot="header">${msg("Update Application")}</span>
                     <ak-application-form slot="form" .instancePk=${item.slug}>
                     </ak-application-form>
@@ -173,18 +181,20 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                 </button>
             </ak-application-wizard>
             <ak-forms-modal .open=${getURLParam("createForm", false)}>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Application")}</span>
+                <span slot="submit">${this.createEntityLabel}</span>
+                <span slot="header">${this.newEntityActionLabel}</span>
                 <ak-application-form slot="form"> </ak-application-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
+                    ${this.newEntityActionLabel}
+                </button>
             </ak-forms-modal>`;
     }
 
     renderToolbar(): TemplateResult {
         return html` ${super.renderToolbar()}
             <ak-forms-confirm
-                successMessage=${msg("Successfully cleared application cache")}
-                errorMessage=${msg("Failed to delete application cache")}
+                success-message=${msg("Successfully cleared application cache")}
+                error-message=${msg("Failed to delete application cache")}
                 action=${msg("Clear cache")}
                 .onConfirm=${() => {
                     return new PoliciesApi(DEFAULT_CONFIG).policiesAllCacheClearCreate();

web/src/admin/applications/ApplicationViewPage.ts

@@ -12,6 +12,9 @@ import "#elements/buttons/SpinnerButton/ak-spinner-button";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network";
+import { formatEditMessage } from "#common/i18n/actions";
+import { EntityLabel } from "#common/i18n/nouns";
+import { ActionTenseRecord } from "#common/i18n/verbs";
 
 import { AKElement } from "#elements/Base";
 
@@ -60,6 +63,11 @@ export class ApplicationViewPage extends AKElement {
 
     //#region State
 
+    protected entityLabel: EntityLabel = {
+        singular: msg("Application"),
+        plural: msg("Applications"),
+    };
+
     @state()
     protected application?: Application;
 
@@ -219,9 +227,11 @@ export class ApplicationViewPage extends AKElement {
                                         <dd class="pf-c-description-list__description">
                                             <div class="pf-c-description-list__text">
                                                 <ak-forms-modal>
-                                                    <span slot="submit">${msg("Update")}</span>
+                                                    <span slot="submit"
+                                                        >${ActionTenseRecord.apply.present}</span
+                                                    >
                                                     <span slot="header">
-                                                        ${msg("Update Application")}
+                                                        ${formatEditMessage(this.entityLabel)}
                                                     </span>
                                                     <ak-application-form
                                                         slot="form"
@@ -232,7 +242,7 @@ export class ApplicationViewPage extends AKElement {
                                                         slot="trigger"
                                                         class="pf-c-button pf-m-secondary"
                                                     >
-                                                        ${msg("Edit")}
+                                                        ${formatEditMessage(this.entityLabel)}
                                                     </button>
                                                 </ak-forms-modal>
                                             </div>

web/src/admin/applications/ProviderSelectModal.ts

@@ -1,6 +1,7 @@
 import "#elements/buttons/SpinnerButton/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { EntityLabel } from "#common/i18n/nouns";
 
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TableModal } from "#elements/table/TableModal";
@@ -17,6 +18,11 @@ export class ProviderSelectModal extends TableModal<Provider> {
     checkbox = true;
     checkboxChip = true;
 
+    protected override entityLabel: EntityLabel = {
+        singular: msg("provider"),
+        plural: msg("providers"),
+    };
+
     protected override searchEnabled = true;
 
     @property({ type: Boolean })

web/src/admin/applications/entitlements/ApplicationEntitlementForm.ts

@@ -29,12 +29,7 @@ export class ApplicationEntitlementForm extends ModelForm<ApplicationEntitlement
     @property()
     targetPk?: string;
 
-    getSuccessMessage(): string {
-        if (this.instance?.pbmUuid) {
-            return msg("Successfully updated entitlement.");
-        }
-        return msg("Successfully created entitlement.");
-    }
+    protected override entityLabel = msg("entitlement");
 
     static styles: CSSResult[] = [...super.styles, PFContent];
 

web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts

@@ -9,6 +9,7 @@ import "#elements/forms/ProxyForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { PFSize } from "#common/enums";
+import { EntityLabel } from "#common/i18n/nouns";
 
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
@@ -37,6 +38,11 @@ export class ApplicationEntitlementsPage extends Table<ApplicationEntitlement> {
 
     order = "order";
 
+    protected override entityLabel: EntityLabel = {
+        singular: msg("Entitlement"),
+        plural: msg("Entitlements"),
+    };
+
     async apiEndpoint(): Promise<PaginatedResponse<ApplicationEntitlement>> {
         return new CoreApi(DEFAULT_CONFIG).coreApplicationEntitlementsList({
             ...(await this.defaultEndpointConfig()),
@@ -76,16 +82,16 @@ export class ApplicationEntitlementsPage extends Table<ApplicationEntitlement> {
         return [
             html`${item.name}`,
             html`<ak-forms-modal size=${PFSize.Medium}>
-                    <span slot="submit">${msg("Update")}</span>
-                    <span slot="header">${msg("Update Entitlement")}</span>
+                    <span slot="submit">${this.updateEntityLabel}</span>
+                    <span slot="header">${this.editEntityLabel}</span>
                     <ak-application-entitlement-form
                         slot="form"
                         .instancePk=${item.pbmUuid}
                         targetPk=${ifDefined(this.app)}
                     >
                     </ak-application-entitlement-form>
                     <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
+                        <pf-tooltip position="top" content=${msg(this.editEntityLabel)}>
                             <i class="fas fa-edit" aria-hidden="true"></i>
                         </pf-tooltip>
                     </button>
@@ -126,12 +132,12 @@ export class ApplicationEntitlementsPage extends Table<ApplicationEntitlement> {
 
     renderToolbar(): TemplateResult {
         return html`<ak-forms-modal size=${PFSize.Medium}>
-            <span slot="submit">${msg("Create")}</span>
-            <span slot="header">${msg("Create Entitlement")}</span>
+            <span slot="submit">${this.createEntityLabel}</span>
+            <span slot="header">${this.newEntityActionLabel}</span>
             <ak-application-entitlement-form slot="form" targetPk=${ifDefined(this.app)}>
             </ak-application-entitlement-form>
             <button slot="trigger" class="pf-c-button pf-m-primary">
-                ${msg("Create entitlement")}
+                ${this.newEntityActionLabel}
             </button>
         </ak-forms-modal> `;
     }

web/src/admin/blueprints/BlueprintForm.ts

@@ -46,11 +46,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
         return inst;
     }
 
-    getSuccessMessage(): string {
-        return this.instance
-            ? msg("Successfully updated instance.")
-            : msg("Successfully created instance.");
-    }
+    protected override entityLabel = msg("instance");
 
     static styles: CSSResult[] = [...super.styles, PFContent];
 

web/src/admin/blueprints/BlueprintListPage.ts

@@ -47,7 +47,10 @@ export function BlueprintStatus(blueprint?: BlueprintInstance): string {
 @customElement("ak-blueprint-list")
 export class BlueprintListPage extends TablePage<BlueprintInstance> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Blueprints");
+    protected override entityLabel = {
+        singular: msg("Blueprint Instance"),
+        plural: msg("Blueprint Instances"),
+    };
     public pageDescription = msg("Automate and template configuration within authentik.");
     public pageIcon = "pf-icon pf-icon-blueprint";
 
@@ -150,7 +153,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
             html`<ak-status-label ?good=${item.enabled}></ak-status-label>`,
             html`<div>
                 <ak-forms-modal>
-                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="submit">${this.updateEntityLabel}</span>
                     <span slot="header">${msg("Update Blueprint")}</span>
                     <ak-blueprint-form slot="form" .instancePk=${item.pk}> </ak-blueprint-form>
                     <button
@@ -198,10 +201,12 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
     renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Blueprint Instance")}</span>
+                <span slot="submit">${this.createEntityLabel}</span>
+                <span slot="header">${this.newEntityActionLabel}</span>
                 <ak-blueprint-form slot="form"> </ak-blueprint-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
+                    ${this.newEntityActionLabel}
+                </button>
             </ak-forms-modal>
         `;
     }

web/src/admin/brands/BrandForm.ts

@@ -41,11 +41,7 @@ export class BrandForm extends ModelForm<Brand, string> {
         });
     }
 
-    getSuccessMessage(): string {
-        return this.instance
-            ? msg("Successfully updated brand.")
-            : msg("Successfully created brand.");
-    }
+    protected override entityLabel = msg("brand");
 
     async send(data: Brand): Promise<Brand> {
         data.attributes ??= {};

web/src/admin/brands/BrandListPage.ts

@@ -21,8 +21,14 @@ import { customElement, property } from "lit/decorators.js";
 @customElement("ak-brand-list")
 export class BrandListPage extends TablePage<Brand> {
     protected override searchEnabled = true;
-    public override searchPlaceholder = msg("Search by domain or brand name...");
-    public pageTitle = msg("Brands");
+    protected override entityLabel = {
+        singular: msg("Brand"),
+        plural: msg("Brands"),
+    };
+    protected get searchPlaceholder() {
+        return msg("Search by domain or brand name...");
+    }
+
     public pageDescription = msg("Configure visual settings and defaults for different domains.");
     public pageIcon = "pf-icon pf-icon-tenant";
 
@@ -79,7 +85,7 @@ export class BrandListPage extends TablePage<Brand> {
             html`<ak-status-label ?good=${item._default}></ak-status-label>`,
             html`<div>
                 <ak-forms-modal>
-                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="submit">${this.updateEntityLabel}</span>
                     <span slot="header">${msg("Update Brand")}</span>
                     <ak-brand-form slot="form" .instancePk=${item.brandUuid}> </ak-brand-form>
                     <button slot="trigger" class="pf-c-button pf-m-plain">
@@ -101,10 +107,12 @@ export class BrandListPage extends TablePage<Brand> {
     renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
-                <span slot="submit">${msg("Create Brand")}</span>
-                <span slot="header">${msg("New Brand")}</span>
+                <span slot="submit">${this.createEntityLabel}</span>
+                <span slot="header">${this.newEntityActionLabel}</span>
                 <ak-brand-form slot="form"> </ak-brand-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("New Brand")}</button>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
+                    ${this.newEntityActionLabel}
+                </button>
             </ak-forms-modal>
         `;
     }

web/src/admin/crypto/CertificateGenerateForm.ts

@@ -17,9 +17,8 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-crypto-certificate-generate-form")
 export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
-    getSuccessMessage(): string {
-        return msg("Successfully generated certificate-key pair.");
-    }
+    protected override readonly actionName = "generate";
+    protected override entityLabel = msg("certificate-key pair");
 
     async send(data: CertificateGenerationRequest): Promise<CertificateKeyPair> {
         return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsGenerateCreate({

web/src/admin/crypto/CertificateKeyPairForm.ts

@@ -21,11 +21,7 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
         });
     }
 
-    getSuccessMessage(): string {
-        return this.instance
-            ? msg("Successfully updated certificate-key pair.")
-            : msg("Successfully created certificate-key pair.");
-    }
+    protected override entityLabel = msg("certificate-key pair");
 
     async send(data: CertificateKeyPair): Promise<CertificateKeyPair> {
         if (this.instance) {