diff --git a/src/app/machines/views/MachineList/MachineListControls/GroupSelect/GroupSelect.test.tsx b/src/app/base/components/GroupSelect/GroupSelect.test.tsx similarity index 87% rename from src/app/machines/views/MachineList/MachineListControls/GroupSelect/GroupSelect.test.tsx rename to src/app/base/components/GroupSelect/GroupSelect.test.tsx index 0b4fd38be5..58d0cb567b 100644 --- a/src/app/machines/views/MachineList/MachineListControls/GroupSelect/GroupSelect.test.tsx +++ b/src/app/base/components/GroupSelect/GroupSelect.test.tsx @@ -1,5 +1,6 @@ import GroupSelect from "./GroupSelect"; +import { groupOptions } from "app/machines/constants"; import { userEvent, render, screen } from "testing/utils"; it("executes setGrouping and setHiddenGroups functions on change", async () => { @@ -7,6 +8,7 @@ it("executes setGrouping and setHiddenGroups functions on change", async () => { const setHiddenGroups = jest.fn(); render( = { + className?: string; + grouping: T | null; + groupOptions: { value: T | string; label: string }[]; + name?: string; + setGrouping: (group: T | null) => void; + setHiddenGroups?: (groups: string[]) => void; +}; + +const GroupSelect = ({ + grouping, + setGrouping, + setHiddenGroups, + groupOptions, + name, + className, +}: Props): JSX.Element => { + return ( + ) => { - setGrouping((e.target.value as FetchGroupKey) ?? null); - setHiddenGroups([]); - }} - options={groupOptions} - /> - ); -}; - -export default GroupSelect; diff --git a/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx b/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx index 0e605fcac3..b7d6926b57 100644 --- a/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx +++ b/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx @@ -6,9 +6,10 @@ import { useDispatch } from "react-redux"; import { Link } from "react-router-dom-v5-compat"; import DebounceSearchBox from "app/base/components/DebounceSearchBox"; +import GroupSelect from "app/base/components/GroupSelect"; import urls from "app/base/urls"; +import { groupOptions } from "app/machines/constants"; import type { MachineSetSidePanelContent } from "app/machines/types"; -import GroupSelect from "app/machines/views/MachineList/MachineListControls/GroupSelect"; import HiddenColumnsSelect from "app/machines/views/MachineList/MachineListControls/HiddenColumnsSelect"; import MachineActionMenu from "app/machines/views/MachineList/MachineListControls/MachineActionMenu"; import MachinesFilterAccordion from "app/machines/views/MachineList/MachineListControls/MachinesFilterAccordion"; @@ -82,7 +83,8 @@ const MachineListControls = ({ />
- + groupOptions={groupOptions} grouping={grouping} setGrouping={setGrouping} setHiddenGroups={setHiddenGroups} diff --git a/src/app/subnets/constants.ts b/src/app/subnets/constants.ts index 0db0b5a931..c67e6081e4 100644 --- a/src/app/subnets/constants.ts +++ b/src/app/subnets/constants.ts @@ -1,3 +1,5 @@ +import { SubnetsColumns } from "./views/SubnetsList/SubnetsTable/constants"; + export const SubnetForms = { Fabric: "Fabric", VLAN: "VLAN", @@ -9,3 +11,14 @@ export const SubnetsUrlParams = { By: "by", Q: "q", }; + +export const subnetGroupingOptions = [ + { + label: "Group by fabric", + value: SubnetsColumns.FABRIC, + }, + { + label: "Group by space", + value: SubnetsColumns.SPACE, + }, +]; diff --git a/src/app/subnets/views/SubnetsList/SubnetsList.test.tsx b/src/app/subnets/views/SubnetsList/SubnetsList.test.tsx index 36b0d4e7ec..57bb8ee2fc 100644 --- a/src/app/subnets/views/SubnetsList/SubnetsList.test.tsx +++ b/src/app/subnets/views/SubnetsList/SubnetsList.test.tsx @@ -69,15 +69,13 @@ it("sets the options from the URL on load", async () => { }); await waitFor(() => - expect(screen.getByRole("tab", { name: /space/i })).toHaveAttribute( - "aria-selected", - "true" - ) - ); - expect(screen.getByRole("tab", { name: /fabric/i })).toHaveAttribute( - "aria-selected", - "false" + expect( + screen.getByRole("combobox", { + name: /group by/i, + }) + ).toHaveValue("space") ); + await waitFor(() => expect(screen.getByRole("searchbox").value).toBe( "fabric-1" @@ -108,7 +106,11 @@ it("updates the URL 'by' param once a new group by option is selected", async () expect(getUrlParam("by")).toEqual("fabric"); - await userEvent.click(screen.getByRole("tab", { name: /space/i })); + const selectBox = screen.getByRole("combobox", { + name: /group by/i, + }); + + await userEvent.selectOptions(selectBox, "space"); await waitFor(() => expect(getUrlParam("by")).toEqual("space")); }); diff --git a/src/app/subnets/views/SubnetsList/SubnetsList.tsx b/src/app/subnets/views/SubnetsList/SubnetsList.tsx index 42356f69e4..01e066524e 100644 --- a/src/app/subnets/views/SubnetsList/SubnetsList.tsx +++ b/src/app/subnets/views/SubnetsList/SubnetsList.tsx @@ -4,16 +4,19 @@ import { ContextualMenu } from "@canonical/react-components"; import { useNavigate } from "react-router-dom-v5-compat"; import SubnetsTable from "./SubnetsTable"; -import { SubnetsColumns } from "./SubnetsTable/constants"; import type { GroupByKey } from "./SubnetsTable/types"; +import GroupSelect from "app/base/components/GroupSelect"; import PageContent from "app/base/components/PageContent/PageContent"; import SectionHeader from "app/base/components/SectionHeader"; -import SegmentedControl from "app/base/components/SegmentedControl"; import { useWindowTitle } from "app/base/hooks"; import { useQuery } from "app/base/hooks/urls"; import { useSidePanel } from "app/base/side-panel-context"; -import { SubnetForms, SubnetsUrlParams } from "app/subnets/constants"; +import { + SubnetForms, + SubnetsUrlParams, + subnetGroupingOptions, +} from "app/subnets/constants"; import { SubnetSidePanelViews } from "app/subnets/types"; import FormActions from "app/subnets/views/FormActions"; @@ -25,7 +28,7 @@ const SubnetsList = (): JSX.Element => { const groupBy = query.get(SubnetsUrlParams.By); const searchText = query.get(SubnetsUrlParams.Q) || ""; const setGroupBy = useCallback( - (group: GroupByKey) => + (group: GroupByKey | null) => navigate( { pathname: "/networks", @@ -87,21 +90,12 @@ const SubnetsList = (): JSX.Element => { ]} subtitle={
-
} diff --git a/src/app/subnets/views/SubnetsList/_index.scss b/src/app/subnets/views/SubnetsList/_index.scss index 19011302b0..b46be36c6b 100644 --- a/src/app/subnets/views/SubnetsList/_index.scss +++ b/src/app/subnets/views/SubnetsList/_index.scss @@ -44,6 +44,12 @@ } } + /* TODO: Remove select width when consistent layout has been implemented */ + /* https://warthogs.atlassian.net/browse/MAASENG-2431 */ + .subnet-group__select { + width: 9.375rem; + } + @media (min-width: 773px) { .subnets-table__visually-hidden { clip: rect(0 0 0 0);