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 <[email protected]> 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
