diff --git a/front/package.json b/front/package.json index 11ee793f7..dbc0c86cf 100644 --- a/front/package.json +++ b/front/package.json @@ -11,7 +11,6 @@ "jotai": "^2.20.0", "react-big-calendar": "^1.20.0", "react-csv": "^2.2.2", - "react-icons": "^5.6.0", "react-joyride": "^3.1.0", "react-table": "^7.8.0", "regenerator-runtime": "^0.14.1", diff --git a/front/src/views/Boxes/BoxesView.test.tsx b/front/src/views/Boxes/BoxesView.test.tsx index fb40e3f46..516613a92 100644 --- a/front/src/views/Boxes/BoxesView.test.tsx +++ b/front/src/views/Boxes/BoxesView.test.tsx @@ -848,7 +848,7 @@ describe("4.8.3 - URL Parameter Sync for Filters", () => { expect(screen.getByText(/8650860/i)).toBeInTheDocument(); // Check that the filter drawer button indicates it has a filter applied (filled icon) - const filterDrawerButton = screen.getByTestId("filter-drawer-button"); + const filterDrawerButton = screen.getByTestId("filters-drawer-button"); expect(filterDrawerButton).toBeInTheDocument(); }); @@ -921,7 +921,7 @@ describe("4.8.3 - URL Parameter Sync for Filters", () => { expect(screen.getAllByText(/Sweatpants/i).length).toBeGreaterThanOrEqual(1); // Check that the filter drawer button indicates it has a filter applied - const filterDrawerButton = screen.getByTestId("filter-drawer-button"); + const filterDrawerButton = screen.getByTestId("filters-drawer-button"); expect(filterDrawerButton).toBeInTheDocument(); }); diff --git a/front/src/views/Boxes/components/BoxesTable.tsx b/front/src/views/Boxes/components/BoxesTable.tsx index 5482a3c2b..542c70c47 100644 --- a/front/src/views/Boxes/components/BoxesTable.tsx +++ b/front/src/views/Boxes/components/BoxesTable.tsx @@ -51,7 +51,7 @@ import { IDropdownOption } from "components/Form/SelectField"; import { BoxesFilter } from "./BoxesFilter"; import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter"; import { FilterChips } from "./FilterChips"; -import { FilterPanel } from "components/Table/FilterPanel"; +import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel"; import { createOptions } from "utils/filterOptions"; import { removeFilter } from "utils/helpers"; diff --git a/front/src/views/Products/components/ProductsTable.tsx b/front/src/views/Products/components/ProductsTable.tsx index e396346f6..f6627f1b0 100644 --- a/front/src/views/Products/components/ProductsTable.tsx +++ b/front/src/views/Products/components/ProductsTable.tsx @@ -36,7 +36,7 @@ import { } from "components/Table/Filter"; import ColumnSelector from "components/Table/ColumnSelector"; import { GlobalFilter } from "components/Table/GlobalFilter"; -import { FilterPanel } from "components/Table/FilterPanel"; +import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel"; import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter"; import { ProductsFilter } from "./ProductsFilter"; import { ProductsFilterChips } from "./ProductsFilterChips"; diff --git a/front/src/views/Products/components/StandardProductsTable.tsx b/front/src/views/Products/components/StandardProductsTable.tsx index 2880629e6..619406fcd 100644 --- a/front/src/views/Products/components/StandardProductsTable.tsx +++ b/front/src/views/Products/components/StandardProductsTable.tsx @@ -21,7 +21,7 @@ import { } from "components/Table/Filter"; import ColumnSelector from "components/Table/ColumnSelector"; import { GlobalFilter } from "components/Table/GlobalFilter"; -import { FilterPanel } from "components/Table/FilterPanel"; +import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel"; import type { IFilterValue } from "@boxtribute/shared-components/statviz/components/filter/MultiSelectFilter"; import { ProductsFilter } from "./ProductsFilter"; import { ProductsFilterChips } from "./ProductsFilterChips"; diff --git a/front/src/views/Transfers/ShipmentsOverview/ShipmentsOverviewView.tsx b/front/src/views/Transfers/ShipmentsOverview/ShipmentsOverviewView.tsx index 9e6544340..275c0880e 100644 --- a/front/src/views/Transfers/ShipmentsOverview/ShipmentsOverviewView.tsx +++ b/front/src/views/Transfers/ShipmentsOverview/ShipmentsOverviewView.tsx @@ -31,7 +31,7 @@ import { import { FilteringSortingTableHeader } from "components/Table/TableHeader"; import ColumnSelector from "components/Table/ColumnSelector"; import { GlobalFilter } from "components/Table/GlobalFilter"; -import { FilterPanel } from "components/Table/FilterPanel"; +import { FilterPanel } from "@boxtribute/shared-components/filter/FilterPanel"; import { BaseOrgCell, BoxesCell, StateCell } from "./components/TableCells"; import { useLoadAndSetGlobalPreferences } from "hooks/useLoadAndSetGlobalPreferences"; import { selectedBaseIdAtom } from "stores/globalPreferenceStore"; diff --git a/package.json b/package.json index a8c77884d..ac547387b 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "react": "^18.3.1", "react-dom": "^18.2.0", "react-hook-form": "^7.62.0", + "react-icons": "^5.6.0", "react-router-dom": "^6.30.4", "zod": "^4.4.3" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6dba892c3..8e7477d14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,9 @@ importers: react-hook-form: specifier: ^7.62.0 version: 7.62.0(react@18.3.1) + react-icons: + specifier: ^5.6.0 + version: 5.6.0(react@18.3.1) react-router-dom: specifier: ^6.30.4 version: 6.30.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -226,9 +229,6 @@ importers: react-csv: specifier: ^2.2.2 version: 2.2.2 - react-icons: - specifier: ^5.6.0 - version: 5.6.0(react@18.3.1) react-joyride: specifier: ^3.1.0 version: 3.1.0(@types/react@19.2.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/front/src/components/Table/FilterPanel.tsx b/shared-components/filter/FilterPanel.tsx similarity index 74% rename from front/src/components/Table/FilterPanel.tsx rename to shared-components/filter/FilterPanel.tsx index 915e9e5ed..31b174a83 100644 --- a/front/src/components/Table/FilterPanel.tsx +++ b/shared-components/filter/FilterPanel.tsx @@ -12,13 +12,20 @@ import { import { MdFilterList } from "react-icons/md"; interface FilterPanelProps { + label?: string; isOpen: boolean; onOpen: () => void; onClose: () => void; children: ReactNode; } -export function FilterPanel({ isOpen, onOpen, onClose, children }: FilterPanelProps) { +export function FilterPanel({ + label = "Filters", + isOpen, + onOpen, + onClose, + children, +}: FilterPanelProps) { const placement = useBreakpointValue({ base: "left" as const, md: "right" as const }) ?? "right"; const size = useBreakpointValue({ base: undefined, md: "md" }); const maxW = useBreakpointValue({ base: "90vw", md: undefined }); @@ -26,16 +33,16 @@ export function FilterPanel({ isOpen, onOpen, onClose, children }: FilterPanelPr return ( <> } - aria-label="Open filters" + icon={} + aria-label={`Open ${label}`} size="md" - data-testid="filter-drawer-button" + data-testid={`${label.replaceAll(" ", "").toLowerCase()}-drawer-button`} onClick={onOpen} /> - Filters + {label} {children}