feat: Adds the "Select all" option to the Select component

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"

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,15 +476,27 @@ 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>
     </>
   );
 };
 
 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)',

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();