Merge pull request #12672 from ToolJet/feat/multiselect-label

Added toggle for showing 'All options selected' label in multiselect

frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx

@@ -539,6 +539,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
             currentState,
             allComponents
           )}
+        {isMultiSelect &&
+          renderElement(
+            component,
+            componentMeta,
+            paramUpdated,
+            dataQueries,
+            'showAllSelectedLabel',
+            'properties',
+            currentState,
+            allComponents
+          )}
         {isSortingEnabled &&
           renderElement(
             component,

frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js

@@ -121,6 +121,12 @@ export const multiselectV2Config = {
       },
       accordian: 'Options',
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show "All items are selected"',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'Options',
+    },
     optionsLoadingState: {
       type: 'toggle',
       displayName: 'Options loading state',
@@ -339,6 +345,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       showClearBtn: { value: '{{true}}' },
       showSearchInput: { value: '{{true}}' },
       visibility: { value: '{{true}}' },

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

frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx

@@ -37,6 +37,7 @@ export const MultiselectV2 = ({
     loadingState: multiSelectLoadingState,
     optionsLoadingState,
     sort,
+    showAllSelectedLabel,
     showClearBtn,
     showSearchInput,
   } = properties;
@@ -544,6 +545,7 @@ export const MultiselectV2 = ({
             icon={icon}
             doShowIcon={iconVisibility}
             containerRef={valueContainerRef}
+            showAllSelectedLabel={showAllSelectedLabel}
             iconColor={iconColor}
             optionsLoadingState={optionsLoadingState && advanced}
             darkMode={darkMode}

frontend/src/Editor/WidgetManager/configs/multiselectV2.js

@@ -121,6 +121,12 @@ export const multiselectV2Config = {
       },
       accordian: 'Options',
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show "All items are selected"',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'Options',
+    },
     optionsLoadingState: {
       type: 'toggle',
       displayName: 'Options loading state',
@@ -339,6 +345,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       showClearBtn: { value: '{{true}}' },
       showSearchInput: { value: '{{true}}' },
       visibility: { value: '{{true}}' },

server/src/modules/apps/services/widget-config/multiselectV2.js

@@ -121,6 +121,12 @@ export const multiselectV2Config = {
       },
       accordian: 'Options',
     },
+    showAllSelectedLabel: {
+      type: 'toggle',
+      displayName: 'Show "All items are selected"',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'Options',
+    },
     optionsLoadingState: {
       type: 'toggle',
       displayName: 'Options loading state',
@@ -339,6 +345,7 @@ export const multiselectV2Config = {
       optionsLoadingState: { value: '{{false}}' },
       sort: { value: 'asc' },
       placeholder: { value: 'Select the options' },
+      showAllSelectedLabel: { value: '{{true}}' },
       showClearBtn: { value: '{{true}}' },
       showSearchInput: { value: '{{true}}' },
       visibility: { value: '{{true}}' },