Merge pull request #1302 from sgratch/add-storybook-for-SearchableEnu…

…mFilter-SearchableGroupedEnumFilter

🐾 Add Storybook entries for the two new Searchable enum filters components

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<typeof SearchableEnumFilter> = {
+  title: 'Common package components/Filter/SearchableEnumFilter',
+  component: SearchableEnumFilter,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <Toolbar style={{ padding: 0, paddingBottom: 150 }}>
+        <ToolbarContent>
+          <Story />
+          {'    (<-- Click the toggle for expanding it and displaying the type-ahead search field,'}
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          {'to filter down from the list of menu options.)'}
+        </ToolbarContent>
+      </Toolbar>
+    ),
+  ],
+  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<typeof SearchableEnumFilter>;
+
+/**
+ * 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: [],
+  },
+};

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<typeof SearchableGroupedEnumFilter> = {
+  title: 'Common package components/Filter/SearchableGroupedEnumFilter',
+  component: SearchableGroupedEnumFilter,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <Toolbar style={{ padding: 0, paddingBottom: 260 }}>
+        <ToolbarContent>
+          <Story />
+          {'    (<-- Click the toggle for expanding it and displaying the type-ahead search field,'}
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          {'to filter down from the list of menu options.)'}
+        </ToolbarContent>
+      </Toolbar>
+    ),
+  ],
+  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<typeof SearchableGroupedEnumFilter>;
+
+/**
+ * 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: [],
+  },
+};

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.
+ *
+ * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
+ * <font color="green">View component source on GitHub</font>](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/SearchableEnumFilter.tsx)
  */
 export const SearchableEnumFilter = (props: FilterTypeProps) => (
   <EnumFilter {...props} hasInlineFilter={true} />

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.
+ *
+ * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
+ * <font color="green">View component source on GitHub</font>](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/SearchableGroupedEnumFilter.tsx)
  */
 export const SearchableGroupedEnumFilter = (props: FilterTypeProps) => (
   <GroupedEnumFilter {...props} hasInlineFilter={true} />

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;

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';