refactor(addslicecontainer): move slice container panel from bootstra…

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