From e38585f480ca03a4230a43b11a6f7f7286261485 Mon Sep 17 00:00:00 2001 From: Sharon Gratch Date: Thu, 1 Aug 2024 15:18:49 +0300 Subject: [PATCH] Add Storybook entries for the two new Searchable enum filters. Reference: https://github.com/kubev2v/forklift-console-plugin/pull/1295#issuecomment-2257646867 Add Storybook entries for the following two new Searchable enum filters: SearchableEnumFilter SearchableGroupedEnumFilter Signed-off-by: Sharon Gratch --- .../Filter/SearchableEnumFilter.stories.tsx | 75 ++++++++++++ .../SearchableGroupedEnumFilter.stories.tsx | 107 ++++++++++++++++++ .../Filter/SearchableEnumFilter.tsx | 6 +- .../Filter/SearchableGroupedEnumFilter.tsx | 6 +- .../tabs/Details/cards/WelcomeCard.tsx | 3 +- .../views/list/ProvidersListPage.tsx | 2 +- 6 files changed, 195 insertions(+), 4 deletions(-) create mode 100644 packages/common/src/components-stories/Filter/SearchableEnumFilter.stories.tsx create mode 100644 packages/common/src/components-stories/Filter/SearchableGroupedEnumFilter.stories.tsx diff --git a/packages/common/src/components-stories/Filter/SearchableEnumFilter.stories.tsx b/packages/common/src/components-stories/Filter/SearchableEnumFilter.stories.tsx new file mode 100644 index 000000000..279086754 --- /dev/null +++ b/packages/common/src/components-stories/Filter/SearchableEnumFilter.stories.tsx @@ -0,0 +1,75 @@ +import React from 'react'; + +import { Toolbar, ToolbarContent } from '@patternfly/react-core'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SearchableEnumFilter } from '../../components/Filter/SearchableEnumFilter'; + +const meta: Meta = { + title: 'Common package components/Filter/SearchableEnumFilter', + component: SearchableEnumFilter, + tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + {' (<-- Click the toggle for expanding it and displaying the type-ahead search field,'} +
+           + {'to filter down from the list of menu options.)'} + + + ), + ], + parameters: { + componentSubtitle: + 'Filters allow users to narrow down content from data in tables, data lists or card views, among many others.', + }, + argTypes: { + supportedGroups: { table: { disable: true } }, + }, +}; + +export default meta; +type Story = StoryObj; + +/** + * This example is used when there are a number of selected filter values ``'China', 'Japan', 'France'``. + * + */ +export const SelectedFewValues: Story = { + args: { + placeholderLabel: 'Country names', + title: 'Filter Country names', + showFilter: true, + supportedValues: [ + { id: 'china', label: 'China' }, + { id: 'india', label: 'India' }, + { id: 'japan', label: 'Japan' }, + { id: 'cyprus', label: 'Cyprus' }, + { id: 'france', label: 'France' }, + ], + selectedFilters: ['china', 'japan', 'france', 'cyprus'], + }, +}; + +/** + * This example is used when the selected filters list is empty, + * i.e. no values are selected, the result of clicking on *``Clear all filters``* button + * + */ +export const NoSelectedValues: Story = { + args: { + placeholderLabel: 'Country names', + title: 'Filter Country names', + showFilter: true, + supportedValues: [ + { id: 'china', label: 'China' }, + { id: 'india', label: 'India' }, + { id: 'japan', label: 'Japan' }, + { id: 'france', label: 'France' }, + ], + selectedFilters: [], + }, +}; diff --git a/packages/common/src/components-stories/Filter/SearchableGroupedEnumFilter.stories.tsx b/packages/common/src/components-stories/Filter/SearchableGroupedEnumFilter.stories.tsx new file mode 100644 index 000000000..89bd2a776 --- /dev/null +++ b/packages/common/src/components-stories/Filter/SearchableGroupedEnumFilter.stories.tsx @@ -0,0 +1,107 @@ +import React from 'react'; + +import { Toolbar, ToolbarContent } from '@patternfly/react-core'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SearchableGroupedEnumFilter } from '../../components/Filter/SearchableGroupedEnumFilter'; + +const meta: Meta = { + title: 'Common package components/Filter/SearchableGroupedEnumFilter', + component: SearchableGroupedEnumFilter, + tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + {' (<-- Click the toggle for expanding it and displaying the type-ahead search field,'} +
+           + {'to filter down from the list of menu options.)'} + + + ), + ], + parameters: { + componentSubtitle: + 'Filters allow users to narrow down content from data in tables, data lists or card views, among many others.', + }, + argTypes: { + title: { table: { disable: true } }, + resolvedLanguage: { table: { disable: true } }, + }, +}; + +export default meta; +type Story = StoryObj; + +/** + * This example is used when the selected filter values ``'India', 'Japan', 'France'`` include values from different groups: + * + */ +export const SelectedValuesFromDifferentGroups: Story = { + args: { + placeholderLabel: 'Country names', + showFilter: true, + supportedGroups: [ + { groupId: 'europe', label: 'Europe' }, + { groupId: 'asia', label: 'Asia' }, + ], + supportedValues: [ + { id: 'china', groupId: 'asia', label: 'China' }, + { id: 'india', groupId: 'asia', label: 'India' }, + { id: 'japan', groupId: 'asia', label: 'Japan' }, + { id: 'cyprus', groupId: 'asia', label: 'Cyprus' }, + { id: 'france', groupId: 'europe', label: 'France' }, + ], + selectedFilters: ['india', 'japan', 'france'], + }, +}; + +/** + * This example is used when the selected filter values ``'India', 'Japan'`` include values from only one group: + * + */ +export const SelectedValuesFromOneGroup: Story = { + args: { + placeholderLabel: 'Country names', + showFilter: true, + supportedGroups: [ + { groupId: 'europe', label: 'Europe' }, + { groupId: 'asia', label: 'Asia' }, + ], + supportedValues: [ + { id: 'china', groupId: 'asia', label: 'China' }, + { id: 'india', groupId: 'asia', label: 'India' }, + { id: 'japan', groupId: 'asia', label: 'Japan' }, + { id: 'cyprus', groupId: 'asia', label: 'Cyprus' }, + { id: 'thailand', groupId: 'asia', label: 'Thailand' }, + { id: 'france', groupId: 'europe', label: 'France' }, + ], + selectedFilters: ['india', 'japan', 'china', 'cyprus'], + }, +}; + +/** + * This example is used when the selected filters list is empty, + * i.e. no values are selected, the result of clicking on *``Clear all filters``* button + * + */ +export const NoSelectedValues: Story = { + args: { + placeholderLabel: 'Country names', + showFilter: true, + supportedGroups: [ + { groupId: 'europe', label: 'Europe' }, + { groupId: 'asia', label: 'Asia' }, + ], + supportedValues: [ + { id: 'China', groupId: 'asia', label: 'China' }, + { id: 'India', groupId: 'asia', label: 'India' }, + { id: 'Japan', groupId: 'asia', label: 'Japan' }, + { id: 'cyprus', groupId: 'asia', label: 'Cyprus' }, + { id: 'France', groupId: 'europe', label: 'France' }, + ], + selectedFilters: [], + }, +}; diff --git a/packages/common/src/components/Filter/SearchableEnumFilter.tsx b/packages/common/src/components/Filter/SearchableEnumFilter.tsx index 172881362..00ff92a26 100644 --- a/packages/common/src/components/Filter/SearchableEnumFilter.tsx +++ b/packages/common/src/components/Filter/SearchableEnumFilter.tsx @@ -4,7 +4,11 @@ import { EnumFilter } from './EnumFilter'; import { FilterTypeProps } from './types'; /** - * EnumFilter with inline free search text enabled. + * An EnumFilter component that supports a type-ahead functionality, allowing users to input a search inside + * the toggle for filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. + * + * [ + * View component source on GitHub](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/SearchableEnumFilter.tsx) */ export const SearchableEnumFilter = (props: FilterTypeProps) => ( diff --git a/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx b/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx index cea87df6e..c4b05f19f 100644 --- a/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx +++ b/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx @@ -4,7 +4,11 @@ import { GroupedEnumFilter } from './GroupedEnumFilter'; import { FilterTypeProps } from './types'; /** - * GroupedEnumFilter with inline search enabled. + * A GroupedEnumFilter component that supports type-ahead functionality, allowing users to input a search inside + * the toggle for filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. + * + * [ + * View component source on GitHub](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx) */ export const SearchableGroupedEnumFilter = (props: FilterTypeProps) => ( diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx index 6c6b0e3af..acbdafbec 100644 --- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx +++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import automationIcon from '../../../../../images/automation.svg'; import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n'; import { V1beta1ForkliftController } from '@kubev2v/types'; @@ -17,6 +16,8 @@ import { Text, } from '@patternfly/react-core'; +import automationIcon from '../../../../../images/automation.svg'; + type OverviewCardProps = { obj?: V1beta1ForkliftController; loaded?: boolean; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx index ca14a327d..af4b8036d 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx @@ -1,6 +1,5 @@ import React from 'react'; import StandardPage from 'src/components/page/StandardPage'; -import modernizeMigration from '../../images/modernizeMigration.svg'; import { ProviderData, SOURCE_ONLY_PROVIDER_TYPES } from 'src/modules/Providers/utils'; import { PROVIDER_STATUS, PROVIDERS } from 'src/utils/enums'; import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n'; @@ -20,6 +19,7 @@ import { import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'; import { useGetDeleteAndEditAccessReview, useProvidersInventoryList } from '../../hooks'; +import modernizeMigration from '../../images/modernizeMigration.svg'; import { findInventoryByID } from '../../utils'; import { InventoryNotReachable } from './components/InventoryNotReachable';