Implement mesh upgrade wizard

plugins/lime-plugin-firmware/src/upgradeAvailable.js

@@ -22,7 +22,7 @@ export const UpgradeAvailableBanner = () => {
         // @ts-ignore
         <Match>
             {({ path }) =>
-                !["firmware", "releaseInfo"].includes(
+                !["firmware", "releaseInfo", "meshwideupgrade"].includes(
                     path.replace("/", "")
                 ) && (
                     <div

plugins/lime-plugin-mesh-wide-upgrade/index.ts

@@ -0,0 +1,7 @@
+import MeshUpgradePage from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage";
+
+export default {
+    name: "MeshWideUpgrade",
+    page: MeshUpgradePage,
+    isCommunityProtected: true,
+} as LimePlugin;

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

@@ -0,0 +1,96 @@
+import { Trans } from "@lingui/macro";
+import { VNode } from "preact";
+import { useCallback } from "react";
+
+import { useModal } from "components/Modal/Modal";
+
+export const useScheduleUpgradeModal = ({
+    allNodesReady,
+    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) {
+        title = <Trans>Some nodes are not ready</Trans>;
+        content = (
+            <Trans>
+                Are you sure you want to start mesh wide upgrade? <br />
+                Check node list to see the network status
+            </Trans>
+        );
+    }
+
+    return useParallelQueriesModal({
+        allNodesReady,
+        cb,
+        title,
+        content,
+    });
+};
+
+export const useConfirmModal = ({
+    allNodesReady,
+    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) {
+        title = <Trans>Some nodes don't upgraded properly</Trans>;
+        content = (
+            <Trans>
+                Are you sure you want to confirm the upgrade? <br />
+                Check node list to see the network status
+            </Trans>
+        );
+    }
+    return useParallelQueriesModal({
+        allNodesReady,
+        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,
+        title,
+        allNodesReady,
+        runAndClose,
+        toggleModal,
+    ]);
+    return { showModal, toggleModal };
+};

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

@@ -0,0 +1,11 @@
+import { FooterStatus } from "components/status/footer";
+
+import { useStep } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/useStepper";
+
+const NextStepFooter = () => {
+    const { step, showFooter } = useStep();
+
+    return <>{showFooter && <FooterStatus {...step} fixed={false} />}</>;
+};
+
+export default NextStepFooter;

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

@@ -0,0 +1,72 @@
+import { Trans } from "@lingui/macro";
+import { ComponentChildren } from "preact";
+
+import { StatusIcon, StatusIcons } from "components/icons/status";
+import { ListItemCollapsible } from "components/list-material";
+
+import { MeshWideNodeUpgradeInfo } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeTypes";
+import {
+    InfoStatusMessageMap,
+    detailedInfoStatusMessageMap,
+    mainNodeStatusMessageMap,
+} from "plugins/lime-plugin-mesh-wide-upgrade/src/utils/upgradeStatusMessages";
+
+export interface INodeInfoBodyItemProps {
+    title: ComponentChildren;
+    description: ComponentChildren;
+}
+
+const NodeInfoBodyItem = ({ title, description }: INodeInfoBodyItemProps) => (
+    <div className="flex flex-col">
+        <div className="font-semibold">{title}</div>
+        <div className="text-gray-600">{description}</div>
+    </div>
+);
+
+const NodeUpgradeInfoItem = ({
+    info,
+    name,
+}: {
+    info: MeshWideNodeUpgradeInfo;
+    name: string;
+}) => {
+    const status: StatusIcons =
+        info.upgrade_state === "ERROR" ? "warning" : "success";
+
+    const nodeStatusInfo =
+        detailedInfoStatusMessageMap(info)[info.upgrade_state] ??
+        detailedInfoStatusMessageMap()["DEFAULT"];
+
+    const mainNodeStatusInfo = mainNodeStatusMessageMap[info.main_node];
+    let descriptionMsg = InfoStatusMessageMap[info.upgrade_state] ?? (
+        <Trans>Error retrieving the status, is this node outdated?</Trans>
+    );
+    if (mainNodeStatusInfo) {
+        descriptionMsg = <Trans>(Main Node) {descriptionMsg}</Trans>;
+    }
+    return (
+        <ListItemCollapsible
+            title={name}
+            description={descriptionMsg}
+            leftComponent={<StatusIcon status={status} />}
+            rightText={"Info"}
+        >
+            <NodeInfoBodyItem {...nodeStatusInfo} />
+            {mainNodeStatusInfo && <NodeInfoBodyItem {...mainNodeStatusInfo} />}
+            <NodeInfoBodyItem
+                title={<Trans>Board</Trans>}
+                description={<Trans>{info.board_name}</Trans>}
+            />
+            <NodeInfoBodyItem
+                title={<Trans>Firmware version</Trans>}
+                description={<Trans>{info.current_fw}</Trans>}
+            />
+            <NodeInfoBodyItem
+                title={<Trans>Ip</Trans>}
+                description={<Trans>{info.node_ip}</Trans>}
+            />
+        </ListItemCollapsible>
+    );
+};
+
+export default NodeUpgradeInfoItem;

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

@@ -0,0 +1,25 @@
+import { Trans } from "@lingui/macro";
+
+import { ParallelErrors } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ParallelErrors";
+import { useParallelConfirmUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueries";
+
+export const ConfirmationPending = () => {
+    const { errors } = useParallelConfirmUpgrade();
+
+    return (
+        <>
+            <div className="text-4xl mb-4">
+                <Trans>Upgrade done</Trans>
+            </div>
+            <div className="text-2xl mb-6">
+                <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} />}
+        </>
+    );
+};

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

@@ -0,0 +1,16 @@
+import { Trans } from "@lingui/macro";
+import { VNode } from "preact";
+
+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>
+    );
+};

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

@@ -0,0 +1,19 @@
+import { VNode } from "preact";
+
+import Loading from "components/loading";
+
+export const LoadingPage = ({
+    title,
+    description,
+}: {
+    title: VNode;
+    description?: VNode;
+}) => {
+    return (
+        <div className="text-center">
+            <Loading />
+            <div className="text-4xl">{title}</div>
+            {description && <div className="text-2xl">{description}</div>}
+        </div>
+    );
+};

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

@@ -0,0 +1,42 @@
+import { Trans } from "@lingui/macro";
+
+import { useNewVersion } from "plugins/lime-plugin-firmware/src/firmwareQueries";
+
+import { useBoardData } from "utils/queries";
+
+export const NewVersionAvailable = ({
+    readyForUpgrade,
+}: {
+    readyForUpgrade?: boolean;
+}) => {
+    const { data: boardData } = useBoardData();
+    const { data: newVersion } = useNewVersion();
+
+    return (
+        <div className="text-center">
+            <div className="text-4xl">
+                {readyForUpgrade ? (
+                    <Trans>Start Mesh Wide Transaction</Trans>
+                ) : (
+                    <Trans>New version available!</Trans>
+                )}
+            </div>
+            <div className="text-2xl">
+                <Trans>This node version:</Trans>
+                <br />
+                {boardData && boardData.release.description}
+            </div>
+            <div className="text-2xl">
+                <Trans>New available version:</Trans>
+                <br />
+                {newVersion && newVersion.version}
+            </div>
+            {readyForUpgrade && (
+                <div className="text-2xl">
+                    <Trans>Is ready for upgrade!</Trans>
+                    <br />
+                </div>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,19 @@
+import { Trans } from "@lingui/macro";
+
+import { useNewVersion } from "plugins/lime-plugin-firmware/src/firmwareQueries";
+
+import { useBoardData } from "utils/queries";
+
+export const NoNewVersionAvailable = () => {
+    const { data: boardData } = useBoardData();
+    const { data: newVersion } = useNewVersion();
+
+    return (
+        <div className="text-center ">
+            <div className="text-9xl text-primary-light">✓</div>
+            <div className="text-4xl">
+                <Trans>No new version available!</Trans>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,28 @@
+import { Trans } from "@lingui/macro";
+
+import { StatusMessage } from "components/status/statusMessage";
+
+import { ParallelMutationError, SyncCallErrors } from "utils/meshWideSyncCall";
+
+export const ParallelErrors = ({ errors }: { errors: SyncCallErrors }) => {
+    return (
+        // Important to not add any style to this fragment because could add errors on growing on long lists
+        <>
+            <StatusMessage status={"warning"}>
+                <Trans>Some nodes have errors:</Trans>
+            </StatusMessage>
+            <div className={"flex flex-col gap-3 mt-4 overflow-auto gap-4"}>
+                {errors.map((error, key) => {
+                    if (error instanceof ParallelMutationError) {
+                        return (
+                            <div key={key}>
+                                <strong>{error.ip}</strong>: {error.message}
+                            </div>
+                        );
+                    }
+                    return <div key={key}>{error.toString()}</div>;
+                })}
+            </div>
+        </>
+    );
+};

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

@@ -0,0 +1,17 @@
+import { useMeshUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
+
+export const TransactionStarted = () => {
+    const { someNodeDownloading } = useMeshUpgrade();
+
+    return (
+        <div>
+            Transaction started!
+            {someNodeDownloading && (
+                <div>
+                    Some nodes seems to be downloading, check network page for
+                    more information
+                </div>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,25 @@
+import { Trans } from "@lingui/macro";
+
+import { ParallelErrors } from "plugins/lime-plugin-mesh-wide-upgrade/src/components/upgradeState/ParallelErrors";
+import { useMeshUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
+import { useParallelScheduleUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueries";
+
+export const UpgradeScheduled = () => {
+    const { totalNodes } = useMeshUpgrade();
+    const { errors, results } = useParallelScheduleUpgrade();
+    const nodesToBeUpgraded = results.length;
+
+    return (
+        <>
+            <div className="text-4xl mb-4">
+                <Trans>Upgrade is scheduled!</Trans>
+            </div>
+            <div className="text-2xl mb-6">
+                <Trans>
+                    {nodesToBeUpgraded} of {totalNodes} will be upgraded
+                </Trans>
+            </div>
+            {errors?.length > 0 && <ParallelErrors errors={errors} />}
+        </>
+    );
+};