From 5f97a092b52a63d6594a98604d675ff9e3546486 Mon Sep 17 00:00:00 2001 From: selankon Date: Tue, 24 Sep 2024 10:24:04 -0500 Subject: [PATCH] Implement mesh wide config plugin (#457) move config to new package implements the EditConfiguration modal --- plugins/lime-plugin-mesh-wide-config/index.ts | 8 ++ .../src/components/Components.tsx | 61 +++++++++++++ .../src/components}/ConfigSection.tsx | 8 +- .../src/components}/MeshStatus.tsx | 0 .../src/components}/OptionForm.tsx | 4 +- .../src/components/modals.tsx | 87 +++++++++++++++++++ .../src/containers/EditConfiguration.tsx | 39 +++++++++ .../src/meshConfigApi.ts | 31 +++++++ .../src/meshConfigPage.tsx | 19 ++++ .../src/meshConfigQueries.tsx | 14 +++ .../src/meshConfigTypes.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/meshWideMocks.tsx | 31 ------- .../src/meshWidePage.tsx | 4 +- .../src/meshWideQueries.tsx | 16 ---- .../src/meshWideTypes.tsx | 7 -- .../src/screens/configPage.tsx | 40 --------- plugins/lime-plugin-rx/src/sections/wired.tsx | 2 +- src/components/Modal/FullScreenModal.tsx | 17 ++-- src/config.ts | 4 +- 23 files changed, 289 insertions(+), 192 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 (92%) 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/containers/EditConfiguration.tsx create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigApi.ts create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx create mode 100644 plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes.tsx rename plugins/lime-plugin-mesh-wide/src/components/{configPage => }/modals.tsx (58%) delete mode 100644 plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx 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 000000000..7dcc9afc7 --- /dev/null +++ b/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; 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 000000000..9c802d2be --- /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 ( +
+ {children} + {btn && } +
+ ); +}; + +export const StatusMessage = ({ + isError, + children, + classes, +}: { + classes?: string; +} & IStatusMessage) => ( +
+ {isError ? ( + + ) : ( + + )} + {children} +
+); + +export const EditOrDelete = ({ + onEdit, + onDelete, +}: { + onEdit: (e) => void; + onDelete: (e) => void; +}) => ( +
+ + +
+); 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 92% 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 95f64665b..0acd58bbe 100644 --- a/plugins/lime-plugin-mesh-wide/src/components/configPage/ConfigSection.tsx +++ b/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 ( 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 7f93c1dc3..df5dbb9fe 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 000000000..bd0ec9257 --- /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: ( +
+ + Are you sure you want to {title} the{" "} + {prop} property? + +
+ ), + title, + [`${actionName}Cb`]: actionCb, + [`${actionName}BtnText`]: btnText, + }); + toggleModal(); + }, + [actionName, btnText, setModalState, title, toggleModal] + ); + return { actionModal, toggleModal }; +}; + +export const useDeletePropModal = () => + useActionModal( + Delete property, + Delete, + "delete" + ); + +export const useEditPropModal = () => + useActionModal( + Edit property, + Edit, + "success" + ); + +export const useAddNewSectionModal = () => { + const { toggleModal, setModalState } = useModal(); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + defaultValues: { name: "" }, + }); + + const actionModal = useCallback( + (actionCb: (data) => void) => { + setModalState({ + content: ( +
+ Name} + register={register} + /> +
+ ), + title: Add new section, + successCb: handleSubmit(actionCb), + successBtnText: Add, + }); + toggleModal(); + }, + [handleSubmit, register, setModalState, toggleModal] + ); + return { actionModal, toggleModal }; +}; 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 000000000..d922c7233 --- /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) => { + const { data: meshWideConfig, isLoading } = useMeshWideConfig({}); + + return ( + Mesh wide config} + isLoading={isLoading} + {...props} + > + {meshWideConfig && ( + <> +
+ {meshWideConfig.map((dropdown, index) => ( + + ))} + +
+ + + )} + + ); +}; + +export default EditConfiguration; 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 000000000..fc92ad20c --- /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 new file mode 100644 index 000000000..e77b07a37 --- /dev/null +++ b/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 setShowEditConfig(false)} />; + } + + return ; +}; + +export default MeshConfigPage; diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries.tsx new file mode 100644 index 000000000..396d49afd --- /dev/null +++ b/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( + ["lime-meshwide", "get_mesh_config"], + getMeshWideConfig, + { + ...params, + } + ); +} 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 000000000..d6e35770f --- /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/index.ts b/plugins/lime-plugin-mesh-wide/index.ts index 3ea2bc26a..1837c2c72 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 92dc3d695..44e07459e 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 d667ba754..3208f9b98 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 4fde5161b..ab7ce6a00 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: ( -
- - Are you sure you want to {title} the{" "} - {prop} property? - -
- ), - title, - [`${actionName}Cb`]: actionCb, - [`${actionName}BtnText`]: btnText, - }); - toggleModal(); - }, - [actionName, btnText, setModalState, title, toggleModal] - ); - return { actionModal, toggleModal }; -}; - -export const useDeletePropModal = () => - useActionModal( - Delete property, - Delete, - "delete" - ); - -export const useEditPropModal = () => - useActionModal( - Edit property, - Edit, - "success" - ); - -export const useAddNewSectionModal = () => { - const { toggleModal, setModalState } = useModal(); - - const { - register, - handleSubmit, - formState: { errors }, - } = useForm({ - defaultValues: { name: "" }, - }); - - const actionModal = useCallback( - (actionCb: (data) => void) => { - setModalState({ - content: ( -
- Name} - register={register} - /> -
- ), - title: Add new section, - successCb: handleSubmit(actionCb), - successBtnText: Add, - }); - 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/meshWideMocks.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideMocks.tsx index 26b0f7c23..790924e4f 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/meshWidePage.tsx b/plugins/lime-plugin-mesh-wide/src/meshWidePage.tsx index 66a7fc564..bf2fb0a90 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 = () => { - {/* route("/meshwide/config")} />*/} + route("/meshwide/config")} /> ); }; diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideQueries.tsx index 6bb9bf610..80ed989e4 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, @@ -232,20 +230,6 @@ export const useSetLinkReferenceState = ({ }); }; -/** - * Set mesh wide config - */ - -export function useMeshWideConfig(params) { - return useQuery( - ["lime-meshwide", "get_mesh_config"], - getMeshWideConfig, - { - ...params, - } - ); -} - /** * This query is used to store the selected feature on the map. * diff --git a/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx b/plugins/lime-plugin-mesh-wide/src/meshWideTypes.tsx index b8d0ca7c4..18ca9ad59 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", diff --git a/plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx b/plugins/lime-plugin-mesh-wide/src/screens/configPage.tsx deleted file mode 100644 index 8da449a5f..000000000 --- a/plugins/lime-plugin-mesh-wide/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/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"; - -const MeshWideConfigPage = () => { - const { data: meshWideConfig, isLoading } = useMeshWideConfig({}); - - return ( - <> - Mesh wide config} - isLoading={isLoading} - > - {meshWideConfig && ( - <> -
- {meshWideConfig.map((dropdown, index) => ( - - ))} - -
- - - )} - - - ); -}; - -export default MeshWideConfigPage; diff --git a/plugins/lime-plugin-rx/src/sections/wired.tsx b/plugins/lime-plugin-rx/src/sections/wired.tsx index 32ea13c16..26b66da07 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[] }) => {
{ports[role].map((port) => { const link = - port.link.toLowerCase() === "up" + port.link?.toLowerCase() === "up" ? "fill-primary-dark" : "fill-disabled"; return ( diff --git a/src/components/Modal/FullScreenModal.tsx b/src/components/Modal/FullScreenModal.tsx index 7dec9c634..31a1a4ce5 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 (
route(backUrl)} + onClick={onClose} > X
diff --git a/src/config.ts b/src/config.ts index 8560587f9..fd1219a79 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 ];