From 30593d1f0599a8b019b895d73bf91979b68b1b0b Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Tue, 22 Apr 2025 22:49:09 +0530
Subject: [PATCH] Added toggle for showing 'All options selected' label in
 multiselect

---
 .../src/AppBuilder/WidgetManager/widgets/multiselectV2.js  | 7 +++++++
 .../Components/MultiselectV2/CustomValueContainer.jsx      | 2 +-
 .../src/Editor/Components/MultiselectV2/MultiselectV2.jsx  | 2 ++
 frontend/src/Editor/WidgetManager/configs/multiselectV2.js | 7 +++++++
 .../modules/apps/services/widget-config/multiselectV2.js   | 7 +++++++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
index 4ab4af57ce..6ad8e6f7b5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
@@ -142,6 +142,12 @@ export const multiselectV2Config = {
       accordian: 'Options',
       isFxNotRequired: true,
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show all options selected label',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -327,6 +333,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
index 2901abc106..b648684fc2 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
@@ -36,7 +36,7 @@ const CustomValueContainer = ({ children, ...props }) => {
             </Placeholder>
           ) : (
             <span className="text-truncate" {...props} id="options" style={{ maxWidth: valueContainerWidth }}>
-              {isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
+              {selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
             </span>
           )}
           {/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 7d5109edee..1d9ab6bdc9 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -38,6 +38,7 @@ export const MultiselectV2 = ({
     loadingState: multiSelectLoadingState,
     optionsLoadingState,
     sort,
+    showAllSelectedLabel,
   } = properties;
   const {
     selectedTextColor,
@@ -521,6 +522,7 @@ export const MultiselectV2 = ({
             doShowIcon={iconVisibility}
             containerRef={valueContainerRef}
             showAllOption={showAllOption}
+            showAllSelectedLabel={showAllSelectedLabel}
             isSelectAllSelected={isSelectAllSelected}
             setIsSelectAllSelected={(value) => {
               setIsSelectAllSelected(value);
diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
index b603db9c4a..5bff71c29a 100644
--- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
@@ -142,6 +142,12 @@ export const multiselectV2Config = {
       accordian: 'Options',
       isFxNotRequired: true,
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show all options selected label',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -327,6 +333,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js
index 4ab4af57ce..6ad8e6f7b5 100644
--- a/server/src/modules/apps/services/widget-config/multiselectV2.js
+++ b/server/src/modules/apps/services/widget-config/multiselectV2.js
@@ -142,6 +142,12 @@ export const multiselectV2Config = {
       accordian: 'Options',
       isFxNotRequired: true,
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show all options selected label',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -327,6 +333,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },