mirror of
https://github.com/apache/superset.git
synced 2024-09-06 05:47:43 -04:00
chore: Changes the dashboard properties modal to use the new select component (#16064)
This commit is contained in:
parent
2bfc1c29c5
commit
423ff50768
@ -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 () => {
|
||||
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user