chore(meshconfig): bulk bugfix

libremesh · Oct 29, 2024 · c0dda22 · c0dda22
1 parent 662becd
commit c0dda22
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 58 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -39,7 +39,7 @@ export const ConfigSection = ({
                     keyString={key}
                 />
             ))}
-            <AddNewElementBtn sectionName={title} />
+            <AddNewConfigSection sectionName={title} />
         </Collapsible>
     );
 };
@@ -106,7 +106,11 @@ export const SectionEditOrDelete = ({ name }) => {
     );
 };
 
-export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
+export const AddNewConfigSection = ({
+    sectionName,
+}: {
+    sectionName?: string;
+}) => {
     const { open, onOpen, onClose } = useDisclosure();
     const { showToast } = useToast();
 

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -1,5 +1,5 @@
-import { Trans } from "@lingui/macro";
-import { StateUpdater, useState } from "preact/hooks";
+import { Trans, t } from "@lingui/macro";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
 import { useDisclosure } from "components/Modal/useDisclosure";
@@ -104,7 +104,6 @@ export const EditableField = ({
     setIsEditing?: StateUpdater<boolean>;
 }) => {
     const { control, setValue, watch, getValues } = useFormContext();
-    // const { showToast } = useToast();
     const value = watch(name);
     const [initialState] = useState(value);
 
@@ -117,6 +116,13 @@ export const EditableField = ({
         setValue(name, [...value, ""]); // Update form values
     };
 
+    // Ensure the list has at least one item at the start
+    useEffect(() => {
+        if (isList && value.length === 0) {
+            setValue(name, [""]);
+        }
+    }, [isList, value, name, setValue]);
+
     return (
         <>
             {isList ? (
@@ -126,6 +132,13 @@ export const EditableField = ({
                             key={index}
                             control={control}
                             name={`${name}[${index}]`}
+                            rules={{
+                                minLength: {
+                                    value: 1,
+                                    message: t`Minimum length is 1`,
+                                },
+                                required: t`This field cannot be empty`,
+                            }}
                             render={({ field }) => (
                                 <div
                                     className={
@@ -154,12 +167,7 @@ export const EditableField = ({
                         name={name}
                         control={control}
                         render={({ field }) => (
-                            <input
-                                type="text"
-                                data-testid="password-input"
-                                className="w-100"
-                                {...field}
-                            />
+                            <input type="text" className="w-100" {...field} />
                         )}
                     />
                 </>

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/macro";
+import { Trans, t } from "@lingui/macro";
 import { Label } from "@tanstack/react-query-devtools/build/lib/Explorer";
 import { FormProvider, useForm } from "react-hook-form";
 
@@ -60,12 +60,18 @@ export const AddNewSectionModal = ({
         defaultValues: { name: "", value: "", values: [""], isList: false },
     });
 
+    const handleSuccess = (data: AddNewSectionFormProps) => {
+        onSuccess(data); // Call the parent onSuccess handler
+        reset(); // Reset the form after successful submission
+    };
+
     const {
         register,
         handleSubmit,
         setValue,
         formState: { errors },
         watch,
+        reset,
     } = fmethods;
 
     let title = <Trans>Add new section</Trans>;
@@ -80,16 +86,19 @@ export const AddNewSectionModal = ({
             title={title}
             successBtnText={<Trans>Add</Trans>}
             {...rest}
-            onSuccess={handleSubmit(onSuccess)}
+            onSuccess={handleSubmit(handleSuccess)}
         >
             <FormProvider {...fmethods}>
                 <InputField
                     id={"name"}
                     label={<Trans>Name</Trans>}
                     register={register}
                     options={{
-                        required: "Name is required",
-                        minLength: { value: 1, message: "Minimum length is 1" },
+                        required: t`This field cannot be empty`,
+                        minLength: {
+                            value: 1,
+                            message: t`Minimum length is 1`,
+                        },
                     }}
                     error={errors.name?.message}
                 />

diff --git a/...nfig/src/containers/EditConfiguration.tsx → ...fig/src/containers/LimeConfigEditForm.tsx b/...nfig/src/containers/EditConfiguration.tsx → ...fig/src/containers/LimeConfigEditForm.tsx
@@ -13,14 +13,14 @@ import {
 } from "components/Modal/FullScreenModal";
 
 import {
-    AddNewElementBtn,
+    AddNewConfigSection,
     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 { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
 
-const EditConfiguration = (props: Partial<IFullScreenModalProps>) => {
+const LimeConfigEditForm = (props: Partial<IFullScreenModalProps>) => {
     const { data: meshWideConfig, isLoading } = useMeshWideConfig({});
 
     return (
@@ -30,14 +30,13 @@ const EditConfiguration = (props: Partial<IFullScreenModalProps>) => {
             {...props}
         >
             {!!meshWideConfig && (
-                // <DynamicForm meshWideConfig={meshWideConfig} />
-                <EditConfigurationInner meshWideConfig={meshWideConfig} />
+                <EditConfigForm meshWideConfig={meshWideConfig} />
             )}
         </FullScreenModal>
     );
 };
 
-const EditConfigurationInner = ({
+const EditConfigForm = ({
     meshWideConfig,
 }: {
     meshWideConfig: IMeshWideConfig;
@@ -46,34 +45,33 @@ const EditConfigurationInner = ({
         defaultValues: meshWideConfig,
     });
 
+    const formData = fMethods.watch();
+
     const onSubmit = (data) => {
         console.log("Form Data:", data);
     };
-    return (
-        <FormProvider {...fMethods}>
-            <form onSubmit={fMethods.handleSubmit(onSubmit)}>
-                <div className={"flex flex-col gap-3"}>
-                    <DrawForm />
-                    <AddNewElementBtn />
-                </div>
-                <MeshStatus />
-            </form>
-        </FormProvider>
-    );
-};
-
-const DrawForm = () => {
-    const { watch } = useFormContext<IMeshWideConfig>();
-    const formData = watch();
 
-    console.log("formData", formData);
     return (
-        <>
-            {Object.entries(formData).map(([title, dropdown], index) => (
-                <ConfigSection key={index} title={title} dropdown={dropdown} />
-            ))}
-        </>
+        <div className={"flex flex-col h-full w-full max-h-full"}>
+            <FormProvider {...fMethods}>
+                <form onSubmit={fMethods.handleSubmit(onSubmit)}>
+                    <div className={"flex flex-col gap-3"}>
+                        {Object.entries(formData).map(
+                            ([title, dropdown], index) => (
+                                <ConfigSection
+                                    key={index}
+                                    title={title}
+                                    dropdown={dropdown}
+                                />
+                            )
+                        )}
+                        <AddNewConfigSection />
+                    </div>
+                    <MeshStatus />
+                </form>
+            </FormProvider>
+        </div>
     );
 };
 
-export default EditConfiguration;
+export default LimeConfigEditForm;
diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx
@@ -3,15 +3,15 @@ import React from "react";
 
 import WizardWrapper from "components/mesh-wide-wizard/WizardWrapper";
 
-import EditConfiguration from "plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration";
+import LimeConfigEditForm from "plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm";
 import NodesListPage from "plugins/lime-plugin-mesh-wide-config/src/containers/NodesListPage";
 import StatusPage from "plugins/lime-plugin-mesh-wide-config/src/containers/StatusPage";
 
 const MeshConfigPage = () => {
     const [showEditConfig, setShowEditConfig] = useState(false);
 
     if (showEditConfig) {
-        return <EditConfiguration onClose={() => setShowEditConfig(false)} />;
+        return <LimeConfigEditForm onClose={() => setShowEditConfig(false)} />;
     }
 
     // return <Button onClick={() => setShowEditConfig(true)}>Show modal</Button>;

diff --git a/src/components/buttons/button.tsx b/src/components/buttons/button.tsx
@@ -1,15 +1,15 @@
 import { useState } from "preact/hooks";
 import React, { useCallback } from "react";
 
-export interface ButtonProps {
+export type ButtonProps = {
     onClick?: ((e) => void) | ((e) => Promise<void>);
     children?: any; // type error with Trans component
     size?: "sm" | "md" | "lg";
     color?: "primary" | "secondary" | "danger" | "info" | "disabled";
     href?: string;
     outline?: boolean;
     disabled?: boolean;
-}
+} & Omit<React.JSX.HTMLAttributes<HTMLDivElement>, "size">;
 
 export const Button = ({
     size = "md",
@@ -72,21 +72,20 @@ export const Button = ({
     const cls = `cursor-pointer font-semibold rounded-xl text-center place-content-center transition-all duration-300
     justify-center border-0 ${sizeClasses}  ${colorClasses}`;
 
-    // useCallback for button click
     const handleClick = useCallback(
         async (e) => {
-            if (innerIsLoading || disabled) return;
+            if (innerIsLoading || disabled || !onClick) return;
             setInnerIsLoading(true);
             try {
                 await onClick(e);
             } finally {
                 setInnerIsLoading(false);
             }
         },
-        [disabled, innerIsLoading, onClick]
+        [innerIsLoading, disabled, onClick]
     );
 
-    const Btn = () => (
+    const btn = (
         <div
             type="button"
             onClick={(e) => handleClick(e)}
@@ -96,11 +95,10 @@ export const Button = ({
             {children}
         </div>
     );
-    return href ? (
-        <a href={href}>
-            <Btn />
-        </a>
-    ) : (
-        <Btn />
-    );
+
+    if (href) {
+        return <a href={href}>{btn}</a>;
+    }
+
+    return <>{btn}</>;
 };