\#\# Details

kensternberg-authentik · BeryJu · commit 83807f263cd7 · 2023-05-22T20:26:56.000+02:00
- web: refactor LibraryPage, resolves #5171 \#\# Changes Some changes found in code review, including an embarassing failure to both remove the old internal accessor and propagate the new one for "isAdmin". A pattern is emerging that a LitComponent class should consist of: - styles - properties - states - queries - other object fields - constructor() - connectedCallBack() - disconnectedCallBack() - event listeners - callback helpers - render helpers - render() ... in that order.
diff --git a/web/src/user/LibraryPage/ApplicationEmptyState.ts b/web/src/user/LibraryPage/ApplicationEmptyState.ts
@@ -1,52 +1,45 @@
-import { me } from "@goauthentik/common/users";
 import { AKElement } from "@goauthentik/elements/Base";
 import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
 
 import { t } from "@lingui/macro";
 
 import { css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
 
-import { SessionUser } from "@goauthentik/api";
-
 /**
  * Library Page Application List Empty
  *
  * Display a message if there are no applications defined in the current instance. If the user is an
  * administrator, provide a link to the "Create a new application" page.
  */
 
+const styles = [
+    PFBase,
+    PFEmptyState,
+    PFContent,
+    PFSpacing,
+    css`
+        .cta {
+            display: inline-block;
+            font-weight: bold;
+            color: black;
+            border: 3px solid var(--pf-c-empty-state__icon--Color);
+            padding: var(--pf-global--spacer--sm);
+        }
+    `,
+];
+
 @customElement("ak-library-application-empty-list")
 export class LibraryPageApplicationEmptyList extends AKElement {
-    static styles = [
-        PFBase,
-        PFEmptyState,
-        PFContent,
-        PFSpacing,
-        css`
-            .cta {
-                display: inline-block;
-                font-weight: bold;
-                color: black;
-                border: 3px solid var(--pf-c-empty-state__icon--Color);
-                padding: var(--pf-global--spacer--sm);
-            }
-        `,
-    ];
-
-    @state() isSuperUser = false;
+    static styles = styles;
 
-    connectedCallback() {
-        super.connectedCallback();
-        me().then((me: SessionUser) => {
-            this.isSuperUser = me.user.isSuperuser;
-        });
-    }
+    @property({ attribute: "isadmin", type: Boolean })
+    isAdmin = false;
 
     renderNewAppButton() {
         const href = paramURL("/core/applications", {
@@ -74,7 +67,7 @@ export class LibraryPageApplicationEmptyList extends AKElement {
                 <div class="pf-c-empty-state__body">
                     ${t`Either no applications are defined, or you don’t have access to any.`}
                 </div>
-                ${this.isSuperUser ? this.renderNewAppButton() : html``}
+                ${this.isAdmin ? this.renderNewAppButton() : html``}
             </div>
         </div>`;
     }
diff --git a/web/src/user/LibraryPage/ApplicationList.ts b/web/src/user/LibraryPage/ApplicationList.ts
@@ -31,28 +31,34 @@ const LAYOUTS = new Map<string, [string, string]>([
     ],
 ]);
 
+const styles = [
+    PFBase,
+    PFEmptyState,
+    PFContent,
+    PFGrid,
+    css`
+        .app-group-header {
+            margin-bottom: 1em;
+            margin-top: 1.2em;
+        }
+    `,
+];
+
 @customElement("ak-library-application-list")
 export class LibraryPageApplicationList extends AKElement {
-    static styles = [
-        PFBase,
-        PFEmptyState,
-        PFContent,
-        PFGrid,
-        css`
-            .app-group-header {
-                margin-bottom: 1em;
-                margin-top: 1.2em;
-            }
-        `,
-    ];
+    static styles = styles;
 
-    @property({ attribute: true }) layout = "row" as LayoutType;
+    @property({ attribute: true })
+    layout = "row" as LayoutType;
 
-    @property({ attribute: true }) background: string | undefined = undefined;
+    @property({ attribute: true })
+    background: string | undefined = undefined;
 
-    @property({ attribute: true }) selected = "";
+    @property({ attribute: true })
+    selected = "";
 
-    @property() apps: AppGroupList = [];
+    @property()
+    apps: AppGroupList = [];
 
     get currentLayout(): Pair {
         const layout = LAYOUTS.get(this.layout);
diff --git a/web/src/user/LibraryPage/ApplicationSearch.ts b/web/src/user/LibraryPage/ApplicationSearch.ts
@@ -22,14 +22,16 @@ function fuseToApps(apps: Fuse.FuseResult<Application>[]): Application[] {
 
 @customElement("ak-library-list-search")
 export class LibraryPageApplicationList extends AKElement {
-    static style = [PFBase, PFDisplay];
+    static styles = [PFBase, PFDisplay];
 
-    @property() apps: Application[] = [];
+    @property()
+    apps: Application[] = [];
 
     @property()
     query = getURLParam<string | undefined>("search", undefined);
 
-    @query("input") searchInput?: HTMLInputElement;
+    @query("input")
+    searchInput?: HTMLInputElement;
 
     fuse: Fuse<Application>;
 
diff --git a/web/src/user/LibraryPage/LibraryPage.ts b/web/src/user/LibraryPage/LibraryPage.ts
@@ -84,7 +84,7 @@ export class LibraryPage extends AKElement {
 
     running() {
         return html`<ak-library-impl
-            ?isAdmin=${this.isAdmin}
+            ?isadmin=${this.isAdmin}
             .apps=${this.apps}
             .uiConfig=${this.uiConfig}
         ></ak-library-impl>`;
diff --git a/web/src/user/LibraryPage/LibraryPageImpl.ts b/web/src/user/LibraryPage/LibraryPageImpl.ts
@@ -35,10 +35,12 @@ import type { AppGroupList, PageUIConfig } from "./types";
 
 @customElement("ak-library-impl")
 export class LibraryPage extends AKElement {
+    static styles = styles;
+
     @property()
     apps!: PaginatedResponse<Application>;
 
-    @property()
+    @property({ attribute: "isadmin", type: Boolean })
     isAdmin = false;
 
     @property()
@@ -50,8 +52,6 @@ export class LibraryPage extends AKElement {
     @state()
     filteredApps: Application[] = [];
 
-    static styles = styles;
-
     constructor() {
         super();
         this.searchUpdated = this.searchUpdated.bind(this);
@@ -105,7 +105,9 @@ export class LibraryPage extends AKElement {
     }
 
     renderEmptyState() {
-        return html`<ak-library-application-empty-list></ak-library-application-empty-list>`;
+        return html`<ak-library-application-empty-list
+            ?isadmin=${this.isAdmin}
+        ></ak-library-application-empty-list>`;
     }
 
     renderApps() {
