chore: Changes the dashboard properties modal to use the new select c…

…omponent (apache#16064)
QAlexBall · Aug 6, 2021 · 9dff62d · 9dff62d
1 parent 12f4ce8
commit 9dff62d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
@@ -165,7 +165,8 @@ test('should render - FeatureFlag disabled', async () => {
   expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
   expect(screen.getAllByRole('button')).toHaveLength(4);
 
-  expect(screen.getAllByRole('textbox')).toHaveLength(3);
+  expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
 
   expect(spyColorSchemeControlWrapper).toBeCalledTimes(4);
   expect(spyColorSchemeControlWrapper).toBeCalledWith(
@@ -201,7 +202,8 @@ test('should render - FeatureFlag enabled', async () => {
   expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
   expect(screen.getAllByRole('button')).toHaveLength(4);
 
-  expect(screen.getAllByRole('textbox')).toHaveLength(4);
+  expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  expect(screen.getAllByRole('combobox')).toHaveLength(2);
 
   expect(spyColorSchemeControlWrapper).toBeCalledTimes(4);
   expect(spyColorSchemeControlWrapper).toBeCalledWith(
@@ -220,9 +222,11 @@ test('should open advance', async () => {
     await screen.findByTestId('dashboard-edit-properties-form'),
   ).toBeInTheDocument();
 
-  expect(screen.getAllByRole('textbox')).toHaveLength(4);
+  expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  expect(screen.getAllByRole('combobox')).toHaveLength(2);
   userEvent.click(screen.getByRole('button', { name: 'Advanced' }));
-  expect(screen.getAllByRole('textbox')).toHaveLength(5);
+  expect(screen.getAllByRole('textbox')).toHaveLength(3);
+  expect(screen.getAllByRole('combobox')).toHaveLength(2);
 });
 
 test('should close modal', async () => {

diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@@ -22,7 +22,7 @@ import { Row, Col, Input } from 'src/common/components';
 import { Form, FormItem } from 'src/components/Form';
 import jsonStringify from 'json-stringify-pretty-compact';
 import Button from 'src/components/Button';
-import { AsyncSelect } from 'src/components/Select';
+import { Select } from 'src/components';
 import rison from 'rison';
 import {
   styled,
@@ -91,18 +91,23 @@ const loadAccessOptions = accessType => (input = '') => {
   return SupersetClient.get({
     endpoint: `/api/v1/dashboard/related/${accessType}?q=${query}`,
   }).then(
-    response =>
-      response.json.result.map(item => ({
+    response => ({
+      data: response.json.result.map(item => ({
         value: item.value,
         label: item.text,
       })),
+      totalCount: response.json.count,
+    }),
     badResponse => {
       handleErrorResponse(badResponse);
       return [];
     },
   );
 };
 
+const loadOwners = loadAccessOptions('owners');
+const loadRoles = loadAccessOptions('roles');
+
 class PropertiesModal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -326,16 +331,15 @@ class PropertiesModal extends React.PureComponent {
         <Col xs={24} md={12}>
           <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
           <FormItem label={t('Owners')}>
-            <AsyncSelect
+            <Select
+              allowClear
+              ariaLabel={t('Owners')}
+              disabled={!isDashboardLoaded}
               name="owners"
-              isMulti
+              mode="multiple"
               value={values.owners}
-              loadOptions={loadAccessOptions('owners')}
-              defaultOptions // load options on render
-              cacheOptions
+              options={loadOwners}
               onChange={this.onOwnersChange}
-              disabled={!isDashboardLoaded}
-              filterOption={null} // options are filtered at the api
             />
             <p className="help-block">
               {t(
@@ -368,16 +372,15 @@ class PropertiesModal extends React.PureComponent {
         <Row gutter={16}>
           <Col xs={24} md={12}>
             <FormItem label={t('Owners')}>
-              <AsyncSelect
+              <Select
+                allowClear
+                ariaLabel={t('Owners')}
+                disabled={!isDashboardLoaded}
                 name="owners"
-                isMulti
+                mode="multiple"
                 value={values.owners}
-                loadOptions={loadAccessOptions('owners')}
-                defaultOptions // load options on render
-                cacheOptions
+                options={loadOwners}
                 onChange={this.onOwnersChange}
-                disabled={!isDashboardLoaded}
-                filterOption={null} // options are filtered at the api
               />
               <p className="help-block">
                 {t(
@@ -388,16 +391,15 @@ class PropertiesModal extends React.PureComponent {
           </Col>
           <Col xs={24} md={12}>
             <FormItem label={t('Roles')}>
-              <AsyncSelect
+              <Select
+                allowClear
+                ariaLabel={t('Roles')}
+                disabled={!isDashboardLoaded}
                 name="roles"
-                isMulti
+                mode="multiple"
                 value={values.roles}
-                loadOptions={loadAccessOptions('roles')}
-                defaultOptions // load options on render
-                cacheOptions
+                options={loadRoles}
                 onChange={this.onRolesChange}
-                disabled={!isDashboardLoaded}
-                filterOption={null} // options are filtered at the api
               />
               <p className="help-block">
                 {t(