From 1d779500492970d99a003f47d81e0144c282c2bb Mon Sep 17 00:00:00 2001
From: PrasadMadine <varaprasad.madine@zemosolabs.com>
Date: Fri, 14 Jun 2024 12:19:02 +0530
Subject: [PATCH 1/3] fix/Added error message when label and value are empty in
 radi group widget

---
 .../propertyControls/KeyValueComponent.tsx    | 102 ++++++++++++------
 .../widgets/RadioGroupWidget/widget/index.tsx |  10 ++
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index ab9ef69223e1..e8b5e3a57fa2 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -38,6 +38,15 @@ function updateOptionValue<T>(
     };
   });
 }
+const FlexBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ErrorMessageBox = styled.div`
+  color: red;
+`;
 
 const StyledBox = styled.div`
   width: 10px;
@@ -69,6 +78,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     SegmentedControlOptionWithKey[]
   >([]);
   const [typing, setTyping] = useState<boolean>(false);
+  const [errorMessages, setErrorMessages] = useState<string[]>([]);
   const { pairs } = props;
   useEffect(() => {
     let { pairs } = props;
@@ -84,6 +94,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     );
 
     pairs.length !== 0 && !typing && setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
   }, [props, pairs.length, renderPairs.length]);
 
   const debouncedUpdatePairs = useCallback(
@@ -105,6 +116,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
 
     setRenderPairs(updatedRenderPairs);
     debouncedUpdatePairs(updatedPairs);
+    validatePairs(updatedRenderPairs);
   }
 
   function updateValue(index: number, updatedValue: string) {
@@ -119,6 +131,17 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
 
     setRenderPairs(updatedRenderPairs);
     debouncedUpdatePairs(updatedPairs);
+    validatePairs(updatedRenderPairs);
+  }
+
+  function validatePairs(pairs: SegmentedControlOptionWithKey[]) {
+    const newErrorMessages = pairs.map((pair) => {
+      if (!pair.label && !pair.value) {
+        return "Both Name and Value can't be empty";
+      }
+      return "";
+    });
+    setErrorMessages(newErrorMessages);
   }
 
   function deletePair(index: number, isUpdatedViaKeyboard = false) {
@@ -129,6 +152,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     const newRenderPairs = renderPairs.filter((o, i) => i !== index);
 
     setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
     props.updatePairs(newPairs, isUpdatedViaKeyboard);
   }
 
@@ -162,6 +186,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     });
 
     setRenderPairs(updatedRenderPairs);
+    validatePairs(updatedRenderPairs);
     props.updatePairs(pairs, e.detail === 0);
   }
 
@@ -177,40 +202,47 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     <>
       {renderPairs.map((pair: SegmentedControlOptionWithKey, index) => {
         return (
-          <ControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
-            <StyledInputGroup
-              dataType={"text"}
-              onBlur={onInputBlur}
-              onChange={(value: string) => {
-                updateKey(index, value);
-              }}
-              onFocus={onInputFocus}
-              placeholder={"Name"}
-              value={pair.label}
-            />
-            <StyledBox />
-            <StyledInputGroup
-              dataType={"text"}
-              onBlur={onInputBlur}
-              onChange={(value: string) => {
-                updateValue(index, value);
-              }}
-              onFocus={onInputFocus}
-              placeholder={"Value"}
-              value={pair.value}
-            />
-            <StyledBox />
-            <Button
-              isIconButton
-              kind="tertiary"
-              onClick={(e: React.MouseEvent) => {
-                deletePair(index, e.detail === 0);
-              }}
-              size="sm"
-              startIcon="delete-bin-line"
-              style={{ width: "50px" }}
-            />
-          </ControlWrapper>
+          <FlexBox>
+            <ControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
+              <StyledInputGroup
+                dataType={"text"}
+                onBlur={onInputBlur}
+                onChange={(value: string) => {
+                  updateKey(index, value);
+                }}
+                onFocus={onInputFocus}
+                placeholder={"Name"}
+                value={pair.label}
+              />
+              <StyledBox />
+              <StyledInputGroup
+                dataType={"text"}
+                onBlur={onInputBlur}
+                onChange={(value: string) => {
+                  updateValue(index, value);
+                }}
+                onFocus={onInputFocus}
+                placeholder={"Value"}
+                value={pair.value}
+              />
+              <StyledBox />
+              <Button
+                isIconButton
+                kind="tertiary"
+                onClick={(e: React.MouseEvent) => {
+                  deletePair(index, e.detail === 0);
+                }}
+                size="sm"
+                startIcon="delete-bin-line"
+                style={{ width: "50px" }}
+              />
+            </ControlWrapper>
+            {errorMessages[index] && (
+              <ErrorMessageBox>
+                {errorMessages[index]}
+              </ErrorMessageBox>
+            )}
+          </FlexBox>
         );
       })}
 
@@ -227,4 +259,4 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
       </div>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
index 15fe153a9955..2da4610337cf 100644
--- a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
@@ -70,6 +70,16 @@ export function optionsCustomValidation(
         break;
       }
 
+      if (!label && !value) {
+        _isValid = false;
+        message = {
+          name: "ValidationError",
+          message:
+            "Both Name and Value can't be empty",
+        };
+        break;
+      }
+
       //Check if the required field "label" is present:
       if (!label) {
         _isValid = false;

From ef4beda38b63bcd9fc7a0b7eb121cf7564b15337 Mon Sep 17 00:00:00 2001
From: PrasadMadine <varaprasad.madine@zemosolabs.com>
Date: Fri, 14 Jun 2024 13:46:57 +0530
Subject: [PATCH 2/3] fix changes suggested by code rabbit ai

---
 .../src/components/propertyControls/KeyValueComponent.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index e8b5e3a57fa2..4c5a27f9e174 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -45,7 +45,7 @@ const FlexBox = styled.div`
 `;
 
 const ErrorMessageBox = styled.div`
-  color: red;
+  color: ${props => props.theme.colors.error};
 `;
 
 const StyledBox = styled.div`
@@ -202,8 +202,8 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     <>
       {renderPairs.map((pair: SegmentedControlOptionWithKey, index) => {
         return (
-          <FlexBox>
-            <ControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
+          <FlexBox key={pair.key}>
+            <ControlWrapper orientation={"HORIZONTAL"}>
               <StyledInputGroup
                 dataType={"text"}
                 onBlur={onInputBlur}
@@ -259,4 +259,4 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
       </div>
     </>
   );
-}
\ No newline at end of file
+}

From ecd557a07c6c38c2491c740a01d746e818667d2d Mon Sep 17 00:00:00 2001
From: PrasadMadine <varaprasad.madine@zemosolabs.com>
Date: Wed, 26 Jun 2024 13:39:29 +0530
Subject: [PATCH 3/3] Fix: Made suggested UI changes

---
 .../src/assets/icons/alert/warning-error.svg  |  1 +
 .../propertyControls/KeyValueComponent.tsx    | 40 +++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 app/client/src/assets/icons/alert/warning-error.svg

diff --git a/app/client/src/assets/icons/alert/warning-error.svg b/app/client/src/assets/icons/alert/warning-error.svg
new file mode 100644
index 000000000000..69d06d875b24
--- /dev/null
+++ b/app/client/src/assets/icons/alert/warning-error.svg
@@ -0,0 +1 @@
+<svg fill="#ff0000" height="14" width="14" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" stroke="#ff0000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M256,127.996c-7.074,0-12.8,5.726-12.8,12.8v204.8c0,7.074,5.726,12.8,12.8,12.8c7.074,0,12.8-5.726,12.8-12.8v-204.8 C268.8,133.722,263.074,127.996,256,127.996z"></path> </g> </g> <g> <g> <path d="M508.57,442.731L278.17,43.669c-4.574-7.919-13.022-12.8-22.17-12.8s-17.596,4.881-22.17,12.8L3.43,442.731 c-4.574,7.919-4.574,17.681,0,25.6c4.574,7.919,13.022,12.8,22.17,12.8h460.8c9.148,0,17.596-4.881,22.17-12.8 S513.143,450.65,508.57,442.731z M25.605,455.522L256,56.461l230.4,399.061H25.605z"></path> </g> </g> <g> <g> <circle cx="256" cy="409.596" r="25.6"></circle> </g> </g> </g></svg>
\ No newline at end of file
diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index 4c5a27f9e174..881774ba2c74 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -6,6 +6,7 @@ import { Button } from "design-system";
 import { generateReactKey } from "utils/generators";
 import { debounce } from "lodash";
 import { getNextEntityName } from "utils/AppsmithUtils";
+import { ReactComponent as WarningErrorIcon } from 'assets/icons/alert/warning-error.svg';
 
 function updateOptionLabel<T>(
   options: Array<T>,
@@ -41,17 +42,44 @@ function updateOptionValue<T>(
 const FlexBox = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
 `;
 
 const ErrorMessageBox = styled.div`
   color: ${props => props.theme.colors.error};
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content:center;
+  margin-left: 0;
+  margin-bottom: 12px;
 `;
 
 const StyledBox = styled.div`
   width: 10px;
 `;
 
+const StyledInputGroup = styled(InputGroup)<{ hasError: boolean }>`
+  > .ads-v2-input__input-section > div {
+    min-width: 0px;
+  }
+  & input {
+    ${props => props.hasError && `
+      border-color: ${props.theme.colors.error};
+    `}
+    ${props => !props.hasError && `
+      border-color: #cdd5df;
+      &:focus {
+        border-color: #4c5664;
+      }
+      &:hover {
+        border-color: #99a4b3;
+      }
+    `}
+  }
+`;
+
 type UpdatePairFunction = (
   pair: SegmentedControlOption[],
   isUpdatedViaKeyboard?: boolean,
@@ -67,12 +95,6 @@ type SegmentedControlOptionWithKey = SegmentedControlOption & {
   key: string;
 };
 
-const StyledInputGroup = styled(InputGroup)`
-  > .ads-v2-input__input-section > div {
-    min-width: 0px;
-  }
-`;
-
 export function KeyValueComponent(props: KeyValueComponentProps) {
   const [renderPairs, setRenderPairs] = useState<
     SegmentedControlOptionWithKey[]
@@ -201,11 +223,13 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
   return (
     <>
       {renderPairs.map((pair: SegmentedControlOptionWithKey, index) => {
+        const hasError = !!errorMessages[index];
         return (
           <FlexBox key={pair.key}>
             <ControlWrapper orientation={"HORIZONTAL"}>
               <StyledInputGroup
                 dataType={"text"}
+                hasError={hasError}
                 onBlur={onInputBlur}
                 onChange={(value: string) => {
                   updateKey(index, value);
@@ -217,6 +241,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
               <StyledBox />
               <StyledInputGroup
                 dataType={"text"}
+                hasError={hasError}
                 onBlur={onInputBlur}
                 onChange={(value: string) => {
                   updateValue(index, value);
@@ -239,6 +264,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
             </ControlWrapper>
             {errorMessages[index] && (
               <ErrorMessageBox>
+                <WarningErrorIcon />
                 {errorMessages[index]}
               </ErrorMessageBox>
             )}