Improve mesh wide stepper

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,
+    });
 };

plugins/lime-plugin-mesh-wide-upgrade/src/components/nodeUpgradeInfo.tsx

@@ -10,6 +10,7 @@ import {
     detailedInfoStatusMessageMap,
     mainNodeStatusMessageMap,
 } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/upgradeStatusMessages";
+import UpdateNodeInfoBtn from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/UpdateNodeInfoBtn";
 
 export interface INodeInfoBodyItemProps {
     title: ComponentChildren;
@@ -49,7 +50,13 @@ const NodeUpgradeInfoItem = ({
             title={name}
             description={descriptionMsg}
             leftComponent={<StatusIcon status={status} />}
-            rightText={"Info"}
+            rightText={
+                <UpdateNodeInfoBtn
+                    updateOnMount={false}
+                    ip={info.node_ip}
+                    nodeName={name}
+                />
+            }
         >
             <NodeInfoBodyItem {...nodeStatusInfo} />
             {mainNodeStatusInfo && <NodeInfoBodyItem {...mainNodeStatusInfo} />}

plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ConfirmationPending.tsx

@@ -1,25 +1,32 @@
 import { Trans } from "@lingui/macro";
 
-import { ParallelErrors } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ParallelErrors";
+import {
+    ParallelErrors,
+    UpgradeState,
+} from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeState";
 import { useParallelConfirmUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueries";
 
 export const ConfirmationPending = () => {
     const { errors } = useParallelConfirmUpgrade();
+    const title = (
+        <Trans>
+            Upgraded!
+            <br />
+            Awaiting confirmation
+        </Trans>
+    );
 
     return (
-        <>
-            <div className="text-4xl mb-4">
-                <Trans>Upgrade done</Trans>
-            </div>
-            <div className="text-2xl mb-6">
+        <UpgradeState title={title}>
+            <>
                 <Trans>
                     Check if network is working properly and confirm the upgrade
                     <br />
                     If not confirmed, the upgrade will be rolled back after a
                     while
                 </Trans>
-            </div>
-            {errors?.length > 0 && <ParallelErrors errors={errors} />}
-        </>
+                {errors?.length > 0 && <ParallelErrors errors={errors} />}
+            </>
+        </UpgradeState>
     );
 };

plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/Confirmed.tsx

@@ -0,0 +1,29 @@
+import { Trans } from "@lingui/macro";
+
+import {
+    MeshUpgradeErrorIcon,
+    MeshUpgradeSuccessIcon,
+    ParallelErrors,
+    UpgradeState,
+} from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeState";
+import { useParallelConfirmUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueries";
+
+export const Confirmed = () => {
+    const { errors } = useParallelConfirmUpgrade();
+    // let icon = <div className="text-9xl text-primary-light">✓</div>;
+    let icon = <MeshUpgradeSuccessIcon />;
+    let title = <Trans>Confirmed!</Trans>;
+    let desc = <Trans>Mesh upgrade confirmed successfully</Trans>;
+    if (errors?.length > 0) {
+        icon = <MeshUpgradeErrorIcon />;
+        title = <Trans>Confirmed with some errors</Trans>;
+        desc = <Trans>Mesh upgrade confirmed with some errors</Trans>;
+    }
+
+    return (
+        <UpgradeState title={title} icon={icon}>
+            {desc}
+            {errors?.length > 0 && <ParallelErrors errors={errors} />}
+        </UpgradeState>
+    );
+};

plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ErrorState.tsx

@@ -1,16 +1,18 @@
 import { Trans } from "@lingui/macro";
 import { VNode } from "preact";
 
+import {
+    MeshUpgradeErrorIcon,
+    UpgradeState,
+} from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeState";
+
 export const ErrorState = ({ msg }: { msg: string | VNode }) => {
     return (
-        <div className="text-center ">
-            <div className="w-32 h-32 text-9xl rounded-full border-2 border-danger text-danger flex items-center justify-center mx-auto">
-                !
-            </div>
-            <div className="text-4xl">
-                <Trans>Error!</Trans>
-            </div>
-            <div className="text-2xl">{msg}</div>
-        </div>
+        <UpgradeState
+            title={<Trans>Error!</Trans>}
+            icon={<MeshUpgradeErrorIcon />}
+        >
+            {msg}
+        </UpgradeState>
     );
 };

plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/LoadingPage.tsx

@@ -2,6 +2,8 @@ import { VNode } from "preact";
 
 import Loading from "components/loading";
 
+import { UpgradeState } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeState";
+
 export const LoadingPage = ({
     title,
     description,
@@ -10,10 +12,8 @@ export const LoadingPage = ({
     description?: VNode;
 }) => {
     return (
-        <div className="text-center">
-            <Loading />
-            <div className="text-4xl">{title}</div>
-            {description && <div className="text-2xl">{description}</div>}
-        </div>
+        <UpgradeState title={title} icon={<Loading />}>
+            {description}
+        </UpgradeState>
     );
 };