From 3b1c993e5080b26cd7671de4cc14961668b51faf Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Fri, 20 May 2022 09:03:51 -0300
Subject: [PATCH] feat: Adds the "Select all" option to the Select component

---
 superset-frontend/package-lock.json           |  39 +++
 superset-frontend/package.json                |   1 +
 .../src/components/Select/Select.stories.tsx  |  40 ++-
 .../src/components/Select/Select.test.tsx     |  89 +++++++
 .../src/components/Select/Select.tsx          | 238 +++++++++++++++---
 5 files changed, 353 insertions(+), 54 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 31416e0842d8..93ee1e3e5744 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -139,6 +139,7 @@
         "shortid": "^2.2.6",
         "tinycolor2": "^1.4.2",
         "urijs": "^1.19.8",
+        "use-deep-compare-effect": "^1.8.1",
         "use-immer": "^0.6.0",
         "use-query-params": "^1.1.9",
         "yargs": "^15.4.1"
@@ -26096,6 +26097,14 @@
       "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "dev": true
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -50358,6 +50367,22 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/use-deep-compare-effect": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
+      "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "dequal": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13"
+      }
+    },
     "node_modules/use-immer": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.6.0.tgz",
@@ -76185,6 +76210,11 @@
       "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "dev": true
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -95053,6 +95083,15 @@
         "ts-essentials": "^2.0.3"
       }
     },
+    "use-deep-compare-effect": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
+      "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "dequal": "^2.0.2"
+      }
+    },
     "use-immer": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.6.0.tgz",
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index acdf9952d099..0d9c7e89f432 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -199,6 +199,7 @@
     "shortid": "^2.2.6",
     "tinycolor2": "^1.4.2",
     "urijs": "^1.19.8",
+    "use-deep-compare-effect": "^1.8.1",
     "use-immer": "^0.6.0",
     "use-query-params": "^1.1.9",
     "yargs": "^15.4.1"
diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index 5526c2fc2ac0..5671b78f3ff9 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -18,6 +18,7 @@
  */
 import React, { ReactNode, useState, useCallback } from 'react';
 import ControlHeader from 'src/explore/components/ControlHeader';
+import { SelectValue } from 'antd/lib/select';
 import Select, { SelectProps, OptionsTypePage, OptionsType } from './Select';
 
 export default {
@@ -210,17 +211,6 @@ InteractiveSelect.argTypes = {
     description: `It adds a header on top of the Select. Can be any ReactNode.`,
     control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
   },
-  pageSize: {
-    description: `It defines how many results should be included in the query response.
-      Works in async mode only (See the options property).
-    `,
-  },
-  fetchOnlyOnSearch: {
-    description: `It fires a request against the server only after searching.
-      Works in async mode only (See the options property).
-      Undefined by default.
-    `,
-  },
 };
 
 InteractiveSelect.story = {
@@ -387,6 +377,7 @@ export const AsyncSelect = ({
   responseTime: number;
 }) => {
   const [requests, setRequests] = useState<ReactNode[]>([]);
+  const [value, setValue] = useState<SelectValue>();
 
   const getResults = (username?: string) => {
     let results: { label: string; value: string }[] = [];
@@ -466,6 +457,7 @@ export const AsyncSelect = ({
               ? { label: 'Valentina', value: 'Valentina' }
               : undefined
           }
+          onChange={value => setValue(value)}
         />
       </div>
       <div
@@ -484,6 +476,20 @@ export const AsyncSelect = ({
           <p key={`request-${index}`}>{request}</p>
         ))}
       </div>
+      <div
+        style={{
+          position: 'absolute',
+          top: 450,
+          left: DEFAULT_WIDTH + 100,
+          height: 200,
+          width: 600,
+          overflowY: 'auto',
+          border: '1px solid #d9d9d9',
+          padding: 20,
+        }}
+      >
+        {value ? JSON.stringify(value) : ''}
+      </div>
     </>
   );
 };
@@ -491,8 +497,6 @@ export const AsyncSelect = ({
 AsyncSelect.args = {
   allowClear: false,
   allowNewOptions: false,
-  fetchOnlyOnSearch: false,
-  pageSize: 10,
   withError: false,
   withInitialValue: false,
   tokenSeparators: ['\n', '\t', ';'],
@@ -511,6 +515,9 @@ AsyncSelect.argTypes = {
     },
   },
   pageSize: {
+    description: `It defines how many results should be included in the query response.
+      Works in async mode only (See the options property).
+    `,
     defaultValue: 10,
     control: {
       type: 'range',
@@ -519,6 +526,13 @@ AsyncSelect.argTypes = {
       step: 10,
     },
   },
+  fetchOnlyOnSearch: {
+    description: `It fires a request against the server only after searching.
+      Works in async mode only (See the options property).
+      Undefined by default.
+    `,
+    defaultValue: false,
+  },
   responseTime: {
     defaultValue: 0.5,
     name: 'responseTime (seconds)',
diff --git a/superset-frontend/src/components/Select/Select.test.tsx b/superset-frontend/src/components/Select/Select.test.tsx
index 37a39204369f..634f59670c45 100644
--- a/superset-frontend/src/components/Select/Select.test.tsx
+++ b/superset-frontend/src/components/Select/Select.test.tsx
@@ -25,6 +25,8 @@ const ARIA_LABEL = 'Test';
 const NEW_OPTION = 'Kyle';
 const NO_DATA = 'No Data';
 const LOADING = 'Loading...';
+const SELECT_ALL = 'Select all';
+
 const OPTIONS = [
   { label: 'John', value: 1, gender: 'Male' },
   { label: 'Liam', value: 2, gender: 'Male' },
@@ -50,6 +52,7 @@ const OPTIONS = [
   { label: 'Cher', value: 22, gender: 'Female' },
   { label: 'Her', value: 23, gender: 'Male' },
 ].sort((option1, option2) => option1.label.localeCompare(option2.label));
+
 const NULL_OPTION = { label: '<NULL>', value: null } as unknown as {
   label: string;
   value: number;
@@ -412,6 +415,92 @@ test('adds the null option when selected in multiple mode', async () => {
   expect(values[1]).toHaveTextContent(NULL_OPTION.label);
 });
 
+test('renders "Select all" for multiple select', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  expect(await findSelectOption(SELECT_ALL)).toBeInTheDocument();
+});
+
+test('does not render "Select all" for single select', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="single" />);
+  await open();
+  expect(screen.queryByText(SELECT_ALL)).not.toBeInTheDocument();
+});
+
+test('does not render "Select all" for an empty multiple select', async () => {
+  render(<Select {...defaultProps} options={[]} mode="multiple" />);
+  await open();
+  expect(screen.queryByText(SELECT_ALL)).not.toBeInTheDocument();
+});
+
+test('does not render "Select all" when searching', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  await type('Select');
+  expect(await findSelectOption(SELECT_ALL)).not.toBeInTheDocument();
+});
+
+test('does not render "Select all" as one of the tags after selection', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  userEvent.click(await findSelectOption(SELECT_ALL));
+  const values = await findAllSelectValues();
+  expect(values[0]).not.toHaveTextContent(SELECT_ALL);
+});
+
+test('keeps "Select all" at the top after a selection', async () => {
+  const selected = OPTIONS[2];
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  userEvent.click(await findSelectOption(selected.label));
+  const options = await findAllSelectOptions();
+  expect(options[0]).toHaveTextContent(SELECT_ALL);
+  expect(options[1]).toHaveTextContent(selected.label);
+});
+
+test('selects all values', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  userEvent.click(await findSelectOption(SELECT_ALL));
+  const values = await findAllSelectValues();
+  expect(values.length).toBe(OPTIONS.length);
+});
+
+test('unselects all values', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  userEvent.click(await findSelectOption(SELECT_ALL));
+  const values = await findAllSelectValues();
+  expect(values.length).toBe(OPTIONS.length);
+  userEvent.click(await findSelectOption(SELECT_ALL));
+  expect(values.length).toBe(0);
+});
+
+test('deselecting a value also deselects "Select all"', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  userEvent.click(await findSelectOption(SELECT_ALL));
+  let values = await findAllSelectValues();
+  expect(values[0]).toHaveTextContent(SELECT_ALL);
+  userEvent.click(await findSelectOption(OPTIONS[0].label));
+  values = await findAllSelectValues();
+  expect(values[0]).toHaveTextContent(OPTIONS[1].label);
+});
+
+test('selecting all values also selects "Select all"', async () => {
+  render(<Select {...defaultProps} options={OPTIONS} mode="multiple" />);
+  await open();
+  const options = await findAllSelectOptions();
+  options.forEach((option, index) => {
+    // skip select all
+    if (index > 0) {
+      userEvent.click(option);
+    }
+  });
+  const values = await findAllSelectValues();
+  expect(values[0]).toHaveTextContent(SELECT_ALL);
+});
+
 test('static - renders the select with default props', () => {
   render(<Select {...defaultProps} />);
   expect(getSelect()).toBeInTheDocument();
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 3624f4a2b157..003748eb8973 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -28,14 +28,21 @@ import React, {
   useRef,
   useCallback,
 } from 'react';
-import { ensureIsArray, styled, t } from '@superset-ui/core';
+import { useDeepCompareMemoize } from 'use-deep-compare-effect';
+import {
+  ensureIsArray,
+  formatNumber,
+  NumberFormats,
+  styled,
+  t,
+} from '@superset-ui/core';
 import AntdSelect, {
   SelectProps as AntdSelectProps,
   SelectValue as AntdSelectValue,
   LabeledValue as AntdLabeledValue,
 } from 'antd/lib/select';
 import { DownOutlined, SearchOutlined } from '@ant-design/icons';
-import { Spin } from 'antd';
+import { Spin, Tag } from 'antd';
 import debounce from 'lodash/debounce';
 import { isEqual } from 'lodash';
 import Icons from 'src/components/Icons';
@@ -180,6 +187,9 @@ const StyledSelect = styled(AntdSelect)`
     .ant-select-arrow .anticon:not(.ant-select-suffix) {
       pointer-events: none;
     }
+    div[id="select-all"] {
+      border-bottom: 1px solid ${theme.colors.grayscale.light2};
+    }
   `}
 `;
 
@@ -227,12 +237,29 @@ const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
 const DEFAULT_PAGE_SIZE = 100;
 const EMPTY_OPTIONS: OptionsType = [];
 
+const SELECT_ALL: AntdLabeledValue = {
+  label: t('Select all'),
+  value: 'SELECT_ALL',
+};
+
 const Error = ({ error }: { error: string }) => (
   <StyledError>
     <Icons.ErrorSolid /> <StyledErrorMessage>{error}</StyledErrorMessage>
   </StyledError>
 );
 
+const NoElement = styled.span`
+  display: none;
+`;
+
+const StyledTag = styled(Tag)`
+  ${({ theme }) => `
+    background: ${theme.colors.grayscale.light3};
+    font-size: ${theme.typography.sizes.m}px;
+    border: none;
+  `}
+`;
+
 export const DEFAULT_SORT_COMPARATOR = (
   a: AntdLabeledValue,
   b: AntdLabeledValue,
@@ -317,18 +344,21 @@ const Select = (
   }: SelectProps,
   ref: RefObject<HTMLInputElement>,
 ) => {
+  const memoizedValue = useDeepCompareMemoize(value);
   const isAsync = typeof options === 'function';
   const isSingleMode = mode === 'single';
   const shouldShowSearch = isAsync || allowNewOptions ? true : showSearch;
-  const [selectValue, setSelectValue] = useState(value);
+  const [selectValue, setSelectValue] = useState(memoizedValue);
   const [inputValue, setInputValue] = useState('');
   const [isLoading, setIsLoading] = useState(loading);
   const [error, setError] = useState('');
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [page, setPage] = useState(0);
-  const [totalCount, setTotalCount] = useState(0);
+  const [queryCount, setQueryCount] = useState(0);
+  const [totalCount, setTotalCount] = useState(isAsync ? 0 : options.length);
   const [loadingEnabled, setLoadingEnabled] = useState(!lazyLoading);
   const [allValuesLoaded, setAllValuesLoaded] = useState(false);
+  const [selectAllMode, setSelectAllMode] = useState(false);
   const fetchedQueries = useRef(new Map<string, number>());
   const mappedMode = isSingleMode
     ? undefined
@@ -359,6 +389,11 @@ const Select = (
     [isAsync, sortComparator, sortSelectedFirst],
   );
 
+  const sortComparatorOnMerge = useCallback(
+    (a: AntdLabeledValue, b: AntdLabeledValue) => sortComparator(a, b, ''),
+    [sortComparator],
+  );
+
   const initialOptions = useMemo(
     () => (options && Array.isArray(options) ? options.slice() : EMPTY_OPTIONS),
     [options],
@@ -374,7 +409,10 @@ const Select = (
   // add selected values to options list if they are not in it
   const fullSelectOptions = useMemo(() => {
     const missingValues: OptionsType = ensureIsArray(selectValue)
-      .filter(opt => !hasOption(getValue(opt), selectOptions))
+      .filter(opt => {
+        const value = getValue(opt);
+        return value !== SELECT_ALL.value && !hasOption(value, selectOptions);
+      })
       .map(opt =>
         isLabeledValue(opt) ? opt : { value: opt, label: String(opt) },
       );
@@ -383,17 +421,19 @@ const Select = (
       : selectOptions;
   }, [selectOptions, selectValue]);
 
-  const hasCustomLabels = fullSelectOptions.some(opt => !!opt?.customLabel);
-
   const handleOnSelect = (
     selectedItem: string | number | AntdLabeledValue | undefined,
   ) => {
     if (isSingleMode) {
       setSelectValue(selectedItem);
     } else {
+      const value = getValue(selectedItem);
       setSelectValue(previousState => {
         const array = ensureIsArray(previousState);
-        const value = getValue(selectedItem);
+        // Adds the select all to the list of selected items
+        if (value === SELECT_ALL.value) {
+          return [SELECT_ALL].concat(fullSelectOptions as AntdLabeledValue[]);
+        }
         // Tokenized values can contain duplicated values
         if (!hasOption(value, array)) {
           const result = [...array, selectedItem];
@@ -407,16 +447,60 @@ const Select = (
     setInputValue('');
   };
 
+  useEffect(() => {
+    const array = ensureIsArray(selectValue);
+    if (array.length > 0) {
+      const selectAllSelected = getValue(array[0]) === SELECT_ALL.value;
+      // Enable the select all mode if the user checked the select all
+      if (selectAllSelected && !selectAllMode) {
+        setSelectAllMode(true);
+      }
+      // If select all is not selected and
+      // all the items are checked or
+      // all the visible items are checked when in select all mode
+      // then automatically checks the select all
+      if (
+        !selectAllSelected &&
+        (array.length === totalCount ||
+          (selectAllMode && array.length === fullSelectOptions.length))
+      ) {
+        setSelectValue(previousState =>
+          [SELECT_ALL].concat(previousState as AntdLabeledValue[]),
+        );
+      }
+    } else if (selectAllMode) {
+      setSelectAllMode(false);
+    }
+  }, [fullSelectOptions.length, selectAllMode, selectValue, totalCount]);
+
   const handleOnDeselect = (
     value: string | number | AntdLabeledValue | undefined,
   ) => {
     if (Array.isArray(selectValue)) {
       if (isLabeledValue(value)) {
-        const array = selectValue as AntdLabeledValue[];
-        setSelectValue(array.filter(element => element.value !== value.value));
+        let array = selectValue as AntdLabeledValue[];
+        if (value.value === SELECT_ALL.value) {
+          array = [];
+          setSelectAllMode(false);
+        }
+        setSelectValue(
+          array.filter(
+            element =>
+              element.value !== value.value &&
+              element.value !== SELECT_ALL.value,
+          ),
+        );
       } else {
-        const array = selectValue as (string | number)[];
-        setSelectValue(array.filter(element => element !== value));
+        let array = selectValue as (string | number)[];
+        if (value === SELECT_ALL.value) {
+          array = [];
+          setSelectAllMode(false);
+        }
+        setSelectValue(
+          array.filter(
+            element => element !== value && element !== SELECT_ALL.value,
+          ),
+        );
       }
     }
     setInputValue('');
@@ -435,6 +519,18 @@ const Select = (
     [onError],
   );
 
+  const isSelectingAll = useCallback(() => {
+    const array = ensureIsArray(selectValue);
+    if (array.length === 0) {
+      return false;
+    }
+    const first = array[0];
+    if (isLabeledValue(first)) {
+      return (first as AntdLabeledValue).value === SELECT_ALL.value;
+    }
+    return first === SELECT_ALL.value;
+  }, [selectValue]);
+
   const mergeData = useCallback(
     (data: OptionsType) => {
       let mergedData: OptionsType = [];
@@ -446,13 +542,23 @@ const Select = (
           mergedData = prevOptions
             .filter(previousOption => !dataValues.has(previousOption.value))
             .concat(data)
-            .sort(sortComparatorForNoSearch);
+            .sort(sortComparatorOnMerge);
           return mergedData;
         });
+        // Mark the items as selected when in select all mode
+        if (selectAllMode) {
+          const prevValues = new Set(selectOptions.map(opt => opt.value));
+          const newData = data.filter(opt => !prevValues.has(opt.value));
+          setSelectValue(prevSelected =>
+            ensureIsArray(prevSelected as AntdLabeledValue[]).concat(
+              newData as AntdLabeledValue[],
+            ),
+          );
+        }
       }
       return mergedData;
     },
-    [sortComparatorForNoSearch],
+    [selectAllMode, selectOptions, sortComparatorOnMerge],
   );
 
   const fetchPage = useMemo(
@@ -465,7 +571,7 @@ const Select = (
       const key = getQueryCacheKey(search, page, pageSize);
       const cachedCount = fetchedQueries.current.get(key);
       if (cachedCount !== undefined) {
-        setTotalCount(cachedCount);
+        setQueryCount(cachedCount);
         setIsLoading(false);
         return;
       }
@@ -475,10 +581,13 @@ const Select = (
         .then(({ data, totalCount }: OptionsTypePage) => {
           const mergedData = mergeData(data);
           fetchedQueries.current.set(key, totalCount);
-          setTotalCount(totalCount);
+          setQueryCount(totalCount);
+          if (search === '') {
+            setTotalCount(totalCount);
+          }
           if (
             !fetchOnlyOnSearch &&
-            value === '' &&
+            memoizedValue === '' &&
             mergedData.length >= totalCount
           ) {
             setAllValuesLoaded(true);
@@ -491,12 +600,12 @@ const Select = (
     },
     [
       allValuesLoaded,
-      fetchOnlyOnSearch,
-      mergeData,
-      internalOnError,
-      options,
       pageSize,
-      value,
+      options,
+      internalOnError,
+      mergeData,
+      fetchOnlyOnSearch,
+      memoizedValue,
     ],
   );
 
@@ -539,7 +648,7 @@ const Select = (
     const vScroll = e.currentTarget;
     const thresholdReached =
       vScroll.scrollTop > (vScroll.scrollHeight - vScroll.offsetHeight) * 0.7;
-    const hasMoreData = page * pageSize + pageSize < totalCount;
+    const hasMoreData = page * pageSize + pageSize < queryCount;
 
     if (!isLoading && isAsync && hasMoreData && thresholdReached) {
       const newPage = page + 1;
@@ -577,12 +686,15 @@ const Select = (
         setLoadingEnabled(isDropdownVisible);
       }
       // when closing dropdown, always reset loading state
-      if (!isDropdownVisible && isLoading) {
+      if (!isDropdownVisible) {
         // delay is for the animation of closing the dropdown
         // so the dropdown doesn't flash between "Loading..." and "No data"
         // before closing.
         setTimeout(() => {
-          setIsLoading(false);
+          setInputValue('');
+          if (isLoading) {
+            setIsLoading(false);
+          }
         }, 250);
       }
     }
@@ -643,8 +755,8 @@ const Select = (
   }, [initialOptions]);
 
   useEffect(() => {
-    setSelectValue(value);
-  }, [value]);
+    setSelectValue(memoizedValue);
+  }, [memoizedValue]);
 
   // Stop the invocation of the debounced function after unmounting
   useEffect(
@@ -678,6 +790,42 @@ const Select = (
     }
   }, [isLoading, loading]);
 
+  const showSelectAll =
+    mode === 'multiple' && fullSelectOptions.length > 0 && !inputValue;
+
+  const selectAllLabel = useMemo(
+    () => () =>
+      `${SELECT_ALL.label} (${formatNumber(
+        NumberFormats.INTEGER,
+        totalCount,
+      )})`,
+    [totalCount],
+  );
+
+  // Will be called twice because of maxTagCount = 1
+  // One time for the element and another for the plus elements placeholder
+  const CustomTagRenderer = (props: any) => {
+    const { value } = props;
+    // skip plus elements placeholder
+    if (!value) {
+      return <NoElement />; // doesn't accept null
+    }
+    let displayedSelectedValues = ensureIsArray(selectValue).length;
+    if (isSelectingAll()) {
+      displayedSelectedValues -= 1;
+    }
+    const unselectedValues = fullSelectOptions.length - displayedSelectedValues;
+    const totalSelectedValues = totalCount - unselectedValues;
+    return (
+      <StyledTag {...props}>{`${formatNumber(
+        NumberFormats.INTEGER,
+        totalSelectedValues,
+      )} ${t('selected')}`}</StyledTag>
+    );
+  };
+
+  // TODO: Fix delete key on select all
+
   return (
     <StyledContainer>
       {header}
@@ -689,7 +837,7 @@ const Select = (
         filterSort={sortComparatorWithSearch}
         getPopupContainer={triggerNode => triggerNode.parentNode}
         labelInValue={isAsync || labelInValue}
-        maxTagCount={MAX_TAG_COUNT}
+        maxTagCount={selectAllMode ? 1 : MAX_TAG_COUNT}
         mode={mappedMode}
         notFoundContent={isLoading ? t('Loading...') : notFoundContent}
         onDeselect={handleOnDeselect}
@@ -699,10 +847,10 @@ const Select = (
         onSelect={handleOnSelect}
         onClear={handleClear}
         onChange={onChange}
-        options={hasCustomLabels ? undefined : fullSelectOptions}
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
+        tagRender={selectAllMode ? CustomTagRenderer : undefined}
         tokenSeparators={tokenSeparators || TOKEN_SEPARATORS}
         value={selectValue}
         suffixIcon={getSuffixIcon()}
@@ -716,18 +864,26 @@ const Select = (
         ref={ref}
         {...props}
       >
-        {hasCustomLabels &&
-          fullSelectOptions.map(opt => {
-            const isOptObject = typeof opt === 'object';
-            const label = isOptObject ? opt?.label || opt.value : opt;
-            const value = isOptObject ? opt.value : opt;
-            const { customLabel, ...optProps } = opt;
-            return (
-              <Option {...optProps} key={value} label={label} value={value}>
-                {isOptObject && customLabel ? customLabel : label}
-              </Option>
-            );
-          })}
+        {showSelectAll && (
+          <Option
+            id="select-all"
+            key={SELECT_ALL.value}
+            value={SELECT_ALL.value}
+          >
+            {selectAllLabel()}
+          </Option>
+        )}
+        {fullSelectOptions.map(opt => {
+          const isOptObject = typeof opt === 'object';
+          const label = isOptObject ? opt?.label || opt.value : opt;
+          const value = isOptObject ? opt.value : opt;
+          const { customLabel, ...optProps } = opt;
+          return (
+            <Option {...optProps} key={value} label={label} value={value}>
+              {isOptObject && customLabel ? customLabel : label}
+            </Option>
+          );
+        })}
       </StyledSelect>
     </StyledContainer>
   );