feat(controllers): use MainToolbar in ControllerListHeader MAASENG-2513

cypress/e2e/with-users/controllers/list.spec.ts

@@ -7,6 +7,6 @@ context("Controller listing", () => {
   });
 
   it("renders the correct heading", () => {
-    cy.get("[data-testid='section-header-title']").contains("Controllers");
+    cy.findByRole("heading", { level: 1 }).contains("Controllers");
   });
 });

package.json

@@ -42,7 +42,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "1.6.1",
+    "@canonical/maas-react-components": "1.12.0",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",

src/app/controllers/views/ControllerList/ControllerListHeader/ControllerListHeader.test.tsx

@@ -34,9 +34,7 @@ describe("ControllerListHeader", () => {
       { state }
     );
 
-    expect(screen.getByTestId("section-header-subtitle")).toHaveTextContent(
-      /Loading/
-    );
+    expect(screen.getByText("Loading")).toBeInTheDocument();
   });
 
   it("displays a controllers count if controllers have loaded", () => {
@@ -48,7 +46,7 @@ describe("ControllerListHeader", () => {
       />,
       { state }
     );
-    expect(screen.getByTestId("section-header-subtitle")).toHaveTextContent(
+    expect(screen.getByTestId("subtitle-string")).toHaveTextContent(
       /2 controllers available/
     );
   });

src/app/controllers/views/ControllerList/ControllerListHeader/ControllerListHeader.tsx

@@ -1,9 +1,9 @@
-import { Button } from "@canonical/react-components";
+import { MainToolbar } from "@canonical/maas-react-components";
+import { Button, Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
 import ModelListSubtitle from "app/base/components/ModelListSubtitle";
 import NodeActionMenu from "app/base/components/NodeActionMenu";
-import SectionHeader from "app/base/components/SectionHeader";
 import { useSendAnalytics } from "app/base/hooks";
 import type { SetSidePanelContent } from "app/base/side-panel-context";
 import type { SetSearchFilter } from "app/base/types";
@@ -26,8 +26,19 @@ const ControllerListHeader = ({
   const sendAnalytics = useSendAnalytics();
 
   return (
-    <SectionHeader
-      buttons={[
+    <MainToolbar>
+      <MainToolbar.Title>Controllers</MainToolbar.Title>
+      {controllersLoaded ? (
+        <ModelListSubtitle
+          available={controllers.length}
+          filterSelected={() => setSearchFilter("in:(Selected)")}
+          modelName="controller"
+          selected={selectedControllers.length}
+        />
+      ) : (
+        <Spinner text="Loading" />
+      )}
+      <MainToolbar.Controls>
         <Button
           data-testid="add-controller-button"
           disabled={selectedControllers.length > 0}
@@ -38,7 +49,7 @@ const ControllerListHeader = ({
           }
         >
           Add rack controller
-        </Button>,
+        </Button>
         <NodeActionMenu
           filterActions
           hasSelection={selectedControllers.length > 0}
@@ -58,19 +69,9 @@ const ControllerListHeader = ({
             }
           }}
           showCount
-        />,
-      ]}
-      subtitle={
-        <ModelListSubtitle
-          available={controllers.length}
-          filterSelected={() => setSearchFilter("in:(Selected)")}
-          modelName="controller"
-          selected={selectedControllers.length}
         />
-      }
-      subtitleLoading={!controllersLoaded}
-      title="Controllers"
-    />
+      </MainToolbar.Controls>
+    </MainToolbar>
   );
 };
 

src/setupTests.ts

@@ -3,8 +3,22 @@ import "@testing-library/jest-dom";
 import { enableFetchMocks } from "jest-fetch-mock";
 
 enableFetchMocks();
+const originalObserver = window.ResizeObserver;
 
 beforeAll(() => {
   // disable act warnings
   global.IS_REACT_ACT_ENVIRONMENT = false;
 });
+
+// mock ResizeObserver for MainToolbar
+beforeEach(() => {
+  window.ResizeObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+});
+
+afterEach(() => {
+  window.ResizeObserver = originalObserver;
+});

yarn.lock

@@ -2907,10 +2907,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@canonical/maas-react-components@1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.6.1.tgz#b4db2fb7635294baabde9d25d8cf30285a9a6552"
-  integrity sha512-2kZ8W0zoggV6j6zmPWN8hRFwiVeFAQq42R3driPDmGD8K+c6ViXj3RapvDL0ZY4EdB+YKtn08akqCk+a/kwaCg==
+"@canonical/maas-react-components@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.12.0.tgz#da33c2ea281c10e1d068871b4df9c2aea38b9eb3"
+  integrity sha512-0yMKN44eZRsqdgC/0PSS+OqmKJHcMnC17yH3zI+EcutzHYlLJTjycpDDPu1cyIe9gFKDL+IW3vVqST47Jq6GFg==
 
 "@canonical/macaroon-bakery@1.3.2":
   version "1.3.2"