From a46c7311790c0f8a68bc2ea28ada67333e9d8a88 Mon Sep 17 00:00:00 2001
From: Anna Hariprasad <hariprasad.anna@zemosolabs.com>
Date: Wed, 17 Jul 2024 16:14:37 +0530
Subject: [PATCH] feat: add clear all option to columns field in google sheets
 plugin (#34620)

HI  @Nikhil-Nandagopal @rohan-arthur @btsgh ,

Fixes #15030

What's in this PR?

- Add Clear all option to the columns field by using allowClear prop to
select component in google sheets datasource.
- Add clearAllOptions function to apply the clear all options
functionality.

**Screenshots :**

Earlier :

![image](https://github.com/user-attachments/assets/32174a2a-d707-459c-b51f-7a61376ab4cd)


Now :

![image](https://github.com/user-attachments/assets/78496815-08d6-4242-b021-0c5fc61729c2)


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

- **New Features**
- Added a clear selection functionality to the dropdown, allowing users
to easily clear all selected options.

- **Tests**
- Implemented new tests for the dropdown functionality to ensure proper
rendering and user interactions, including selecting and clearing
options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../formControls/DropDownControl.test.tsx     | 114 ++++++++++++++++++
 .../formControls/DropDownControl.tsx          |  16 +++
 2 files changed, 130 insertions(+)
 create mode 100644 app/client/src/components/formControls/DropDownControl.test.tsx

diff --git a/app/client/src/components/formControls/DropDownControl.test.tsx b/app/client/src/components/formControls/DropDownControl.test.tsx
new file mode 100644
index 0000000000..c603988e15
--- /dev/null
+++ b/app/client/src/components/formControls/DropDownControl.test.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { render, screen, waitFor, fireEvent } from "test/testUtils";
+import DropDownControl from "./DropDownControl";
+import { reduxForm } from "redux-form";
+import "@testing-library/jest-dom";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
+const mockStore = configureStore([]);
+
+const initialValues = {
+  actionConfiguration: {
+    testPath: ["option1", "option2"],
+  },
+};
+
+function TestForm(props: any) {
+  return <div>{props.children}</div>;
+}
+
+const ReduxFormDecorator = reduxForm({
+  form: "TestForm",
+  initialValues,
+})(TestForm);
+
+const mockOptions = [
+  { label: "Option 1", value: "option1", children: "Option 1" },
+  { label: "Option 2", value: "option2", children: "Option 2" },
+  { label: "Option 3", value: "option3", children: "Option 3" },
+];
+
+const mockAction = {
+  type: "API_ACTION",
+  name: "Test API Action",
+  datasource: {
+    id: "datasource1",
+    name: "Datasource 1",
+  },
+  actionConfiguration: {
+    body: "",
+    headers: [],
+    testPath: ["option1", "option2"],
+  },
+};
+
+const dropDownProps = {
+  options: mockOptions,
+  placeholderText: "Select Columns",
+  isMultiSelect: true,
+  configProperty: "actionConfiguration.testPath",
+  controlType: "PROJECTION",
+  propertyValue: "",
+  label: "Columns",
+  id: "column",
+  formName: "",
+  isValid: true,
+  formValues: mockAction,
+  isLoading: false,
+};
+
+describe("DropDownControl", () => {
+  let store: any;
+
+  beforeEach(() => {
+    store = mockStore({
+      form: {
+        TestForm: {
+          values: initialValues,
+        },
+      },
+      appState: {},
+    });
+  });
+  it("should renders dropdownControl and options properly", async () => {
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...dropDownProps} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    const dropdownSelect = await waitFor(async () =>
+      screen.findByTestId("t--dropdown-actionConfiguration.testPath"),
+    );
+
+    expect(dropdownSelect).toBeInTheDocument();
+
+    const options = screen.getAllByText(/Optio.../);
+    const optionCount = options.length;
+    expect(optionCount).toBe(2);
+  });
+
+  it("should clear all selected options", async () => {
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...dropDownProps} />
+        </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 ca24c9555e..239fdaa289 100644
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/app/client/src/components/formControls/DropDownControl.tsx
@@ -185,6 +185,20 @@ function renderDropdown(
     }
   };
 
+  const clearAllOptions = () => {
+    if (!isNil(selectedValue)) {
+      if (props.isMultiSelect) {
+        if (Array.isArray(selectedValue)) {
+          selectedValue = [];
+          props.input?.onChange([]);
+        }
+      } else {
+        selectedValue = "";
+        props.input?.onChange("");
+      }
+    }
+  };
+
   if (props.options.length > 0) {
     if (props.isMultiSelect) {
       const tempSelectedValues: string[] = [];
@@ -233,11 +247,13 @@ function renderDropdown(
 
   return (
     <Select
+      allowClear={props.isMultiSelect && !isEmpty(selectedValue)}
       data-testid={`t--dropdown-${props?.configProperty}`}
       defaultValue={props.initialValue}
       isDisabled={props.disabled}
       isLoading={props.isLoading}
       isMultiSelect={props?.isMultiSelect}
+      onClear={clearAllOptions}
       onDeselect={onRemoveOptions}
       onSelect={(value) => onSelectOptions(value)}
       placeholder={props?.placeholderText}