web: Provide tests for the aggregate cards, fix a few minor things

web/.storybook/authentikTheme.ts

@@ -1,7 +1,9 @@
 import { create } from "@storybook/theming/create";
 
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
 export default create({
-    base: "light",
+    base: isDarkMode ? "dark" : "light",
     brandTitle: "authentik Storybook",
     brandUrl: "https://goauthentik.io",
     brandImage: "https://goauthentik.io/img/icon_left_brand_colour.svg",

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

@@ -58,10 +58,12 @@ const rawCssImportMaps = [
     'import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";',
     'import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";',
     'import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";',
+    'import PFSplit from "@patternfly/patternfly/layouts/Split/split.css";',
     'import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";',
     'import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";',
     'import PFTable from "@patternfly/patternfly/components/Table/table.css";',
     'import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";',
+    'import PFText from "@patternfly/patternfly/utilities/Text/text.css";',
     'import PFTitle from "@patternfly/patternfly/components/Title/title.css";',
     'import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";',
     'import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";',
@@ -71,8 +73,10 @@ const rawCssImportMaps = [
     'import styles from "./LibraryPageImpl.css";',
 ];
 
-const cssImportMaps = rawCssImportMaps.reduce((acc, line) => (
-{...acc, [line]: line.replace(/\.css/, ".css?inline")}), {});
+const cssImportMaps = rawCssImportMaps.reduce(
+    (acc, line) => ({ ...acc, [line]: line.replace(/\.css/, ".css?inline") }),
+    {},
+);
 
 export { cssImportMaps };
 export default cssImportMaps;

web/.storybook/main.ts

@@ -19,6 +19,20 @@ const config: StorybookConfig = {
         "@jeysal/storybook-addon-css-user-preferences",
         "storybook-addon-mock",
     ],
+    staticDirs: [
+        {
+            from: "../node_modules/@patternfly/patternfly/patternfly-base.css",
+            to: "@patternfly/patternfly/patternfly-base.css",
+        },
+        {
+            from: "../src/common/styles/authentik.css",
+            to: "@goauthentik/common/styles/authentik.css",
+        },
+        {
+            from: "../src/common/styles/theme-dark.css",
+            to: "@goauthentik/common/styles/theme-dark.css",
+        },
+    ],
     framework: {
         name: "@storybook/web-components-vite",
         options: {},

web/.storybook/preview-head.html

@@ -0,0 +1,60 @@
+<link rel="stylesheet" href="@patternfly/patternfly/patternfly-base.css" />
+<link rel="stylesheet" href="@goauthentik/common/styles/authentik.css" />
+<style>
+    body {
+        overflow-y: scroll;
+        margin: 0;
+    }
+
+    .sb-main-padded {
+        padding: 0 !important;
+    }
+
+    .story-shadow-container {
+        background-color: #fff;
+        box-shadow: 0 0 0.25em #ddd;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+        margin: 0 auto;
+        max-width: 72em;
+        padding: 1em;
+        width: 100%;
+    }
+
+    .docs-story .story-shadow-container {
+        box-shadow: none;
+    }
+
+    .story-shadow-container[display-mode="flex-wrap"] {
+        flex-wrap: wrap;
+        flex-direction: row;
+    }
+
+    .title {
+        border-bottom: 1px solid #ccc;
+        color: #333;
+        font-size: 13px;
+        font-weight: bold;
+        margin: 2rem -1rem 1rem;
+        padding-bottom: 0.25rem;
+        padding-left: 1rem;
+    }
+
+    .title code {
+        background-color: #f5f5f5;
+        border-radius: 0.25rem;
+        font-weight: bold;
+        padding: 0.1rem 0.25rem;
+    }
+
+    .sbdocs-preview .hljs {
+        color: #fff !important;
+        white-space: pre-line;
+    }
+
+    .sbdocs-pre > div {
+        margin: 1em 0;
+    }
+</style>

web/.storybook/preview.ts

@@ -9,6 +9,11 @@ import "@patternfly/patternfly/patternfly-base.css";
 
 const preview: Preview = {
     parameters: {
+        options: {
+            storySort: {
+                method: "alphabetical",
+            },
+        },
         actions: { argTypesRegex: "^on[A-Z].*" },
         cssUserPrefs: {
             "prefers-color-scheme": "light",