web: fixed missed internationalized strings (#10323)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: you have no missed messages

This commit uncovers a few places where a human-readable string was not property cast into the
internationalized form and internationalizes them in order to conform to our policy of keeping the
product viable outside of the English-speaking world.

* Restored SAML spacing manually. Not sure why that was necessary.

* Restored WS spacing manually. Not sure why that was necessary.

* Restored RouteMatch spacing manually. Not sure why that was necessary.

* Restored RAC spacing manually. Not sure why that was necessary.
This commit is contained in:
Ken Sternberg
2024-07-02 03:15:31 -07:00
committed by GitHub
parent c76313a5aa
commit d30defc6fa
24 changed files with 192 additions and 38 deletions

View File

@ -85,7 +85,7 @@ export class AkApplicationWizardHint extends AKElement implements ShowHintContro
</span>
<button
aria-disabled="false"
aria-label="Restore Application Wizard Hint "
aria-label=${msg("Restore Application Wizard Hint")}
class="pf-c-button pf-m-plain"
type="button"
data-ouia-safe="true"

View File

@ -67,7 +67,7 @@ export class ApplicationWizardApplicationDetails extends BasePanel {
.value=${this.wizard.app?.policyEngineMode}
.errorMessages=${this.wizard.errors.app?.policyEngineMode ?? []}
></ak-radio-input>
<ak-form-group aria-label="UI Settings">
<ak-form-group aria-label=${msg("UI Settings")}>
<span slot="header"> ${msg("UI Settings")} </span>
<div slot="body" class="pf-c-form">
<ak-text-input

View File

@ -7,6 +7,7 @@ import {
SubmitStep,
} from "@goauthentik/components/ak-wizard-main/commonWizardButtons";
import { msg } from "@lit/localize";
import { html } from "lit";
import "./application/ak-application-wizard-application-details";
@ -23,7 +24,7 @@ import { ApplicationStep as ApplicationStepType } from "./types";
class ApplicationStep implements ApplicationStepType {
id = "application";
label = "Application Details";
label = msg("Application Details");
disabled = false;
valid = false;
get buttons() {
@ -36,7 +37,7 @@ class ApplicationStep implements ApplicationStepType {
class ProviderMethodStep implements ApplicationStepType {
id = "provider-method";
label = "Provider Type";
label = msg("Provider Type");
disabled = false;
valid = false;
@ -53,7 +54,7 @@ class ProviderMethodStep implements ApplicationStepType {
class ProviderStepDetails implements ApplicationStepType {
id = "provider-details";
label = "Provider Configuration";
label = msg("Provider Configuration");
disabled = true;
valid = false;
get buttons() {
@ -67,7 +68,7 @@ class ProviderStepDetails implements ApplicationStepType {
class SubmitApplicationStep implements ApplicationStepType {
id = "submit";
label = "Submit Application";
label = msg("Submit Application");
disabled = true;
valid = false;

View File

@ -230,7 +230,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
selected-label="${msg("Selected Applications")}"
></ak-dual-select-provider>
</ak-form-element-horizontal>
<ak-form-group aria-label="Advanced settings">
<ak-form-group aria-label=${msg("Advanced settings")}>
<span slot="header"> ${msg("Advanced settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${msg("Configuration")} name="config">

View File

@ -26,10 +26,12 @@ import { OutpostsApi, ServiceConnection, ServiceConnectionState } from "@goauthe
@customElement("ak-outpost-service-connection-list")
export class OutpostServiceConnectionListPage extends TablePage<ServiceConnection> {
pageTitle(): string {
return "Outpost integrations";
return msg("Outpost integrations");
}
pageDescription(): string | undefined {
return "Outpost integrations define how authentik connects to external platforms to manage and deploy Outposts.";
return msg(
"Outpost integrations define how authentik connects to external platforms to manage and deploy Outposts.",
);
}
pageIcon(): string {
return "pf-icon pf-icon-integration";

View File

@ -219,7 +219,7 @@ export class LDAPProviderViewPage extends AKElement {
class="pf-c-form-control"
readonly
type="text"
value="Your authentik password"
value=${msg("Your authentik password")}
/>
</div>
<div class="pf-c-form__group">

View File

@ -512,7 +512,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-card__body">
${renderDescriptionList([
[
"Preview for user",
msg("Preview for user"),
html`
<ak-search-select
.fetchObjects=${async (query?: string): Promise<User[]> => {

View File

@ -42,8 +42,8 @@ export class RoleAssignedGlobalPermissionsTable extends Table<Permission> {
columns(): TableColumn[] {
return [
new TableColumn("Model", "model"),
new TableColumn("Permission", ""),
new TableColumn(msg("Model"), "model"),
new TableColumn(msg("Permission"), ""),
new TableColumn(""),
];
}

View File

@ -39,9 +39,9 @@ export class RoleAssignedObjectPermissionTable extends Table<ExtraRoleObjectPerm
columns(): TableColumn[] {
return [
new TableColumn("Model", "model"),
new TableColumn("Permission", ""),
new TableColumn("Object", ""),
new TableColumn(msg("Model"), "model"),
new TableColumn(msg("Permission"), ""),
new TableColumn(msg("Object"), ""),
new TableColumn(""),
];
}

View File

@ -114,7 +114,7 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
<ak-radio
.options=${[
{
label: "Internal",
label: msg("Internal"),
value: UserTypeEnum.Internal,
default: true,
description: html`${msg(
@ -122,14 +122,14 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
)}`,
},
{
label: "External",
label: msg("External"),
value: UserTypeEnum.External,
description: html`${msg(
"External users might be external consultants or B2C customers. These users don't get access to enterprise features.",
)}`,
},
{
label: "Service account",
label: msg("Service account"),
value: UserTypeEnum.ServiceAccount,
description: html`${msg(
"Service accounts should be used for machine-to-machine authentication or other automations.",

View File

@ -38,8 +38,8 @@ export class UserAssignedGlobalPermissionsTable extends Table<Permission> {
columns(): TableColumn[] {
return [
new TableColumn("Model", "model"),
new TableColumn("Permission", ""),
new TableColumn(msg("Model"), "model"),
new TableColumn(msg("Permission"), ""),
new TableColumn(""),
];
}

View File

@ -35,9 +35,9 @@ export class UserAssignedObjectPermissionsTable extends Table<ExtraUserObjectPer
columns(): TableColumn[] {
return [
new TableColumn("Model", "model"),
new TableColumn("Permission", ""),
new TableColumn("Object", ""),
new TableColumn(msg("Model"), "model"),
new TableColumn(msg("Permission"), ""),
new TableColumn(msg("Object"), ""),
new TableColumn(""),
];
}

View File

@ -107,7 +107,7 @@ export class UserForm extends ModelForm<User, number> {
<ak-radio
.options=${[
{
label: "Internal",
label: msg("Internal"),
value: UserTypeEnum.Internal,
default: true,
description: html`${msg(
@ -115,21 +115,21 @@ export class UserForm extends ModelForm<User, number> {
)}`,
},
{
label: "External",
label: msg("External"),
value: UserTypeEnum.External,
description: html`${msg(
"External users might be external consultants or B2C customers. These users don't get access to enterprise features.",
)}`,
},
{
label: "Service account",
label: msg("Service account"),
value: UserTypeEnum.ServiceAccount,
description: html`${msg(
"Service accounts should be used for machine-to-machine authentication or other automations.",
)}`,
},
{
label: "Internal Service account",
label: msg("Internal Service account"),
value: UserTypeEnum.InternalServiceAccount,
disabled: true,
description: html`${msg(

View File

@ -59,7 +59,7 @@ export class AkPagination extends CustomEmitterElement(AKElement) {
</span>
</div>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<nav class="pf-c-pagination__nav" aria-label=${msg("Pagination")}>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"

View File

@ -5,6 +5,7 @@ import {
ModalShowEvent,
} from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -115,7 +116,7 @@ export class ModalButton extends AKElement {
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close dialog"
aria-label=${msg("Close dialog")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

View File

@ -1,5 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -26,7 +27,7 @@ export class FormGroup extends AKElement {
expanded = false;
@property({ type: String, attribute: "aria-label", reflect: true })
ariaLabel = "Details";
ariaLabel = msg("Details");
static get styles(): CSSResult[] {
return [

View File

@ -101,7 +101,7 @@ export class APIDrawer extends AKElement {
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close"
aria-label=${msg("Close")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

View File

@ -52,7 +52,7 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
}
columns(): TableColumn[] {
const baseColumns = [new TableColumn("User", "user")];
const baseColumns = [new TableColumn(msg("User"), "user")];
// We don't check pagination since models shouldn't need to have that many permissions?
this.modelPermissions?.results.forEach((perm) => {
baseColumns.push(new TableColumn(perm.name, perm.codename));

View File

@ -52,7 +52,7 @@ export class UserAssignedObjectPermissionTable extends Table<UserAssignedObjectP
}
columns(): TableColumn[] {
const baseColumns = [new TableColumn("User", "user")];
const baseColumns = [new TableColumn(msg("User"), "user")];
// We don't check pagination since models shouldn't need to have that many permissions?
this.modelPermissions?.results.forEach((perm) => {
baseColumns.push(new TableColumn(perm.name, perm.codename));

View File

@ -2,6 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/sidebar/SidebarBrand";
import "@goauthentik/elements/sidebar/SidebarUser";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js";
@ -68,7 +69,7 @@ export class Sidebar extends AKElement {
render(): TemplateResult {
return html`<nav
class="pf-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
aria-label="Global"
aria-label=${msg("Global")}
>
<ak-sidebar-brand></ak-sidebar-brand>
<ul class="pf-c-nav__list">

View File

@ -4,6 +4,7 @@ import { MODAL_BUTTON_STYLES } from "@goauthentik/elements/buttons/ModalButton";
import { ModalShowEvent } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
import { Table } from "@goauthentik/elements/table/Table";
import { msg } from "@lit/localize";
import { CSSResult } from "lit";
import { TemplateResult, html } from "lit";
import { property } from "lit/decorators.js";
@ -92,7 +93,7 @@ export abstract class TableModal<T> extends Table<T> {
@click=${() => (this.open = false)}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close dialog"
aria-label=${msg("Close dialog")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

View File

@ -52,7 +52,7 @@ export class TablePagination extends AKElement {
</span>
</div>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<nav class="pf-c-pagination__nav" aria-label=${msg("Pagination")}>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"

View File

@ -43,7 +43,7 @@ export class RACLaunchEndpointModal extends TableModal<Endpoint> {
}
columns(): TableColumn[] {
return [new TableColumn("Name")];
return [new TableColumn(msg("Name"))];
}
row(item: Endpoint): TemplateResult[] {