From 00e81418439ea1ba942a0056322313c044b2b2d7 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sun, 26 Mar 2023 10:49:33 +0100
Subject: [PATCH] adds unique flag check functionality

---
 src/components/LineItem.tsx | 33 ++++++++++++++++++++++++++-------
 src/utils/index.ts          |  4 ++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/LineItem.tsx b/src/components/LineItem.tsx
index 0e8959c..56336f5 100644
--- a/src/components/LineItem.tsx
+++ b/src/components/LineItem.tsx
@@ -11,6 +11,7 @@ import { Flag } from '../../types';
 import DeleteModal from './DeleteModal';
 import SdkModal from './SdkModal';
 import { __ } from '@wordpress/i18n';
+import { checkIfFlagExists } from '../utils';
 
 interface LineItemProps {
 	flags: Flag[];
@@ -31,6 +32,8 @@ const LineItem = ({
 
 	const [hasError, setHasError] = useState(false);
 
+	const [flagExist, setFlagExist] = useState(false);
+
 	const inputRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
@@ -45,14 +48,10 @@ const LineItem = ({
 		closeModal();
 	};
 
-	const handleFlagToggle = (flagId: number, flagEnv = 'prod') => {
+	const handleFlagToggle = (flagId: number) => {
 		const updatedFlags = flags.map((flag: Flag) => {
 			if (flag.id === flagId) {
-				if (flagEnv === 'prod') {
-					flag.enabled = !flag.enabled;
-				} else {
-					flag.preProdEnabled = !flag.preProdEnabled;
-				}
+				flag.enabled = !flag.enabled;
 			}
 			return flag;
 		});
@@ -60,6 +59,7 @@ const LineItem = ({
 	};
 
 	const handleFlagEdit = (value: string, flagId: number) => {
+		//Flag alphanumeric validation
 		if (value.match(/^[a-zA-Z0-9\_-]*$/)) {
 			setHasError(false);
 			setDisableSave(false);
@@ -67,6 +67,15 @@ const LineItem = ({
 			setHasError(true);
 			setDisableSave(true);
 		}
+
+		//Existing flag check
+		if (checkIfFlagExists(flags, value)) {
+			setFlagExist(true);
+			setDisableSave(true);
+		} else {
+			setFlagExist(false);
+			setDisableSave(false);
+		}
 		const updatedFlags = flags.map((flag: Flag) => {
 			if (flag.id === flagId) {
 				flag.name = value;
@@ -142,7 +151,17 @@ const LineItem = ({
 						/>
 					</FlexItem>
 				</Flex>
-				{hasError && (
+				{flagExist && (
+					<BaseControl
+						className="flag-name-error"
+						help={__('Flag name already exists.')}
+						id={`${item.id}`}
+					>
+						{}
+					</BaseControl>
+				)}
+
+				{hasError && !flagExist && (
 					<>
 						<BaseControl
 							className="flag-name-error"
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f74615d..38654d5 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -23,3 +23,7 @@ export const updateFlags = async (
 
 	return result;
 };
+
+export const checkIfFlagExists = (flags: Flag[], flagName: string): boolean => {
+	return flags.filter((flag) => flag.name === flagName).length > 0;
+};