refactor: rename selected state MAASENG-1837 (#4972)

src/__snapshots__/root-reducer.test.ts.snap

@@ -222,8 +222,7 @@ Object {
     "loading": false,
     "saved": false,
     "saving": false,
-    "selected": Array [],
-    "selectedMachines": null,
+    "selected": null,
     "statuses": Object {},
   },
   "message": Object {

src/app/base/components/node/FieldlessForm/FieldlessForm.test.tsx

@@ -31,7 +31,7 @@ describe("FieldlessForm", () => {
             system_id: "abc123",
           }),
         ],
-        selected: [],
+        selected: null,
         statuses: {
           abc123: machineStatusFactory(),
         },

src/app/kvm/components/KVMHeaderForms/AddLxd/AddLxd.test.tsx

@@ -164,9 +164,11 @@ describe("AddLxd", () => {
     );
     await userEvent.click(screen.getByRole("button", { name: "Next" }));
 
-    expect(
-      screen.getByRole("listitem", { name: "Credentials" }).firstChild
-    ).not.toHaveClass("is-active");
+    await waitFor(() =>
+      expect(
+        screen.getByRole("listitem", { name: "Credentials" }).firstChild
+      ).not.toHaveClass("is-active")
+    );
     expect(
       screen.getByRole("listitem", { name: "Authentication" }).firstChild
     ).not.toHaveClass("is-active");

src/app/kvm/components/KVMHeaderForms/KVMHeaderForms.test.tsx

@@ -252,7 +252,7 @@ describe("KVMHeaderForms", () => {
   });
 
   it("renders machine action forms if a machine action is selected", () => {
-    state.machine.selectedMachines = { items: ["abc123"] };
+    state.machine.selected = { items: ["abc123"] };
     renderWithBrowserRouter(
       <KVMHeaderForms
         setSidePanelContent={jest.fn()}
@@ -269,7 +269,7 @@ describe("KVMHeaderForms", () => {
   });
 
   it("renders machine action forms with selected machine count", () => {
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     renderWithBrowserRouter(
       <KVMHeaderForms
         setSidePanelContent={jest.fn()}

src/app/kvm/components/KVMHeaderForms/KVMHeaderForms.tsx

@@ -127,7 +127,7 @@ const KVMHeaderForms = ({
   searchFilter,
   setSearchFilter,
 }: Props): JSX.Element | null => {
-  const selectedMachines = useSelector(machineSelectors.selectedMachines);
+  const selectedMachines = useSelector(machineSelectors.selected);
   const { selectedCount } = useMachineSelectedCount();
   const onRenderRef = useScrollOnRender<HTMLDivElement>();
   const clearSidePanelContent = useCallback(

src/app/kvm/components/LXDVMsTable/LXDVMsTable.test.tsx

@@ -75,7 +75,7 @@ describe("LXDVMsTable", () => {
 
     unmount();
 
-    const expectedAction = machineActions.setSelectedMachines(null);
+    const expectedAction = machineActions.setSelected(null);
     expect(
       store.getActions().find((action) => action.type === expectedAction.type)
     ).toStrictEqual(expectedAction);

src/app/kvm/components/LXDVMsTable/LXDVMsTable.tsx

@@ -71,14 +71,14 @@ const LXDVMsTable = ({
     // Clear machine selection and close the action form on filters change
     if (searchFilter !== previousSearchFilter) {
       setSidePanelContent(null);
-      dispatch(machineActions.setSelectedMachines(null));
+      dispatch(machineActions.setSelected(null));
     }
   }, [searchFilter, previousSearchFilter, setSidePanelContent, dispatch]);
 
   useEffect(
     () => () => {
       // Clear machine selected state when unmounting.
-      dispatch(machineActions.setSelectedMachines(null));
+      dispatch(machineActions.setSelected(null));
     },
     [dispatch]
   );

src/app/kvm/components/LXDVMsTable/VMsActionBar/VMsActionBar.test.tsx

@@ -40,7 +40,7 @@ describe("VMsActionBar", () => {
   it("disables VM actions if none are selected", () => {
     const state = rootStateFactory({
       machine: machineStateFactory({
-        selectedMachines: null,
+        selected: null,
       }),
     });
     const store = mockStore(state);
@@ -70,7 +70,7 @@ describe("VMsActionBar", () => {
     const state = rootStateFactory({
       machine: machineStateFactory({
         items: vms,
-        selectedMachines: { items: ["abc123"] },
+        selected: { items: ["abc123"] },
       }),
     });
     const store = mockStore(state);

src/app/kvm/components/LXDVMsTable/VMsTable/VMsTable.test.tsx

@@ -119,7 +119,7 @@ describe("VMsTable", () => {
     const state = rootStateFactory({
       machine: machineStateFactory({
         items: vms,
-        selectedMachines: null,
+        selected: null,
       }),
       pod: podStateFactory({ items: [pod], loaded: true }),
     });
@@ -144,11 +144,9 @@ describe("VMsTable", () => {
     );
 
     expect(
-      store
-        .getActions()
-        .find((action) => action.type === "machine/setSelectedMachines")
+      store.getActions().find((action) => action.type === "machine/setSelected")
     ).toStrictEqual({
-      type: "machine/setSelectedMachines",
+      type: "machine/setSelected",
       payload: { filter: { pod: [pod.name] } },
     });
   });
@@ -166,7 +164,7 @@ describe("VMsTable", () => {
     const state = rootStateFactory({
       machine: machineStateFactory({
         items: vms,
-        selectedMachines: { filter: {} },
+        selected: { filter: {} },
       }),
       pod: podStateFactory({ items: [pod], loaded: true }),
     });
@@ -195,11 +193,9 @@ describe("VMsTable", () => {
     );
 
     expect(
-      store
-        .getActions()
-        .find((action) => action.type === "machine/setSelectedMachines")
+      store.getActions().find((action) => action.type === "machine/setSelected")
     ).toStrictEqual({
-      type: "machine/setSelectedMachines",
+      type: "machine/setSelected",
       payload: null,
     });
   });

src/app/machines/components/MachineHeaderForms/MachineActionFormWrapper/CloneForm/CloneForm.test.tsx

@@ -18,7 +18,12 @@ import {
   rootState as rootStateFactory,
 } from "testing/factories";
 import { mockFormikFormSaved } from "testing/mockFormikFormSaved";
-import { renderWithBrowserRouter, screen, userEvent } from "testing/utils";
+import {
+  renderWithBrowserRouter,
+  screen,
+  userEvent,
+  waitFor,
+} from "testing/utils";
 
 const mockStore = configureStore<RootState>();
 
@@ -45,8 +50,7 @@ describe("CloneForm", () => {
         active: null,
         items: machines,
         loaded: true,
-        selected: ["abc123"],
-
+        selected: { items: ["abc123"] },
         lists: {
           "123456": machineStateList({
             groups: [
@@ -124,8 +128,7 @@ describe("CloneForm", () => {
         active: null,
         items: machines,
         loaded: true,
-        selected: ["abc123"],
-
+        selected: { items: ["abc123"] },
         lists: {
           "123456": machineStateList({
             groups: [
@@ -151,7 +154,6 @@ describe("CloneForm", () => {
     const { rerender } = renderWithBrowserRouter(
       <CloneForm
         clearSidePanelContent={jest.fn()}
-        machines={[]}
         processingCount={0}
         selectedMachines={{ items: [machines[1].system_id] }}
         viewingDetails={false}
@@ -175,13 +177,15 @@ describe("CloneForm", () => {
     rerender(
       <CloneForm
         clearSidePanelContent={jest.fn()}
-        machines={[]}
         processingCount={0}
+        selectedMachines={{ items: [machines[1].system_id] }}
         viewingDetails={false}
       />
     );
 
-    expect(screen.getByText("Cloning complete")).toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.getByText("Cloning complete")).toBeInTheDocument()
+    );
   });
 
   it("can dispatch an action to clone to the given machines", async () => {
@@ -200,8 +204,7 @@ describe("CloneForm", () => {
         active: null,
         items: machines,
         loaded: true,
-        selected: ["abc123", "def456"],
-
+        selected: { items: ["abc123", "def456"] },
         lists: {
           "123456": machineStateList({
             groups: [

src/app/machines/components/MachineHeaderForms/MachineActionFormWrapper/MachineActionFormWrapper.test.tsx

@@ -126,9 +126,8 @@ it("clears selected machines and invalidates queries on delete success", async (
   );
 
   expect(
-    store
-      .getActions()
-      .find((action) => action.type === "machine/setSelectedMachines").payload
+    store.getActions().find((action) => action.type === "machine/setSelected")
+      .payload
   ).toEqual(null);
   expect(
     store

src/app/machines/components/MachineHeaderForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx

@@ -82,7 +82,7 @@ export const MachineActionFormWrapper = ({
     selectedCountLoading,
   };
   const clearSelectedMachines = () => {
-    dispatch(machineActions.setSelectedMachines(null));
+    dispatch(machineActions.setSelected(null));
     dispatch(machineActions.invalidateQueries());
   };
 

src/app/machines/components/MachineHeaderForms/MachineActionFormWrapper/ReleaseForm/ReleaseForm.test.tsx

@@ -53,7 +53,7 @@ describe("ReleaseForm", () => {
   });
 
   it("sets the initial disk erase behaviour from global config", () => {
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     state.config.items = [
       configFactory({
         name: ConfigNames.ENABLE_DISK_ERASING_ON_RELEASE,
@@ -91,7 +91,7 @@ describe("ReleaseForm", () => {
 
   it("correctly dispatches action to release given machines", async () => {
     const store = mockStore(state);
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     renderWithBrowserRouter(
       <Provider store={store}>
         <ReleaseForm

src/app/machines/components/TableCheckbox/TableCheckbox.test.tsx

@@ -143,7 +143,7 @@ it("can dispatch a generated selected state", async () => {
     { store }
   );
   await userEvent.click(screen.getByRole("checkbox"));
-  const expected = machineActions.setSelectedMachines(selected);
+  const expected = machineActions.setSelected(selected);
   await waitFor(() => {
     expect(
       store.getActions().find((action) => action.type === expected.type)

src/app/machines/components/TableCheckbox/TableCheckbox.tsx

@@ -61,7 +61,7 @@ const TableCheckbox = ({
         window.getSelection()?.removeAllRanges();
         const isRange = !!event.nativeEvent.shiftKey;
         dispatch(
-          machineActions.setSelectedMachines(
+          machineActions.setSelected(
             onGenerateSelected(event.target.checked, isRange)
           )
         );

src/app/machines/views/MachineDetails/MachineNetwork/AddBridgeForm/AddBridgeForm.test.tsx

@@ -117,7 +117,7 @@ describe("AddBridgeForm", () => {
   });
 
   it("can dispatch an action to add a bridge", async () => {
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     const store = mockStore(state);
     renderWithBrowserRouter(
       <AddBridgeForm

src/app/machines/views/MachineDetails/MachineNetwork/AddInterface/AddInterface.test.tsx

@@ -86,7 +86,7 @@ describe("AddInterface", () => {
   });
 
   it("correctly dispatches actions to add a physical interface", async () => {
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     const store = mockStore(state);
     renderWithBrowserRouter(
       <AddInterface close={jest.fn()} systemId="abc123" />,

src/app/machines/views/MachineDetails/MachineNetwork/EditBridgeForm/EditBridgeForm.test.tsx

@@ -104,7 +104,7 @@ describe("EditBridgeForm", () => {
   });
 
   it("can dispatch an action to update a bridge", async () => {
-    state.machine.selectedMachines = { items: ["abc123", "def456"] };
+    state.machine.selected = { items: ["abc123", "def456"] };
     const store = mockStore(state);
     renderWithBrowserRouter(
       <EditBridgeForm

src/app/machines/views/MachineList/MachineList.test.tsx

@@ -360,11 +360,9 @@ describe("MachineList", () => {
       store.getActions().some((action) => action.type === "machine/cleanup")
     ).toBe(true);
     expect(
-      store
-        .getActions()
-        .find((action) => action.type === "machine/setSelectedMachines")
+      store.getActions().find((action) => action.type === "machine/setSelected")
     ).toStrictEqual({
-      type: "machine/setSelectedMachines",
+      type: "machine/setSelected",
       payload: null,
     });
   });

src/app/machines/views/MachineList/MachineList.tsx

@@ -73,7 +73,7 @@ const MachineList = ({
     () => () => {
       // Clear machine selected state and clean up any machine errors etc.
       // when closing the list.
-      dispatch(machineActions.setSelectedMachines(null));
+      dispatch(machineActions.setSelected(null));
       dispatch(machineActions.cleanup());
     },
     [dispatch]

src/app/machines/views/MachineList/MachineListControls/MachineListControls.test.tsx

@@ -112,7 +112,7 @@ describe("MachineListControls", () => {
   });
 
   it("hides search bar, filter accordion, and grouping select when machines are selected", () => {
-    initialState.machine.selectedMachines = { items: ["abc123"] };
+    initialState.machine.selected = { items: ["abc123"] };
     renderWithBrowserRouter(
       <MachineListControls
         filter=""
@@ -154,7 +154,7 @@ describe("MachineListControls", () => {
   });
 
   it("dispatches an action to clear selected machines when the 'Clear selection' button is clicked", async () => {
-    initialState.machine.selectedMachines = { items: ["abc123"] };
+    initialState.machine.selected = { items: ["abc123"] };
     const store = mockStore(initialState);
     renderWithBrowserRouter(
       <MachineListControls
@@ -180,7 +180,7 @@ describe("MachineListControls", () => {
 
     const actions = store.getActions();
     expect(actions).toEqual(
-      expect.arrayContaining([machineActions.setSelectedMachines(null)])
+      expect.arrayContaining([machineActions.setSelected(null)])
     );
   });
 });

src/app/machines/views/MachineList/MachineListControls/MachineListControls.tsx

@@ -181,9 +181,7 @@ const MachineListControls = ({
             <div className="machine-list-controls__item">
               <Button
                 appearance="link"
-                onClick={() =>
-                  dispatch(machineActions.setSelectedMachines(null))
-                }
+                onClick={() => dispatch(machineActions.setSelected(null))}
               >
                 Clear selection <Icon name="close-link" />
               </Button>