Merge branch 'main' into test-cypress-update-selectors

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

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router";
 import { useNavigate } from "react-router-dom-v5-compat";
 
-import ControllerListControls from "./ControllerListControls";
 import ControllerListHeader from "./ControllerListHeader";
 import ControllerListTable from "./ControllerListTable";
 
@@ -64,6 +63,7 @@ const ControllerList = (): JSX.Element => {
     <PageContent
       header={
         <ControllerListHeader
+          searchFilter={searchFilter}
           setSearchFilter={setSearchFilter}
           setSidePanelContent={setSidePanelContent}
         />
@@ -80,10 +80,6 @@ const ControllerList = (): JSX.Element => {
       sidePanelTitle={getSidePanelTitle("Controllers", sidePanelContent)}
     >
       <VaultNotification />
-      <ControllerListControls
-        filter={searchFilter}
-        setFilter={setSearchFilter}
-      />
       <ControllerListTable
         controllers={filteredControllers}
         hasFilter={!!searchFilter}

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

@@ -1,3 +1,5 @@
+import configureStore from "redux-mock-store";
+
 import ControllerListHeader from "./ControllerListHeader";
 
 import { ControllerSidePanelViews } from "app/controllers/constants";
@@ -9,6 +11,8 @@ import {
 } from "testing/factories";
 import { userEvent, screen, renderWithBrowserRouter } from "testing/utils";
 
+const mockStore = configureStore<RootState>();
+
 describe("ControllerListHeader", () => {
   let state: RootState;
 
@@ -28,6 +32,7 @@ describe("ControllerListHeader", () => {
     state.controller.loaded = false;
     renderWithBrowserRouter(
       <ControllerListHeader
+        searchFilter=""
         setSearchFilter={jest.fn()}
         setSidePanelContent={jest.fn()}
       />,
@@ -41,6 +46,7 @@ describe("ControllerListHeader", () => {
     state.controller.loaded = true;
     renderWithBrowserRouter(
       <ControllerListHeader
+        searchFilter=""
         setSearchFilter={jest.fn()}
         setSidePanelContent={jest.fn()}
       />,
@@ -55,6 +61,7 @@ describe("ControllerListHeader", () => {
     state.controller.selected = ["abc123"];
     renderWithBrowserRouter(
       <ControllerListHeader
+        searchFilter=""
         setSearchFilter={jest.fn()}
         setSidePanelContent={jest.fn()}
       />,
@@ -69,6 +76,7 @@ describe("ControllerListHeader", () => {
     const setSidePanelContent = jest.fn();
     renderWithBrowserRouter(
       <ControllerListHeader
+        searchFilter=""
         setSearchFilter={jest.fn()}
         setSidePanelContent={setSidePanelContent}
       />,
@@ -81,4 +89,27 @@ describe("ControllerListHeader", () => {
       view: ControllerSidePanelViews.ADD_CONTROLLER,
     });
   });
+
+  it("changes the search text when the filters change", () => {
+    const store = mockStore(state);
+    const { rerender } = renderWithBrowserRouter(
+      <ControllerListHeader
+        searchFilter={""}
+        setSearchFilter={jest.fn()}
+        setSidePanelContent={jest.fn()}
+      />,
+      { route: "/machines", store }
+    );
+    expect(screen.getByRole("searchbox")).toHaveValue("");
+
+    rerender(
+      <ControllerListHeader
+        searchFilter={"free-text"}
+        setSearchFilter={jest.fn()}
+        setSidePanelContent={jest.fn()}
+      />
+    );
+
+    expect(screen.getByRole("searchbox")).toHaveValue("free-text");
+  });
 });

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

@@ -1,7 +1,10 @@
+import { useEffect, useState } from "react";
+
 import { MainToolbar } from "@canonical/maas-react-components";
 import { Button, Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
+import DebounceSearchBox from "app/base/components/DebounceSearchBox";
 import ModelListSubtitle from "app/base/components/ModelListSubtitle";
 import NodeActionMenu from "app/base/components/NodeActionMenu";
 import { useSendAnalytics } from "app/base/hooks";
@@ -12,18 +15,26 @@ import controllerSelectors from "app/store/controller/selectors";
 import { getNodeActionTitle } from "app/store/utils";
 
 type Props = {
+  searchFilter: string;
   setSearchFilter: SetSearchFilter;
   setSidePanelContent: SetSidePanelContent;
 };
 
 const ControllerListHeader = ({
+  searchFilter,
   setSidePanelContent,
   setSearchFilter,
 }: Props): JSX.Element => {
   const controllers = useSelector(controllerSelectors.all);
   const controllersLoaded = useSelector(controllerSelectors.loaded);
   const selectedControllers = useSelector(controllerSelectors.selected);
   const sendAnalytics = useSendAnalytics();
+  const [searchText, setSearchText] = useState(searchFilter);
+
+  useEffect(() => {
+    // If the filters change then update the search input text.
+    setSearchText(searchFilter);
+  }, [searchFilter]);
 
   return (
     <MainToolbar>
@@ -39,6 +50,11 @@ const ControllerListHeader = ({
         <Spinner text="Loading" />
       )}
       <MainToolbar.Controls>
+        <DebounceSearchBox
+          onDebounced={(debouncedText) => setSearchFilter(debouncedText)}
+          searchText={searchText}
+          setSearchText={setSearchText}
+        />
         <Button
           data-testid="add-controller-button"
           disabled={selectedControllers.length > 0}