feat: Create filter drawer

dashboard/package.json

@@ -22,6 +22,7 @@
     "@mui/x-charts": "^7.7.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -44,6 +45,7 @@
     "react-intl": "^6.6.8",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "vite": "^5.3.1"
   },
   "devDependencies": {

dashboard/src/components/Filter/Drawer.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { IoClose } from 'react-icons/io5';
+
+import { Button } from '../ui/button';
+
+import {
+  Drawer as UIDrawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTrigger,
+} from '../ui/drawer';
+import { Separator } from '../ui/separator';
+
+interface IDrawerLink {
+  treeURL: string;
+  onRefresh: () => void;
+}
+
+interface IFilterDrawer extends IDrawerLink {
+  children?: React.ReactNode;
+  onCancel: () => void;
+  onFilter: () => void;
+}
+
+const DrawerHeader = (): JSX.Element => {
+  return (
+    <header className="mb-7 w-full">
+      <div className="w-[1400px] mx-auto flex items-center justify-between mb-4">
+        <span className="font-bold text-2xl/[42px]">
+          <FormattedMessage id="filter.filtering" />
+        </span>
+        <DrawerClose asChild>
+          <IoClose className="w-6 h-6 cursor-pointer" />
+        </DrawerClose>
+      </div>
+      <Separator />
+    </header>
+  );
+};
+
+const DrawerLink = ({ treeURL, onRefresh }: IDrawerLink): JSX.Element => {
+  return (
+    <div className="flex justify-between items-center mb-8">
+      <div className="w-[766px] h-[52px] px-4 py-2 bg-white border border-darkGray flex flex-col">
+        <span className="text-xs text-darkGray2">
+          <FormattedMessage id="filter.treeURL" />
+        </span>
+        <a
+          className="text-base text-dimBlack underline"
+          href={treeURL}
+          target="_bank"
+        >
+          {treeURL}
+        </a>
+      </div>
+      <Button
+        onClick={onRefresh}
+        variant="outline"
+        className="w-[200px] rounded-full border-2 border-black"
+      >
+        <FormattedMessage id="filter.refresh" />
+      </Button>
+    </div>
+  );
+};
+
+const Drawer = ({
+  treeURL,
+  children,
+  onRefresh,
+  onCancel,
+  onFilter,
+}: IFilterDrawer): JSX.Element => {
+  return (
+    <UIDrawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+
+      <DrawerContent className="flex items-center px-4 bg-lightGray max-h-screen">
+        <DrawerHeader />
+        <section className="overflow-y-auto max-h-full">
+          <DrawerLink treeURL={treeURL} onRefresh={onRefresh} />
+          <div className="w-[1000px] rounded-lg bg-white">
+            {React.Children.map(children, (child, idx) => (
+              <>
+                {idx != 0 && <Separator />}
+                <div className="px-6 py-10">{child}</div>
+              </>
+            ))}
+          </div>
+        </section>
+
+        <DrawerFooter className="flex flex-row justify-end w-full h-20 bg-white text-dimGray mt-6 gap-x-6">
+          <DrawerClose asChild>
+            <Button variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+          </DrawerClose>
+          <DrawerClose
+            asChild
+            className="w-[200px] rounded-full bg-lightBlue text-white"
+          >
+            <Button variant="outline" onClick={onFilter}>
+              Filter
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </UIDrawer>
+  );
+};
+
+export default Drawer;

dashboard/src/components/Filter/SummarySection.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+interface ISummarySectionColumn {
+  title: string;
+  value: string;
+}
+
+export interface ISummarySection {
+  title: string;
+  columns: ISummarySectionColumn[];
+}
+
+const SummarySectioncolumn = ({
+  title,
+  value,
+}: ISummarySectionColumn): JSX.Element => {
+  return (
+    <div>
+      <h5 className="font-medium text-sm mb-1">{title}</h5>
+      <span className="font-normal text-sm">{value}</span>
+    </div>
+  );
+};
+
+const SummarySection = ({ title, columns }: ISummarySection): JSX.Element => {
+  const columnComponents = useMemo(
+    () =>
+      columns.map(column => (
+        <SummarySectioncolumn key={column.title} {...column} />
+      )),
+    [columns],
+  );
+
+  return (
+    <div className="min-h-[100px] text-dimGray">
+      <h4 className="font-semibold text-xl mb-6">{title}</h4>
+      <div className="flex justify-between ">{columnComponents}</div>
+    </div>
+  );
+};
+
+export default SummarySection;

dashboard/src/components/Filter/TimeRangeSection.tsx

@@ -3,6 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import { Input } from '../ui/input';
 
 interface TimeRangeSection {
+  title: string;
+  subtitle: string;
   min: number;
   max: number;
   onMinChange: (e: React.FormEvent<HTMLInputElement>) => void;
@@ -13,13 +15,17 @@ const inputContainerClass = 'flex gap-x-4 items-center';
 const inputClass = 'max-w-20';
 
 const TimeRangeSection = ({
+  title,
+  subtitle,
   min,
   max,
   onMinChange,
   onMaxChange,
 }: TimeRangeSection): JSX.Element => {
   return (
-    <div className="flex flex-col gap-y-2">
+    <div className="flex flex-col gap-y-2 text-dimGray">
+      <h3 className="font-semibold text-xl mb-2">{title}</h3>
+      <h4 className="text-s mb-6">{subtitle}</h4>
       <div className={inputContainerClass}>
         <span className="w-8">
           <FormattedMessage id="filter.min" />:

dashboard/src/components/Filter/CheckboxSection.stories.tsx → dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import CheckboxSection from './CheckboxSection';
+import CheckboxSection from '../CheckboxSection';
 
 const ActionsData = {
   onClickItem: fn(),

dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx

@@ -0,0 +1,85 @@
+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,
+};