chore(meshconfig): implement EditConfiguration as modal

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;

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;

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;

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>