From b9f6cd92267742d9b165675630102bb5197e3510 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Fri, 29 Mar 2024 10:12:18 -0700 Subject: [PATCH] web: consistent style declarations internally (#9077) * web: fix esbuild issue with style sheets Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious pain. This fix better identifies the value types (instances) being passed from various sources in the repo to the three *different* kinds of style processors we're using (the native one, the polyfill one, and whatever the heck Storybook does internally). Falling back to using older CSS instantiating techniques one era at a time seems to do the trick. It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content (FLoUC), it's the logic with which we're left. In standard mode, the following warning appears on the console when running a Flow: ``` Autofocus processing was blocked because a document already has a focused element. ``` In compatibility mode, the following **error** appears on the console when running a Flow: ``` crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at initDomMutationObservers (crawler-inject.js:1106:18) at crawler-inject.js:1114:24 at Array.forEach () at initDomMutationObservers (crawler-inject.js:1114:10) at crawler-inject.js:1549:1 initDomMutationObservers @ crawler-inject.js:1106 (anonymous) @ crawler-inject.js:1114 initDomMutationObservers @ crawler-inject.js:1114 (anonymous) @ crawler-inject.js:1549 ``` Despite this error, nothing seems to be broken and flows work as anticipated. * web: consistency pass 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. --- .../user/LibraryPage/ApplicationEmptyState.ts | 31 ++++++++------- web/src/user/LibraryPage/ApplicationList.ts | 28 +++++++------- web/src/user/LibraryPage/ApplicationSearch.ts | 38 ++++++++++--------- web/src/user/LibraryPage/LibraryPageImpl.ts | 4 +- 4 files changed, 52 insertions(+), 49 deletions(-) diff --git a/web/src/user/LibraryPage/ApplicationEmptyState.ts b/web/src/user/LibraryPage/ApplicationEmptyState.ts index 11871c1396..bcd62611aa 100644 --- 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 index 7b680d8cac..c51acce659 100644 --- a/web/src/user/LibraryPage/ApplicationList.ts +++ b/web/src/user/LibraryPage/ApplicationList.ts @@ -31,22 +31,22 @@ const LAYOUTS = new Map([ ], ]); -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 index b780e2ef54..5d13930dfd 100644 --- 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 index 79fc8d609f..76d82793c1 100644 --- 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;