You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2020/01/04 19:52:08 UTC
[incubator-superset] 07/22: [Datasource Editor] A few small UI
changes in modal to prevent accidental edits (#8471)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch 0.35
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 811b0e935f5b2d9c500298a992a6804978f16e8f
Author: Grace Guo <gr...@airbnb.com>
AuthorDate: Tue Oct 29 15:26:11 2019 -0700
[Datasource Editor] A few small UI changes in modal to prevent accidental edits (#8471)
---
.../datasource/DatasourceEditor_spec.jsx | 1 +
.../assets/src/datasource/DatasourceEditor.jsx | 52 ++++++++++++----------
superset/assets/src/datasource/main.css | 9 ++++
.../components/controls/DatasourceControl.jsx | 12 ++---
4 files changed, 44 insertions(+), 30 deletions(-)
diff --git a/superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index 61d2f66..c23ff43 100644
--- a/superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -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);
});
diff --git a/superset/assets/src/datasource/DatasourceEditor.jsx b/superset/assets/src/datasource/DatasourceEditor.jsx
index 10a0861..71fa9af 100644
--- a/superset/assets/src/datasource/DatasourceEditor.jsx
+++ b/superset/assets/src/datasource/DatasourceEditor.jsx
@@ -565,30 +565,20 @@ 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={
@@ -596,7 +586,7 @@ export class DatasourceEditor extends React.PureComponent {
}
eventKey={2}
>
- {this.state.activeTabKey === 2 &&
+ {activeTabKey === 2 &&
<div>
<ColumnCollectionTable
columns={this.state.databaseColumns}
@@ -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 })}
@@ -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>
diff --git a/superset/assets/src/datasource/main.css b/superset/assets/src/datasource/main.css
index f551f7b..6081433 100644
--- a/superset/assets/src/datasource/main.css
+++ b/superset/assets/src/datasource/main.css
@@ -20,3 +20,12 @@
height: 600px;
overflow: auto;
}
+
+.Datasource .change-warning {
+ margin: 16px 10px 0;
+ color: #FE4A49;
+}
+
+.Datasource .change-warning .bold {
+ font-weight: bold;
+}
diff --git a/superset/assets/src/explore/components/controls/DatasourceControl.jsx b/superset/assets/src/explore/components/controls/DatasourceControl.jsx
index 910a5fd..fc04ee9 100644
--- a/superset/assets/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset/assets/src/explore/components/controls/DatasourceControl.jsx
@@ -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>
@@ -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
@@ -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