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.getByRole('button', { name: 'Save' })).toBeInTheDocument();
|
||||||
expect(screen.getAllByRole('button')).toHaveLength(4);
|
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).toBeCalledTimes(4);
|
||||||
expect(spyColorSchemeControlWrapper).toBeCalledWith(
|
expect(spyColorSchemeControlWrapper).toBeCalledWith(
|
||||||
@ -201,7 +202,8 @@ test('should render - FeatureFlag enabled', async () => {
|
|||||||
expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
|
||||||
expect(screen.getAllByRole('button')).toHaveLength(4);
|
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).toBeCalledTimes(4);
|
||||||
expect(spyColorSchemeControlWrapper).toBeCalledWith(
|
expect(spyColorSchemeControlWrapper).toBeCalledWith(
|
||||||
@ -220,9 +222,11 @@ test('should open advance', async () => {
|
|||||||
await screen.findByTestId('dashboard-edit-properties-form'),
|
await screen.findByTestId('dashboard-edit-properties-form'),
|
||||||
).toBeInTheDocument();
|
).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' }));
|
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 () => {
|
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 { Form, FormItem } from 'src/components/Form';
|
||||||
import jsonStringify from 'json-stringify-pretty-compact';
|
import jsonStringify from 'json-stringify-pretty-compact';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { AsyncSelect } from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import rison from 'rison';
|
import rison from 'rison';
|
||||||
import {
|
import {
|
||||||
styled,
|
styled,
|
||||||
@ -91,11 +91,13 @@ const loadAccessOptions = accessType => (input = '') => {
|
|||||||
return SupersetClient.get({
|
return SupersetClient.get({
|
||||||
endpoint: `/api/v1/dashboard/related/${accessType}?q=${query}`,
|
endpoint: `/api/v1/dashboard/related/${accessType}?q=${query}`,
|
||||||
}).then(
|
}).then(
|
||||||
response =>
|
response => ({
|
||||||
response.json.result.map(item => ({
|
data: response.json.result.map(item => ({
|
||||||
value: item.value,
|
value: item.value,
|
||||||
label: item.text,
|
label: item.text,
|
||||||
})),
|
})),
|
||||||
|
totalCount: response.json.count,
|
||||||
|
}),
|
||||||
badResponse => {
|
badResponse => {
|
||||||
handleErrorResponse(badResponse);
|
handleErrorResponse(badResponse);
|
||||||
return [];
|
return [];
|
||||||
@ -103,6 +105,9 @@ const loadAccessOptions = accessType => (input = '') => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const loadOwners = loadAccessOptions('owners');
|
||||||
|
const loadRoles = loadAccessOptions('roles');
|
||||||
|
|
||||||
class PropertiesModal extends React.PureComponent {
|
class PropertiesModal extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -326,16 +331,15 @@ class PropertiesModal extends React.PureComponent {
|
|||||||
<Col xs={24} md={12}>
|
<Col xs={24} md={12}>
|
||||||
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
||||||
<FormItem label={t('Owners')}>
|
<FormItem label={t('Owners')}>
|
||||||
<AsyncSelect
|
<Select
|
||||||
name="owners"
|
allowClear
|
||||||
isMulti
|
ariaLabel={t('Owners')}
|
||||||
value={values.owners}
|
|
||||||
loadOptions={loadAccessOptions('owners')}
|
|
||||||
defaultOptions // load options on render
|
|
||||||
cacheOptions
|
|
||||||
onChange={this.onOwnersChange}
|
|
||||||
disabled={!isDashboardLoaded}
|
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">
|
<p className="help-block">
|
||||||
{t(
|
{t(
|
||||||
@ -368,16 +372,15 @@ class PropertiesModal extends React.PureComponent {
|
|||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col xs={24} md={12}>
|
<Col xs={24} md={12}>
|
||||||
<FormItem label={t('Owners')}>
|
<FormItem label={t('Owners')}>
|
||||||
<AsyncSelect
|
<Select
|
||||||
name="owners"
|
allowClear
|
||||||
isMulti
|
ariaLabel={t('Owners')}
|
||||||
value={values.owners}
|
|
||||||
loadOptions={loadAccessOptions('owners')}
|
|
||||||
defaultOptions // load options on render
|
|
||||||
cacheOptions
|
|
||||||
onChange={this.onOwnersChange}
|
|
||||||
disabled={!isDashboardLoaded}
|
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">
|
<p className="help-block">
|
||||||
{t(
|
{t(
|
||||||
@ -388,16 +391,15 @@ class PropertiesModal extends React.PureComponent {
|
|||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={12}>
|
<Col xs={24} md={12}>
|
||||||
<FormItem label={t('Roles')}>
|
<FormItem label={t('Roles')}>
|
||||||
<AsyncSelect
|
<Select
|
||||||
name="roles"
|
allowClear
|
||||||
isMulti
|
ariaLabel={t('Roles')}
|
||||||
value={values.roles}
|
|
||||||
loadOptions={loadAccessOptions('roles')}
|
|
||||||
defaultOptions // load options on render
|
|
||||||
cacheOptions
|
|
||||||
onChange={this.onRolesChange}
|
|
||||||
disabled={!isDashboardLoaded}
|
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">
|
<p className="help-block">
|
||||||
{t(
|
{t(
|
||||||
|
Loading…
Reference in New Issue
Block a user