chore(meshconfig): implement WizardWrapper

libremesh · Sep 25, 2024 · b1444ca · b1444ca
1 parent 5f97a09
commit b1444ca
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 81 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/containers/meshWideUpgradeStatus.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/containers/meshWideUpgradeStatus.tsx
@@ -9,9 +9,8 @@ import { NoNewVersionAvailable } from "plugins/lime-plugin-mesh-wide-upgrade/src
 import { TransactionStarted } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/TransactionStarted";
 import { UpgradeScheduled } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/UpgradeScheduled";
 import { useMeshUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
-import { CenterFlex } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/divs";
 
-const MeshWideUpgradeStatusState = () => {
+export const MeshWideUpgradeStatus = () => {
     const { stepperState, meshWideError } = useMeshUpgrade();
 
     switch (stepperState) {
@@ -71,11 +70,3 @@ const MeshWideUpgradeStatusState = () => {
             return <NoNewVersionAvailable />;
     }
 };
-
-export const MeshWideUpgradeStatus = () => {
-    return (
-        <CenterFlex>
-            <MeshWideUpgradeStatusState />
-        </CenterFlex>
-    );
-};
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage.tsx
@@ -1,75 +1,21 @@
 import { Trans } from "@lingui/macro";
-import { useState } from "preact/hooks";
 
 import { StatusIcon } from "components/icons/status";
-import Loading from "components/loading";
+import WizardWrapper from "components/mesh-wide-wizard/WizardWrapper";
 import Notification from "components/notifications/notification";
-import Tabs from "components/tabs";
 
 import NextStepFooter from "plugins/lime-plugin-mesh-wide-upgrade/src/components/nextStepFooter";
-import { ErrorState } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ErrorState";
 import { MeshWideUpgradeStatus } from "plugins/lime-plugin-mesh-wide-upgrade/src/containers/meshWideUpgradeStatus";
 import { NodesList } from "plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList";
 import {
     MeshWideUpgradeProvider,
     useMeshUpgrade,
 } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
-import { CenterFlex } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/divs";
-
-const MeshWideUpgrade = () => {
-    const {
-        data: meshWideNodes,
-        isLoading,
-        thisNode,
-        isError,
-        error,
-    } = useMeshUpgrade();
-    const [showNodeList, setShowNodeList] = useState(0);
-
-    if (isError) {
-        return (
-            <CenterFlex>
-                <ErrorState
-                    msg={
-                        <div className={"flex flex-col gap-2 mt-4"}>
-                            <Trans>Errors found getting mesh info!</Trans>
-                            {error && <div>{error.toString()}</div>}
-                        </div>
-                    }
-                />
-            </CenterFlex>
-        );
-    }
-
-    if (isLoading || meshWideNodes === undefined || thisNode === undefined) {
-        return (
-            <CenterFlex>
-                <Loading />
-            </CenterFlex>
-        );
-    }
-
-    const tabs = [
-        {
-            key: 0,
-            repr: (
-                <div className={"flex"}>
-                    <Trans>Show state</Trans>
-                </div>
-            ),
-        },
-        {
-            key: 1,
-            repr: (
-                <div className={"flex"}>
-                    <Trans>Show nodes</Trans>
-                </div>
-            ),
-        },
-    ];
 
+const BannerNotification = () => {
+    const { thisNode } = useMeshUpgrade();
     return (
-        <div className={"flex flex-col h-full w-full max-h-full"}>
+        <>
             <Notification title={"Mesh wide upgrade"}>
                 <Trans>
                     Upgrade all network nodes at once. This proces will take a
@@ -86,19 +32,34 @@ const MeshWideUpgrade = () => {
                     <Trans>This node aborted successfully</Trans>
                 </div>
             )}
-            <div className={"flex-grow flex flex-col max-h-full w-full"}>
-                <Tabs
-                    tabs={tabs}
-                    current={showNodeList}
-                    onChange={setShowNodeList}
-                />
-                <div className="flex-grow overflow-auto">
-                    {showNodeList === 0 && <MeshWideUpgradeStatus />}
-                    {showNodeList === 1 && <NodesList />}
-                </div>
-            </div>
-            <NextStepFooter />
-        </div>
+        </>
+    );
+};
+
+const MeshWideUpgrade = () => {
+    const {
+        data: meshWideNodes,
+        isLoading: meshUpgradeLoading,
+        thisNode,
+        isError,
+        error,
+    } = useMeshUpgrade();
+
+    const isLoading =
+        meshUpgradeLoading ||
+        meshWideNodes === undefined ||
+        thisNode === undefined;
+
+    return (
+        <WizardWrapper
+            error={error}
+            isError={isError}
+            isLoading={isLoading}
+            banner={BannerNotification}
+            statusPage={MeshWideUpgradeStatus}
+            nodesList={NodesList}
+            footer={NextStepFooter}
+        />
     );
 };
 

diff --git a/src/components/mesh-wide-wizard/WizardWrapper.tsx b/src/components/mesh-wide-wizard/WizardWrapper.tsx
@@ -0,0 +1,98 @@
+import { Trans } from "@lingui/macro";
+import { ComponentType } from "preact";
+import { useState } from "preact/hooks";
+
+import Loading from "components/loading";
+import Tabs from "components/tabs";
+
+import { ErrorState } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ErrorState";
+import { NodesList } from "plugins/lime-plugin-mesh-wide-upgrade/src/containers/nodesList";
+import { CenterFlex } from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/divs";
+
+interface WrapperProps {
+    isError: boolean;
+    error: unknown;
+    isLoading: boolean;
+    banner: ComponentType;
+    statusPage: ComponentType;
+    nodesList: ComponentType;
+    footer: ComponentType;
+}
+
+const WizardWrapper = ({
+    isError,
+    error,
+    isLoading,
+    banner: Banner,
+    statusPage: StatusPage,
+    nodesList: NodesList,
+    footer: Footer,
+}: WrapperProps) => {
+    const [showNodeList, setShowNodeList] = useState(0);
+
+    if (isError) {
+        return (
+            <CenterFlex>
+                <ErrorState
+                    msg={
+                        <div className={"flex flex-col gap-2 mt-4"}>
+                            <Trans>Errors found getting info!</Trans>
+                            {error && <div>{error.toString()}</div>}
+                        </div>
+                    }
+                />
+            </CenterFlex>
+        );
+    }
+
+    if (isLoading) {
+        return (
+            <CenterFlex>
+                <Loading />
+            </CenterFlex>
+        );
+    }
+
+    const tabs = [
+        {
+            key: 0,
+            repr: (
+                <div className={"flex"}>
+                    <Trans>Show state</Trans>
+                </div>
+            ),
+        },
+        {
+            key: 1,
+            repr: (
+                <div className={"flex"}>
+                    <Trans>Show nodes</Trans>
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <div className={"flex flex-col h-full w-full max-h-full"}>
+            <Banner />
+            <div className={"flex-grow flex flex-col max-h-full w-full"}>
+                <Tabs
+                    tabs={tabs}
+                    current={showNodeList}
+                    onChange={setShowNodeList}
+                />
+                <div className="flex-grow overflow-auto">
+                    {showNodeList === 0 && (
+                        <CenterFlex>
+                            <StatusPage />
+                        </CenterFlex>
+                    )}
+                    {showNodeList === 1 && <NodesList />}
+                </div>
+            </div>
+            <Footer />
+        </div>
+    );
+};
+
+export default WizardWrapper;