diff --git a/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.stories.tsx b/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.stories.tsx index 6e65432c3a..85072932f9 100644 --- a/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.stories.tsx +++ b/src/app/machines/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 = { - title: "Sections/Machine/MachineActionFormWrapper", - component: MachineActionFormWrapper, +const meta: Meta = { + 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/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx b/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx index 0862ba6af7..c31f34f2ee 100644 --- a/src/app/machines/components/MachineForms/MachineActionFormWrapper/MachineActionFormWrapper.tsx +++ b/src/app/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 & { +type ContainerProps = Omit & { action: MachineActions; applyConfiguredNetworking?: boolean; clearSidePanelContent: ClearSidePanelContent; @@ -40,29 +41,38 @@ type Props = Omit & { viewingDetails: boolean; }; -/** - * Displays specified machine action form for selected machines. - */ -export const MachineActionFormWrapper = ({ +type Props = ContainerProps & { + clearSelectedMachines: () => void; + dispatch: Dispatch; + dispatchForSelectedMachines: ReturnType< + typeof useSelectedMachinesActionsDispatch + >["dispatch"]; + filter: ReturnType; + onRenderRef: ReturnType>; +} & Omit< + ReturnType, + "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(); - 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(); + 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 ( + + ); +}; + export default MachineActionFormWrapper;