upgrade to react-bootstrap v0.33.1 (#9372)

* upgrade to react-bootstrap v0.33.1 * fix test * simplify proptypes Co-Authored-By: Evan Rusackas <evan@preset.io> * simplify more proptypes Co-Authored-By: Evan Rusackas <evan@preset.io> Co-authored-by: Evan Rusackas <evan@preset.io>
apache · Mar 26, 2020 · cfa7868 · cfa7868
1 parent ccff6be
commit cfa7868
Show file tree

Hide file tree

Showing 16 changed files with 413 additions and 328 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -122,7 +122,7 @@
     "re-resizable": "^4.3.1",
     "react": "^16.13.0",
     "react-ace": "^5.10.0",
-    "react-bootstrap": "^0.31.5",
+    "react-bootstrap": "^0.33.1",
     "react-bootstrap-dialog": "^0.10.0",
     "react-bootstrap-slider": "2.1.5",
     "react-checkbox-tree": "^1.5.1",

diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx
@@ -57,7 +57,7 @@ describe('ControlPanelSection', () => {
     it('renders a label if present', () => {
       expect(
         wrapper
-          .find(Panel)
+          .find(Panel.Title)
           .dive()
           .text(),
       ).toContain('my label');

diff --git a/superset-frontend/src/addSlice/AddSliceContainer.jsx b/superset-frontend/src/addSlice/AddSliceContainer.jsx
@@ -80,53 +80,58 @@ export default class AddSliceContainer extends React.PureComponent {
   render() {
     return (
       <div className="container">
-        <Panel header={<h3>{t('Create a new chart')}</h3>}>
-          <div>
-            <p>{t('Choose a datasource')}</p>
-            <div style={styleSelectWidth}>
-              <Select
-                clearable={false}
-                ignoreAccents={false}
-                name="select-datasource"
-                onChange={this.changeDatasource}
-                options={this.props.datasources}
-                placeholder={t('Choose a datasource')}
-                style={styleSelectWidth}
-                value={this.state.datasourceValue}
-                width={600}
+        <Panel>
+          <Panel.Heading>
+            <h3>{t('Create a new chart')}</h3>
+          </Panel.Heading>
+          <Panel.Body>
+            <div>
+              <p>{t('Choose a datasource')}</p>
+              <div style={styleSelectWidth}>
+                <Select
+                  clearable={false}
+                  ignoreAccents={false}
+                  name="select-datasource"
+                  onChange={this.changeDatasource}
+                  options={this.props.datasources}
+                  placeholder={t('Choose a datasource')}
+                  style={styleSelectWidth}
+                  value={this.state.datasourceValue}
+                  width={600}
+                />
+              </div>
+              <p className="text-muted">
+                {t(
+                  'If the datasource you are looking for is not ' +
+                    'available in the list, ' +
+                    'follow the instructions on the how to add it on the ',
+                )}
+                <a href="https://superset.apache.org/tutorial.html">
+                  {t('Superset tutorial')}
+                </a>
+              </p>
+            </div>
+            <br />
+            <div>
+              <p>{t('Choose a visualization type')}</p>
+              <VizTypeControl
+                name="select-vis-type"
+                onChange={this.changeVisType}
+                value={this.state.visType}
               />
             </div>
-            <p className="text-muted">
-              {t(
-                'If the datasource you are looking for is not ' +
-                  'available in the list, ' +
-                  'follow the instructions on the how to add it on the ',
-              )}
-              <a href="https://superset.apache.org/tutorial.html">
-                {t('Superset tutorial')}
-              </a>
-            </p>
-          </div>
-          <br />
-          <div>
-            <p>{t('Choose a visualization type')}</p>
-            <VizTypeControl
-              name="select-vis-type"
-              onChange={this.changeVisType}
-              value={this.state.visType}
-            />
-          </div>
-          <br />
-          <hr />
-          <Button
-            bsStyle="primary"
-            disabled={this.isBtnDisabled()}
-            onClick={this.gotoSlice}
-          >
-            {t('Create new chart')}
-          </Button>
-          <br />
-          <br />
+            <br />
+            <hr />
+            <Button
+              bsStyle="primary"
+              disabled={this.isBtnDisabled()}
+              onClick={this.gotoSlice}
+            >
+              {t('Create new chart')}
+            </Button>
+            <br />
+            <br />
+          </Panel.Body>
         </Panel>
       </div>
     );

diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterFieldTree.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterFieldTree.jsx
@@ -25,7 +25,7 @@ import renderFilterFieldTreeNodes from './renderFilterFieldTreeNodes';
 import { filterScopeSelectorTreeNodePropShape } from '../../util/propShapes';
 
 const propTypes = {
-  activeKey: PropTypes.oneOfType([null, PropTypes.string]),
+  activeKey: PropTypes.string,
   nodes: PropTypes.arrayOf(filterScopeSelectorTreeNodePropShape).isRequired,
   checked: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeTree.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeTree.jsx
@@ -34,7 +34,7 @@ const propTypes = {
   ).isRequired,
   onCheck: PropTypes.func.isRequired,
   onExpand: PropTypes.func.isRequired,
-  selectedChartId: PropTypes.oneOfType([null, PropTypes.number]),
+  selectedChartId: PropTypes.number,
 };
 
 const defaultProps = {

diff --git a/superset-frontend/src/explore/components/ControlPanelSection.jsx b/superset-frontend/src/explore/components/ControlPanelSection.jsx
@@ -40,6 +40,7 @@ export default class ControlPanelSection extends React.Component {
   constructor(props) {
     super(props);
     this.state = { expanded: this.props.startExpanded };
+    this.toggleExpand = this.toggleExpand.bind(this);
   }
   toggleExpand() {
     this.setState({ expanded: !this.state.expanded });
@@ -50,7 +51,7 @@ export default class ControlPanelSection extends React.Component {
       label && (
         <div>
           <span>
-            <span onClick={this.toggleExpand.bind(this)}>{label}</span>{' '}
+            <span onClick={this.toggleExpand}>{label}</span>{' '}
             {description && (
               <InfoTooltipWithTrigger label={label} tooltip={description} />
             )}
@@ -77,11 +78,15 @@ export default class ControlPanelSection extends React.Component {
     return (
       <Panel
         className="control-panel-section"
-        collapsible
         expanded={this.state.expanded}
-        header={this.renderHeader()}
+        onToggle={this.toggleExpand}
       >
-        {this.props.children}
+        <Panel.Heading>
+          <Panel.Title>{this.renderHeader()}</Panel.Title>
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body>{this.props.children}</Panel.Body>
+        </Panel.Collapse>
       </Panel>
     );
   }

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -111,8 +111,9 @@ class ExploreChartPanel extends React.PureComponent {
     );
     return (
       <div className="chart-container">
-        <Panel style={{ height: this.props.height }} header={header}>
-          {this.renderChart()}
+        <Panel style={{ height: this.props.height }}>
+          <Panel.Heading>{header}</Panel.Heading>
+          <Panel.Body>{this.renderChart()}</Panel.Body>
         </Panel>
       </div>
     );