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

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);
   });

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>

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;
+}

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