feat: update subnet tab selection to 'group by' selection (#5225)

src/app/machines/views/MachineList/MachineListControls/GroupSelect/GroupSelect.test.tsx → src/app/base/components/GroupSelect/GroupSelect.test.tsx

@@ -1,12 +1,14 @@
 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 () => {
   const setGrouping = jest.fn();
   const setHiddenGroups = jest.fn();
   render(
     <GroupSelect
+      groupOptions={groupOptions}
       grouping={null}
       setGrouping={setGrouping}
       setHiddenGroups={setHiddenGroups}

src/app/base/components/GroupSelect/GroupSelect.tsx

@@ -0,0 +1,36 @@
+import { Select } from "@canonical/react-components";
+import classNames from "classnames";
+
+type Props<T> = {
+  className?: string;
+  grouping: T | null;
+  groupOptions: { value: T | string; label: string }[];
+  name?: string;
+  setGrouping: (group: T | null) => void;
+  setHiddenGroups?: (groups: string[]) => void;
+};
+
+const GroupSelect = <T extends string>({
+  grouping,
+  setGrouping,
+  setHiddenGroups,
+  groupOptions,
+  name,
+  className,
+}: Props<T>): JSX.Element => {
+  return (
+    <Select
+      aria-label="Group by"
+      className={classNames("u-no-padding--right", className)}
+      defaultValue={grouping ?? ""}
+      name={name || "machine-groupings"}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+        setGrouping((e.target.value as T) ?? null);
+        setHiddenGroups && setHiddenGroups([]);
+      }}
+      options={groupOptions}
+    />
+  );
+};
+
+export default GroupSelect;

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 = ({
               />
             </div>
             <div className="machine-list-controls__item u-hide--small u-hide--medium u-flex--align-baseline">
-              <GroupSelect
+              <GroupSelect<FetchGroupKey>
+                groupOptions={groupOptions}
                 grouping={grouping}
                 setGrouping={setGrouping}
                 setHiddenGroups={setHiddenGroups}

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,
+  },
+];

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<HTMLInputElement>("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"));
 });

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={
             <div className="u-flex--wrap u-flex--align-center">
-              <SegmentedControl
-                aria-label="Group by"
-                buttonClassName="u-no-margin--bottom u-upper-case--first"
-                onSelect={setGroupBy}
-                options={[
-                  {
-                    label: "Fabric",
-                    value: SubnetsColumns.FABRIC,
-                  },
-                  {
-                    label: "Space",
-                    value: SubnetsColumns.SPACE,
-                  },
-                ]}
-                selected={groupBy as GroupByKey}
+              <GroupSelect
+                className="u-no-margin--bottom subnet-group__select"
+                groupOptions={subnetGroupingOptions}
+                grouping={groupBy as GroupByKey}
+                name="network-groupings"
+                setGrouping={setGroupBy}
               />
             </div>
           }

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);