From 9b3b1f51960d67a34a0da4e2e65467678ff95aa4 Mon Sep 17 00:00:00 2001
From: Yash Vibhandik <vibhandikyash@gmail.com>
Date: Mon, 6 Dec 2021 11:26:44 +0530
Subject: [PATCH] fix: 7487 added allowSelectAll option in property pane
 (#9536)

Co-authored-by: Arpit Mohan <arpit@appsmith.com>
---
 .../FormWidgets/MultiSelect_spec.js           | 28 +++++++++++++++++++
 .../cypress/locators/commonlocators.json      |  1 +
 .../MultiSelectWidget/component/index.tsx     |  6 ++--
 .../MultiSelectWidget/widget/index.tsx        | 13 +++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/MultiSelect_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/MultiSelect_spec.js
index a0af1fbf1d..9c0af1da97 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/MultiSelect_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/MultiSelect_spec.js
@@ -57,6 +57,34 @@ describe("MultiSelect Widget Functionality", function() {
     );
     cy.get(publish.backToEditor).click();
   });
+  it("Dropdown Functionality To Check Allow select all option", function() {
+    // select all option is not enable
+    cy.get(formWidgetsPage.multiselectWidget)
+      .find(".rc-select-selection-item-content")
+      .first()
+      .should("not.have.text", "Select all");
+    // enable select all option from property pane
+    cy.openPropertyPane("multiselectwidget");
+    cy.togglebar(commonlocators.allowSelectAllCheckbox);
+
+    // press select all option
+    cy.get(formWidgetsPage.multiselectWidget)
+      .find(".rc-select-selection-search-input")
+      .first()
+      .focus({ force: true })
+      .type("{uparrow}", { force: true });
+    cy.get(".multi-select-dropdown")
+      .contains("Select all")
+      .click({ force: true });
+    cy.wait(2000);
+    //Validating option inside multiselect widget
+    cy.get(".rc-select-selection-item-content")
+      .eq(0)
+      .should("have.text", "Option 1");
+    cy.get(".rc-select-selection-item-content")
+      .eq(1)
+      .should("have.text", "Option 2");
+  });
 });
 afterEach(() => {
   // put your clean up code if any
diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
index 3ea43b7933..8f4d6b343e 100644
--- a/app/client/cypress/locators/commonlocators.json
+++ b/app/client/cypress/locators/commonlocators.json
@@ -30,6 +30,7 @@
   "typeWidgetName": ".bp3-editable-text-editing>input",
   "requiredCheckbox": ".t--property-control-required input[type='checkbox']",
   "visibleCheckbox": ".t--property-control-visible input[type='checkbox']",
+  "allowSelectAllCheckbox": ".t--property-control-allowselectall input[type='checkbox']",
   "disableCheckbox": ".t--property-control-disabled input[type='checkbox']",
   "hideToolbarCheckbox": ".t--property-control-hidetoolbar input[type='checkbox'",
   "labelTextStyle": ".bp3-ui-text span",
diff --git a/app/client/src/widgets/MultiSelectWidget/component/index.tsx b/app/client/src/widgets/MultiSelectWidget/component/index.tsx
index 18966e6f37..e085b784e5 100644
--- a/app/client/src/widgets/MultiSelectWidget/component/index.tsx
+++ b/app/client/src/widgets/MultiSelectWidget/component/index.tsx
@@ -45,11 +45,13 @@ export interface MultiSelectProps
   labelStyle?: string;
   compactMode: boolean;
   isValid: boolean;
+  allowSelectAll?: boolean;
 }
 
 const DEBOUNCE_TIMEOUT = 800;
 
 function MultiSelectComponent({
+  allowSelectAll,
   compactMode,
   disabled,
   dropdownStyle,
@@ -108,7 +110,7 @@ function MultiSelectComponent({
       menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     ) => (
       <div className={loading ? Classes.SKELETON : ""}>
-        {options.length ? (
+        {options.length && allowSelectAll ? (
           <StyledCheckbox
             alignIndicator="left"
             checked={isSelectAll}
@@ -120,7 +122,7 @@ function MultiSelectComponent({
         {menu}
       </div>
     ),
-    [isSelectAll, options, loading],
+    [isSelectAll, options, loading, allowSelectAll],
   );
 
   // Convert the values to string before searching.
diff --git a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx
index e2eb26e137..b6cf904132 100644
--- a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx
+++ b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx
@@ -172,6 +172,17 @@ class MultiSelectWidget extends BaseWidget<
             isTriggerProperty: false,
             validation: { type: ValidationTypes.BOOLEAN },
           },
+          {
+            helpText:
+              "Controls the visibility of select all option in dropdown.",
+            propertyName: "allowSelectAll",
+            label: "Allow Select All",
+            controlType: "SWITCH",
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: false,
+            validation: { type: ValidationTypes.BOOLEAN },
+          },
         ],
       },
       {
@@ -309,6 +320,7 @@ class MultiSelectWidget extends BaseWidget<
 
     return (
       <MultiSelectComponent
+        allowSelectAll={this.props.allowSelectAll}
         compactMode={
           !(
             (this.props.bottomRow - this.props.topRow) /
@@ -393,6 +405,7 @@ export interface MultiSelectWidgetProps extends WidgetProps {
   selectedOptionLabels: string[];
   serverSideFiltering: boolean;
   onFilterUpdate: string;
+  allowSelectAll?: boolean;
 }
 
 export default MultiSelectWidget;