habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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.
This commit is contained in:
Ken Sternberg
2023-09-13 10:16:24 -07:00
committed by GitHub
parent 58aa7ec623
commit 28702b3a25
16 changed files with 124 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/.eslintrc.precommit.json
View File

@ -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"
}
}

5
web/src/admin/admin-overview/cards/RecentEventsCard.ts
View File

@ -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>

2
web/src/admin/applications/ApplicationListPage.ts
View File

@ -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";

2
web/src/admin/applications/ApplicationViewPage.ts
View File

@ -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";

5
web/src/admin/events/EventListPage.ts
View File

@ -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>

5
web/src/admin/events/EventViewPage.ts
View File

@ -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>

8
web/src/admin/events/RuleForm.ts
View File

@ -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,
},
]}

4
web/src/admin/events/RuleListPage.ts
View File

@ -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)")}`,

76
web/src/admin/events/utils.ts
View File

@ -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");
}

18
web/src/admin/tokens/TokenListPage.ts
View File

@ -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>

58
web/src/common/labels.ts Normal file
View File

@ -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");

2
web/src/user/LibraryApplication/AppIcon.ts → web/src/components/ak-app-icon.ts
View File

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

4
web/src/elements/events/UserEvents.ts
View File

@ -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>

4
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -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">

69
web/src/user/LibraryApplication/index.ts
View File

@ -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;
if (rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) {
expandable = true;
}
if (this.application.metaPublisher !== "" || this.application.metaDescription !== "") {
expandable = true;
}
const expandable =
(rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser) ||
this.application.metaPublisher !== "" ||
this.application.metaDescription !== "";
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
? "pf-m-selectable pf-m-selected"
: ""}"
style=${this.background !== "" ? `background: ${this.background} !important` : ""}
class="pf-c-card pf-m-hoverable pf-m-compact ${classMap(classes)}"
style=${styleMap(styles)}
>
<div class="pf-c-card__header">
<a
@ -96,25 +119,7 @@ export class LibraryApplication extends AKElement {
>
</div>
<div class="expander"></div>
${expandable
? 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``}
${expandable ? this.renderExpansion(this.application) : nothing}
</div>`;
}
}

4
web/src/user/user-settings/tokens/UserTokenList.ts
View File

@ -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>