fix: 7487 added allowSelectAll option in property pane (#9536)

Co-authored-by: Arpit Mohan <arpit@appsmith.com>

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

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",

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.

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;