web: provide simple tables for API-less displays

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;
+    }
+}