fix: enable name column on partitions table on side panel close

canonical · Mar 13, 2024 · e58a1c7 · e58a1c7
1 parent 44d7ffb
commit e58a1c7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 75 deletions.
diff --git a/...p/base/components/node/StorageTables/AvailableStorageTable/AvailableStorageTable.test.tsx b/...p/base/components/node/StorageTables/AvailableStorageTable/AvailableStorageTable.test.tsx
@@ -7,6 +7,7 @@ import AvailableStorageTable from "./AvailableStorageTable";
 
 import { actions as machineActions } from "@/app/store/machine";
 import { MIN_PARTITION_SIZE } from "@/app/store/machine/constants";
+import type { RootState } from "@/app/store/root/types";
 import { DiskTypes, StorageLayout } from "@/app/store/types/enum";
 import {
   controllerDetails as controllerDetailsFactory,
@@ -19,9 +20,14 @@ import {
   nodePartition as partitionFactory,
   rootState as rootStateFactory,
 } from "@/testing/factories";
-import { userEvent, render, screen } from "@/testing/utils";
+import {
+  userEvent,
+  render,
+  screen,
+  renderWithBrowserRouter,
+} from "@/testing/utils";
 
-const mockStore = configureStore();
+const mockStore = configureStore<RootState>();
 
 const getAvailableDisk = (name = "available-disk") =>
   diskFactory({
@@ -443,14 +449,9 @@ describe("performing machine actions", () => {
       }),
     });
     const store = mockStore(state);
-    render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <CompatRouter>
-            <AvailableStorageTable canEditStorage node={machine} />
-          </CompatRouter>
-        </MemoryRouter>
-      </Provider>
+    renderWithBrowserRouter(
+      <AvailableStorageTable canEditStorage node={machine} />,
+      { store }
     );
 
     await userEvent.click(

diff --git a/src/app/base/components/node/StorageTables/AvailableStorageTable/AvailableStorageTable.tsx b/src/app/base/components/node/StorageTables/AvailableStorageTable/AvailableStorageTable.tsx
@@ -20,6 +20,7 @@ import ActionConfirm from "@/app/base/components/node/ActionConfirm";
 import DiskBootStatus from "@/app/base/components/node/DiskBootStatus";
 import DiskNumaNodes from "@/app/base/components/node/DiskNumaNodes";
 import DiskTestStatus from "@/app/base/components/node/DiskTestStatus";
+import { useSidePanel } from "@/app/base/side-panel-context";
 import urls from "@/app/base/urls";
 import type { ControllerDetails } from "@/app/store/controller/types";
 import { FilterControllers } from "@/app/store/controller/utils";
@@ -286,8 +287,8 @@ const AvailableStorageTable = ({
   const dispatch = useDispatch();
   const [expanded, setExpanded] = useState<Expanded | null>(null);
   const [selected, setSelected] = useState<(Disk | Partition)[]>([]);
-  const [bulkAction, setBulkAction] = useState<BulkAction | null>(null);
   const isMachine = nodeIsMachine(node);
+  const { sidePanelContent } = useSidePanel();
 
   const closeExpanded = () => setExpanded(null);
   const handleRowCheckbox = (storageDevice: Disk | Partition) => {
@@ -319,7 +320,7 @@ const AvailableStorageTable = ({
       setSelected(newSelected);
     }
   };
-  const actionsDisabled = !canEditStorage || Boolean(bulkAction);
+  const actionsDisabled = !canEditStorage || Boolean(sidePanelContent?.view);
 
   // To prevent selected state from becoming stale, set it directly from the
   // machine object when it changes (e.g. when a disk is deleted or updated).
@@ -651,11 +652,7 @@ const AvailableStorageTable = ({
         </div>
       )}
       {isMachine && canEditStorage && (
-        <BulkActions
-          selected={selected}
-          setBulkAction={setBulkAction}
-          systemId={node.system_id}
-        />
+        <BulkActions selected={selected} systemId={node.system_id} />
       )}
     </>
   );

diff --git a/...base/components/node/StorageTables/AvailableStorageTable/BulkActions/BulkActions.test.tsx b/...base/components/node/StorageTables/AvailableStorageTable/BulkActions/BulkActions.test.tsx
@@ -53,11 +53,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={selected}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={selected} systemId="abc123" />,
       { state }
     );
     const createVolumeGroupButton = screen.getByRole("button", {
@@ -88,11 +84,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={selected}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={selected} systemId="abc123" />,
       { state }
     );
 
@@ -115,12 +107,9 @@ describe("BulkActions", () => {
         }),
       }),
     });
-    renderWithBrowserRouter(
-      <BulkActions selected={[]} setBulkAction={vi.fn()} systemId="abc123" />,
-      {
-        state,
-      }
-    );
+    renderWithBrowserRouter(<BulkActions selected={[]} systemId="abc123" />, {
+      state,
+    });
 
     expect(screen.getByTestId("vmware-bulk-actions")).toBeInTheDocument();
   });
@@ -142,11 +131,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={selected}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={selected} systemId="abc123" />,
       { state }
     );
 
@@ -176,11 +161,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={[selected]}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={[selected]} systemId="abc123" />,
       { state }
     );
 
@@ -209,11 +190,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={[selected]}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={[selected]} systemId="abc123" />,
       { state }
     );
 
@@ -253,11 +230,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={selected}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={selected} systemId="abc123" />,
       { state }
     );
 
@@ -295,11 +268,7 @@ describe("BulkActions", () => {
       }),
     });
     renderWithBrowserRouter(
-      <BulkActions
-        selected={selected}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={selected} systemId="abc123" />,
       { state }
     );
 
@@ -334,11 +303,7 @@ describe("BulkActions", () => {
     });
 
     renderWithBrowserRouter(
-      <BulkActions
-        selected={[selected]}
-        setBulkAction={vi.fn()}
-        systemId="abc123"
-      />,
+      <BulkActions selected={[selected]} systemId="abc123" />,
       { state }
     );
 

diff --git a/src/app/base/components/node/StorageTables/AvailableStorageTable/BulkActions/BulkActions.tsx b/src/app/base/components/node/StorageTables/AvailableStorageTable/BulkActions/BulkActions.tsx
@@ -1,8 +1,6 @@
 import { Button, List, Tooltip } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
-import { BulkAction } from "../AvailableStorageTable";
-
 import { useSidePanel } from "@/app/base/side-panel-context";
 import { MachineSidePanelViews } from "@/app/machines/constants";
 import machineSelectors from "@/app/store/machine/selectors";
@@ -20,15 +18,10 @@ import {
 
 type Props = {
   selected: (Disk | Partition)[];
-  setBulkAction: (bulkAction: BulkAction | null) => void;
   systemId: Machine["system_id"];
 };
 
-const BulkActions = ({
-  selected,
-  setBulkAction,
-  systemId,
-}: Props): JSX.Element | null => {
+const BulkActions = ({ selected, systemId }: Props): JSX.Element | null => {
   const machine = useSelector((state: RootState) =>
     machineSelectors.getById(state, systemId)
   );
@@ -76,7 +69,6 @@ const BulkActions = ({
                   view: MachineSidePanelViews.CREATE_DATASTORE,
                   extras: { bulkActionSelected: selected, systemId: systemId },
                 });
-                setBulkAction(BulkAction.CREATE_DATASTORE);
               }}
             >
               Create datastore
@@ -95,7 +87,6 @@ const BulkActions = ({
                   view: MachineSidePanelViews.UPDATE_DATASTORE,
                   extras: { bulkActionSelected: selected, systemId: systemId },
                 });
-                setBulkAction(BulkAction.UPDATE_DATASTORE);
               }}
             >
               Add to existing datastore
@@ -131,7 +122,6 @@ const BulkActions = ({
                 view: MachineSidePanelViews.CREATE_VOLUME_GROUP,
                 extras: { bulkActionSelected: selected, systemId: systemId },
               });
-              setBulkAction(BulkAction.CREATE_VOLUME_GROUP);
             }}
           >
             Create volume group
@@ -154,7 +144,6 @@ const BulkActions = ({
                 view: MachineSidePanelViews.CREATE_RAID,
                 extras: { bulkActionSelected: selected, systemId: systemId },
               });
-              setBulkAction(BulkAction.CREATE_RAID);
             }}
           >
             Create RAID