docs: Add machine list bulk action errors to storybook MAASENG-2219 (#…

…5185)
canonical · Oct 5, 2023 · f2a6a9c · f2a6a9c
1 parent 7fc6dfb
commit f2a6a9c
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 25 deletions.
diff --git a/...nes/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.stories.tsx b/...nes/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.stories.tsx
@@ -1,12 +1,13 @@
 import type { Meta } from "@storybook/react";
 
-import MachineActionFormWrapper from "./MachineActionFormWrapper";
+import { MachineActionForm } from "./MachineActionFormWrapper";
 
+import { ACTION_STATUS } from "app/base/constants";
 import { NodeActions } from "app/store/types/node";
 
-const meta: Meta<typeof MachineActionFormWrapper> = {
-  title: "Sections/Machine/MachineActionFormWrapper",
-  component: MachineActionFormWrapper,
+const meta: Meta<typeof MachineActionForm> = {
+  title: "Sections/Machine/MachineActionForm",
+  component: MachineActionForm,
   tags: ["autodocs"],
   argTypes: {
     action: {
@@ -25,6 +26,7 @@ export const SingleMachine = {
     selectedCount: 1,
     selectedMachines: { items: ["abc123"] },
     action: NodeActions.ABORT,
+    filter: {},
   },
 };
 
@@ -33,5 +35,32 @@ export const MultipleMachines = {
     selectedCount: 2,
     selectedMachines: { items: ["abc123", "def456"] },
     action: NodeActions.ABORT,
+    filter: {},
+  },
+};
+
+export const SingleMachineError = {
+  args: {
+    selectedCount: 1,
+    selectedMachines: { items: ["abc123"] },
+    action: NodeActions.ABORT,
+    actionStatus: ACTION_STATUS.error,
+    actionErrors: "There was an error.",
+    filter: {},
+  },
+};
+
+export const MultipleMachinesError = {
+  args: {
+    selectedCount: 2,
+    selectedMachines: { items: ["abc123", "def456"] },
+    action: NodeActions.ABORT,
+    actionStatus: ACTION_STATUS.error,
+    actionErrors: [
+      "There was an error",
+      "There was another error",
+      "There was a third error",
+    ],
+    filter: {},
   },
 };
diff --git a/...pp/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx b/...pp/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx
@@ -1,5 +1,6 @@
 import { Spinner } from "@canonical/react-components";
 import { useDispatch } from "react-redux";
+import type { AnyAction, Dispatch } from "redux";
 
 import CloneForm from "./CloneForm";
 import CommissionForm from "./CommissionForm";
@@ -30,7 +31,7 @@ import { selectedToFilters } from "app/store/machine/utils";
 import { useSelectedMachinesActionsDispatch } from "app/store/machine/utils/hooks";
 import { NodeActions } from "app/store/types/node";
 
-type Props = Omit<MachineActionFormProps, "processingCount"> & {
+type ContainerProps = Omit<MachineActionFormProps, "processingCount"> & {
   action: MachineActions;
   applyConfiguredNetworking?: boolean;
   clearSidePanelContent: ClearSidePanelContent;
@@ -40,29 +41,38 @@ type Props = Omit<MachineActionFormProps, "processingCount"> & {
   viewingDetails: boolean;
 };
 
-/**
- * Displays specified machine action form for selected machines.
- */
-export const MachineActionFormWrapper = ({
+type Props = ContainerProps & {
+  clearSelectedMachines: () => void;
+  dispatch: Dispatch<AnyAction>;
+  dispatchForSelectedMachines: ReturnType<
+    typeof useSelectedMachinesActionsDispatch
+  >["dispatch"];
+  filter: ReturnType<typeof selectedToFilters>;
+  onRenderRef: ReturnType<typeof useScrollOnRender<HTMLDivElement>>;
+} & Omit<
+    ReturnType<typeof useSelectedMachinesActionsDispatch>,
+    "failedSystemIds" | "successCount"
+  >;
+
+export const MachineActionForm = ({
   action,
+  actionErrors,
+  actionStatus,
   applyConfiguredNetworking,
+  clearSelectedMachines,
   clearSidePanelContent,
+  dispatch,
+  dispatchForSelectedMachines,
+  filter,
   hardwareType,
+  onRenderRef,
   searchFilter,
   selectedCount,
   selectedCountLoading,
   selectedMachines,
   setSearchFilter,
   viewingDetails,
-}: Props): JSX.Element | null => {
-  const onRenderRef = useScrollOnRender<HTMLDivElement>();
-  const dispatch = useDispatch();
-  const {
-    dispatch: dispatchForSelectedMachines,
-    actionStatus,
-    actionErrors,
-  } = useSelectedMachinesActionsDispatch({ selectedMachines, searchFilter });
-
+}: Props) => {
   const commonMachineFormProps = {
     searchFilter,
     clearSidePanelContent,
@@ -85,13 +95,6 @@ export const MachineActionFormWrapper = ({
     selectedCount,
     selectedCountLoading,
   };
-  const clearSelectedMachines = () => {
-    dispatch(machineActions.setSelected(null));
-    dispatch(machineActions.invalidateQueries());
-  };
-
-  const filter = selectedToFilters(selectedMachines || null);
-
   const getFormComponent = () => {
     if (!filter) {
       return null;
@@ -202,4 +205,57 @@ export const MachineActionFormWrapper = ({
   );
 };
 
+/**
+ * Displays specified machine action form for selected machines.
+ */
+export const MachineActionFormWrapper = ({
+  action,
+  applyConfiguredNetworking,
+  clearSidePanelContent,
+  hardwareType,
+  searchFilter,
+  selectedCount,
+  selectedCountLoading,
+  selectedMachines,
+  setSearchFilter,
+  viewingDetails,
+}: ContainerProps): JSX.Element | null => {
+  const onRenderRef = useScrollOnRender<HTMLDivElement>();
+  const dispatch = useDispatch();
+  const {
+    dispatch: dispatchForSelectedMachines,
+    actionStatus,
+    actionErrors,
+  } = useSelectedMachinesActionsDispatch({ selectedMachines, searchFilter });
+
+  const clearSelectedMachines = () => {
+    dispatch(machineActions.setSelected(null));
+    dispatch(machineActions.invalidateQueries());
+  };
+
+  const filter = selectedToFilters(selectedMachines || null);
+
+  return (
+    <MachineActionForm
+      action={action}
+      actionErrors={actionErrors}
+      actionStatus={actionStatus}
+      applyConfiguredNetworking={applyConfiguredNetworking}
+      clearSelectedMachines={clearSelectedMachines}
+      clearSidePanelContent={clearSidePanelContent}
+      dispatch={dispatch}
+      dispatchForSelectedMachines={dispatchForSelectedMachines}
+      filter={filter}
+      hardwareType={hardwareType}
+      onRenderRef={onRenderRef}
+      searchFilter={searchFilter}
+      selectedCount={selectedCount}
+      selectedCountLoading={selectedCountLoading}
+      selectedMachines={selectedMachines}
+      setSearchFilter={setSearchFilter}
+      viewingDetails={viewingDetails}
+    />
+  );
+};
+
 export default MachineActionFormWrapper;