133181f7d6
* 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 (<anonymous>)
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: provide a test framework
As is typical of a system where a new build engine is involved, this thing is sadly fragile. Use the
wrong import style in wdio.conf.js and it breaks; there are several notes in tsconfig.test.conf and
wdio.conf.ts to tell eslint or tsc not to complain, it's just a different build with different
criteria, the native criteria don't apply.
On the other hand, writing tests is easy and predictable. We can test behaviors at the unit and
component scale in a straightforward manner, and validate our expectations that things work the way
we believe they should.
* Rolling back a reversion.
* web: update storybook, storybook a few things, fix a few things
After examining how people like Adobe and Salesforce do things, I have updated the storybook
configuration to provide run-time configuration of light/dark mode (although right now nothing
happens), inject the correct styling into the page, and update the preview handling so that we can
see the components better. We'll see how this pans out.
I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I
also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only
report that "the operation falied," but it will give the full error into the console.
**As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use
[Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better
memory management with Bun for these two operations. Those are both developer-facing operations, the
behavior of the system undur current CI/CD should not change.
And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component.
Looks the same. Reads *way* easier. :-)
* Slight revision in exception logic.
* Added a ton of documentation; made the failure message configurable.
* A few documentation changes.
* Adjusting paths to work with tests.
* web: Provide tests for the aggregate cards, fix a few minor things
This commit provides tests alongside the stories for the aggregate cards. The tests are fairly
basic, but they're good enough for starting *and* they provide a pretty good example of how to test
when a promise with a delay is involved.
Two minor fixes in this code:
- The subtext was given a small amount of whitespace above, to remove the crowding that happened.
It looks much better with a half-rem of space.
- In the rare case that we have a card header with no icon, the ' ' symbol that separates the
icon from the header is now not rendered. In the previous form, it would push the header to the
left, making it "hang in space" one rem to the right of the visual line formed by the rightmost
content border. The padding between the header, body, and footer is odd; body is 1 rem, the
header and footer 2rems. This looks good for the graphs, but for the text, not so much.
* Prettier had opinions.
* Merge and catching up with the evolution of our test framework.
82 lines
5.9 KiB
TypeScript
82 lines
5.9 KiB
TypeScript
// THIS IS A GENERATED FILE. DO NOT EDIT BY HAND.
|
|
//
|
|
// This file is generated by the build-storybook-import-maps script in the UI's base directory.
|
|
// This is a *hack* to work around an inconsistency in the way rollup, vite, and storybook
|
|
// import CSS modules.
|
|
//
|
|
// Sometime around 2030 or so, the Javascript community may finally get its collective act together
|
|
// and we'll have one unified way of doing this. I can only hope.
|
|
|
|
const rawCssImportMaps = [
|
|
'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";',
|
|
'import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";',
|
|
'import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";',
|
|
'import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";',
|
|
'import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";',
|
|
'import PFBase from "@patternfly/patternfly/patternfly-base.css";',
|
|
'import PFBrand from "@patternfly/patternfly/components/Brand/brand.css";',
|
|
'import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";',
|
|
'import PFButton from "@patternfly/patternfly/components/Button/button.css";',
|
|
'import PFCard from "@patternfly/patternfly/components/Card/card.css";',
|
|
'import PFCheck from "@patternfly/patternfly/components/Check/check.css";',
|
|
'import PFChip from "@patternfly/patternfly/components/Chip/chip.css";',
|
|
'import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";',
|
|
'import PFContent from "@patternfly/patternfly/components/Content/content.css";',
|
|
'import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";',
|
|
'import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";',
|
|
'import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";',
|
|
'import PFDivider from "@patternfly/patternfly/components/Divider/divider.css";',
|
|
'import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";',
|
|
'import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";',
|
|
'import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";',
|
|
'import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";',
|
|
'import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";',
|
|
'import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css";',
|
|
'import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";',
|
|
'import PFForm from "@patternfly/patternfly/components/Form/form.css";',
|
|
'import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";',
|
|
'import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";',
|
|
'import PFGlobal from "@patternfly/patternfly/patternfly-base.css";',
|
|
'import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";',
|
|
'import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";',
|
|
'import PFLabel from "@patternfly/patternfly/components/Label/label.css";',
|
|
'import PFList from "@patternfly/patternfly/components/List/list.css";',
|
|
'import PFLogin from "@patternfly/patternfly/components/Login/login.css";',
|
|
'import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";',
|
|
'import PFNav from "@patternfly/patternfly/components/Nav/nav.css";',
|
|
'import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css";',
|
|
'import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";',
|
|
'import PFPage from "@patternfly/patternfly/components/Page/page.css";',
|
|
'import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";',
|
|
'import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";',
|
|
'import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";',
|
|
'import PFSelect from "@patternfly/patternfly/components/Select/select.css";',
|
|
'import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";',
|
|
'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";',
|
|
'import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css";',
|
|
'import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";',
|
|
'import ThemeDark from "@goauthentik/common/styles/theme-dark.css";',
|
|
'import styles from "./LibraryPageImpl.css";',
|
|
];
|
|
|
|
const cssImportMaps = rawCssImportMaps.reduce(
|
|
(acc, line) => ({ ...acc, [line]: line.replace(/\.css/, ".css?inline") }),
|
|
{},
|
|
);
|
|
|
|
export { cssImportMaps };
|
|
export default cssImportMaps;
|