web: Fix disabled token icon buttons.

web/src/admin/tokens/TokenListPage.ts

@@ -11,7 +11,8 @@ import { aki } from "#common/api/client";
 import { formatIntentLabel } from "#common/labels";
 
 import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton";
-import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
+import { IconTokenEditButton } from "#elements/buttons/IconTokenEditButton";
+import { ModalInvokerButton } from "#elements/dialogs";
 import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
@@ -96,16 +97,7 @@ export class TokenListPage extends TablePage<Token> {
             Timestamp(item.expires && item.expiring ? item.expires : null),
             html`${formatIntentLabel(item.intent ?? IntentEnum.Api)}`,
             html`<div class="ak-c-table__actions">
-                ${!item.managed
-                    ? IconEditButton(TokenForm, item.identifier, item.identifier)
-                    : html`<button class="pf-c-button pf-m-plain" disabled type="button">
-                          <pf-tooltip
-                              position="top"
-                              content=${msg("Editing is disabled for managed tokens")}
-                          >
-                              <i class="fas fa-edit" aria-hidden="true"></i>
-                          </pf-tooltip>
-                      </button>`}
+                ${IconTokenEditButton(item)}
                 ${IconPermissionButton(item.identifier, {
                     model: ModelEnum.AuthentikCoreToken,
                     objectPk: item.pk,

web/src/elements/buttons/IconTokenEditButton.ts

@@ -0,0 +1,33 @@
+import { IconEditButton } from "#elements/dialogs/components/IconEditButton";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { TokenForm } from "#admin/tokens/TokenForm";
+
+import { Token } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { html } from "lit-html";
+import { guard } from "lit-html/directives/guard.js";
+
+function stopEventPropagation(event: Event): void {
+    event.stopPropagation();
+}
+
+export function IconTokenEditButton(token?: Token | null): SlottedTemplateResult {
+    return guard([token, token?.identifier, token?.managed], () => {
+        if (!token) {
+            return null;
+        }
+
+        if (token.managed) {
+            const label = msg("Managed tokens cannot be edited.");
+            return html`<pf-tooltip position="top" content=${label} @click=${stopEventPropagation}
+                ><button type="button" class="pf-c-button pf-m-plain" disabled aria-label=${label}>
+                    <i aria-hidden="true" class="fas fa-edit"></i>
+                </button>
+            </pf-tooltip>`;
+        }
+
+        return IconEditButton(TokenForm, token.identifier, token.identifier);
+    });
+}

web/src/elements/table/Table.css

@@ -69,6 +69,15 @@
     .pf-c-button:not(:has(i)):not(:first-child) {
         margin-inline-start: var(--pf-global--spacer--sm);
     }
+
+    pf-tooltip {
+        user-select: none;
+        cursor: help;
+
+        button:disabled {
+            opacity: 0.5;
+        }
+    }
 }
 
 td.pf-c-table__toggle:first-child > .pf-c-button {