web: provide simple tables for API-less displays (#11028)

* web: fix Flash of Unstructured Content while SearchSelect is loading from the backend

Provide an alternative, readonly, disabled, unindexed input object with the text "Loading...", to be
replaced with the _real_ input element after the content is loaded.

This provides the correct appearance and spacing so the content doesn't jiggle about between the
start of loading and the SearchSelect element being finalized.  It was visually distracting and
unappealing.

* web: comment on state management in API layer, move file to point to correct component under test.

* web: test for flash of unstructured content

- Add a unit test to ensure the "Loading..." element is displayed correctly before data arrives
- Demo how to mock a `fetchObjects()` call in testing. Very cool.
- Make distinguishing rule sets for code, tests, and scripts in nightmare mode
- In SearchSelect, Move the `styles()` declaration to the top of the class for consistency.

- To test for the FLOUC issue in SearchSelect.

This is both an exercise in mocking @BeryJu's `fetchObjects()` protocol, and shows how we can unit
test generic components that render API objects.

* web: interim commit of the basic sortable & selectable table.

* web: added basic unit testing to API-free tables

Mostly these tests assert that the table renders and that the content we give it
is where we expect it to be after sorting. For select tables, it also asserts that
the overall value of the table is what we expect it to be when we click on a
single row, or on the "select all" button.

* web: finalize testing for tables

Includes documentation updates and better tests for select-table.

* Provide unit test accessibility to Firefox and Safari; wrap calls to manipulate test DOMs directly in a browser.exec call so they run in the proper context and be await()ed properly

* web: repeat is needed to make sure sub-elements move around correctly. Map does not do full tracking.

* web: update api-less tables

- Replace `th` with `td` in `thead` components. Because Patternfly.
- Add @BeryJu's styling to the tables, which make it much better looking

* web: rollback dependabot "upgrade" that broke testing

Dependabot rolled us into WebdriverIO 9.  While that's probably the
right thing to do, right now it breaks out end-to-end tests badly.
Dependabot's mucking with infrastructure should not be taken lightly,
especially in cases when the infrastructure is for DX, not UX, and
doesn't create a bigger attack surface on the running product.

* web: small fixes for wdio and lint

- Roll back another dependabot breaking change, this time to WebdriverIO
- Remove the redundant scripts wrapping ESLint for Precommit mode. Access to those modes is
  available through the flags to the `./web/scripts/eslint.mjs` script.
- Remove SonarJS checks until SonarJS is ESLint 9 compatible.
- Minor nitpicking.

* web: not sure where all these getElement() additions come from; did I add them?  Anyway, they were breaking the tests, they're a Wdio9-ism.

* package-lock.json update

* web: small fixes for wdio and lint

**PLEASE** Stop trying to upgrade WebdriverIO following Dependabot's instructions. The changes
between wdio8 and wdio9 are extensive enough to require a lot more manual intervention. The unit
tests fail in wdio 9, with the testbed driver Wdio uses to compile content to push to the browser
([vite](https://vitejs.dev) complaining:

```
2024-09-27T15:30:03.672Z WARN @wdio/browser-runner:vite: warning: Unrecognized default export in file /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
  Plugin: postcss-lit
  File: /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
[0-6] 2024-09-27T15:30:04.083Z INFO webdriver: BIDI COMMAND script.callFunction {"functionDeclaration":"<Function[976 bytes]>","awaitPromise":true,"arguments":[],"target":{"context":"8E608E6D13E355DFFC28112C236B73AF"}}
[0-6]  Error:  Test failed due to following error(s):
  - ak-search-select.test.ts: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default': SyntaxError: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default'

```

So until we can figure out why the Vite installation isn't liking our CSS import scheme, we'll
have to soldier on with what we have.  At least with Wdio 8, we get:

```
Spec Files:      7 passed, 7 total (100% completed) in 00:00:19
```

* Forgot to run prettier.

* web: small fixes for elements and forms

- provides a new utility, `_isSlug_`, used to verify a user input
- extends the ak-horizontal-component wrapper to have a stronger identity and available value
- updates the types that use the wrapper to be typed more strongly
  - (Why) The above are used in the wizard to get and store values
- fixes a bug in SearchSelectEZ that broke the display if the user didn't supply a `groupBy` field.
- Adds `@wdio/types` to the package file so eslint is satisfied wdio builds correctly
- updates the end-to-end test to understand the revised button identities on the login page
  - Running the end-to-end tests verifies that changes to the components listed above did not break
    the semantics of those components.

* Prettier had opinions

* Some lint over-eagerness.

* Updated after build.

web/.storybook/css-import-maps.ts

@@ -8,6 +8,9 @@
 // and we'll have one unified way of doing this.  I can only hope.
 
 const rawCssImportMaps = [
+    'import AKGlobal from "../../../common/styles/authentik.css";',
+    'import AKGlobal from "../../common/styles/authentik.css";',
+    'import AKGlobal from "../common/styles/authentik.css";',
     'import AKGlobal from "@goauthentik/common/styles/authentik.css";',
     'import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";',
     'import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";',

web/eslint.config.mjs

@@ -41,6 +41,10 @@ export default [
         },
         files: ["src/**"],
         rules: {
+            // "lit/attribute-names": "error",
+            "lit/no-private-properties": "error",
+            // "lit/prefer-nothing": "warn",
+            "lit/no-template-bind": "error",
             "no-unused-vars": "off",
             "no-console": ["error", { allow: ["debug", "warn", "error"] }],
             "@typescript-eslint/ban-ts-comment": "off",

web/package.json

@@ -289,6 +289,7 @@
                 "lint:types",
                 "lint:components",
                 "lint:spelling",
+                "lint:package",
                 "lint:lockfile",
                 "lint:lockfiles",
                 "lint:precommit",
@@ -316,7 +317,7 @@
             "command": "node scripts/build-storybook-import-maps.mjs"
         },
         "test": {
-            "command": "wdio run ./wdio.conf.ts --logLevel=warn",
+            "command": "wdio ./wdio.conf.ts --logLevel=warn",
             "env": {
                 "CI": "true",
                 "TS_NODE_PROJECT": "tsconfig.test.json"

web/src/admin/enterprise/EnterpriseStatusCard.test.ts

@@ -1,14 +1,14 @@
-import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
 import { $, expect } from "@wdio/globals";
 
 import { msg } from "@lit/localize";
 import { TemplateResult, html, render as litRender } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import AKGlobal from "../../common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { LicenseForecast, LicenseSummary, LicenseSummaryStatusEnum } from "@goauthentik/api";
 
+import { ensureCSSStyleSheet } from "../../elements/utils/ensureCSSStyleSheet.js";
 import "./EnterpriseStatusCard.js";
 
 const render = (body: TemplateResult) => {

web/src/components/ak-wizard-main/AkWizard.ts

@@ -104,6 +104,8 @@ export class AkWizard<D, Step extends WizardStep = WizardStep>
     }
 
     render() {
+        const step = this.step.render.bind(this.step);
+
         return html`
             <ak-wizard-frame
                 ${ref(this.frame)}
@@ -112,7 +114,7 @@ export class AkWizard<D, Step extends WizardStep = WizardStep>
                 prompt=${this.prompt}
                 .buttons=${this.step.buttons}
                 .stepLabels=${this.stepLabels}
-                .form=${this.step.render.bind(this.step)}
+                .form=${step}
             >
                 <button slot="trigger" class="pf-c-button pf-m-primary">${this.prompt}</button>
             </ak-wizard-frame>

web/src/elements/EmptyState.test.ts

@@ -1,13 +1,13 @@
-import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
 import { $, expect } from "@wdio/globals";
 
 import { msg } from "@lit/localize";
 import { TemplateResult, html, render as litRender } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import AKGlobal from "../common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import "./EmptyState.js";
+import { ensureCSSStyleSheet } from "./utils/ensureCSSStyleSheet.js";
 
 const render = (body: TemplateResult) => {
     document.adoptedStyleSheets = [

web/src/elements/ak-table/TableColumn.ts

@@ -0,0 +1,103 @@
+import { bound } from "@goauthentik/elements/decorators/bound";
+
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
+// Because TableColumn isn't a component, it won't be the dispatch target and it won't have an
+// identity beyond the host passed in, so we must include with the event a payload that identifies
+// the source TableColumn in some way.
+//
+export class TableSortEvent extends Event {
+    static readonly eventName = "tablesort";
+    public value: string;
+    constructor(value: string) {
+        super(TableSortEvent.eventName, { composed: true, bubbles: true });
+        this.value = value;
+    }
+}
+
+/**
+ * class TableColumn
+ *
+ * This is a helper class for rendering the contents of a table column header.
+ *
+ * ## Events
+ *
+ * - @fires tablesort: when the header is clicked, if the host is not undefined
+ *
+ */
+export class TableColumn {
+    /**
+     * The text to show in the column header
+     */
+    value: string;
+
+    /**
+     * If not undefined, the element that will first receive the `tablesort` event
+     */
+    host?: HTMLElement;
+
+    /**
+     * If not undefined, show the sort indicator, and indicate the sort state
+     */
+    orderBy?: string;
+
+    constructor(value: string, orderBy?: string, host?: HTMLElement) {
+        this.value = value;
+        this.orderBy = orderBy;
+        if (host) {
+            this.host = host;
+        }
+    }
+
+    @bound
+    private onSort() {
+        if (this.host && this.orderBy) {
+            this.host.dispatchEvent(new TableSortEvent(this.orderBy));
+        }
+    }
+
+    private sortIndicator(orderBy: string) {
+        // prettier-ignore
+        switch(orderBy) {
+            case this.orderBy:       return "fa-long-arrow-alt-down";
+            case `-${this.orderBy}`: return "fa-long-arrow-alt-up";
+            default:                 return "fa-arrows-alt-v";
+        }
+    }
+
+    private sortButton(orderBy: string) {
+        return html` <button class="pf-c-table__button" @click=${this.onSort}>
+            <div class="pf-c-table__button-content">
+                <span part="column-text" class="pf-c-table__text">${this.value}</span>
+                <span part="column-sort" class="pf-c-table__sort-indicator">
+                    <i class="fas ${this.sortIndicator(orderBy)}"></i>
+                </span>
+            </div>
+        </button>`;
+    }
+
+    public render(orderBy?: string) {
+        const isSelected = orderBy === this.orderBy || orderBy === `-${this.orderBy}`;
+
+        const classes = {
+            "pf-c-table__sort": Boolean(this.host && this.orderBy),
+            "pf-m-selected": Boolean(this.host && isSelected),
+        };
+
+        return html`<td
+            part="column-item"
+            role="columnheader"
+            scope="col"
+            class="${classMap(classes)}"
+        >
+            ${orderBy && this.orderBy ? this.sortButton(orderBy) : html`${this.value}`}
+        </td>`;
+    }
+}
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [TableSortEvent.eventName]: TableSortEvent;
+    }
+}