chore: Changes the dashboard properties modal to use the new select component (#16064)

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 () => {

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,11 +91,13 @@ 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 [];
@@ -103,6 +105,9 @@ const loadAccessOptions = accessType => (input = '') => {
   );
 };
 
+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
-              name="owners"
-              isMulti
-              value={values.owners}
-              loadOptions={loadAccessOptions('owners')}
-              defaultOptions // load options on render
-              cacheOptions
-              onChange={this.onOwnersChange}
+            <Select
+              allowClear
+              ariaLabel={t('Owners')}
               disabled={!isDashboardLoaded}
-              filterOption={null} // options are filtered at the api
+              name="owners"
+              mode="multiple"
+              value={values.owners}
+              options={loadOwners}
+              onChange={this.onOwnersChange}
             />
             <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
-                name="owners"
-                isMulti
-                value={values.owners}
-                loadOptions={loadAccessOptions('owners')}
-                defaultOptions // load options on render
-                cacheOptions
-                onChange={this.onOwnersChange}
+              <Select
+                allowClear
+                ariaLabel={t('Owners')}
                 disabled={!isDashboardLoaded}
-                filterOption={null} // options are filtered at the api
+                name="owners"
+                mode="multiple"
+                value={values.owners}
+                options={loadOwners}
+                onChange={this.onOwnersChange}
               />
               <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
-                name="roles"
-                isMulti
-                value={values.roles}
-                loadOptions={loadAccessOptions('roles')}
-                defaultOptions // load options on render
-                cacheOptions
-                onChange={this.onRolesChange}
+              <Select
+                allowClear
+                ariaLabel={t('Roles')}
                 disabled={!isDashboardLoaded}
-                filterOption={null} // options are filtered at the api
+                name="roles"
+                mode="multiple"
+                value={values.roles}
+                options={loadRoles}
+                onChange={this.onRolesChange}
               />
               <p className="help-block">
                 {t(