Implement mesh wide config plugin (#457)

move config to new package
implements the EditConfiguration modal

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

@@ -0,0 +1,8 @@
+import MeshConfigPage from "./src/meshConfigPage";
+
+export default {
+    name: "meshwide/config",
+    page: MeshConfigPage,
+    isCommunityProtected: true,
+    additionalRoutes: [["/meshwide/config", MeshConfigPage]],
+} as LimePlugin;

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

plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection.tsx → plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx

@@ -4,14 +4,14 @@ 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";
-import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
+} 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";
 
 export const ConfigSection = ({ dropdown }: { dropdown: IMeshWideSection }) => {
     return (

plugins/lime-plugin-mesh-wide/src/components/configPage/OptionForm.tsx → 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,

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

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

plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx

@@ -0,0 +1,19 @@
+import { useState } from "preact/hooks";
+import React from "react";
+
+import { Button } from "components/elements/button";
+
+import EditConfiguration from "plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration";
+
+const MeshConfigPage = () => {
+    // State to show modal
+    const [showEditConfig, setShowEditConfig] = useState(false);
+
+    if (showEditConfig) {
+        return <EditConfiguration onClose={() => setShowEditConfig(false)} />;
+    }
+
+    return <Button onClick={() => setShowEditConfig(true)}>Show modal</Button>;
+};
+
+export default MeshConfigPage;

plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+
+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>(
+        ["lime-meshwide", "get_mesh_config"],
+        getMeshWideConfig,
+        {
+            ...params,
+        }
+    );
+}

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[];

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;

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,

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 {