From be3809ff7e5ed8a1f97f0423d77a3f330998f302 Mon Sep 17 00:00:00 2001
From: sneha122 <sneha@appsmith.com>
Date: Wed, 12 Feb 2025 18:23:57 +0530
Subject: [PATCH] fix: enable allow clear options for single select dropdown
 (#39213)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
This PR enables allow clear option for single select dropdowns in the
UQI.


Fixes #39087
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

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

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13284739979>
> Commit: 36b6c9419e92d1fb3915f039d922b3211e89fc8a
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13284739979&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Wed, 12 Feb 2025 12:41:11 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

## Summary by CodeRabbit

- **New Features**
- Enhanced the dropdown control to allow users to clear their selection
even in single-select mode, offering greater flexibility in interaction.
- **Tests**
- Expanded test coverage with new tests ensuring that the clear
selection feature works correctly in single-select scenarios.

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

Co-authored-by: “sneha122” <“sneha@appsmith.com”>
---
 .../formControls/DropDownControl.test.tsx     | 74 +++++++++++++++++++
 .../formControls/DropDownControl.tsx          |  5 +-
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/formControls/DropDownControl.test.tsx b/app/client/src/components/formControls/DropDownControl.test.tsx
index 8eb31760a5..c8c5f0b130 100644
--- a/app/client/src/components/formControls/DropDownControl.test.tsx
+++ b/app/client/src/components/formControls/DropDownControl.test.tsx
@@ -220,3 +220,77 @@ describe("DropDownControl grouping tests", () => {
     expect(screen.getByText("Option 2")).toBeInTheDocument();
   });
 });
+
+describe("DropdownControl Single select tests", () => {
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let store: any;
+
+  const initialValuesSingleSelect = {
+    actionConfiguration: {
+      testPath: "option1",
+    },
+  };
+
+  const mockActionSingleSelect = {
+    type: "API_ACTION",
+    name: "Test API Action",
+    datasource: {
+      id: "datasource1",
+      name: "Datasource 1",
+    },
+    actionConfiguration: {
+      body: "",
+      headers: [],
+      testPath: "option1",
+    },
+  };
+
+  const dropDownPropsSingleSelect = {
+    options: mockOptions,
+    placeholderText: "Select Columns",
+    configProperty: "actionConfiguration.testPath",
+    controlType: "PROJECTION",
+    propertyValue: "",
+    label: "Columns",
+    id: "column",
+    formName: "",
+    isValid: true,
+    formValues: mockActionSingleSelect,
+    isLoading: false,
+    maxTagCount: 3,
+    isAllowClear: true,
+  };
+
+  beforeEach(() => {
+    store = mockStore({
+      form: {
+        TestForm: {
+          values: initialValuesSingleSelect,
+        },
+      },
+      appState: {},
+    });
+  });
+  it("should clear selected option", async () => {
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...dropDownPropsSingleSelect} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    const clearAllButton = document.querySelector(".rc-select-clear");
+
+    expect(clearAllButton).toBeInTheDocument();
+
+    fireEvent.click(clearAllButton!);
+
+    await waitFor(() => {
+      const options = screen.queryAllByText(/Option.../);
+
+      expect(options.length).toBe(0);
+    });
+  });
+});
diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx
index fa3e8a9995..4d0ba27fd8 100644
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/app/client/src/components/formControls/DropDownControl.tsx
@@ -304,7 +304,9 @@ function renderDropdown(
 
   return (
     <Select
-      allowClear={props.isMultiSelect && !isEmpty(selectedValue)}
+      allowClear={
+        (props.isMultiSelect || props.isAllowClear) && !isEmpty(selectedValue)
+      }
       data-testid={`t--dropdown-${props?.configProperty}`}
       defaultValue={props.initialValue}
       isDisabled={props.disabled}
@@ -365,6 +367,7 @@ export interface DropDownControlProps extends ControlProps {
   formValues: Partial<Action>;
   setFirstOptionAsDefault?: boolean;
   maxTagCount?: number;
+  isAllowClear?: boolean;
 }
 
 interface ReduxDispatchProps {