From 3928f5dfdb47e2a4b1267b92fe1a377795c8fa4b Mon Sep 17 00:00:00 2001
From: Jones Ogolo <jay.topher11@gmail.com>
Date: Mon, 27 Nov 2023 11:48:03 +0100
Subject: [PATCH] feat: update grouping name for subnet

---
 src/app/base/components/GroupSelect/GroupSelect.tsx | 11 ++++++++---
 src/app/subnets/views/SubnetsList/SubnetsList.tsx   |  2 ++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/base/components/GroupSelect/GroupSelect.tsx b/src/app/base/components/GroupSelect/GroupSelect.tsx
index fc8a6db786c..14897b8fc8e 100644
--- a/src/app/base/components/GroupSelect/GroupSelect.tsx
+++ b/src/app/base/components/GroupSelect/GroupSelect.tsx
@@ -1,10 +1,13 @@
 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;
-  groupOptions: { value: T | string; label: string }[];
 };
 
 const GroupSelect = <T extends string>({
@@ -12,13 +15,15 @@ const GroupSelect = <T extends string>({
   setGrouping,
   setHiddenGroups,
   groupOptions,
+  name,
+  className,
 }: Props<T>): JSX.Element => {
   return (
     <Select
       aria-label="Group by"
-      className="u-no-padding--right"
+      className={classNames("u-no-padding--right", className)}
       defaultValue={grouping ?? ""}
-      name="machine-groupings"
+      name={name || "machine-groupings"}
       onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
         setGrouping((e.target.value as T) ?? null);
         setHiddenGroups && setHiddenGroups([]);
diff --git a/src/app/subnets/views/SubnetsList/SubnetsList.tsx b/src/app/subnets/views/SubnetsList/SubnetsList.tsx
index da58b30ca43..4e8c76efbfa 100644
--- a/src/app/subnets/views/SubnetsList/SubnetsList.tsx
+++ b/src/app/subnets/views/SubnetsList/SubnetsList.tsx
@@ -91,8 +91,10 @@ const SubnetsList = (): JSX.Element => {
           subtitle={
             <div className="u-flex--wrap u-flex--align-center">
               <GroupSelect
+                className="u-no-margin--bottom"
                 groupOptions={subnetOptions}
                 grouping={groupBy as GroupByKey}
+                name="network-groupings"
                 setGrouping={setGroupBy}
               />
             </div>