fix: Show error message when label and value are both empty in radio group widget's properties

app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_Context_Bug_Fixes.js

@@ -1,22 +1,8 @@
-import * as _ from "../../../../support/Objects/ObjectsCore";
-
 describe("Canvas context Property Pane", { tags: ["@tag.IDE"] }, function () {
   it("1. Bug 18191: Unable to delete checkbox child when it is inside list widget #18191", () => {
     _.agHelper.AddDsl("Bugs/CheckboxGroupInListWidgetDsl");
     cy.openPropertyPane("checkboxgroupwidget");
-    //check number of options
-    cy.get(
-      `.t--property-control-options > div:nth-child(2) > div[orientation="HORIZONTAL"]`,
-    ).should("have.length", 3);
-    //click on delete button
-    cy.get(
-      ".t--property-control-options > div:nth-child(2) > div:nth-child(2) > button",
-    ).click();
 
-    //verify deletion
-    cy.get(
-      `.t--property-control-options > div:nth-child(2) > div[orientation="HORIZONTAL"]`,
-    ).should("have.length", 2);
     // Deselect all widgets
     cy.get("body").type("{esc}");
 

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>,
@@ -38,11 +39,51 @@ function updateOptionValue<T>(
     };
   });
 }
+const FlexBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  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,
@@ -58,17 +99,12 @@ 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[]
   >([]);
   const [typing, setTyping] = useState<boolean>(false);
+  const [errorMessages, setErrorMessages] = useState<string[]>([]);
   const { pairs } = props;
   useEffect(() => {
     let { pairs } = props;
@@ -84,6 +120,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     );
 
     pairs.length !== 0 && !typing && setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
   }, [props, pairs.length, renderPairs.length]);
 
   const debouncedUpdatePairs = useCallback(
@@ -105,6 +142,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
 
     setRenderPairs(updatedRenderPairs);
     debouncedUpdatePairs(updatedPairs);
+    validatePairs(updatedRenderPairs);
   }
 
   function updateValue(index: number, updatedValue: string) {
@@ -119,6 +157,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 +178,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     const newRenderPairs = renderPairs.filter((o, i) => i !== index);
 
     setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
     props.updatePairs(newPairs, isUpdatedViaKeyboard);
   }
 
@@ -162,6 +212,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     });
 
     setRenderPairs(updatedRenderPairs);
+    validatePairs(updatedRenderPairs);
     props.updatePairs(pairs, e.detail === 0);
   }
 
@@ -176,42 +227,52 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
   return (
     <>
       {renderPairs.map((pair: SegmentedControlOptionWithKey, index) => {
+        const hasError = !!errorMessages[index];
         return (
-          <ControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
-            <StyledInputGroup
-              dataType={"text"}
-              onBlur={onInputBlur}
-              onChange={(value: string) => {
-                updateKey(index, value);
-              }}
-              onFocus={onInputFocus}
-              placeholder={"Name"}
-              // @ts-expect-error fix this the next time the file is edited
-              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 key={pair.key}>
+            <ControlWrapper orientation={"HORIZONTAL"}>
+              <StyledInputGroup
+                dataType={"text"}
+                hasError={hasError}
+                onBlur={onInputBlur}
+                onChange={(value: string) => {
+                  updateKey(index, value);
+                }}
+                onFocus={onInputFocus}
+                placeholder={"Name"}
+                value={pair.label}
+              />
+              <StyledBox />
+              <StyledInputGroup
+                dataType={"text"}
+                hasError={hasError}
+                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>
+                <WarningErrorIcon />
+                {errorMessages[index]}
+              </ErrorMessageBox>
+            )}
+          </FlexBox>
         );
       })}
 

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;