web: consistency pass

kensternberg-authentik · kensternberg-authentik · commit 05eab20e92ac · 2024-03-29T08:48:40.000-07:00
While investigating the viability of applying purgeCSS to Patternfly4, in order
to reduce the weight of our CSS, I found these four locations in our code (all
of them *my changes*, darnit), in which our usual `styles` declaration pattern
was inconsistent with our own standards. The LibraryPageImpl change would have
been too intrusive to make fully compliant. The objective here is to ensure that
our objects have *predictable* internal layouts for ease of future maintenance.
diff --git a/web/src/user/LibraryPage/ApplicationEmptyState.ts b/web/src/user/LibraryPage/ApplicationEmptyState.ts
@@ -1,5 +1,4 @@
 import { docLink } from "@goauthentik/common/global";
-import { adaptCSS } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
 
@@ -20,23 +19,23 @@ import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
  * administrator, provide a link to the "Create a new application" page.
  */
 
-const styles = adaptCSS([
-    PFBase,
-    PFEmptyState,
-    PFButton,
-    PFContent,
-    PFSpacing,
-    css`
-        .cta {
-            display: inline-block;
-            font-weight: bold;
-        }
-    `,
-]);
-
 @customElement("ak-library-application-empty-list")
 export class LibraryPageApplicationEmptyList extends AKElement {
-    static styles = styles;
+    static get styles() {
+        return [
+            PFBase,
+            PFEmptyState,
+            PFButton,
+            PFContent,
+            PFSpacing,
+            css`
+                .cta {
+                    display: inline-block;
+                    font-weight: bold;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: "isadmin", type: Boolean })
     isAdmin = false;
diff --git a/web/src/user/LibraryPage/ApplicationList.ts b/web/src/user/LibraryPage/ApplicationList.ts
@@ -31,22 +31,22 @@ 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 = styles;
+    static get styles() {
+        return [
+            PFBase,
+            PFEmptyState,
+            PFContent,
+            PFGrid,
+            css`
+                .app-group-header {
+                    margin-bottom: 1em;
+                    margin-top: 1.2em;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: true })
     layout = "row" as LayoutType;
diff --git a/web/src/user/LibraryPage/ApplicationSearch.ts b/web/src/user/LibraryPage/ApplicationSearch.ts
@@ -18,24 +18,26 @@ import { customEvent } from "./helpers";
 
 @customElement("ak-library-list-search")
 export class LibraryPageApplicationList extends AKElement {
-    static styles = [
-        PFBase,
-        PFDisplay,
-        css`
-            input {
-                width: 30ch;
-                box-sizing: border-box;
-                border: 0;
-                border-bottom: 1px solid;
-                border-bottom-color: var(--ak-accent);
-                background-color: transparent;
-                font-size: 1.5rem;
-            }
-            input:focus {
-                outline: 0;
-            }
-        `,
-    ];
+    static get styles() {
+        return [
+            PFBase,
+            PFDisplay,
+            css`
+                input {
+                    width: 30ch;
+                    box-sizing: border-box;
+                    border: 0;
+                    border-bottom: 1px solid;
+                    border-bottom-color: var(--ak-accent);
+                    background-color: transparent;
+                    font-size: 1.5rem;
+                }
+                input:focus {
+                    outline: 0;
+                }
+            `,
+        ];
+    }
 
     @property({ attribute: false })
     set apps(value: Application[]) {
diff --git a/web/src/user/LibraryPage/LibraryPageImpl.ts b/web/src/user/LibraryPage/LibraryPageImpl.ts
@@ -35,7 +35,9 @@ import type { AppGroupList, PageUIConfig } from "./types";
 
 @customElement("ak-library-impl")
 export class LibraryPage extends AKElement {
-    static styles = styles;
+    static get styles() {
+        return styles;
+    }
 
     @property({ attribute: "isadmin", type: Boolean })
     isAdmin = false;
