feat: update dataset editor modal (#10347)

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Badge, Col, Label, Tabs, Tab, Well } from 'react-bootstrap';
 import shortid from 'shortid';
+import styled from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 import getClientErrorObject from '../utils/getClientErrorObject';
@@ -40,7 +41,21 @@ import Field from '../CRUD/Field';
 
 import withToasts from '../messageToasts/enhancers/withToasts';
 
-import './main.less';
+const DatasourceContainer = styled.div`
+  .tab-content {
+    height: 600px;
+    overflow: auto;
+  }
+
+  .change-warning {
+    margin: 16px 10px 0;
+    color: ${({ theme }) => theme.colors.warning.base};
+  }
+
+  .change-warning .bold {
+    font-weight: ${({ theme }) => theme.typography.weights.bold};
+  }
+`;
 
 const checkboxGenerator = (d, onChange) => (
   <CheckboxControl value={d} onChange={onChange} />
@@ -220,8 +235,12 @@ export class DatasourceEditor extends React.PureComponent {
     this.state = {
       datasource: props.datasource,
       errors: [],
-      isDruid: props.datasource.type === 'druid',
-      isSqla: props.datasource.type === 'table',
+      isDruid:
+        props.datasource.type === 'druid' ||
+        props.datasource.datasource_type === 'druid',
+      isSqla:
+        props.datasource.datasource_type === 'table' ||
+        props.datasource.type === 'table',
       databaseColumns: props.datasource.columns.filter(col => !col.expression),
       calculatedColumns: props.datasource.columns.filter(
         col => !!col.expression,
@@ -290,10 +309,12 @@ export class DatasourceEditor extends React.PureComponent {
     const { datasource } = this.state;
     // Handle carefully when the schema is empty
     const endpoint =
-      `/datasource/external_metadata/${datasource.type}/${datasource.id}/` +
+      `/datasource/external_metadata/${
+        datasource.type || datasource.datasource_type
+      }/${datasource.id}/` +
       `?db_id=${datasource.database.id}` +
       `&schema=${datasource.schema || ''}` +
-      `&table_name=${datasource.datasource_name}`;
+      `&table_name=${datasource.datasource_name || datasource.table_name}`;
     this.setState({ metadataLoading: true });
 
     SupersetClient.get({ endpoint })
@@ -645,7 +666,7 @@ export class DatasourceEditor extends React.PureComponent {
   render() {
     const { datasource, activeTabKey } = this.state;
     return (
-      <div className="Datasource">
+      <DatasourceContainer>
         {this.renderErrors()}
         <Tabs
           id="table-tabs"
@@ -747,7 +768,7 @@ export class DatasourceEditor extends React.PureComponent {
             )}
           </Tab>
         </Tabs>
-      </div>
+      </DatasourceContainer>
     );
   }
 }