refactor(addslicecontainer): move slice container panel from bootstrap panel to ant-d (#14035)

* slice boostrap panel to ant-d

* remove panel

* remove space

* fix lint

* fix addslicecontainer

* Update AddSliceContainer.tsx

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -17,10 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import { Panel } from 'react-bootstrap';
 import Button from 'src/components/Button';
 import Select from 'src/components/Select';
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 
 import VizTypeControl from '../explore/components/controls/VizTypeControl';
 
@@ -41,6 +40,14 @@ export type AddSliceContainerState = {
 };
 
 const styleSelectContainer = { width: 600, marginBottom: '10px' };
+const StyledContainer = styled.div`
+  border-radius: ${({ theme }) => theme.gridUnit}px;
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+  padding: ${({ theme }) => theme.gridUnit * 6}px;
+  h3 {
+    padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+  }
+`;
 
 export default class AddSliceContainer extends React.PureComponent<
   AddSliceContainerProps,
@@ -88,69 +95,63 @@ export default class AddSliceContainer extends React.PureComponent<
 
   render() {
     return (
-      <div className="container">
-        <Panel>
-          <Panel.Heading>
-            <h3>{t('Create a new chart')}</h3>
-          </Panel.Heading>
-          <Panel.Body>
-            <div>
-              <p>{t('Choose a dataset')}</p>
-              <div style={styleSelectContainer}>
-                <Select
-                  clearable={false}
-                  ignoreAccents={false}
-                  name="select-datasource"
-                  onChange={this.changeDatasource}
-                  options={this.props.datasources}
-                  placeholder={t('Choose a dataset')}
-                  value={
-                    this.state.datasourceValue
-                      ? {
-                          value: this.state.datasourceValue,
-                        }
-                      : undefined
-                  }
-                  width={600}
-                />
-              </div>
-              <span className="text-muted">
-                {t(
-                  'If the dataset you are looking for is not available in the list, follow the instructions on how to add it in the Superset tutorial.',
-                )}{' '}
-                <a
-                  href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <i className="fa fa-external-link" />
-                </a>
-              </span>
-            </div>
-            <br />
-            <div>
-              <p>{t('Choose a visualization type')}</p>
-              <VizTypeControl
-                name="select-vis-type"
-                onChange={this.changeVisType}
-                value={this.state.visType}
-                labelType="primary"
-              />
-            </div>
-            <br />
-            <hr />
-            <Button
-              buttonStyle="primary"
-              disabled={this.isBtnDisabled()}
-              onClick={this.gotoSlice}
+      <StyledContainer className="container">
+        <h3>{t('Create a new chart')}</h3>
+        <div>
+          <p>{t('Choose a dataset')}</p>
+          <div style={styleSelectContainer}>
+            <Select
+              clearable={false}
+              ignoreAccents={false}
+              name="select-datasource"
+              onChange={this.changeDatasource}
+              options={this.props.datasources}
+              placeholder={t('Choose a dataset')}
+              value={
+                this.state.datasourceValue
+                  ? {
+                      value: this.state.datasourceValue,
+                    }
+                  : undefined
+              }
+              width={600}
+            />
+          </div>
+          <span className="text-muted">
+            {t(
+              'If the dataset you are looking for is not available in the list, follow the instructions on how to add it in the Superset tutorial.',
+            )}{' '}
+            <a
+              href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
+              rel="noopener noreferrer"
+              target="_blank"
             >
-              {t('Create new chart')}
-            </Button>
-            <br />
-            <br />
-          </Panel.Body>
-        </Panel>
-      </div>
+              <i className="fa fa-external-link" />
+            </a>
+          </span>
+        </div>
+        <br />
+        <div>
+          <p>{t('Choose a visualization type')}</p>
+          <VizTypeControl
+            name="select-vis-type"
+            onChange={this.changeVisType}
+            value={this.state.visType}
+            labelType="primary"
+          />
+        </div>
+        <br />
+        <hr />
+        <Button
+          buttonStyle="primary"
+          disabled={this.isBtnDisabled()}
+          onClick={this.gotoSlice}
+        >
+          {t('Create new chart')}
+        </Button>
+        <br />
+        <br />
+      </StyledContainer>
     );
   }
 }