From cff531ab6f04662b8668ab1ee6e6d235e40f09b1 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Thu, 6 Mar 2025 17:04:59 +0530
Subject: [PATCH] chore: allow all deleting in OPTION_INPUT control (#39587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/ok-to-test tags="@tag.Anvil"


https://github.com/user-attachments/assets/d2805978-7e58-4d59-9ccf-6774f67b961d



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added a configurable option in key-value controls that lets users
choose whether empty entries are allowed.
- Updated behavior for removing entries now adapts based on this
setting, offering more flexibility when managing list items and ensuring
a more intuitive user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13692124903>
> Commit: 783b98ca652d7cdd920b880c738b9273a4a7cb63
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13692124903&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Thu, 06 Mar 2025 06:10:39 UTC
<!-- end of auto-generated comment: Cypress test results  -->
---
 .../src/components/propertyControls/KeyValueComponent.tsx    | 5 +++--
 app/client/src/components/propertyControls/OptionControl.tsx | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index 0782403213..1f6fdf02c0 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -56,6 +56,7 @@ interface KeyValueComponentProps {
   pairs: SegmentedControlOption[];
   updatePairs: UpdatePairFunction;
   addLabel?: string;
+  allowEmpty?: boolean;
 }
 
 type SegmentedControlOptionWithKey = SegmentedControlOption & {
@@ -223,8 +224,8 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
             />
             <StyledBox />
             <Button
-              // At least one pair must be present
-              isDisabled={renderPairs.length <= 1}
+              // we don't want to allow deleting the only pair if allowEmpty is false
+              isDisabled={props.allowEmpty ? false : renderPairs.length <= 1}
               isIconButton
               kind="tertiary"
               onClick={(e: React.MouseEvent) => {
diff --git a/app/client/src/components/propertyControls/OptionControl.tsx b/app/client/src/components/propertyControls/OptionControl.tsx
index c4ab3c911c..2b23f9c8ac 100644
--- a/app/client/src/components/propertyControls/OptionControl.tsx
+++ b/app/client/src/components/propertyControls/OptionControl.tsx
@@ -10,6 +10,7 @@ class OptionControl extends BaseControl<ControlProps> {
   render() {
     return (
       <KeyValueComponent
+        allowEmpty={this.props.controlConfig?.allowEmpty as boolean}
         pairs={this.props.propertyValue}
         updatePairs={this.updateOptions}
       />