feat(EditFlowSettingsComponent): add validation for duplicate flow names

- Added `invalidName` and `setInvalidName` props to `EditFlowSettings` component to handle validation for duplicate flow names.
- Added `nameLists` useRef to store the list of flow names fetched from the database.
- Added `useEffect` to fetch the flow names from the database and populate `nameLists` useRef.
- Modified `handleNameChange` function to check if the entered name already exists in `nameLists` useRef and set `invalidName` accordingly.
- Added a new span element to display an error message if the name is already in use.

fix(flowSettingsModal): disable save button when the flow name is invalid

- Added `invalidName` and `setInvalidName` states to `FlowSettingsModal` component to handle the validation for invalid flow names.
- Passed `invalidName` and `setInvalidName` props to `EditFlowSettings` component.
- Disabled the save button when `invalidName` is true.

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -1,7 +1,8 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
+import { readFlowsFromDatabase } from "../../controllers/API";
 
 type InputProps = {
   name: string | null;
@@ -9,6 +10,8 @@ type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
+  invalidName: boolean;
+  setInvalidName: (invalidName: boolean) => void;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
@@ -16,6 +19,8 @@ type InputProps = {
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
+  invalidName,
+  setInvalidName,
   description,
   maxLength = 50,
   flows,
@@ -25,6 +30,14 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   updateFlow,
 }) => {
   const [isMaxLength, setIsMaxLength] = useState(false);
+  const nameLists = useRef([]);
+  useEffect(() => {
+    readFlowsFromDatabase().then((flows) => {
+      flows.forEach((flow) => {
+        nameLists.current.push(flow.name);
+      });
+    });
+  }, []);
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -33,7 +46,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-
+    if (!nameLists.current.includes(value)) {
+      setInvalidName(false);
+    } else {
+      setInvalidName(true);
+    }
     setName(value);
   };
 
@@ -55,6 +72,9 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           {isMaxLength && (
             <span className="edit-flow-span">Character limit reached</span>
           )}
+          {invalidName && (
+            <span className="edit-flow-span">Name already in use</span>
+          )}
         </div>
         <Input
           className="nopan nodrag noundo nocopy mt-2 font-normal"

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -23,6 +23,8 @@ export default function FlowSettingsModal({
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
+  const [invalidName, setInvalidName] = useState(false);
+
   function handleClick() {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
@@ -39,6 +41,8 @@ export default function FlowSettingsModal({
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings
+          invalidName={invalidName}
+          setInvalidName={setInvalidName}
           name={name}
           description={description}
           flows={flows}
@@ -50,7 +54,7 @@ export default function FlowSettingsModal({
       </BaseModal.Content>
 
       <BaseModal.Footer>
-        <Button onClick={handleClick} type="submit">
+        <Button disabled={invalidName} onClick={handleClick} type="submit">
           Save
         </Button>
       </BaseModal.Footer>