feat: Select all for synchronous select

superset-frontend/src/components/Select/Select.test.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { Select } from 'src/components';
+import { SELECT_ALL_VALUE } from './utils';
 
 const ARIA_LABEL = 'Test';
 const NEW_OPTION = 'Kyle';
@@ -566,6 +567,13 @@ test('finds an element with a numeric value and does not duplicate the options',
   expect(await querySelectOption('11')).not.toBeInTheDocument();
 });
 
+test('select all appears in options when multi select is true and selectAllEnabled is true', async () => {
+  render(<Select {...defaultProps} mode="multiple" selectAllEnabled />);
+  await open();
+  const options = await findAllSelectOptions();
+  expect(options[0]).toHaveTextContent(SELECT_ALL_VALUE);
+});
+
 /*
  TODO: Add tests that require scroll interaction. Needs further investigation.
  - Fetches more data when scrolling and more data is available

superset-frontend/src/components/Select/Select.tsx

@@ -39,6 +39,8 @@ import {
   handleFilterOptionHelper,
   dropDownRenderHelper,
   getSuffixIcon,
+  labeledSelectAllOption,
+  SELECT_ALL_VALUE,
 } from './utils';
 import { SelectOptionsType, SelectProps } from './types';
 import {
@@ -92,6 +94,8 @@ const Select = forwardRef(
       options,
       placeholder = t('Select ...'),
       showSearch = true,
+      selectAllEnabled = false,
+      onSelectAll,
       sortComparator = DEFAULT_SORT_COMPARATOR,
       tokenSeparators,
       value,
@@ -101,6 +105,7 @@ const Select = forwardRef(
     ref: RefObject<HTMLInputElement>,
   ) => {
     const isSingleMode = mode === 'single';
+    const isSelectAllMode = selectAllEnabled && !isSingleMode;
     const shouldShowSearch = allowNewOptions ? true : showSearch;
     const [selectValue, setSelectValue] = useState(value);
     const [inputValue, setInputValue] = useState('');
@@ -149,10 +154,19 @@ const Select = forwardRef(
         .map(opt =>
           isLabeledValue(opt) ? opt : { value: opt, label: String(opt) },
         );
-      return missingValues.length > 0
-        ? missingValues.concat(selectOptions)
-        : selectOptions;
-    }, [selectOptions, selectValue]);
+      const fullOptions =
+        missingValues.length > 0
+          ? missingValues.concat(selectOptions)
+          : selectOptions;
+
+      const fullOptionsWithSelectAll =
+        isSelectAllMode && !hasOption(getValue(SELECT_ALL_VALUE), missingValues)
+          ? isLabeledValue(fullOptions[0])
+            ? [labeledSelectAllOption, ...fullOptions]
+            : [labeledSelectAllOption.value, ...fullOptions]
+          : fullOptions;
+      return fullOptionsWithSelectAll;
+    }, [selectOptions, selectValue, isSelectAllMode]);
 
     const handleOnSelect = (
       selectedItem: string | number | AntdLabeledValue | undefined,
@@ -164,9 +178,26 @@ const Select = forwardRef(
           const array = ensureIsArray(previousState);
           const value = getValue(selectedItem);
           // Tokenized values can contain duplicated values
+          if (value === getValue(SELECT_ALL_VALUE)) {
+            if (onSelectAll) {
+              onSelectAll();
+            }
+            const result = isLabeledValue(selectedItem)
+              ? ([
+                  labeledSelectAllOption,
+                  ...selectOptions,
+                ] as AntdLabeledValue[])
+              : ([SELECT_ALL_VALUE, ...selectOptions] as (string | number)[]);
+            return result;
+          }
           if (!hasOption(value, array)) {
             const result = [...array, selectedItem];
-            return isLabeledValue(selectedItem)
+            return result.length === fullSelectOptions.length - 1 &&
+              isSelectAllMode
+              ? isLabeledValue(selectedItem)
+                ? ([labeledSelectAllOption, ...result] as AntdLabeledValue[])
+                : ([SELECT_ALL_VALUE, ...result] as (string | number)[])
+              : isLabeledValue(selectedItem)
               ? (result as AntdLabeledValue[])
               : (result as (string | number)[]);
           }
@@ -180,10 +211,16 @@ const Select = forwardRef(
       value: string | number | AntdLabeledValue | undefined,
     ) => {
       if (Array.isArray(selectValue)) {
-        if (isLabeledValue(value)) {
+        if (getValue(value) === getValue(SELECT_ALL_VALUE)) {
+          setSelectValue([]);
+        } else if (isLabeledValue(value)) {
           const array = selectValue as AntdLabeledValue[];
           setSelectValue(
-            array.filter(element => element.value !== value.value),
+            array.filter(
+              element =>
+                element.value !== value.value &&
+                element.value !== getValue(SELECT_ALL_VALUE),
+            ),
           );
         } else {
           const array = selectValue as (string | number)[];

superset-frontend/src/components/Select/types.ts

@@ -154,6 +154,16 @@ export interface SelectProps extends BaseSelectProps {
    * an array of options.
    */
   options: SelectOptionsType;
+  /**
+   * It defines whether select all is an option.
+   * When selected all options are added to the selected
+   * values. Only available in sync select currently.
+   */
+  selectAllEnabled: boolean;
+  /**
+   * Called when select all option is selected
+   */
+  onSelectAll?: () => void;
 }
 
 export type AsyncSelectRef = HTMLInputElement & { clearCache: () => void };

superset-frontend/src/components/Select/utils.tsx

@@ -25,6 +25,12 @@ import { LabeledValue, RawValue, SelectOptionsType, V } from './types';
 
 const { Option } = AntdSelect;
 
+export const SELECT_ALL_VALUE = 'Select All';
+export const labeledSelectAllOption: AntdLabeledValue = {
+  value: SELECT_ALL_VALUE,
+  label: String(SELECT_ALL_VALUE),
+};
+
 export function isObject(value: unknown): value is Record<string, unknown> {
   return (
     value !== null &&