web/admin: use chips to display permissions/scopes (#9912)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2024-05-30 10:43:38 +09:00
committed by GitHub
parent 50fffa72cc
commit 5beea4624f
4 changed files with 37 additions and 5 deletions

View File

@ -1,5 +1,7 @@
import "@goauthentik/admin/applications/ProviderSelectModal";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup";
import { TemplateResult, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";

View File

@ -2,6 +2,8 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-status-label";
import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup";
import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@ -86,12 +88,21 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
row(item: TokenModel): TemplateResult[] {
return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
html`<ak-status-label type="warning" ?good=${item.revoked}></ak-status-label>`,
html`<ak-status-label
type="warning"
?good=${!item.revoked}
good-label=${msg("No")}
bad-label=${msg("Yes")}
></ak-status-label>`,
html`${item.expires
? html`<div>${getRelativeTime(item.expires)}</div>
<small>${item.expires.toLocaleString()}</small>`
: msg("-")}`,
html`${item.scope.join(", ")}`,
html`<ak-chip-group>
${item.scope.map((scope) => {
return html`<ak-chip .removable=${false}>${scope}</ak-chip>`;
})}
</ak-chip-group>`,
];
}
}

View File

@ -2,6 +2,8 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-status-label";
import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup";
import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@ -87,12 +89,21 @@ export class UserOAuthRefreshTokenList extends Table<TokenModel> {
row(item: TokenModel): TemplateResult[] {
return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
html`<ak-status-label type="warning" ?good=${item.revoked}></ak-status-label>`,
html`<ak-status-label
type="warning"
?good=${!item.revoked}
good-label=${msg("No")}
bad-label=${msg("Yes")}
></ak-status-label>`,
html`${item.expires
? html`<div>${getRelativeTime(item.expires)}</div>
<small>${item.expires.toLocaleString()}</small>`
: msg("-")}`,
html`${item.scope.join(", ")}`,
html`<ak-chip-group>
${item.scope.map((scope) => {
return html`<ak-chip .removable=${false}>${scope}</ak-chip>`;
})}
</ak-chip-group>`,
];
}
}

View File

@ -1,6 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup";
import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@ -66,7 +68,13 @@ export class UserConsentList extends Table<UserConsent> {
? html`<div>${getRelativeTime(item.expires)}</div>
<small>${item.expires.toLocaleString()}</small>`
: msg("-")}`,
html`${item.permissions || "-"}`,
html`${item.permissions
? html`<ak-chip-group>
${item.permissions.split(" ").map((perm) => {
return html`<ak-chip .removable=${false}>${perm}</ak-chip>`;
})}
</ak-chip-group>`
: html`-`}`,
];
}
}