chore(meshwideupgrade): implement abort modal

libremesh · May 12, 2024 · 5bfa044 · 5bfa044
1 parent f0a38cd
commit 5bfa044
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 50 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/components/modals.tsx
@@ -4,15 +4,58 @@ import { useCallback } from "react";
 
 import { useModal } from "components/Modal/Modal";
 
+interface IUseParallelQueriesModalProps {
+    useSuccessBtn?: boolean;
+    cb?: (e) => void;
+    title?: VNode;
+    content?: VNode;
+    btnTxt?: VNode;
+}
+
+const useParallelQueriesModal = ({
+    useSuccessBtn,
+    cb,
+    title,
+    content,
+    btnTxt = <Trans>Schedule</Trans>,
+}: IUseParallelQueriesModalProps) => {
+    const { toggleModal, setModalState } = useModal();
+    const runAndClose = useCallback(() => {
+        cb(null);
+        toggleModal();
+    }, [cb, toggleModal]);
+
+    const showModal = useCallback(() => {
+        setModalState({
+            content,
+            title,
+            successCb: useSuccessBtn ? runAndClose : undefined,
+            deleteCb: !useSuccessBtn ? runAndClose : undefined,
+            successBtnText: btnTxt,
+            deleteBtnText: btnTxt,
+        });
+        toggleModal();
+    }, [
+        setModalState,
+        content,
+        title,
+        useSuccessBtn,
+        runAndClose,
+        btnTxt,
+        toggleModal,
+    ]);
+    return { showModal, toggleModal };
+};
+
 export const useScheduleUpgradeModal = ({
-    allNodesReady,
+    useSuccessBtn,
     cb,
 }: IUseParallelQueriesModalProps) => {
     let title = <Trans>All nodes are ready</Trans>;
     let content = (
         <Trans>Schedule a firmware upgrade for all nodes on the network</Trans>
     );
-    if (!allNodesReady) {
+    if (!useSuccessBtn) {
         title = <Trans>Some nodes are not ready</Trans>;
         content = (
             <Trans>
@@ -23,22 +66,22 @@ export const useScheduleUpgradeModal = ({
     }
 
     return useParallelQueriesModal({
-        allNodesReady,
+        useSuccessBtn,
         cb,
         title,
         content,
     });
 };
 
 export const useConfirmModal = ({
-    allNodesReady,
+    useSuccessBtn,
     cb,
 }: IUseParallelQueriesModalProps) => {
     let title = <Trans>All nodes are upgraded successfully</Trans>;
     let content = (
         <Trans>Confirm mesh wide upgrade for all nodes on the network</Trans>
     );
-    if (!allNodesReady) {
+    if (!useSuccessBtn) {
         title = <Trans>Some nodes don't upgraded properly</Trans>;
         content = (
             <Trans>
@@ -48,49 +91,27 @@ export const useConfirmModal = ({
         );
     }
     return useParallelQueriesModal({
-        allNodesReady,
+        useSuccessBtn,
         cb,
         title,
         content,
     });
 };
 
-interface IUseParallelQueriesModalProps {
-    allNodesReady: boolean;
-    cb?: (e) => void;
-    title?: VNode;
-    content?: VNode;
-}
-
-const useParallelQueriesModal = ({
-    allNodesReady,
-    cb,
-    title,
-    content,
-}: IUseParallelQueriesModalProps) => {
-    const { toggleModal, setModalState } = useModal();
-    const runAndClose = useCallback(() => {
-        cb(null);
-        toggleModal();
-    }, [cb, toggleModal]);
-
-    const showModal = useCallback(() => {
-        setModalState({
-            content,
-            title,
-            successCb: allNodesReady ? runAndClose : undefined,
-            deleteCb: !allNodesReady ? runAndClose : undefined,
-            successBtnText: <Trans>Schedule</Trans>,
-            deleteBtnText: <Trans>Schedule</Trans>,
-        });
-        toggleModal();
-    }, [
-        setModalState,
-        content,
+export const useAbortModal = ({ cb }: IUseParallelQueriesModalProps) => {
+    const title = <Trans>Abort current mesh wide upgrade?</Trans>;
+    const content = (
+        <Trans>
+            This will the abort current upgrade process on all nodes. Are you
+            sure you want to proceed?
+        </Trans>
+    );
+    const btnTxt = <Trans>Abort</Trans>;
+    return useParallelQueriesModal({
+        useSuccessBtn: false,
+        cb,
         title,
-        allNodesReady,
-        runAndClose,
-        toggleModal,
-    ]);
-    return { showModal, toggleModal };
+        content,
+        btnTxt,
+    });
 };
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/hooks/useStepper.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/hooks/useStepper.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { IStatusAndButton } from "components/status/statusAndButton";
 
 import {
+    useAbortModal,
     useConfirmModal,
     useScheduleUpgradeModal,
 } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/modals";
@@ -144,21 +145,26 @@ export const useStep = () => {
     const { callMutations: startScheduleMeshUpgrade, errors: scheduleErrors } =
         useParallelScheduleUpgrade();
 
-    const { callMutations: confirmMeshUpgrade, errors: confirmErrors } =
-        useParallelConfirmUpgrade();
+    const { callMutations: confirmMeshUpgrade } = useParallelConfirmUpgrade();
 
     const { showModal: showScheduleModal } = useScheduleUpgradeModal({
-        allNodesReady: allNodesReadyForUpgrade,
+        useSuccessBtn: allNodesReadyForUpgrade,
         cb: () => {
-            startScheduleMeshUpgrade();
+            return startScheduleMeshUpgrade();
         },
     });
 
     const { showModal: showConfirmationModal } = useConfirmModal({
         // Ideally we have to implement some kind of state before run the upgrade to check if all nodes are up again.
-        allNodesReady: true,
+        useSuccessBtn: true,
         cb: () => {
-            confirmMeshUpgrade();
+            return confirmMeshUpgrade();
+        },
+    });
+
+    const { showModal: showAbortModal } = useAbortModal({
+        cb: () => {
+            return abort();
         },
     });
 
@@ -249,7 +255,7 @@ export const useStep = () => {
             > = {
                 btnCancel: <Trans>Abort</Trans>,
                 onClickCancel: async () => {
-                    await abort();
+                    showAbortModal();
                 },
             };
             step = { ...step, ...showAbort };