From a9240050d7e3b07ab7431c052882eec256d5d6a5 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Tue, 24 Sep 2024 16:06:00 +0200
Subject: [PATCH 1/4] chore(meshconfig): move config to new package

---
 plugins/lime-plugin-mesh-wide-config/index.ts |  6 ++
 .../src/components/Components.tsx             | 61 +++++++++++++
 .../src/components}/ConfigSection.tsx         |  6 +-
 .../src/components}/MeshStatus.tsx            |  0
 .../src/components}/OptionForm.tsx            |  4 +-
 .../src/components/modals.tsx                 | 87 +++++++++++++++++++
 .../src/meshConfigPage.tsx                    | 36 ++++++++
 .../src/meshWideQueries.tsx                   | 18 ++++
 .../src/screens/configPage.tsx                |  6 +-
 plugins/lime-plugin-mesh-wide/index.ts        |  2 -
 .../components/FeatureDetail/LinkDetail.tsx   |  2 +-
 .../components/FeatureDetail/NodeDetail.tsx   |  2 +-
 .../components/{configPage => }/modals.tsx    | 77 ----------------
 .../src/meshWidePage.tsx                      |  4 +-
 .../src/meshWideQueries.tsx                   | 14 ---
 15 files changed, 221 insertions(+), 104 deletions(-)
 create mode 100644 plugins/lime-plugin-mesh-wide-config/index.ts
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx
 rename plugins/{lime-plugin-mesh-wide/src/components/configPage => lime-plugin-mesh-wide-config/src/components}/ConfigSection.tsx (95%)
 rename plugins/{lime-plugin-mesh-wide/src/components/configPage => lime-plugin-mesh-wide-config/src/components}/MeshStatus.tsx (100%)
 rename plugins/{lime-plugin-mesh-wide/src/components/configPage => lime-plugin-mesh-wide-config/src/components}/OptionForm.tsx (98%)
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx
 rename plugins/{lime-plugin-mesh-wide => lime-plugin-mesh-wide-config}/src/screens/configPage.tsx (85%)
 rename plugins/lime-plugin-mesh-wide/src/components/{configPage => }/modals.tsx (58%)

diff --git a/plugins/lime-plugin-mesh-wide-config/index.ts b/plugins/lime-plugin-mesh-wide-config/index.ts
new file mode 100644
index 00000000..5ca40f74
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/index.ts
@@ -0,0 +1,6 @@
+import MeshConfigPage from "./src/meshConfigPage";
+
+export default {
+    name: "MeshWide",
+    page: MeshConfigPage,
+} as LimePlugin;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx
new file mode 100644
index 00000000..9c802d2b
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx
@@ -0,0 +1,61 @@
+import { VNode } from "preact";
+
+import { Button } from "components/buttons/button";
+import { BinIcon } from "components/icons/bin";
+import { EditIcon } from "components/icons/edit";
+import { StatusIcon } from "components/icons/status";
+
+interface IStatusMessage {
+    isError: boolean;
+    children: VNode | string;
+}
+
+// todo(kon): merge with src/components/status/statusAndButton.tsx
+export const StatusAndButton = ({
+    isError,
+    children,
+    btn,
+    onClick,
+}: { btn?: VNode | string; onClick?: () => void } & IStatusMessage) => {
+    const containerClasses =
+        "flex flex-col items-center justify-center text-center bg-white py-5 gap-3";
+
+    return (
+        <div className={containerClasses}>
+            <StatusMessage isError={isError}>{children}</StatusMessage>
+            {btn && <Button onClick={onClick}>{btn}</Button>}
+        </div>
+    );
+};
+
+export const StatusMessage = ({
+    isError,
+    children,
+    classes,
+}: {
+    classes?: string;
+} & IStatusMessage) => (
+    <div
+        className={`flex flex-row gap-3 ${classes} items-center justify-center text-center`}
+    >
+        {isError ? (
+            <StatusIcon status={"warning"} />
+        ) : (
+            <StatusIcon status={"success"} />
+        )}
+        {children}
+    </div>
+);
+
+export const EditOrDelete = ({
+    onEdit,
+    onDelete,
+}: {
+    onEdit: (e) => void;
+    onDelete: (e) => void;
+}) => (
+    <div className={"flex flex-row gap-3"}>
+        <EditIcon className={"cursor-pointer"} onClick={onEdit} />
+        <BinIcon className={"cursor-pointer"} onClick={onDelete} />
+    </div>
+);
diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
similarity index 95%
rename from plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection.tsx
rename to plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
index 95f64665..1d2f8c6f 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -4,13 +4,13 @@ import { Button } from "components/buttons/button";
 import { Collapsible } from "components/collapsible";
 import { useToast } from "components/toast/toastProvider";
 
-import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
-import { OptionContainer } from "plugins/lime-plugin-mesh-wide/src/components/configPage/OptionForm";
+import { OptionContainer } from "plugins/lime-plugin-mesh-wide-config/src/components/OptionForm";
 import {
     useAddNewSectionModal,
     useDeletePropModal,
     useEditPropModal,
-} from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
+} from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
+import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 export const ConfigSection = ({ dropdown }: { dropdown: IMeshWideSection }) => {
diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/MeshStatus.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus.tsx
similarity index 100%
rename from plugins/lime-plugin-mesh-wide/src/components/configPage/MeshStatus.tsx
rename to plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus.tsx
diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
similarity index 98%
rename from plugins/lime-plugin-mesh-wide/src/components/configPage/OptionForm.tsx
rename to plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
index 7f93c1dc..df5dbb9f 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/configPage/OptionForm.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -7,11 +7,11 @@ import Divider from "components/divider";
 import InputField from "components/inputs/InputField";
 import { useToast } from "components/toast/toastProvider";
 
-import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 import {
     useDeletePropModal,
     useEditPropModal,
-} from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
+} from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
+import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
 
 const EditOptionForm = ({
     keyString,
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
new file mode 100644
index 00000000..bd0ec925
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
@@ -0,0 +1,87 @@
+import { Trans } from "@lingui/macro";
+import { ComponentChildren } from "preact";
+import { useCallback } from "preact/compat";
+import { useForm } from "react-hook-form";
+
+import { ModalActions, useModal } from "components/Modal/Modal";
+import InputField from "components/inputs/InputField";
+
+import { dataTypeNameMapping } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
+import { MeshWideMapDataTypeKeys } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
+
+const useActionModal = (
+    title: ComponentChildren,
+    btnText: ComponentChildren,
+    actionName: ModalActions
+) => {
+    const { toggleModal, setModalState } = useModal();
+
+    const actionModal = useCallback(
+        (prop: string, actionCb: () => void) => {
+            setModalState({
+                content: (
+                    <div>
+                        <Trans>
+                            Are you sure you want to {title} the{" "}
+                            <strong>{prop}</strong> property?
+                        </Trans>
+                    </div>
+                ),
+                title,
+                [`${actionName}Cb`]: actionCb,
+                [`${actionName}BtnText`]: btnText,
+            });
+            toggleModal();
+        },
+        [actionName, btnText, setModalState, title, toggleModal]
+    );
+    return { actionModal, toggleModal };
+};
+
+export const useDeletePropModal = () =>
+    useActionModal(
+        <Trans>Delete property</Trans>,
+        <Trans>Delete</Trans>,
+        "delete"
+    );
+
+export const useEditPropModal = () =>
+    useActionModal(
+        <Trans>Edit property</Trans>,
+        <Trans>Edit</Trans>,
+        "success"
+    );
+
+export const useAddNewSectionModal = () => {
+    const { toggleModal, setModalState } = useModal();
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm({
+        defaultValues: { name: "" },
+    });
+
+    const actionModal = useCallback(
+        (actionCb: (data) => void) => {
+            setModalState({
+                content: (
+                    <div>
+                        <InputField
+                            id={"name"}
+                            label={<Trans>Name</Trans>}
+                            register={register}
+                        />
+                    </div>
+                ),
+                title: <Trans>Add new section</Trans>,
+                successCb: handleSubmit(actionCb),
+                successBtnText: <Trans>Add</Trans>,
+            });
+            toggleModal();
+        },
+        [handleSubmit, register, setModalState, toggleModal]
+    );
+    return { actionModal, toggleModal };
+};
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
new file mode 100644
index 00000000..81132f70
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
@@ -0,0 +1,36 @@
+import { Trans } from "@lingui/macro";
+import React from "react";
+
+import { FullScreenModal } from "components/Modal/FullScreenModal";
+
+import {
+    AddNewSectionBtn,
+    ConfigSection,
+} from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
+import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
+import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshWideQueries";
+
+const MeshConfigPage = () => {
+    const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
+
+    return (
+        <FullScreenModal
+            title={<Trans>Mesh wide config</Trans>}
+            isLoading={isLoading}
+        >
+            {meshWideConfig && (
+                <>
+                    <div className={"flex flex-col gap-3"}>
+                        {meshWideConfig.map((dropdown, index) => (
+                            <ConfigSection key={index} dropdown={dropdown} />
+                        ))}
+                        <AddNewSectionBtn />
+                    </div>
+                    <MeshStatus />
+                </>
+            )}
+        </FullScreenModal>
+    );
+};
+
+export default MeshConfigPage;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx
new file mode 100644
index 00000000..788417e4
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideMocks";
+import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
+
+/**
+ * Set mesh wide config
+ */
+
+export function useMeshWideConfig(params) {
+    return useQuery<IMeshWideConfig>(
+        ["lime-meshwide", "get_mesh_config"],
+        getMeshWideConfig,
+        {
+            ...params,
+        }
+    );
+}
diff --git a/plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
similarity index 85%
rename from plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx
rename to plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
index 8da449a5..01dc0432 100644
--- a/plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
@@ -5,9 +5,9 @@ import { FullScreenModal } from "components/Modal/FullScreenModal";
 import {
     AddNewSectionBtn,
     ConfigSection,
-} from "plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection";
-import { MeshStatus } from "plugins/lime-plugin-mesh-wide/src/components/configPage/MeshStatus";
-import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
+} from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
+import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
+import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshWideQueries";
 
 const MeshWideConfigPage = () => {
     const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
diff --git a/plugins/lime-plugin-mesh-wide/index.ts b/plugins/lime-plugin-mesh-wide/index.ts
index 3ea2bc26..1837c2c7 100644
--- a/plugins/lime-plugin-mesh-wide/index.ts
+++ b/plugins/lime-plugin-mesh-wide/index.ts
@@ -1,10 +1,8 @@
 import { MeshWideMenu } from "./src/meshWideMenu";
 import MeshWidePage from "./src/meshWidePage";
-import MeshWideConfigPage from "./src/screens/configPage";
 
 export default {
     name: "MeshWide",
     page: MeshWidePage,
     menu: MeshWideMenu,
-    additionalRoutes: [["/meshwide/config", MeshWideConfigPage]],
 } as LimePlugin;
diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
index 92dc3d69..44e07459 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx
@@ -8,7 +8,7 @@ import Tabs from "components/tabs";
 import { useToast } from "components/toast/toastProvider";
 
 import { StatusAndButton } from "plugins/lime-plugin-mesh-wide/src/components/Components";
-import { useSetLinkReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
+import { useSetLinkReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/modals";
 import {
     getQueryByLinkType,
     usePointToPointErrors,
diff --git a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
index d667ba75..3208f9b9 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/NodeDetail.tsx
@@ -11,7 +11,7 @@ import {
     Row,
     TitleAndText,
 } from "plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/index";
-import { useSetNodeInfoReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/configPage/modals";
+import { useSetNodeInfoReferenceStateModal } from "plugins/lime-plugin-mesh-wide/src/components/modals";
 import { useSingleNodeErrors } from "plugins/lime-plugin-mesh-wide/src/hooks/useSingleNodeErrors";
 import { getArrayDifference } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import {
diff --git a/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx b/plugins/lime-plugin-mesh-wide/src/components/modals.tsx
similarity index 58%
rename from plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx
rename to plugins/lime-plugin-mesh-wide/src/components/modals.tsx
index 4fde5161..ab7ce6a0 100644
--- a/plugins/lime-plugin-mesh-wide/src/components/configPage/modals.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/components/modals.tsx
@@ -9,83 +9,6 @@ import InputField from "components/inputs/InputField";
 import { dataTypeNameMapping } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { MeshWideMapDataTypeKeys } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
-const useActionModal = (
-    title: ComponentChildren,
-    btnText: ComponentChildren,
-    actionName: ModalActions
-) => {
-    const { toggleModal, setModalState } = useModal();
-
-    const actionModal = useCallback(
-        (prop: string, actionCb: () => void) => {
-            setModalState({
-                content: (
-                    <div>
-                        <Trans>
-                            Are you sure you want to {title} the{" "}
-                            <strong>{prop}</strong> property?
-                        </Trans>
-                    </div>
-                ),
-                title,
-                [`${actionName}Cb`]: actionCb,
-                [`${actionName}BtnText`]: btnText,
-            });
-            toggleModal();
-        },
-        [actionName, btnText, setModalState, title, toggleModal]
-    );
-    return { actionModal, toggleModal };
-};
-
-export const useDeletePropModal = () =>
-    useActionModal(
-        <Trans>Delete property</Trans>,
-        <Trans>Delete</Trans>,
-        "delete"
-    );
-
-export const useEditPropModal = () =>
-    useActionModal(
-        <Trans>Edit property</Trans>,
-        <Trans>Edit</Trans>,
-        "success"
-    );
-
-export const useAddNewSectionModal = () => {
-    const { toggleModal, setModalState } = useModal();
-
-    const {
-        register,
-        handleSubmit,
-        formState: { errors },
-    } = useForm({
-        defaultValues: { name: "" },
-    });
-
-    const actionModal = useCallback(
-        (actionCb: (data) => void) => {
-            setModalState({
-                content: (
-                    <div>
-                        <InputField
-                            id={"name"}
-                            label={<Trans>Name</Trans>}
-                            register={register}
-                        />
-                    </div>
-                ),
-                title: <Trans>Add new section</Trans>,
-                successCb: handleSubmit(actionCb),
-                successBtnText: <Trans>Add</Trans>,
-            });
-            toggleModal();
-        },
-        [handleSubmit, register, setModalState, toggleModal]
-    );
-    return { actionModal, toggleModal };
-};
-
 export const useSetNodeInfoReferenceStateModal = () => {
     const { toggleModal, setModalState, isModalOpen } = useModal();
 
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx b/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx
index 66a7fc56..bf2fb0a9 100644
--- a/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx
@@ -1,6 +1,8 @@
 import { Trans } from "@lingui/macro";
+import { route } from "preact-router";
 import React from "react";
 
+import FloatingButton from "components/buttons/floatting-button";
 import Loading from "components/loading";
 
 import { useLoadLeaflet } from "plugins/lime-plugin-locate/src/locateQueries";
@@ -46,7 +48,7 @@ const MeshWide = () => {
             <FloatingAlert />
             <MeshWideMap />
             <SelectedFeatureBottomSheet />
-            {/*<FloatingButton onClick={() => route("/meshwide/config")} />*/}
+            <FloatingButton onClick={() => route("/meshwide/config")} />
         </>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
index 6bb9bf61..084be6db 100644
--- a/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
@@ -232,20 +232,6 @@ export const useSetLinkReferenceState = ({
     });
 };
 
-/**
- * Set mesh wide config
- */
-
-export function useMeshWideConfig(params) {
-    return useQuery<IMeshWideConfig>(
-        ["lime-meshwide", "get_mesh_config"],
-        getMeshWideConfig,
-        {
-            ...params,
-        }
-    );
-}
-
 /**
  * This query is used to store the selected feature on the map.
  *

From 129f759ae48385416bf5c1e22cb5c0344d93433a Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Tue, 24 Sep 2024 16:14:56 +0200
Subject: [PATCH 2/4] chore(meshconfig): add route

---
 plugins/lime-plugin-mesh-wide-config/index.ts | 3 ++-
 plugins/lime-plugin-rx/src/sections/wired.tsx | 2 +-
 src/config.ts                                 | 4 +++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/plugins/lime-plugin-mesh-wide-config/index.ts b/plugins/lime-plugin-mesh-wide-config/index.ts
index 5ca40f74..f134f124 100644
--- a/plugins/lime-plugin-mesh-wide-config/index.ts
+++ b/plugins/lime-plugin-mesh-wide-config/index.ts
@@ -1,6 +1,7 @@
 import MeshConfigPage from "./src/meshConfigPage";
 
 export default {
-    name: "MeshWide",
+    name: "meshwide/config",
     page: MeshConfigPage,
+    isCommunityProtected: true,
 } as LimePlugin;
diff --git a/plugins/lime-plugin-rx/src/sections/wired.tsx b/plugins/lime-plugin-rx/src/sections/wired.tsx
index 32ea13c1..26b66da0 100644
--- a/plugins/lime-plugin-rx/src/sections/wired.tsx
+++ b/plugins/lime-plugin-rx/src/sections/wired.tsx
@@ -32,7 +32,7 @@ const Ports = ({ switches }: { switches: SwitchStatus[] }) => {
                         <div className={"flex flex-row gap-5 "}>
                             {ports[role].map((port) => {
                                 const link =
-                                    port.link.toLowerCase() === "up"
+                                    port.link?.toLowerCase() === "up"
                                         ? "fill-primary-dark"
                                         : "fill-disabled";
                                 return (
diff --git a/src/config.ts b/src/config.ts
index 8560587f..fd1219a7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,6 +4,7 @@ import Fbw from "plugins/lime-plugin-fbw";
 import Firmware from "plugins/lime-plugin-firmware";
 import Locate from "plugins/lime-plugin-locate";
 import MeshWide from "plugins/lime-plugin-mesh-wide";
+import MeshConfigPage from "plugins/lime-plugin-mesh-wide-config";
 import MeshUpgrade from "plugins/lime-plugin-mesh-wide-upgrade";
 import Metrics from "plugins/lime-plugin-metrics";
 import NetworkAdmin from "plugins/lime-plugin-network-admin";
@@ -28,5 +29,6 @@ export const plugins: LimePlugin[] = [
     ChangeNode,
     RemoteSupport,
     Pirania,
-    Fbw, // fbw does not have menu item
+    Fbw, // does not have menu item
+    MeshConfigPage, // does not have menu item
 ];

From b5485f13ec83d38c8dd62dfc2e148f39d3aa68f0 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Tue, 24 Sep 2024 16:35:36 +0200
Subject: [PATCH 3/4] chore(meshconfig): move some types

---
 .../src/components/ConfigSection.tsx          |  2 +-
 .../src/meshConfigApi.ts                      | 31 +++++++++++++++++++
 .../src/meshConfigPage.tsx                    |  2 +-
 ...hWideQueries.tsx => meshConfigQueries.tsx} |  8 ++---
 .../src/meshConfigTypes.tsx                   |  6 ++++
 .../src/screens/configPage.tsx                |  2 +-
 .../src/meshWideMocks.tsx                     | 31 -------------------
 .../src/meshWideQueries.tsx                   |  2 --
 .../src/meshWideTypes.tsx                     |  7 -----
 9 files changed, 42 insertions(+), 49 deletions(-)
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigApi.ts
 rename plugins/lime-plugin-mesh-wide-config/src/{meshWideQueries.tsx => meshConfigQueries.tsx} (70%)
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes.tsx

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
index 1d2f8c6f..0acd58bb 100644
--- a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -10,8 +10,8 @@ import {
     useDeletePropModal,
     useEditPropModal,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
+import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
 import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
-import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 export const ConfigSection = ({ dropdown }: { dropdown: IMeshWideSection }) => {
     return (
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigApi.ts b/plugins/lime-plugin-mesh-wide-config/src/meshConfigApi.ts
new file mode 100644
index 00000000..fc92ad20
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigApi.ts
@@ -0,0 +1,31 @@
+import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
+
+export const getMeshWideConfig = async () => meshWideConfig;
+
+const options = {
+    primary_interface: "eth0",
+    main_ipv4_address: "10.170.128.0/16/17",
+};
+
+const meshWideConfig: IMeshWideConfig = [
+    {
+        name: "lime system",
+        options,
+    },
+    {
+        name: "lime network",
+        options,
+    },
+    {
+        name: "lime wifi",
+        options,
+    },
+    {
+        name: "generic_uci_config prometheus",
+        options,
+    },
+    {
+        name: "run_asset prometheus_enable",
+        options,
+    },
+];
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
index 81132f70..89a09850 100644
--- a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
@@ -8,7 +8,7 @@ import {
     ConfigSection,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
 import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
-import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshWideQueries";
+import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries";
 
 const MeshConfigPage = () => {
     const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx
similarity index 70%
rename from plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx
rename to plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx
index 788417e4..396d49af 100644
--- a/plugins/lime-plugin-mesh-wide-config/src/meshWideQueries.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx
@@ -1,11 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { getMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideMocks";
-import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
-
-/**
- * Set mesh wide config
- */
+import { getMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigApi";
+import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
 
 export function useMeshWideConfig(params) {
     return useQuery<IMeshWideConfig>(
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes.tsx
new file mode 100644
index 00000000..d6e35770
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes.tsx
@@ -0,0 +1,6 @@
+export interface IMeshWideSection {
+    name: string;
+    options: { [key: string]: string };
+}
+
+export type IMeshWideConfig = IMeshWideSection[];
diff --git a/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
index 01dc0432..36c00ed6 100644
--- a/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
@@ -7,7 +7,7 @@ import {
     ConfigSection,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
 import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
-import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshWideQueries";
+import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries";
 
 const MeshWideConfigPage = () => {
     const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideMocks.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideMocks.tsx
index 26b0f7c2..790924e4 100644
--- a/plugins/lime-plugin-mesh-wide/src/meshWideMocks.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/meshWideMocks.tsx
@@ -2,7 +2,6 @@ import {
     IBaseLink,
     IBatmanLinks,
     ILinks,
-    IMeshWideConfig,
     INodes,
     IWifiLinks,
     LinkType,
@@ -438,33 +437,3 @@ export const nodes = (): INodes => {
 
     return { ...newState, ...newNode };
 };
-
-export const getMeshWideConfig = async () => meshWideConfig;
-//
-const options = {
-    primary_interface: "eth0",
-    main_ipv4_address: "10.170.128.0/16/17",
-};
-
-const meshWideConfig: IMeshWideConfig = [
-    {
-        name: "lime system",
-        options,
-    },
-    {
-        name: "lime network",
-        options,
-    },
-    {
-        name: "lime wifi",
-        options,
-    },
-    {
-        name: "generic_uci_config prometheus",
-        options,
-    },
-    {
-        name: "run_asset prometheus_enable",
-        options,
-    },
-];
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
index 084be6db..80ed989e 100644
--- a/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx
@@ -8,13 +8,11 @@ import { useErrrorConnectionToast } from "components/toast/toasts";
 import { meshUpgradeQueryKeys } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueriesKeys";
 import { getQueryByLinkType } from "plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks";
 import { PontToPointLink } from "plugins/lime-plugin-mesh-wide/src/lib/links/PointToPointLink";
-import { getMeshWideConfig } from "plugins/lime-plugin-mesh-wide/src/meshWideMocks";
 import {
     IBabelLinks,
     IBaseLink,
     IBatmanLinks,
     ILinks,
-    IMeshWideConfig,
     INodes,
     IWifiLinks,
     LinkType,
diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx
index b8d0ca7c..18ca9ad5 100644
--- a/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx
+++ b/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx
@@ -142,13 +142,6 @@ export type SelectedMapFeature = {
     };
 }[FeatureType];
 
-export interface IMeshWideSection {
-    name: string;
-    options: { [key: string]: string };
-}
-
-export type IMeshWideConfig = IMeshWideSection[];
-
 export enum WifiLinkErrorCodes {
     LINK_DOWN = "LINK_DOWN",
     SIGNAL_LOSS = "SIGNAL_LOSS",

From 427b81ee8e27f4fcdfdbd73047ca386e83e64bc0 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Tue, 24 Sep 2024 17:18:25 +0200
Subject: [PATCH 4/4] chore(meshconfig): implement EditConfiguration as modal

---
 plugins/lime-plugin-mesh-wide-config/index.ts |  1 +
 .../src/containers/EditConfiguration.tsx      | 39 ++++++++++++++++++
 .../src/meshConfigPage.tsx                    | 37 +++++------------
 .../src/screens/configPage.tsx                | 40 -------------------
 src/components/Modal/FullScreenModal.tsx      | 17 ++++----
 5 files changed, 59 insertions(+), 75 deletions(-)
 create mode 100644 plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx
 delete mode 100644 plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx

diff --git a/plugins/lime-plugin-mesh-wide-config/index.ts b/plugins/lime-plugin-mesh-wide-config/index.ts
index f134f124..7dcc9afc 100644
--- a/plugins/lime-plugin-mesh-wide-config/index.ts
+++ b/plugins/lime-plugin-mesh-wide-config/index.ts
@@ -4,4 +4,5 @@ export default {
     name: "meshwide/config",
     page: MeshConfigPage,
     isCommunityProtected: true,
+    additionalRoutes: [["/meshwide/config", MeshConfigPage]],
 } as LimePlugin;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx b/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx
new file mode 100644
index 00000000..d922c723
--- /dev/null
+++ b/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx
@@ -0,0 +1,39 @@
+import { Trans } from "@lingui/macro";
+
+import {
+    FullScreenModal,
+    IFullScreenModalProps,
+} from "components/Modal/FullScreenModal";
+
+import {
+    AddNewSectionBtn,
+    ConfigSection,
+} from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
+import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
+import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries";
+
+const EditConfiguration = (props: Partial<IFullScreenModalProps>) => {
+    const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
+
+    return (
+        <FullScreenModal
+            title={<Trans>Mesh wide config</Trans>}
+            isLoading={isLoading}
+            {...props}
+        >
+            {meshWideConfig && (
+                <>
+                    <div className={"flex flex-col gap-3"}>
+                        {meshWideConfig.map((dropdown, index) => (
+                            <ConfigSection key={index} dropdown={dropdown} />
+                        ))}
+                        <AddNewSectionBtn />
+                    </div>
+                    <MeshStatus />
+                </>
+            )}
+        </FullScreenModal>
+    );
+};
+
+export default EditConfiguration;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
index 89a09850..e77b07a3 100644
--- a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
+++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
@@ -1,36 +1,19 @@
-import { Trans } from "@lingui/macro";
+import { useState } from "preact/hooks";
 import React from "react";
 
-import { FullScreenModal } from "components/Modal/FullScreenModal";
+import { Button } from "components/elements/button";
 
-import {
-    AddNewSectionBtn,
-    ConfigSection,
-} from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
-import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
-import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries";
+import EditConfiguration from "plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration";
 
 const MeshConfigPage = () => {
-    const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
+    // State to show modal
+    const [showEditConfig, setShowEditConfig] = useState(false);
 
-    return (
-        <FullScreenModal
-            title={<Trans>Mesh wide config</Trans>}
-            isLoading={isLoading}
-        >
-            {meshWideConfig && (
-                <>
-                    <div className={"flex flex-col gap-3"}>
-                        {meshWideConfig.map((dropdown, index) => (
-                            <ConfigSection key={index} dropdown={dropdown} />
-                        ))}
-                        <AddNewSectionBtn />
-                    </div>
-                    <MeshStatus />
-                </>
-            )}
-        </FullScreenModal>
-    );
+    if (showEditConfig) {
+        return <EditConfiguration onClose={() => setShowEditConfig(false)} />;
+    }
+
+    return <Button onClick={() => setShowEditConfig(true)}>Show modal</Button>;
 };
 
 export default MeshConfigPage;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
deleted file mode 100644
index 36c00ed6..00000000
--- a/plugins/lime-plugin-mesh-wide-config/src/screens/configPage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Trans } from "@lingui/macro";
-
-import { FullScreenModal } from "components/Modal/FullScreenModal";
-
-import {
-    AddNewSectionBtn,
-    ConfigSection,
-} from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
-import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus";
-import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries";
-
-const MeshWideConfigPage = () => {
-    const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
-
-    return (
-        <>
-            <FullScreenModal
-                title={<Trans>Mesh wide config</Trans>}
-                isLoading={isLoading}
-            >
-                {meshWideConfig && (
-                    <>
-                        <div className={"flex flex-col gap-3"}>
-                            {meshWideConfig.map((dropdown, index) => (
-                                <ConfigSection
-                                    key={index}
-                                    dropdown={dropdown}
-                                />
-                            ))}
-                            <AddNewSectionBtn />
-                        </div>
-                        <MeshStatus />
-                    </>
-                )}
-            </FullScreenModal>
-        </>
-    );
-};
-
-export default MeshWideConfigPage;
diff --git a/src/components/Modal/FullScreenModal.tsx b/src/components/Modal/FullScreenModal.tsx
index 7dec9c63..31a1a4ce 100644
--- a/src/components/Modal/FullScreenModal.tsx
+++ b/src/components/Modal/FullScreenModal.tsx
@@ -3,6 +3,12 @@ import { route } from "preact-router";
 
 import Loading from "components/loading";
 
+export interface IFullScreenModalProps {
+    title: ComponentChildren;
+    children: ComponentChildren;
+    isLoading?: boolean;
+    onClose?: () => void;
+}
 /**
  * Used to show a new view with a close button that return to the backUrl param. Is placed over
  * the navbar creating a modal like effect.
@@ -11,19 +17,14 @@ export const FullScreenModal = ({
     title,
     children,
     isLoading,
-    backUrl = "/meshwide",
-}: {
-    title: ComponentChildren;
-    children: ComponentChildren;
-    isLoading?: boolean;
-    backUrl?: string;
-}) => {
+    onClose,
+}: IFullScreenModalProps) => {
     return (
         <div className="flex flex-col min-h-screen w-full">
             <div className="fixed top-0 left-0 right-0 bg-white z-50 py-7 px-4 flex items-center font-medium">
                 <div
                     className={`flex items-center justify-items-start cursor-pointer w-10 h-10 text-black text-3xl`}
-                    onClick={() => route(backUrl)}
+                    onClick={onClose}
                 >
                     X
                 </div>