web: Detangling some circular dependencies in Admin and User (#6852)

* Web: Detangling some circular dependencies in Admin and User

Admin, User, and Flow should not dependend upon each other, at least
not in a circular way.  If Admin and User depend on Flow, that's
fine, but Flow should not correspondingly depend upon elements of
either; if they have something in common, let's put them in
`@goauthentik/common` or find some other smart place to store them.

This commit refactors the intentToLabel and actionToLabel functions
into `@goauthentik/common/labels` and converts them to static tables
for maintenance purposes.

* web: "Consistency is the hobgoblin of small minds" - Ralph Waldo Emerson

* web: I found these confusing to look at, so I added comments.

* web: remove admin-to-user component reference(s) (#6856)

There was only one: AppIcon.  This has been moved to `components`.

Touching the LibraryApplications page triggered a cyclomatic
complexity check.  Extracting the expansion block and streamlining
the class and style declarations with lit directives helped.

web/.eslintrc.precommit.json

@@ -23,6 +23,7 @@
         "quotes": ["error", "double", { "avoidEscape": true }],
         "semi": ["error", "always"],
         "@typescript-eslint/ban-ts-comment": "off",
-        "sonarjs/cognitive-complexity": ["error", 9]
+        "sonarjs/cognitive-complexity": ["error", 9],
+        "sonarjs/no-nested-template-literals": "off"
     }
 }

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -1,7 +1,8 @@
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel, EventGeo } from "@goauthentik/admin/events/utils";
+import { EventGeo } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
+import { actionToLabel } from "@goauthentik/common/labels";
 import { truncate } from "@goauthentik/common/utils";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -68,7 +69,7 @@ export class RecentEventsCard extends Table<Event> {
 
     row(item: EventWithContext): TemplateResult[] {
         return [
-            html`<div><a href="${`#/events/log/${item.pk}`}">${ActionToLabel(item.action)}</a></div>
+            html`<div><a href="${`#/events/log/${item.pk}`}">${actionToLabel(item.action)}</a></div>
                 <small>${item.app}</small>`,
             item.user?.username
                 ? html`<div>

web/src/admin/applications/ApplicationListPage.ts

@@ -3,6 +3,7 @@ import "@goauthentik/admin/applications/wizard/ApplicationWizard";
 import { PFSize } from "@goauthentik/app/elements/Spinner";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/components/ak-app-icon";
 import MDApplication from "@goauthentik/docs/core/applications.md";
 import "@goauthentik/elements/Markdown";
 import "@goauthentik/elements/buttons/SpinnerButton";
@@ -12,7 +13,6 @@ import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
-import "@goauthentik/user/LibraryApplication/AppIcon";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { msg } from "@lit/localize";

web/src/admin/applications/ApplicationViewPage.ts

@@ -4,13 +4,13 @@ import "@goauthentik/admin/applications/ApplicationForm";
 import "@goauthentik/admin/policies/BoundPoliciesList";
 import { PFSize } from "@goauthentik/app/elements/Spinner";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-app-icon";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
 import "@goauthentik/elements/PageHeader";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/events/ObjectChangelog";
-import "@goauthentik/user/LibraryApplication/AppIcon";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";

web/src/admin/events/EventListPage.ts

@@ -1,7 +1,8 @@
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel, EventGeo } from "@goauthentik/admin/events/utils";
+import { EventGeo } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
+import { actionToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
@@ -56,7 +57,7 @@ export class EventListPage extends TablePage<Event> {
 
     row(item: EventWithContext): TemplateResult[] {
         return [
-            html`<div>${ActionToLabel(item.action)}</div>
+            html`<div>${actionToLabel(item.action)}</div>
                 <small>${item.app}</small>`,
             item.user?.username
                 ? html`<div>

web/src/admin/events/EventViewPage.ts

@@ -1,7 +1,8 @@
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel, EventGeo } from "@goauthentik/admin/events/utils";
+import { EventGeo } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
+import { actionToLabel } from "@goauthentik/common/labels";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/PageHeader";
 
@@ -62,7 +63,7 @@ export class EventViewPage extends AKElement {
                                     </dt>
                                     <dd class="pf-c-description-list__description">
                                         <div class="pf-c-description-list__text">
-                                            ${ActionToLabel(this.event.action)}
+                                            ${actionToLabel(this.event.action)}
                                         </div>
                                     </dd>
                                 </div>

web/src/admin/events/RuleForm.ts

@@ -1,5 +1,5 @@
-import { SeverityToLabel } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { severityToLabel } from "@goauthentik/common/labels";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/Radio";
@@ -125,16 +125,16 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                 <ak-radio
                     .options=${[
                         {
-                            label: SeverityToLabel(SeverityEnum.Alert),
+                            label: severityToLabel(SeverityEnum.Alert),
                             value: SeverityEnum.Alert,
                             default: true,
                         },
                         {
-                            label: SeverityToLabel(SeverityEnum.Warning),
+                            label: severityToLabel(SeverityEnum.Warning),
                             value: SeverityEnum.Warning,
                         },
                         {
-                            label: SeverityToLabel(SeverityEnum.Notice),
+                            label: severityToLabel(SeverityEnum.Notice),
                             value: SeverityEnum.Notice,
                         },
                     ]}

web/src/admin/events/RuleListPage.ts

@@ -1,7 +1,7 @@
 import "@goauthentik/admin/events/RuleForm";
-import { SeverityToLabel } from "@goauthentik/admin/events/utils";
 import "@goauthentik/admin/policies/BoundPoliciesList";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { severityToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@@ -83,7 +83,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
     row(item: NotificationRule): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${SeverityToLabel(item.severity)}`,
+            html`${severityToLabel(item.severity)}`,
             html`${item.groupObj
                 ? html`<a href="#/identity/groups/${item.groupObj.pk}">${item.groupObj.name}</a>`
                 : msg("None (rule disabled)")}`,

web/src/admin/events/utils.ts

@@ -1,11 +1,8 @@
 import { EventWithContext } from "@goauthentik/common/events";
 import { KeyUnknown } from "@goauthentik/elements/forms/Form";
 
-import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 
-import { EventActions, SeverityEnum } from "@goauthentik/api";
-
 export function EventGeo(event: EventWithContext): TemplateResult {
     let geo: KeyUnknown | undefined = undefined;
     if (Object.hasOwn(event.context, "geo")) {
@@ -17,76 +14,3 @@ export function EventGeo(event: EventWithContext): TemplateResult {
     }
     return html``;
 }
-
-export function ActionToLabel(action?: EventActions): string {
-    if (!action) return "";
-    switch (action) {
-        case EventActions.Login:
-            return msg("Login");
-        case EventActions.LoginFailed:
-            return msg("Failed login");
-        case EventActions.Logout:
-            return msg("Logout");
-        case EventActions.UserWrite:
-            return msg("User was written to");
-        case EventActions.SuspiciousRequest:
-            return msg("Suspicious request");
-        case EventActions.PasswordSet:
-            return msg("Password set");
-        case EventActions.SecretView:
-            return msg("Secret was viewed");
-        case EventActions.SecretRotate:
-            return msg("Secret was rotated");
-        case EventActions.InvitationUsed:
-            return msg("Invitation used");
-        case EventActions.AuthorizeApplication:
-            return msg("Application authorized");
-        case EventActions.SourceLinked:
-            return msg("Source linked");
-        case EventActions.ImpersonationStarted:
-            return msg("Impersonation started");
-        case EventActions.ImpersonationEnded:
-            return msg("Impersonation ended");
-        case EventActions.FlowExecution:
-            return msg("Flow execution");
-        case EventActions.PolicyExecution:
-            return msg("Policy execution");
-        case EventActions.PolicyException:
-            return msg("Policy exception");
-        case EventActions.PropertyMappingException:
-            return msg("Property Mapping exception");
-        case EventActions.SystemTaskExecution:
-            return msg("System task execution");
-        case EventActions.SystemTaskException:
-            return msg("System task exception");
-        case EventActions.SystemException:
-            return msg("General system exception");
-        case EventActions.ConfigurationError:
-            return msg("Configuration error");
-        case EventActions.ModelCreated:
-            return msg("Model created");
-        case EventActions.ModelUpdated:
-            return msg("Model updated");
-        case EventActions.ModelDeleted:
-            return msg("Model deleted");
-        case EventActions.EmailSent:
-            return msg("Email sent");
-        case EventActions.UpdateAvailable:
-            return msg("Update available");
-        default:
-            return action;
-    }
-}
-
-export function SeverityToLabel(severity: SeverityEnum | null | undefined): string {
-    if (!severity) return msg("Unknown severity");
-    switch (severity) {
-        case SeverityEnum.Alert:
-            return msg("Alert");
-        case SeverityEnum.Notice:
-            return msg("Notice");
-        case SeverityEnum.Warning:
-            return msg("Warning");
-    }
-    return msg("Unknown severity");
-}

web/src/admin/tokens/TokenListPage.ts

@@ -1,5 +1,6 @@
 import "@goauthentik/admin/tokens/TokenForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { intentToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -17,21 +18,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { CoreApi, IntentEnum, Token } from "@goauthentik/api";
 
-export function IntentToLabel(intent: IntentEnum): string {
-    switch (intent) {
-        case IntentEnum.Api:
-            return msg("API Access");
-        case IntentEnum.AppPassword:
-            return msg("App password");
-        case IntentEnum.Recovery:
-            return msg("Recovery");
-        case IntentEnum.Verification:
-            return msg("Verification");
-        case IntentEnum.UnknownDefaultOpenApi:
-            return msg("Unknown intent");
-    }
-}
-
 @customElement("ak-token-list")
 export class TokenListPage extends TablePage<Token> {
     searchEnabled(): boolean {
@@ -121,7 +107,7 @@ export class TokenListPage extends TablePage<Token> {
                 ${item.expiring ? msg("Yes") : msg("No")}
             </ak-label>`,
             html`${item.expiring ? item.expires?.toLocaleString() : msg("-")}`,
-            html`${IntentToLabel(item.intent || IntentEnum.Api)}`,
+            html`${intentToLabel(item.intent ?? IntentEnum.Api)}`,
             html`
                 ${!item.managed
                     ? html`<ak-forms-modal>

web/src/common/labels.ts

@@ -0,0 +1,58 @@
+import { msg } from "@lit/localize";
+
+import { EventActions, IntentEnum, SeverityEnum } from "@goauthentik/api";
+
+/* Various tables in the API for which we need to supply labels */
+
+export const intentEnumToLabel = new Map<IntentEnum, string>([
+    [IntentEnum.Api, msg("API Access")],
+    [IntentEnum.AppPassword, msg("App password")],
+    [IntentEnum.Recovery, msg("Recovery")],
+    [IntentEnum.Verification, msg("Verification")],
+    [IntentEnum.UnknownDefaultOpenApi, msg("Unknown intent")],
+]);
+
+export const intentToLabel = (intent: IntentEnum) => intentEnumToLabel.get(intent);
+
+export const eventActionToLabel = new Map<EventActions | undefined, string>([
+    [EventActions.Login, msg("Login")],
+    [EventActions.LoginFailed, msg("Failed login")],
+    [EventActions.Logout, msg("Logout")],
+    [EventActions.UserWrite, msg("User was written to")],
+    [EventActions.SuspiciousRequest, msg("Suspicious request")],
+    [EventActions.PasswordSet, msg("Password set")],
+    [EventActions.SecretView, msg("Secret was viewed")],
+    [EventActions.SecretRotate, msg("Secret was rotated")],
+    [EventActions.InvitationUsed, msg("Invitation used")],
+    [EventActions.AuthorizeApplication, msg("Application authorized")],
+    [EventActions.SourceLinked, msg("Source linked")],
+    [EventActions.ImpersonationStarted, msg("Impersonation started")],
+    [EventActions.ImpersonationEnded, msg("Impersonation ended")],
+    [EventActions.FlowExecution, msg("Flow execution")],
+    // These are different: look closely.
+    [EventActions.PolicyExecution, msg("Policy execution")],
+    [EventActions.PolicyException, msg("Policy exception")],
+    [EventActions.PropertyMappingException, msg("Property Mapping exception")],
+    // These are different: look closely.
+    [EventActions.SystemTaskExecution, msg("System task execution")],
+    [EventActions.SystemTaskException, msg("System task exception")],
+    [EventActions.SystemException, msg("General system exception")],
+    [EventActions.ConfigurationError, msg("Configuration error")],
+    [EventActions.ModelCreated, msg("Model created")],
+    [EventActions.ModelUpdated, msg("Model updated")],
+    [EventActions.ModelDeleted, msg("Model deleted")],
+    [EventActions.EmailSent, msg("Email sent")],
+    [EventActions.UpdateAvailable, msg("Update available")],
+]);
+
+export const actionToLabel = (action?: EventActions): string =>
+    eventActionToLabel.get(action) ?? action ?? "";
+
+export const severityEnumToLabel = new Map<SeverityEnum | null | undefined, string>([
+    [SeverityEnum.Alert, msg("Alert")],
+    [SeverityEnum.Notice, msg("Notice")],
+    [SeverityEnum.Warning, msg("Warning")],
+]);
+
+export const severityToLabel = (severity: SeverityEnum | null | undefined) =>
+    severityEnumToLabel.get(severity) ?? msg("Unknown severity");

web/src/components/ak-app-icon.ts

@@ -81,3 +81,5 @@ export class AppIcon extends AKElement {
         return html`<span class="icon">${this.app?.name.charAt(0).toUpperCase()}</span>`;
     }
 }
+
+export default AppIcon;

web/src/elements/events/UserEvents.ts

@@ -1,8 +1,8 @@
 import "@goauthentik/admin/events/EventInfo";
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
+import { actionToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -47,7 +47,7 @@ export class UserEvents extends Table<Event> {
 
     row(item: EventWithContext): TemplateResult[] {
         return [
-            html`${ActionToLabel(item.action)}`,
+            html`${actionToLabel(item.action)}`,
             html`<div>${item.user?.username}</div>
                 ${item.user.on_behalf_of
                     ? html`<small>

web/src/elements/notifications/NotificationDrawer.ts

@@ -1,6 +1,6 @@
-import { ActionToLabel } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/common/constants";
+import { actionToLabel } from "@goauthentik/common/labels";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { me } from "@goauthentik/common/users";
 import { AKElement } from "@goauthentik/elements/Base";
@@ -90,7 +90,7 @@ export class NotificationDrawer extends AKElement {
                     <i class="fas fa-info-circle" aria-hidden="true"></i>
                 </span>
                 <h2 class="pf-c-notification-drawer__list-item-header-title">
-                    ${ActionToLabel(item.event?.action)}
+                    ${actionToLabel(item.event?.action)}
                 </h2>
             </div>
             <div class="pf-c-notification-drawer__list-item-action">

web/src/user/LibraryApplication/index.ts

@@ -1,14 +1,16 @@
 import { PFSize } from "@goauthentik/app/elements/Spinner";
 import { truncateWords } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-app-icon";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/Expand";
-import "@goauthentik/user/LibraryApplication/AppIcon";
 import { UserInterface } from "@goauthentik/user/UserInterface";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -62,23 +64,44 @@ export class LibraryApplication extends AKElement {
         ];
     }
 
+    renderExpansion(application: Application) {
+        const me = rootInterface<UserInterface>()?.me;
+
+        return html`<ak-expand textOpen=${msg("Less details")} textClosed=${msg("More details")}>
+            <div class="pf-c-content">
+                <small>${application.metaPublisher}</small>
+            </div>
+            ${truncateWords(application.metaDescription || "", 10)}
+            ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
+                ? html`
+                      <a
+                          class="pf-c-button pf-m-control pf-m-small pf-m-block"
+                          href="/if/admin/#/core/applications/${application?.slug}"
+                      >
+                          <i class="fas fa-edit"></i>&nbsp;${msg("Edit")}
+                      </a>
+                  `
+                : html``}
+        </ak-expand>`;
+    }
+
     render(): TemplateResult {
         if (!this.application) {
             return html`<ak-spinner></ak-spinner>`;
         }
+
         const me = rootInterface<UserInterface>()?.me;
-        let expandable = false;
+        const expandable =
-        if (rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) {
+            (rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) ||
-            expandable = true;
+            this.application.metaPublisher !== "" ||
-        }
+            this.application.metaDescription !== "";
-        if (this.application.metaPublisher !== "" || this.application.metaDescription !== "") {
+
-            expandable = true;
+        const classes = { "pf-m-selectable pf-m-selected": this.selected };
-        }
+        const styles = this.background ? { background: this.background } : {};
+
         return html` <div
-            class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected
+            class="pf-c-card pf-m-hoverable pf-m-compact ${classMap(classes)}"
-                ? "pf-m-selectable pf-m-selected"
+            style=${styleMap(styles)}
-                : ""}"
-            style=${this.background !== "" ? `background: ${this.background} !important` : ""}
         >
             <div class="pf-c-card__header">
                 <a
@@ -96,25 +119,7 @@ export class LibraryApplication extends AKElement {
                 >
             </div>
             <div class="expander"></div>
-            ${expandable
+            ${expandable ? this.renderExpansion(this.application) : nothing}
-                ? html`<ak-expand textOpen=${msg("Less details")} textClosed=${msg("More details")}>
-                      <div class="pf-c-content">
-                          <small>${this.application.metaPublisher}</small>
-                      </div>
-                      ${truncateWords(this.application.metaDescription || "", 10)}
-                      ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit &&
-                      me?.user.isSuperuser
-                          ? html`
-                                <a
-                                    class="pf-c-button pf-m-control pf-m-small pf-m-block"
-                                    href="/if/admin/#/core/applications/${this.application?.slug}"
-                                >
-                                    <i class="fas fa-edit"></i>&nbsp;${msg("Edit")}
-                                </a>
-                            `
-                          : html``}
-                  </ak-expand>`
-                : html``}
         </div>`;
     }
 }

web/src/user/user-settings/tokens/UserTokenList.ts

@@ -1,5 +1,5 @@
-import { IntentToLabel } from "@goauthentik/admin/tokens/TokenListPage";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { intentToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import { me } from "@goauthentik/common/users";
 import { PFColor } from "@goauthentik/elements/Label";
@@ -119,7 +119,7 @@ export class UserTokenList extends Table<Token> {
                             </dt>
                             <dd class="pf-c-description-list__description">
                                 <div class="pf-c-description-list__text">
-                                    ${IntentToLabel(item.intent || IntentEnum.Api)}
+                                    ${intentToLabel(item.intent ?? IntentEnum.Api)}
                                 </div>
                             </dd>
                         </div>