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.
This commit is contained in:
Ken Sternberg
@ -1,83 +0,0 @@
|
||||
import { AKElement } from "@goauthentik/app/elements/Base";
|
||||
import { PFSize } from "@goauthentik/app/elements/Spinner";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css";
|
||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
|
||||
|
||||
import { Application } from "@goauthentik/api";
|
||||
|
||||
@customElement("ak-app-icon")
|
||||
export class AppIcon extends AKElement {
|
||||
@property({ attribute: false })
|
||||
app?: Application;
|
||||
|
||||
@property()
|
||||
size?: PFSize;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFFAIcons,
|
||||
PFAvatar,
|
||||
css`
|
||||
:host {
|
||||
max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
|
||||
}
|
||||
:host([size="pf-m-lg"]) {
|
||||
--icon-height: 4rem;
|
||||
--icon-border: 0.25rem;
|
||||
}
|
||||
:host([size="pf-m-md"]) {
|
||||
--icon-height: 2rem;
|
||||
--icon-border: 0.125rem;
|
||||
}
|
||||
:host([size="pf-m-sm"]) {
|
||||
--icon-height: 1rem;
|
||||
--icon-border: 0.125rem;
|
||||
}
|
||||
.pf-c-avatar {
|
||||
--pf-c-avatar--BorderRadius: 0;
|
||||
--pf-c-avatar--Height: calc(
|
||||
var(--icon-height) + var(--icon-border) + var(--icon-border)
|
||||
);
|
||||
--pf-c-avatar--Width: calc(
|
||||
var(--icon-height) + var(--icon-border) + var(--icon-border)
|
||||
);
|
||||
}
|
||||
.icon {
|
||||
font-size: var(--icon-height);
|
||||
color: var(--ak-global--Color--100);
|
||||
padding: var(--icon-border);
|
||||
max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
|
||||
line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
|
||||
filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
|
||||
}
|
||||
div {
|
||||
height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.app) {
|
||||
return html`<div><i class="icon fas fa-question-circle"></i></div>`;
|
||||
}
|
||||
if (this.app?.metaIcon) {
|
||||
if (this.app.metaIcon.startsWith("fa://")) {
|
||||
const icon = this.app.metaIcon.replaceAll("fa://", "");
|
||||
return html`<div><i class="icon fas ${icon}"></i></div>`;
|
||||
}
|
||||
return html`<img
|
||||
class="icon pf-c-avatar"
|
||||
src="${ifDefined(this.app.metaIcon)}"
|
||||
alt="${msg("Application Icon")}"
|
||||
/>`;
|
||||
}
|
||||
return html`<span class="icon">${this.app?.name.charAt(0).toUpperCase()}</span>`;
|
||||
}
|
||||
}
|
||||
@ -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> ${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> ${msg("Edit")}
|
||||
</a>
|
||||
`
|
||||
: html``}
|
||||
</ak-expand>`
|
||||
: html``}
|
||||
${expandable ? this.renderExpansion(this.application) : nothing}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user