chore: Move styles of Dashboard and FilterScopeSelector modals to Emotion (#11779)

* Remove unused component

* Move styles from dashboard.less and filter-scope-selector.less to Emotion

* Write padding style short-hand way

superset-frontend/src/components/ModalTrigger.jsx

@@ -76,6 +76,7 @@ export default class ModalTrigger extends React.Component {
         title={this.props.modalTitle}
         footer={this.props.modalFooter}
         hideFooter={!this.props.modalFooter}
+        width={this.props.width}
         maxWidth={this.props.maxWidth}
         responsive={this.props.responsive}
       >

superset-frontend/src/dashboard/components/DeleteComponentModal.jsx

@@ -1,80 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from 'src/components/Button';
-import { t } from '@superset-ui/core';
-
-import ModalTrigger from '../../components/ModalTrigger';
-
-const propTypes = {
-  triggerNode: PropTypes.node.isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
-export default class DeleteComponentModal extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.modal = null;
-    this.close = this.close.bind(this);
-    this.deleteTab = this.deleteTab.bind(this);
-    this.setModalRef = this.setModalRef.bind(this);
-  }
-
-  setModalRef(ref) {
-    this.modal = ref;
-  }
-
-  close() {
-    this.modal.close();
-  }
-
-  deleteTab() {
-    this.modal.close();
-    this.props.onDelete();
-  }
-
-  render() {
-    return (
-      <ModalTrigger
-        ref={this.setModalRef}
-        triggerNode={this.props.triggerNode}
-        modalBody={
-          <div className="dashboard-modal delete">
-            <h1>{t('Delete dashboard tab?')}</h1>
-            <div>
-              Deleting a tab will remove all content within it. You may still
-              reverse this action with the <b>undo</b> button (cmd + z) until
-              you save your changes.
-            </div>
-            <div className="dashboard-modal-actions-container">
-              <Button onClick={this.close}>{t('Cancel')}</Button>
-              <Button buttonStyle="primary" onClick={this.deleteTab}>
-                {t('Delete')}
-              </Button>
-            </div>
-          </div>
-        }
-      />
-    );
-  }
-}
-
-DeleteComponentModal.propTypes = propTypes;

superset-frontend/src/dashboard/components/RefreshIntervalModal.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'src/components/Select';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { Alert } from 'react-bootstrap';
 import Button from 'src/components/Button';
 
@@ -53,6 +53,10 @@ export const options = [
   [86400, t('24 hours')],
 ].map(o => ({ value: o[0], label: o[1] }));
 
+const RefreshWarningContainer = styled.div`
+  margin-top: ${({ theme }) => theme.gridUnit * 6}px;
+`;
+
 class RefreshIntervalModal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -104,13 +108,13 @@ class RefreshIntervalModal extends React.PureComponent {
               onChange={this.handleFrequencyChange}
             />
             {showRefreshWarning && (
-              <div className="refresh-warning-container">
+              <RefreshWarningContainer>
                 <Alert bsStyle="warning">
                   <div>{refreshWarning}</div>
                   <br />
                   <strong>{t('Are you sure you want to proceed?')}</strong>
                 </Alert>
-              </div>
+              </RefreshWarningContainer>
             )}
           </div>
         }

superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.jsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@superset-ui/core';
 
 import ModalTrigger from '../../../components/ModalTrigger';
 import FilterScope from '../../containers/FilterScope';
@@ -26,6 +27,11 @@ const propTypes = {
   triggerNode: PropTypes.node.isRequired,
 };
 
+const FilterScopeModalBody = styled.div(({ theme: { gridUnit } }) => ({
+  padding: gridUnit * 2,
+  paddingBottom: gridUnit * 3,
+}));
+
 export default class FilterScopeModal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -43,14 +49,14 @@ export default class FilterScopeModal extends React.PureComponent {
   render() {
     return (
       <ModalTrigger
-        dialogClassName="filter-scope-modal"
         ref={this.modal}
         triggerNode={this.props.triggerNode}
         modalBody={
-          <div className="dashboard-modal filter-scope">
+          <FilterScopeModalBody>
             <FilterScope onCloseModal={this.handleCloseModal} />
-          </div>
+          </FilterScopeModalBody>
         }
+        width="80%"
       />
     );
   }

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Button from 'src/components/Button';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 
 import buildFilterScopeTreeEntry from '../../util/buildFilterScopeTreeEntry';
 import getFilterScopeNodesTree from '../../util/getFilterScopeNodesTree';
@@ -49,6 +49,24 @@ const propTypes = {
   onCloseModal: PropTypes.func.isRequired,
 };
 
+const ActionsContainer = styled.div`
+  height: ${({ theme }) => theme.gridUnit * 16}px;
+
+  // TODO: replace hardcoded color with theme variable after refactoring filter-scope-selector.less to Emotion
+  border-top: ${({ theme }) => theme.gridUnit / 4}px solid #cfd8dc;
+  padding: ${({ theme }) => theme.gridUnit * 6}px;
+  margin: 0 0 0 ${({ theme }) => -theme.gridUnit * 6}px;
+  text-align: right;
+
+  .btn {
+    margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+
 export default class FilterScopeSelector extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -512,7 +530,7 @@ export default class FilterScopeSelector extends React.PureComponent {
           )}
         </div>
 
-        <div className="dashboard-modal-actions-container">
+        <ActionsContainer>
           <Button buttonSize="sm" onClick={this.onClose}>
             {t('Close')}
           </Button>
@@ -521,7 +539,7 @@ export default class FilterScopeSelector extends React.PureComponent {
               {t('Save')}
             </Button>
           )}
-        </div>
+        </ActionsContainer>
       </div>
     );
   }

superset-frontend/src/dashboard/stylesheets/dashboard.less

@@ -120,42 +120,6 @@ body {
   }
 }
 
-.ant-modal-root {
-  .ant-modal-body {
-    padding: 24px 24px 29px 24px !important;
-  }
-
-  .filter-scope-modal {
-    .ant-modal {
-      width: 80% !important;
-    }
-  }
-
-  .refresh-warning-container {
-    margin-top: 24px;
-  }
-
-  .dashboard-modal-actions-container {
-    margin-top: 24px;
-    text-align: right;
-
-    .btn {
-      margin-right: 16px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .dashboard-modal.delete {
-    .btn.btn-primary {
-      background: @danger;
-      border-color: @danger;
-    }
-  }
-}
-
 .react-bs-container-body {
   max-height: 400px;
   overflow-y: auto;

superset-frontend/src/dashboard/stylesheets/filter-scope-selector.less

@@ -39,13 +39,6 @@
     }
   }
 
-  .dashboard-modal-actions-container {
-    height: 64px;
-    border-top: 1px solid @gray-light;
-    padding: 24px;
-    margin: 0 0 0 -24px;
-  }
-
   .warning-message {
     padding: 24px;
   }