web: bad default in select (#8258)

* web: fix event propogation in search-select wrappers

Two different patches, an older one that extracted long search
blocks that were cut-and-pasted into a standalone component, and a
newer one that fixed displaying placeholder values properly,
conflicted and broke a relationship that allowed for the values to
be propagated through those standalone components correctly.

This restores the event handling and updates the listener set-ups
with more idiomatic hooks into Lit's event system.

* Updated search-select to properly render with Storybook, and provided a
foundation for testing the Search-Select component with Storybook.

* Accidentally deleted this line while making Sonar accept my test data.

* Fixing a small issue that's bugged me for awhile: there's no reason to manually duplicate what code can duplicate.

* Provided a storybook for testing out the flow search.

Discovered along the way that I'd mis-used a prop-drilling technique which caused the currentFlow
to be "undefined" when pass forward, giving rise to Marc's bug.

I *think* this shakes out the last of the bugs.  Events are passed up correctly and the initial value
is recorded correctly.

* Added comments and prettier had opinions.

* Restoring old variable names; they didn't have to change after all.

* fix lint

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
2024-01-23 08:54:34 -08:00
committed by GitHub
parent 862aece9fc
commit 830689f1cb
7 changed files with 371 additions and 127 deletions

View File

@ -7,123 +7,72 @@
// 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.
export const cssImportMaps = {
'import AKGlobal from "@goauthentik/common/styles/authentik.css";':
'import AKGlobal from "@goauthentik/common/styles/authentik.css?inline";',
'import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";':
'import PFAlert from "@patternfly/patternfly/components/Alert/alert.css?inline";',
'import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";':
'import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css?inline";',
'import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";':
'import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css?inline";',
'import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";':
'import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css?inline";',
'import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";':
'import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css?inline";',
'import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";':
'import PFBanner from "@patternfly/patternfly/components/Banner/banner.css?inline";',
'import PFBase from "@patternfly/patternfly/patternfly-base.css";':
'import PFBase from "@patternfly/patternfly/patternfly-base.css?inline";',
'import PFBrand from "@patternfly/patternfly/components/Brand/brand.css";':
'import PFBrand from "@patternfly/patternfly/components/Brand/brand.css?inline";',
'import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";':
'import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css?inline";',
'import PFButton from "@patternfly/patternfly/components/Button/button.css";':
'import PFButton from "@patternfly/patternfly/components/Button/button.css?inline";',
'import PFCard from "@patternfly/patternfly/components/Card/card.css";':
'import PFCard from "@patternfly/patternfly/components/Card/card.css?inline";',
'import PFCheck from "@patternfly/patternfly/components/Check/check.css";':
'import PFCheck from "@patternfly/patternfly/components/Check/check.css?inline";',
'import PFChip from "@patternfly/patternfly/components/Chip/chip.css";':
'import PFChip from "@patternfly/patternfly/components/Chip/chip.css?inline";',
'import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";':
'import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css?inline";',
'import PFContent from "@patternfly/patternfly/components/Content/content.css";':
'import PFContent from "@patternfly/patternfly/components/Content/content.css?inline";',
'import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";':
'import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css?inline";',
'import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";':
'import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css?inline";',
'import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";':
'import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css?inline";',
'import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";':
'import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css?inline";',
'import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";':
'import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css?inline";',
'import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";':
'import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css?inline";',
'import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";':
'import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css?inline";',
'import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css";':
'import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css?inline";',
'import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";':
'import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css?inline";',
'import PFForm from "@patternfly/patternfly/components/Form/form.css";':
'import PFForm from "@patternfly/patternfly/components/Form/form.css?inline";',
'import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";':
'import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css?inline";',
'import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";':
'import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css?inline";',
'import PFGlobal from "@patternfly/patternfly/patternfly-base.css";':
'import PFGlobal from "@patternfly/patternfly/patternfly-base.css?inline";',
'import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";':
'import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css?inline";',
'import PFHint from "@patternfly/patternfly/components/Hint/hint.css";':
'import PFHint from "@patternfly/patternfly/components/Hint/hint.css?inline";',
'import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";':
'import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css?inline";',
'import PFLabel from "@patternfly/patternfly/components/Label/label.css";':
'import PFLabel from "@patternfly/patternfly/components/Label/label.css?inline";',
'import PFList from "@patternfly/patternfly/components/List/list.css";':
'import PFList from "@patternfly/patternfly/components/List/list.css?inline";',
'import PFLogin from "@patternfly/patternfly/components/Login/login.css";':
'import PFLogin from "@patternfly/patternfly/components/Login/login.css?inline";',
'import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";':
'import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css?inline";',
'import PFNav from "@patternfly/patternfly/components/Nav/nav.css";':
'import PFNav from "@patternfly/patternfly/components/Nav/nav.css?inline";',
'import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css";':
'import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css?inline";',
'import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";':
'import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css?inline";',
'import PFPage from "@patternfly/patternfly/components/Page/page.css";':
'import PFPage from "@patternfly/patternfly/components/Page/page.css?inline";',
'import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";':
'import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css?inline";',
'import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";':
'import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css?inline";',
'import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";':
'import PFRadio from "@patternfly/patternfly/components/Radio/radio.css?inline";',
'import PFSelect from "@patternfly/patternfly/components/Select/select.css";':
'import PFSelect from "@patternfly/patternfly/components/Select/select.css?inline";',
'import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";':
'import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css?inline";',
'import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";':
'import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css?inline";',
'import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";':
'import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css?inline";',
'import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";':
'import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css?inline";',
'import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";':
'import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css?inline";',
'import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";':
'import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css?inline";',
'import PFTable from "@patternfly/patternfly/components/Table/table.css";':
'import PFTable from "@patternfly/patternfly/components/Table/table.css?inline";',
'import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";':
'import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css?inline";',
'import PFTitle from "@patternfly/patternfly/components/Title/title.css";':
'import PFTitle from "@patternfly/patternfly/components/Title/title.css?inline";',
'import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";':
'import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css?inline";',
'import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";':
'import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css?inline";',
'import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css";':
'import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css?inline";',
'import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";':
'import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css?inline";',
'import ThemeDark from "@goauthentik/common/styles/theme-dark.css";':
'import ThemeDark from "@goauthentik/common/styles/theme-dark.css?inline";',
'import styles from "./LibraryPageImpl.css";':
'import styles from "./LibraryPageImpl.css?inline";',
};
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 PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";',
'import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.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 PFHint from "@patternfly/patternfly/components/Hint/hint.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 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 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;