diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx index ba376cd9b..64084712c 100644 --- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/editFlowSettingsComponent/index.tsx @@ -4,6 +4,7 @@ import { Label } from "../../components/ui/label"; import { Textarea } from "../../components/ui/textarea"; import { InputProps } from "../../types/components"; import { cn } from "../../utils/utils"; +import useFlowsManagerStore from "../../stores/flowsManagerStore"; export const EditFlowSettings: React.FC = ({ name, @@ -17,6 +18,8 @@ export const EditFlowSettings: React.FC = ({ }: InputProps): JSX.Element => { const [isMaxLength, setIsMaxLength] = useState(false); const [isEndpointNameValid, setIsEndpointNameValid] = useState(true); + const [isInvalidName, setIsInvalidName] = useState(false); + const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const handleNameChange = (event: ChangeEvent) => { const { value } = event.target; @@ -25,6 +28,19 @@ export const EditFlowSettings: React.FC = ({ } else { setIsMaxLength(false); } + let invalid = false; + for (let i = 0; i < invalidNameList!.length; i++) { + if (value === invalidNameList![i]) { + invalid = true; + break; + } + if (value === currentFlow?.name) { + invalid = true; + break; + } + invalid = false; + } + setIsInvalidName(invalid); setName!(value); }; @@ -55,6 +71,9 @@ export const EditFlowSettings: React.FC = ({ {isMaxLength && ( Character limit reached )} + {isInvalidName && ( + Invalid name + )} {setName ? (