Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Datasource Editor] A few small UI changes in modal to prevent accidental edits #8471

Merged
merged 1 commit into from Oct 29, 2019
Merged

[Datasource Editor] A few small UI changes in modal to prevent accidental edits #8471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx
View file
Open in desktop
Expand Up @@ -91,6 +91,7 @@ describe('DatasourceEditor', () => {
});

it('renders isSqla fields', () => {
wrapper.setState({ activeTabKey: 4 });
expect(wrapper.state('isSqla')).toBe(true);
expect(wrapper.find(Field).find({ fieldKey: 'fetch_values_predicate' }).exists()).toBe(true);
});
Expand Down
52 changes: 28 additions & 24 deletions superset/assets/src/datasource/DatasourceEditor.jsx
View file
Open in desktop
Expand Up @@ -565,38 +565,28 @@ export class DatasourceEditor extends React.PureComponent {
}

render() {
const datasource = this.state.datasource;
const { datasource, activeTabKey } = this.state;
return (
<div className="Datasource">
{this.renderErrors()}
<Tabs
id="table-tabs"
onSelect={this.handleTabSelect}
defaultActiveKey={1}
defaultActiveKey={activeTabKey}
>
<Tab eventKey={1} title={t('Settings')}>
{this.state.activeTabKey === 1 &&
<div>
<Col md={6}>
<FormContainer>
{this.renderSettingsFieldset()}
</FormContainer>
</Col>
<Col md={6}>
<FormContainer>
{this.renderAdvancedFieldset()}
</FormContainer>
</Col>
</div>
}
<Tab
title={<CollectionTabTitle collection={datasource.metrics} title={t('Metrics')} />}
eventKey={1}
>
{activeTabKey === 1 && this.renderMetricCollection()}
</Tab>
<Tab
title={
<CollectionTabTitle collection={this.state.databaseColumns} title={t('Columns')} />
}
eventKey={2}
>
{this.state.activeTabKey === 2 &&
{activeTabKey === 2 &&
<div>
<ColumnCollectionTable
columns={this.state.databaseColumns}
Expand All @@ -623,7 +613,7 @@ export class DatasourceEditor extends React.PureComponent {
/>}
eventKey={3}
>
{this.state.activeTabKey === 3 &&
{activeTabKey === 3 &&
<ColumnCollectionTable
columns={this.state.calculatedColumns}
onChange={calculatedColumns => this.setColumns({ calculatedColumns })}
Expand All @@ -641,11 +631,25 @@ export class DatasourceEditor extends React.PureComponent {
/>
}
</Tab>
<Tab
title={<CollectionTabTitle collection={datasource.metrics} title={t('Metrics')} />}
eventKey={4}
>
{this.state.activeTabKey === 4 && this.renderMetricCollection()}
<Tab eventKey={4} title={t('Settings')}>
{activeTabKey === 4 &&
<div>
<div className="change-warning well">
<span className="bold">{t('Be careful.')} </span>
{t('Changing these settings will affect all charts using this datasource, including charts owned by other people.')}
</div>
<Col md={6}>
<FormContainer>
{this.renderSettingsFieldset()}
</FormContainer>
</Col>
<Col md={6}>
<FormContainer>
{this.renderAdvancedFieldset()}
</FormContainer>
</Col>
</div>
}
</Tab>
</Tabs>
</div>
Expand Down
9 changes: 9 additions & 0 deletions superset/assets/src/datasource/main.css
View file
Open in desktop
Expand Up @@ -20,3 +20,12 @@
height: 600px;
overflow: auto;
}

.Datasource .change-warning {
margin: 16px 10px 0;
color: #FE4A49;
}

.Datasource .change-warning .bold {
font-weight: bold;
}
12 changes: 6 additions & 6 deletions superset/assets/src/explore/components/controls/DatasourceControl.jsx
View file
Open in desktop
Expand Up @@ -124,11 +124,11 @@ class DatasourceControl extends React.PureComponent {
<OverlayTrigger
placement="right"
overlay={
<Tooltip id={'error-tooltip'}>{t('Click to edit the datasource')}</Tooltip>
<Tooltip id={'error-tooltip'}>{t('Click to change the datasource')}</Tooltip>
}
>
<div className="btn-group">
<Label onClick={this.toggleEditDatasourceModal} className="label-btn-label">
<Label onClick={this.toggleChangeDatasourceModal} className="label-btn-label">
{datasource.name}
</Label>
</div>
Expand All @@ -145,9 +145,9 @@ class DatasourceControl extends React.PureComponent {
>
<MenuItem
eventKey="3"
onClick={this.toggleEditDatasourceModal}
onClick={this.toggleChangeDatasourceModal}
>
{t('Edit Datasource')}
{t('Change Datasource')}
</MenuItem>
{datasource.type === 'table' &&
<MenuItem
Expand All @@ -160,9 +160,9 @@ class DatasourceControl extends React.PureComponent {
</MenuItem>}
<MenuItem
eventKey="3"
onClick={this.toggleChangeDatasourceModal}
onClick={this.toggleEditDatasourceModal}
>
{t('Change Datasource')}
{t('Edit Datasource')}
</MenuItem>
</DropdownButton>
<OverlayTrigger
Expand Down