web: Replace lingui.js with lit-localize (#5761)

* \#\# Details

web: replace lingui with lit/localize

\#\# Changes

This rather massive shift replaces the lingui and `t()` syntax with lit-localize, XLIFF, and the `msg()`
syntax used by lit-localize.  90% of this work was mechanized; simple perl scripts found and replaced
all uses of `t()` with the appropriate corresponding syntax for `msg()` and `msg(str())`.

The XLIFF files were auto-generated from the PO files.  They have not been audited, and they should be
checked over by professional translators.  The actual _strings_ have not been changed, but as this was
a mechanized change there is always the possibility of mis-translation-- not by the translator, but by
the script.

* web: revise lit/localize: fix two installation issues.

* web: revise localization

TL;DR:

- Replaced all of Lingui's `t()` syntax with `msg()` syntax.
- Mechanically (i.e with a script) converted all of the PO files to XLIFF files
- Refactored the localization code to be a bit smarter:
  - the function `getBestMatchLocale` takes the locale lists and a requested locale, and returns the
    first match of:
    - The locale's code exactly matches the requested locale
    - The locale code exactly matches the prefix of the requested locale (i.e the "en" part of "en-US")
    - the locale code's prefix exactly matches the prefix of the requested locale
    This function is passed to lit-locate's `loadLocale()`.
  - `activateLocale()` just calls `loadLocale()` now.
  - `autodetectLanguage` searches the following, and picks the first that returns a valid locale
    object, before passing it to `loadLocale()`:
    - The User's settings
    - A `?locale=` component found in `window.location.search`
    - The `window.navigator.language` field
    - English

The `msg()` only runs when it's run.  This seems obvious, but it means that you cannot cache
strings at load time; they must be kept inside functions that are re-run so that the `msg()` engine
can look up the strings in the preferred language of the user at that moment.

You can use thunks-of-strings if you really need them that way.

* Including the 'xliff-converter' in case anyone wants to review it.

* The xliff-converter is tagged as 'xliff-converter', but has been
deleted.

\#\# Details

-   Resolves #5171

\#\# Changes

\#\#\# New Features

-   Adds a "Add an Application" to the LibraryView if there are no applications and the user is an administrator.

\#\#\# Breaking Changes

-   Adds breaking change which causes \<issue\>.

\#\# Checklist

-   [ ] Local tests pass (`ak test authentik/`)
-   [ ] The code has been formatted (`make lint-fix`)

If an API change has been made

-   [ ] The API schema has been updated (`make gen-build`)

If changes to the frontend have been made

-   [ ] The code has been formatted (`make web`)
-   [ ] The translation files have been updated (`make i18n-extract`)

If applicable

-   [ ] The documentation has been updated
-   [ ] The documentation has been formatted (`make website`)

* web: fix redundant locales for zh suite.

* web: prettier pass for locale update

* web: localization moderization

Changed the names of the lit-localize commands to make it clear they're
part of the localization effort, and not just "build" and "extract".

* update transifex config

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix package lock?

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use build not compile

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: conversion to lit-localize

The CI produced a list of problems that I hadn't caught earlier,
due to a typo ("localize build" is correct, "localize compile" is
not) I had left in package.json.  They were minor and linty, but
it was still wise to fix them.

* web: replace lingui with lit/locale

This commit fixes some minor linting issues that were hidden by a typo in package.json.  The
issues were not apparently problematic from a Javascript point of view, but they pointed
to sloppy thinking in the progression of types through the system, so I cleaned them
up and formalized the types from LocaleModule to AkLocale.

* web: replace lingui with lit/localize

One problem that has repeatedly come up is that localize's templates do not produce
JavaScript that conforms with our shop style.  I've replaced `build-locale` with
a two-step that builds the locale *and* ensures that it conforms to the shop style
via `prettier` every time.

* web: replace lingui with lit-locale

This commit applies the most recent bundle of translations to the
new lit-locale aspect component.  It also revises the algorithm
for *finding* the correct locale, replacing the complex fall-back
with some rather straightforward regular expressions.

In the case of Chinese, the fallback comes at the end of the
selection list, which may not be, er, politically valuable
(since Taiwan and Hong Kong come before, being exceptions that
need to be tested).  If we need a different order for presentation,
that'll be a future feature.

* web: replace lingui with lit/locale

Well, that was embarassing.

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
2023-06-02 08:08:36 -07:00
committed by GitHub
parent afa8a505ee
commit 44a057ed9c
273 changed files with 64104 additions and 117217 deletions

View File

@ -14,8 +14,7 @@ import "@goauthentik/elements/PageHeader";
import "@goauthentik/elements/cards/AggregatePromiseCard";
import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@ -70,8 +69,8 @@ export class AdminOverviewPage extends AKElement {
if (this.user?.user.name) {
name = this.user.user.name;
}
return html`<ak-page-header icon="" header="" description=${t`General system status`}>
<span slot="header"> ${t`Welcome, ${name}.`} </span>
return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
<span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
</ak-page-header>
<section class="pf-c-page__main-section">
<div class="pf-l-grid pf-m-gutter">
@ -82,7 +81,7 @@ export class AdminOverviewPage extends AKElement {
>
<ak-aggregate-card
icon="fa fa-share"
header=${t`Quick actions`}
header=${msg("Quick actions")}
.isCenter=${false}
>
<ul class="pf-c-list">
@ -92,12 +91,12 @@ export class AdminOverviewPage extends AKElement {
href=${paramURL("/core/applications", {
createForm: true,
})}
>${t`Create a new application`}</a
>${msg("Create a new application")}</a
>
</li>
<li>
<a class="pf-u-mb-xl" href=${paramURL("/events/log")}
>${t`Check the logs`}</a
>${msg("Check the logs")}</a
>
</li>
<li>
@ -105,12 +104,12 @@ export class AdminOverviewPage extends AKElement {
class="pf-u-mb-xl"
target="_blank"
href="https://goauthentik.io/integrations/"
>${t`Explore integrations`}</a
>${msg("Explore integrations")}</a
>
</li>
<li>
<a class="pf-u-mb-xl" href=${paramURL("/identity/users")}
>${t`Manage users`}</a
>${msg("Manage users")}</a
>
</li>
<li>
@ -121,7 +120,7 @@ export class AdminOverviewPage extends AKElement {
".",
"",
)}"
>${t`Check release notes`}</a
>${msg("Check release notes")}</a
>
</li>
</ul>
@ -132,7 +131,7 @@ export class AdminOverviewPage extends AKElement {
>
<ak-aggregate-card
icon="pf-icon pf-icon-zone"
header=${t`Outpost status`}
header=${msg("Outpost status")}
headerLink="#/outpost/outposts"
>
<ak-admin-status-chart-outpost></ak-admin-status-chart-outpost>
@ -141,7 +140,7 @@ export class AdminOverviewPage extends AKElement {
<div
class="pf-l-grid__item pf-m-12-col pf-m-8-col-on-xl pf-m-4-col-on-2xl graph-container"
>
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`Sync status`}>
<ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}>
<ak-admin-status-chart-sync></ak-admin-status-chart-sync>
</ak-aggregate-card>
</div>
@ -176,7 +175,9 @@ export class AdminOverviewPage extends AKElement {
>
<ak-aggregate-card
icon="pf-icon pf-icon-server"
header=${t`Logins and authorizations over the last week (per 8 hours)`}
header=${msg(
"Logins and authorizations over the last week (per 8 hours)",
)}
>
<ak-charts-admin-login-authorization></ak-charts-admin-login-authorization>
</ak-aggregate-card>
@ -186,7 +187,7 @@ export class AdminOverviewPage extends AKElement {
>
<ak-aggregate-card
icon="pf-icon pf-icon-server"
header=${t`Apps with most usage`}
header=${msg("Apps with most usage")}
>
<ak-top-applications-table></ak-top-applications-table>
</ak-aggregate-card>

View File

@ -3,8 +3,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/PageHeader";
import "@goauthentik/elements/cards/AggregatePromiseCard";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js";
@ -42,14 +41,14 @@ export class DashboardUserPage extends AKElement {
}
render(): TemplateResult {
return html`<ak-page-header icon="pf-icon pf-icon-user" header=${t`User statistics`}>
return html`<ak-page-header icon="pf-icon pf-icon-user" header=${msg("User statistics")}>
</ak-page-header>
<section class="pf-c-page__main-section">
<div class="pf-l-grid pf-m-gutter">
<div
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
>
<ak-aggregate-card header=${t`Users created per day in the last month`}>
<ak-aggregate-card header=${msg("Users created per day in the last month")}>
<ak-charts-admin-model-per-day
.query=${{
context__model__app: "authentik_core",
@ -66,7 +65,7 @@ export class DashboardUserPage extends AKElement {
<div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
>
<ak-aggregate-card header=${t`Logins per day in the last month`}>
<ak-aggregate-card header=${msg("Logins per day in the last month")}>
<ak-charts-admin-model-per-day action=${EventActions.Login}>
</ak-charts-admin-model-per-day>
</ak-aggregate-card>
@ -74,7 +73,7 @@ export class DashboardUserPage extends AKElement {
<div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
>
<ak-aggregate-card header=${t`Failed Logins per day in the last month`}>
<ak-aggregate-card header=${msg("Failed Logins per day in the last month")}>
<ak-charts-admin-model-per-day action=${EventActions.LoginFailed}>
</ak-charts-admin-model-per-day>
</ak-aggregate-card>

View File

@ -2,8 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Spinner";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -48,8 +47,8 @@ export class TopApplicationsTable extends AKElement {
return html`<table class="pf-c-table pf-m-compact" role="grid">
<thead>
<tr role="row">
<th role="columnheader" scope="col">${t`Application`}</th>
<th role="columnheader" scope="col">${t`Logins`}</th>
<th role="columnheader" scope="col">${msg("Application")}</th>
<th role="columnheader" scope="col">${msg("Logins")}</th>
<th role="columnheader" scope="col"></th>
</tr>
</thead>

View File

@ -10,8 +10,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -53,17 +52,17 @@ export class RecentEventsCard extends Table<Event> {
columns(): TableColumn[] {
return [
new TableColumn(t`Action`, "action"),
new TableColumn(t`User`, "user"),
new TableColumn(t`Creation Date`, "created"),
new TableColumn(t`Client IP`, "client_ip"),
new TableColumn(t`Tenant`, "tenant_name"),
new TableColumn(msg("Action"), "action"),
new TableColumn(msg("User"), "user"),
new TableColumn(msg("Creation Date"), "created"),
new TableColumn(msg("Client IP"), "client_ip"),
new TableColumn(msg("Tenant"), "tenant_name"),
];
}
renderToolbar(): TemplateResult {
return html`<div class="pf-c-card__title">
<i class="pf-icon pf-icon-catalog"></i>&nbsp;${t`Recent events`}
<i class="pf-icon pf-icon-catalog"></i>&nbsp;${msg("Recent events")}
</div>`;
}
@ -80,21 +79,21 @@ export class RecentEventsCard extends Table<Event> {
${item.user.on_behalf_of
? html`<small>
<a href="#/identity/users/${item.user.on_behalf_of.pk}"
>${t`On behalf of ${item.user.on_behalf_of.username}`}</a
>${msg(str`On behalf of ${item.user.on_behalf_of.username}`)}</a
>
</small>`
: html``}`
: html`-`,
html`<span>${item.created?.toLocaleString()}</span>`,
html` <div>${item.clientIp || t`-`}</div>
html` <div>${item.clientIp || msg("-")}</div>
<small>${EventGeo(item)}</small>`,
html`<span>${item.tenant?.name || t`-`}</span>`,
html`<span>${item.tenant?.name || msg("-")}</span>`,
];
}
renderEmpty(): TemplateResult {
return super.renderEmpty(html`<ak-empty-state header=${t`No Events found.`}>
<div slot="body">${t`No matching events could be found.`}</div>
return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
<div slot="body">${msg("No matching events could be found.")}</div>
</ak-empty-state>`);
}
}

View File

@ -4,8 +4,7 @@ import {
} from "@goauthentik/admin/admin-overview/cards/AdminStatusCard";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@ -52,37 +51,37 @@ export class SystemStatusCard extends AdminStatusCard<System> {
getStatus(value: System): Promise<AdminStatus> {
if (value.embeddedOutpostHost === "") {
this.statusSummary = t`Warning`;
this.statusSummary = msg("Warning");
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle pf-m-warning",
message: html`${t`Embedded outpost is not configured correctly.`}
<a href="#/outpost/outposts">${t`Check outposts.`}</a>`,
message: html`${msg("Embedded outpost is not configured correctly.")}
<a href="#/outpost/outposts">${msg("Check outposts.")}</a>`,
});
}
if (!value.httpIsSecure && document.location.protocol === "https:") {
this.statusSummary = t`Warning`;
this.statusSummary = msg("Warning");
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle pf-m-warning",
message: html`${t`HTTPS is not detected correctly`}`,
message: html`${msg("HTTPS is not detected correctly")}`,
});
}
const timeDiff = value.serverTime.getTime() - (this.now || new Date()).getTime();
if (timeDiff > 5000 || timeDiff < -5000) {
this.statusSummary = t`Warning`;
this.statusSummary = msg("Warning");
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle pf-m-warning",
message: html`${t`Server and client are further than 5 seconds apart.`}`,
message: html`${msg("Server and client are further than 5 seconds apart.")}`,
});
}
this.statusSummary = t`OK`;
this.statusSummary = msg("OK");
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle pf-m-success",
message: html`${t`Everything is ok.`}`,
message: html`${msg("Everything is ok.")}`,
});
}
renderHeader(): TemplateResult {
return html`${t`System status`}`;
return html`${msg("System status")}`;
}
renderValue(): TemplateResult {

View File

@ -4,8 +4,7 @@ import {
} from "@goauthentik/admin/admin-overview/cards/AdminStatusCard";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
@ -24,23 +23,23 @@ export class VersionStatusCard extends AdminStatusCard<Version> {
if (value.buildHash) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle pf-m-success",
message: html`${t`Based on ${value.versionCurrent}`}`,
message: html`${msg(str`Based on ${value.versionCurrent}`)}`,
});
}
if (value.outdated) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle pf-m-warning",
message: html`${t`${value.versionLatest} is available!`}`,
message: html`${msg(str`${value.versionLatest} is available!`)}`,
});
}
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle pf-m-success",
message: html`${t`Up-to-date!`}`,
message: html`${msg("Up-to-date!")}`,
});
}
renderHeader(): TemplateResult {
return html`${t`Version`}`;
return html`${msg("Version")}`;
}
renderValue(): TemplateResult {

View File

@ -4,8 +4,7 @@ import {
} from "@goauthentik/admin/admin-overview/cards/AdminStatusCard";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
@ -22,14 +21,14 @@ export class WorkersStatusCard extends AdminStatusCard<number> {
}
renderHeader(): TemplateResult {
return html`${t`Workers`}`;
return html`${msg("Workers")}`;
}
getStatus(value: number): Promise<AdminStatus> {
if (value < 1) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-times-circle pf-m-danger",
message: html`${t`No workers connected. Background tasks will not run.`}`,
message: html`${msg("No workers connected. Background tasks will not run.")}`,
});
} else {
return Promise.resolve<AdminStatus>({

View File

@ -2,8 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart, RGBAColor } from "@goauthentik/elements/charts/Chart";
import { ChartData, Tick } from "chart.js";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { customElement } from "lit/decorators.js";
import { AdminApi, LoginMetrics } from "@goauthentik/api";
@ -18,14 +17,14 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
const valueStamp = ticks[index];
const delta = Date.now() - valueStamp.value;
const ago = Math.round(delta / 1000 / 3600 / 24);
return t`${ago} day(s) ago`;
return msg(str`${ago} day(s) ago`);
}
getChartData(data: LoginMetrics): ChartData {
return {
datasets: [
{
label: t`Authorizations`,
label: msg("Authorizations"),
backgroundColor: new RGBAColor(43, 154, 243, 0.5).toString(),
borderColor: new RGBAColor(43, 154, 243, 1).toString(),
spanGaps: true,
@ -40,7 +39,7 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
}),
},
{
label: t`Failed Logins`,
label: msg("Failed Logins"),
backgroundColor: new RGBAColor(201, 24, 11, 0.5).toString(),
borderColor: new RGBAColor(201, 24, 11, 1).toString(),
spanGaps: true,
@ -55,7 +54,7 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
}),
},
{
label: t`Successful Logins`,
label: msg("Successful Logins"),
backgroundColor: new RGBAColor(62, 134, 53, 0.5).toString(),
borderColor: new RGBAColor(62, 134, 53, 1).toString(),
spanGaps: true,

View File

@ -2,8 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart } from "@goauthentik/elements/charts/Chart";
import { ChartData, Tick } from "chart.js";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { customElement, property } from "lit/decorators.js";
import { Coordinate, EventActions, EventsApi } from "@goauthentik/api";
@ -27,14 +26,14 @@ export class AdminModelPerDay extends AKChart<Coordinate[]> {
const valueStamp = ticks[index];
const delta = Date.now() - valueStamp.value;
const ago = Math.round(delta / 1000 / 3600 / 24);
return t`${ago} days ago`;
return msg(str`${ago} days ago`);
}
getChartData(data: Coordinate[]): ChartData {
return {
datasets: [
{
label: t`Objects created`,
label: msg("Objects created"),
backgroundColor: "rgba(189, 229, 184, .5)",
spanGaps: true,
data:

View File

@ -4,8 +4,7 @@ import { AKChart } from "@goauthentik/elements/charts/Chart";
import "@goauthentik/elements/forms/ConfirmationForm";
import { ChartData, ChartOptions } from "chart.js";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { customElement } from "lit/decorators.js";
import { OutpostsApi } from "@goauthentik/api";
@ -62,7 +61,7 @@ export class OutpostStatusChart extends AKChart<SyncStatus[]> {
getChartData(data: SyncStatus[]): ChartData {
return {
labels: [t`Healthy outposts`, t`Outdated outposts`, t`Unhealthy outposts`],
labels: [msg("Healthy outposts"), msg("Outdated outposts"), msg("Unhealthy outposts")],
datasets: data.map((d) => {
return {
backgroundColor: ["#3e8635", "#C9190B", "#2b9af3"],

View File

@ -3,8 +3,7 @@ import { AKChart } from "@goauthentik/elements/charts/Chart";
import "@goauthentik/elements/forms/ConfirmationForm";
import { ChartData, ChartOptions } from "chart.js";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { customElement } from "lit/decorators.js";
import { ProvidersApi, SourcesApi, TaskStatusEnum } from "@goauthentik/api";
@ -74,7 +73,7 @@ export class LDAPSyncStatusChart extends AKChart<SyncStatus[]> {
failed: metrics.failed,
unsynced: sources.pagination.count === 0 ? 1 : metrics.unsynced,
total: sources.pagination.count,
label: t`LDAP Source`,
label: msg("LDAP Source"),
};
}
@ -114,7 +113,7 @@ export class LDAPSyncStatusChart extends AKChart<SyncStatus[]> {
failed: metrics.failed,
unsynced: providers.pagination.count === 0 ? 1 : metrics.unsynced,
total: providers.pagination.count,
label: t`SCIM Provider`,
label: msg("SCIM Provider"),
};
}
@ -127,7 +126,7 @@ export class LDAPSyncStatusChart extends AKChart<SyncStatus[]> {
getChartData(data: SyncStatus[]): ChartData {
return {
labels: [t`Healthy`, t`Failed`, t`Unsynced / N/A`],
labels: [msg("Healthy"), msg("Failed"), msg("Unsynced / N/A")],
datasets: data.map((d) => {
return {
backgroundColor: ["#3e8635", "#C9190B", "#2b9af3"],