--wip-- [skip ci]

profusion · Jul 12, 2024 · b5fd76a · b5fd76a
1 parent 9269944
commit b5fd76a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/dashboard/src/components/FilterList/FilterList.stories.tsx b/dashboard/src/components/FilterList/FilterList.stories.tsx
@@ -1,5 +1,11 @@
 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 FilterList from './FilterList';
 
@@ -27,6 +33,16 @@ export const Default: Story = {
   args: {
     itens: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
   },
+  decorators: [
+    (story): JSX.Element => (
+      <IntlProvider
+        messages={flatten(messages[LOCALES.EN_US])}
+        locale={LOCALES.EN_US}
+      >
+        {story()}
+      </IntlProvider>
+    ),
+  ],
 };
 
 export const MultipleLines: Story = {
@@ -40,6 +56,10 @@ export const MultipleLines: Story = {
     ],
   },
   decorators: [
-    (story): JSX.Element => <div className="w-[500px]">{story()}</div>,
+    (story): JSX.Element => (
+      <IntlProvider locale="en">
+        <div className="w-[500px]">{story()}</div>
+      </IntlProvider>
+    ),
   ],
 };
diff --git a/dashboard/src/components/FilterList/FilterList.tsx b/dashboard/src/components/FilterList/FilterList.tsx
@@ -1,13 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import classNames from 'classnames';
+import { useIntl } from 'react-intl';
 
 import { Button } from '../ui/button';
 
 interface IFilterList {
   itens: string[];
   onClickItem: (itemIdx: number) => void;
   onClickClean: () => void;
+  removeOnEmpty?: boolean;
 }
 
 interface IFilterItem extends IFilterButton {
@@ -73,7 +75,10 @@ const FilterList = ({
   itens,
   onClickItem,
   onClickClean,
+  removeOnEmpty = false,
 }: IFilterList): JSX.Element => {
+  const intl = useIntl();
+
   const buttonList = useMemo(
     () =>
       itens.map((item, idx) => (
@@ -86,10 +91,19 @@ const FilterList = ({
       )),
     [itens, onClickItem],
   );
+
+  if (removeOnEmpty && !itens) {
+    return <></>;
+  }
+
   return (
     <div className="flex flex-wrap gap-4">
       {buttonList}
-      <FilterButton text="Clean all" variant="primary" onClick={onClickClean} />
+      <FilterButton
+        text={intl.formatMessage({ id: 'global.cleanAll' })}
+        variant="primary"
+        onClick={onClickClean}
+      />
     </div>
   );
 };

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -4,6 +4,7 @@ export const messages = {
   [LOCALES.EN_US]: {
     global: {
       filters: 'Filters',
+      cleanAll: 'Clean all',
     },
     routes: {
       deviceMonitor: 'Devices',