From dbcd868b3ae53b46d1a2092d849b07b0ad784735 Mon Sep 17 00:00:00 2001
From: lfjnascimento <luiz.nascimento@profusion.mobi>
Date: Fri, 19 Jul 2024 09:57:42 -0300
Subject: [PATCH] refactor: change CheckboxSection to accept an obj as items

- make onRefresh, onCancel and onFilter optional in Drawer
- fix open drawer button label
---
 .../src/components/Filter/CheckboxSection.tsx | 40 +++++----
 dashboard/src/components/Filter/Drawer.tsx    | 10 ++-
 .../stories/CheckboxSection.stories.tsx       | 49 -----------
 .../Filter/stories/FilterDrawer.stories.tsx   | 85 -------------------
 .../stories/TimeRangeSection.stories.tsx      | 50 -----------
 5 files changed, 30 insertions(+), 204 deletions(-)
 delete mode 100644 dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx
 delete mode 100644 dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx
 delete mode 100644 dashboard/src/components/Filter/stories/TimeRangeSection.stories.tsx

diff --git a/dashboard/src/components/Filter/CheckboxSection.tsx b/dashboard/src/components/Filter/CheckboxSection.tsx
index 74441c0..a7aadb6 100644
--- a/dashboard/src/components/Filter/CheckboxSection.tsx
+++ b/dashboard/src/components/Filter/CheckboxSection.tsx
@@ -4,27 +4,29 @@ import { useCallback, useMemo } from 'react';
 
 import Checkbox from '../Checkbox/Checkbox';
 
-type TOnClickItem = (itemIdx: number, isChecked: boolean) => void;
+type TOnClickItem = (value: string, isChecked: boolean) => void;
+
+type TItems = { [key: string]: boolean };
 
 interface ICheckboxSectionItem {
-  text: string;
+  value: string;
   onClickItem: TOnClickItem;
-  idx: number;
+  isSelected: boolean;
 }
 
 interface ICheckboxList {
-  items: string[];
+  items: TItems;
   onClickItem: TOnClickItem;
 }
 
 interface ICheckboxSubsection {
-  items: string[];
+  items: TItems;
   title: string;
   onClickItem: TOnClickItem;
 }
 
-interface ICheckboxSection {
-  items?: string[];
+export interface ICheckboxSection {
+  items?: TItems;
   title: string;
   subtitle?: string;
   subsections?: ICheckboxSubsection[];
@@ -33,26 +35,32 @@ interface ICheckboxSection {
 }
 
 const CheckboxSectionItem = ({
-  text,
+  value,
   onClickItem,
-  idx,
+  isSelected,
 }: ICheckboxSectionItem): JSX.Element => {
   const handleOnToggle = useCallback(
-    (isChecked: boolean) => onClickItem(idx, isChecked),
-    [idx, onClickItem],
+    (isChecked: boolean) => onClickItem(value, isChecked),
+    [value, onClickItem],
+  );
+  return (
+    <Checkbox
+      onToggle={handleOnToggle}
+      text={value}
+      startChecked={isSelected}
+    />
   );
-  return <Checkbox onToggle={handleOnToggle} text={text} />;
 };
 
 const CheckboxList = ({ items, onClickItem }: ICheckboxList): JSX.Element => {
   const itemComponents = useMemo(
     () =>
-      items.map((text, idx) => (
+      Object.keys(items).map(key => (
         <CheckboxSectionItem
-          key={text}
-          text={text}
-          idx={idx}
+          key={key}
+          value={key}
           onClickItem={onClickItem}
+          isSelected={items[key]}
         />
       )),
     [items, onClickItem],
diff --git a/dashboard/src/components/Filter/Drawer.tsx b/dashboard/src/components/Filter/Drawer.tsx
index ab01492..a15f717 100644
--- a/dashboard/src/components/Filter/Drawer.tsx
+++ b/dashboard/src/components/Filter/Drawer.tsx
@@ -16,13 +16,13 @@ import { Separator } from '../ui/separator';
 
 interface IDrawerLink {
   treeURL: string;
-  onRefresh: () => void;
+  onRefresh?: () => void;
 }
 
 interface IFilterDrawer extends IDrawerLink {
   children?: React.ReactNode;
-  onCancel: () => void;
-  onFilter: () => void;
+  onCancel?: () => void;
+  onFilter?: () => void;
 }
 
 const DrawerHeader = (): JSX.Element => {
@@ -77,7 +77,9 @@ const Drawer = ({
   return (
     <UIDrawer>
       <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
+        <Button variant="outline">
+          <FormattedMessage id="global.filters" />
+        </Button>
       </DrawerTrigger>
 
       <DrawerContent className="flex items-center px-4 bg-lightGray max-h-screen">
diff --git a/dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx b/dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx
deleted file mode 100644
index a0d6e22..0000000
--- a/dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import CheckboxSection from '../CheckboxSection';
-
-const ActionsData = {
-  onClickItem: fn(),
-};
-
-const meta: Meta<typeof CheckboxSection> = {
-  title: 'Filter CheckboxSection',
-  component: CheckboxSection,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  args: {
-    ...ActionsData,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
-    title: 'Branch',
-    subtitle: 'Please select one or more Branches',
-  },
-};
-
-export const WithSubSections: Story = {
-  args: {
-    title: 'Error Summary',
-    subsections: [
-      {
-        title: 'Errors',
-        items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
-        onClickItem: ActionsData.onClickItem,
-      },
-      {
-        title: 'Warnings',
-        items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
-        onClickItem: ActionsData.onClickItem,
-      },
-    ],
-  },
-};
diff --git a/dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx b/dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx
deleted file mode 100644
index eafbaf7..0000000
--- a/dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { IntlProvider } from 'react-intl';
-import { flatten } from 'flat';
-
-import { LOCALES } from '../../../locales/constants';
-
-import { messages } from '../../../locales/messages';
-
-import FilterDrawer from '../Drawer';
-
-import CheckboxSection from '../CheckboxSection';
-import TimeRangeSection from '../TimeRangeSection';
-import SummarySection from '../SummarySection';
-
-const ActionsData = {
-  onRefresh: fn(),
-  onCancel: fn(),
-  onFilter: fn(),
-};
-
-const meta: Meta<typeof FilterDrawer> = {
-  title: 'FilterDrawer',
-  component: FilterDrawer,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  decorators: [
-    (): JSX.Element => (
-      <IntlProvider
-        messages={flatten(messages[LOCALES.EN_US])}
-        locale={LOCALES.EN_US}
-      >
-        <FilterDrawer
-          treeURL="https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux-stable-rc.git"
-          {...ActionsData}
-        >
-          <SummarySection {...summarySectionProps} />
-          <CheckboxSection {...checkboxSectionProps} />
-          <CheckboxSection {...checkboxSectionProps} />
-          <TimeRangeSection {...timeRangeSectionProps} />
-        </FilterDrawer>
-      </IntlProvider>
-    ),
-  ],
-};
-
-const summarySectionProps = {
-  title: 'Tree',
-  columns: [
-    { title: 'Tree', value: 'stable-rc' },
-    { title: 'Matainer', value: 'Shannon Nelson' },
-    {
-      title: 'Commit/tag',
-      value: '5.15.150-rc1 - 3ab4d9c9e190217ee7e974c70b96795cd2f74611',
-    },
-  ],
-};
-
-const checkboxSectionProps = {
-  items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
-  title: 'Branch',
-  subtitle: 'Please select one or more Branches',
-  onClickItem: (idx: number, isChecked: boolean): void =>
-    console.log(idx, isChecked),
-};
-
-const onChangeM = (e: React.FormEvent<HTMLInputElement>): void =>
-  console.log(e.target);
-const timeRangeSectionProps = {
-  title: 'Timing',
-  subtitle: 'Please select a range of timing:',
-  min: 0,
-  max: 100,
-  onMinChange: onChangeM,
-  onMaxChange: onChangeM,
-};
diff --git a/dashboard/src/components/Filter/stories/TimeRangeSection.stories.tsx b/dashboard/src/components/Filter/stories/TimeRangeSection.stories.tsx
deleted file mode 100644
index ba7d99c..0000000
--- a/dashboard/src/components/Filter/stories/TimeRangeSection.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
-import { flatten } from 'flat';
-
-import { fn } from '@storybook/test';
-
-import { LOCALES } from '../../../locales/constants';
-
-import { messages } from '../../../locales/messages';
-
-import TimeRangeSection from '../TimeRangeSection';
-
-const ActionsData = {
-  onMinChange: fn(),
-  onMaxChange: fn(),
-};
-
-const meta: Meta<typeof TimeRangeSection> = {
-  title: 'Filter TimeRangeSection',
-  component: TimeRangeSection,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  args: {
-    ...ActionsData,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Timing',
-    subtitle: 'Please select a range of timing:',
-    min: 0,
-    max: 10,
-  },
-  decorators: [
-    (story): JSX.Element => (
-      <IntlProvider
-        messages={flatten(messages[LOCALES.EN_US])}
-        locale={LOCALES.EN_US}
-      >
-        <div className="w-[500px]">{story()}</div>
-      </IntlProvider>
-    ),
-  ],
-};