feat(machines): use MainToolbar in machine list header MAASENG-2514 (#…

…5270)
canonical · Jan 10, 2024 · b2e59a3 · b2e59a3
1 parent 940456f
commit b2e59a3
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 70 deletions.
diff --git a/src/app/base/components/SearchBox/SearchBox.tsx b/src/app/base/components/SearchBox/SearchBox.tsx
@@ -13,7 +13,7 @@ const SearchBox = (props: SearchBoxProps): JSX.Element => {
     searchBoxRef.current?.focus?.();
   });
 
-  return <BaseSearchBox {...props} ref={searchBoxRef} />;
+  return <BaseSearchBox aria-label="Search" {...props} ref={searchBoxRef} />;
 };
 
 export default SearchBox;
diff --git a/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx b/src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { Button, Icon } from "@canonical/react-components";
+import { MainToolbar } from "@canonical/maas-react-components";
+import { Button, Col, Icon } from "@canonical/react-components";
 import pluralize from "pluralize";
 import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom-v5-compat";
@@ -54,77 +55,64 @@ const MachineListControls = ({
   }, [filter]);
 
   return (
-    <div className="machine-list-controls">
-      <h1
-        className="section-header__title p-heading--4"
-        data-testid="section-header-title"
-      >
+    <MainToolbar>
+      <MainToolbar.Title>
         {machineCount} machines in{" "}
         <Link to={urls.pools.index}>
           {resourcePoolsCount} {pluralize("pool", resourcePoolsCount)}
         </Link>
-      </h1>
-      <div className="machine-list-controls-inputs">
+      </MainToolbar.Title>
+      <MainToolbar.Controls>
         {!hasSelection ? (
           <>
-            <div className="machine-list-controls__item">
+            <Col size={3}>
               <MachinesFilterAccordion
                 searchText={searchText}
                 setSearchText={(searchText) => {
                   setFilter(searchText);
                 }}
               />
-            </div>
-            <div className="machine-list-controls__item u-flex--grow">
-              <DebounceSearchBox
-                onDebounced={(debouncedText) => setFilter(debouncedText)}
-                searchText={searchText}
-                setSearchText={setSearchText}
-              />
-            </div>
-            <div className="machine-list-controls__item u-hide--small u-hide--medium u-flex--align-baseline">
-              <GroupSelect<FetchGroupKey>
-                groupOptions={groupOptions}
-                grouping={grouping}
-                setGrouping={setGrouping}
-                setHiddenGroups={setHiddenGroups}
-              />
-            </div>
+            </Col>
+            <DebounceSearchBox
+              onDebounced={(debouncedText) => setFilter(debouncedText)}
+              searchText={searchText}
+              setSearchText={setSearchText}
+            />
+            <GroupSelect<FetchGroupKey>
+              groupOptions={groupOptions}
+              grouping={grouping}
+              setGrouping={setGrouping}
+              setHiddenGroups={setHiddenGroups}
+            />
           </>
         ) : (
           <>
-            <div className="machine-list-controls__item">
-              <MachineActionMenu
-                hasSelection={hasSelection}
-                setSidePanelContent={setSidePanelContent}
-              />
-            </div>
-            <div className="machine-list-controls__item">
-              <Button
-                appearance="link"
-                onClick={() => dispatch(machineActions.setSelected(null))}
-              >
-                Clear selection <Icon name="close-link" />
-              </Button>
-            </div>
+            <MachineActionMenu
+              hasSelection={hasSelection}
+              setSidePanelContent={setSidePanelContent}
+            />
+            <Button
+              appearance="link"
+              onClick={() => dispatch(machineActions.setSelected(null))}
+            >
+              Clear selection <Icon name="close-link" />
+            </Button>
           </>
         )}
         {!hasSelection ? (
-          <div className="machine-list-controls__item u-hide--small u-hide--medium">
+          <span className="u-hide--small u-hide--medium">
             <AddHardwareMenu
               key="add-hardware"
               setSidePanelContent={setSidePanelContent}
             />
-          </div>
+          </span>
         ) : null}
-        <div className="machine-list-controls__item">
-          <HiddenColumnsSelect
-            hiddenColumns={hiddenColumns}
-            setHiddenColumns={setHiddenColumns}
-          />
-        </div>
-      </div>
-    </div>
+        <HiddenColumnsSelect
+          hiddenColumns={hiddenColumns}
+          setHiddenColumns={setHiddenColumns}
+        />
+      </MainToolbar.Controls>
+    </MainToolbar>
   );
 };
 

diff --git a/src/app/machines/views/MachineList/MachineListHeader/MachineListHeader.test.tsx b/src/app/machines/views/MachineList/MachineListHeader/MachineListHeader.test.tsx
@@ -74,7 +74,7 @@ describe("MachineListHeader", () => {
       />,
       { state, route: urls.machines.index }
     );
-    expect(screen.getByTestId("section-header-title")).toHaveTextContent(
+    expect(screen.getByTestId("main-toolbar-heading")).toHaveTextContent(
       "2 machines in 1 pool"
     );
   });
@@ -94,7 +94,7 @@ describe("MachineListHeader", () => {
       { state, route: urls.machines.index }
     );
     expect(
-      screen.queryByTestId("add-hardware-dropdown")
+      screen.queryByRole("button", { name: "Add hardware" })
     ).not.toBeInTheDocument();
     state.machine.selected.items = [];
     renderWithBrowserRouter(
@@ -109,7 +109,9 @@ describe("MachineListHeader", () => {
       />,
       { state, route: urls.machines.index }
     );
-    expect(screen.getByTestId("add-hardware-dropdown")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Add hardware" })
+    ).toBeInTheDocument();
   });
 
   it("displays a new label for the tag action", async () => {

diff --git a/src/app/machines/views/MachineList/MachineListHeader/MachineListHeader.tsx b/src/app/machines/views/MachineList/MachineListHeader/MachineListHeader.tsx
@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from "react-redux";
 import MachineListControls from "../MachineListControls";
 import type { useResponsiveColumns } from "../hooks";
 
-import MachinesHeader from "app/base/components/node/MachinesHeader";
 import { useFetchActions } from "app/base/hooks";
 import type { SetSearchFilter } from "app/base/types";
 import type { MachineSetSidePanelContent } from "app/machines/types";
@@ -57,22 +56,17 @@ export const MachineListHeader = ({
   );
 
   return (
-    <MachinesHeader
+    <MachineListControls
+      filter={searchFilter}
+      grouping={grouping}
+      hiddenColumns={hiddenColumns}
       machineCount={allMachineCount}
-      renderButtons={() => (
-        <MachineListControls
-          filter={searchFilter}
-          grouping={grouping}
-          hiddenColumns={hiddenColumns}
-          machineCount={allMachineCount}
-          resourcePoolsCount={resourcePoolsCount}
-          setFilter={handleSetSearchFilter}
-          setGrouping={setGrouping}
-          setHiddenColumns={setHiddenColumns}
-          setHiddenGroups={setHiddenGroups}
-          setSidePanelContent={setSidePanelContent}
-        />
-      )}
+      resourcePoolsCount={resourcePoolsCount}
+      setFilter={handleSetSearchFilter}
+      setGrouping={setGrouping}
+      setHiddenColumns={setHiddenColumns}
+      setHiddenGroups={setHiddenGroups}
+      setSidePanelContent={setSidePanelContent}
     />
   );
 };

diff --git a/src/app/machines/views/Machines.test.tsx b/src/app/machines/views/Machines.test.tsx
@@ -450,7 +450,7 @@ describe("Machines", () => {
       sidePanelContent: { view: MachineSidePanelViews.DEPLOY_MACHINE },
     });
 
-    expect(screen.getByTestId("section-header-title")).toHaveTextContent(
+    expect(screen.getByTestId("main-toolbar-heading")).toHaveTextContent(
       "0 machines in 0 pools"
     );
     expect(