From 5beea4624fb030385da1c74bcbe9d7832834f4bc Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Thu, 30 May 2024 10:43:38 +0900
Subject: [PATCH] web/admin: use chips to display permissions/scopes (#9912)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 .../components/ak-backchannel-input.ts            |  2 ++
 web/src/elements/oauth/UserAccessTokenList.ts     | 15 +++++++++++++--
 web/src/elements/oauth/UserRefreshTokenList.ts    | 15 +++++++++++++--
 web/src/elements/user/UserConsentList.ts          | 10 +++++++++-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/web/src/admin/applications/components/ak-backchannel-input.ts b/web/src/admin/applications/components/ak-backchannel-input.ts
index 0554317ab3..33b6ef7bb8 100644
--- a/web/src/admin/applications/components/ak-backchannel-input.ts
+++ b/web/src/admin/applications/components/ak-backchannel-input.ts
@@ -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";
diff --git a/web/src/elements/oauth/UserAccessTokenList.ts b/web/src/elements/oauth/UserAccessTokenList.ts
index 95fed88f09..a0c007234e 100644
--- a/web/src/elements/oauth/UserAccessTokenList.ts
+++ b/web/src/elements/oauth/UserAccessTokenList.ts
@@ -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>`,
         ];
     }
 }
diff --git a/web/src/elements/oauth/UserRefreshTokenList.ts b/web/src/elements/oauth/UserRefreshTokenList.ts
index 741a938a76..63f325c414 100644
--- a/web/src/elements/oauth/UserRefreshTokenList.ts
+++ b/web/src/elements/oauth/UserRefreshTokenList.ts
@@ -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>`,
         ];
     }
 }
diff --git a/web/src/elements/user/UserConsentList.ts b/web/src/elements/user/UserConsentList.ts
index 638e96521e..3d992faad7 100644
--- a/web/src/elements/user/UserConsentList.ts
+++ b/web/src/elements/user/UserConsentList.ts
@@ -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`-`}`,
         ];
     }
 }