chore: Removes less from SliceAdder (#14448)

superset-frontend/spec/javascripts/dashboard/components/SliceAdder_spec.jsx

@@ -155,10 +155,10 @@ describe('SliceAdder', () => {
     });
 
     it('handleSelect', () => {
-      const newSortBy = 1;
+      const newSortBy = { value: 'viz_type' };
       wrapper.instance().handleSelect(newSortBy);
       expect(spy.calledOnce).toBe(true);
-      expect(spy.lastCall.args[1]).toBe(newSortBy);
+      expect(spy.lastCall.args[1]).toBe(newSortBy.value);
     });
 
     it('handleKeyPress', () => {

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

@@ -19,7 +19,7 @@
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 
 const propTypes = {
   datasourceUrl: PropTypes.string,
@@ -41,6 +41,69 @@ const defaultProps = {
   lastModified: null,
 };
 
+const Styled = styled.div`
+  ${({ theme }) => `
+    .chart-card {
+      border: 1px solid ${theme.colors.grayscale.light2};
+      border-radius: ${theme.gridUnit}px;
+      background: ${theme.colors.grayscale.light5};
+      font-weight: ${theme.typography.weights.light};
+      padding: ${theme.gridUnit * 2}px;
+      margin: 0 ${theme.gridUnit * 3}px
+        ${theme.gridUnit * 3}px
+        ${theme.gridUnit * 3}px;
+      position: relative;
+      cursor: move;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &:hover {
+        background: ${theme.colors.grayscale.light4};
+      }
+    }
+
+    .chart-card.is-selected {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    .card-title {
+      margin-right: 60px;
+      margin-bottom: ${theme.gridUnit * 2}px;
+      font-weight: ${theme.typography.weights.bold};
+    }
+
+    .card-body {
+      display: flex;
+      flex-direction: column;
+
+      .item {
+        span {
+          word-break: break-all;
+
+          &:first-child {
+            font-weight: ${theme.typography.weights.normal};
+          }
+        }
+      }
+    }
+
+    .is-added-label {
+      background: ${theme.colors.grayscale.base};
+      border-radius: ${theme.gridUnit}px;
+      color: ${theme.colors.grayscale.light5};
+      font-size: ${theme.typography.sizes.s}px;
+      text-transform: uppercase;
+      position: absolute;
+      padding: ${theme.gridUnit}px
+        ${theme.gridUnit * 2}px;
+      top: ${theme.gridUnit * 8}px;
+      right: ${theme.gridUnit * 8}px;
+      pointer-events: none;
+    }
+  `}
+`;
+
 function AddSliceCard({
   datasourceUrl,
   datasourceName,
@@ -52,7 +115,7 @@ function AddSliceCard({
   visType,
 }) {
   return (
-    <div ref={innerRef} className="chart-card-container" style={style}>
+    <Styled ref={innerRef} style={style}>
       <div
         className={cx('chart-card', isSelected && 'is-selected')}
         data-test="chart-card"
@@ -76,7 +139,7 @@ function AddSliceCard({
         </div>
       </div>
       {isSelected && <div className="is-added-label">{t('Added')}</div>}
-    </div>
+    </Styled>
   );
 }
 

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

@@ -20,17 +20,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'react-virtualized';
-import SearchInput, { createFilter } from 'react-search-input';
-import { t } from '@superset-ui/core';
-
-import { Select } from 'src/common/components';
+import { createFilter } from 'react-search-input';
+import { t, styled } from '@superset-ui/core';
+import { Input } from 'src/common/components';
+import Select from 'src/components/Select';
+import Loading from 'src/components/Loading';
+import {
+  CHART_TYPE,
+  NEW_COMPONENT_SOURCE_TYPE,
+} from 'src/dashboard/util/componentTypes';
+import {
+  NEW_CHART_ID,
+  NEW_COMPONENTS_SOURCE_ID,
+} from 'src/dashboard/util/constants';
+import { slicePropShape } from 'src/dashboard/util/propShapes';
 import AddSliceCard from './AddSliceCard';
 import AddSliceDragPreview from './dnd/AddSliceDragPreview';
 import DragDroppable from './dnd/DragDroppable';
-import Loading from '../../components/Loading';
-import { CHART_TYPE, NEW_COMPONENT_SOURCE_TYPE } from '../util/componentTypes';
-import { NEW_CHART_ID, NEW_COMPONENTS_SOURCE_ID } from '../util/constants';
-import { slicePropShape } from '../util/propShapes';
 
 const propTypes = {
   fetchAllSlices: PropTypes.func.isRequired,
@@ -66,6 +72,17 @@ const SIDEPANE_HEADER_HEIGHT = 30;
 const SLICE_ADDER_CONTROL_HEIGHT = 64;
 const DEFAULT_CELL_HEIGHT = 112;
 
+const Controls = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => theme.gridUnit * 3}px;
+`;
+
+const StyledSelect = styled(Select)`
+  margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+  min-width: 150px;
+`;
+
 class SliceAdder extends React.Component {
   static sortByComparator(attr) {
     const desc = attr === 'changed_on' ? -1 : 1;
@@ -92,6 +109,7 @@ class SliceAdder extends React.Component {
     this.rowRenderer = this.rowRenderer.bind(this);
     this.searchUpdated = this.searchUpdated.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleChange = this.handleChange.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
@@ -136,6 +154,10 @@ class SliceAdder extends React.Component {
     }
   }
 
+  handleChange(ev) {
+    this.searchUpdated(ev.target.value);
+  }
+
   searchUpdated(searchTerm) {
     this.setState(prevState => ({
       searchTerm,
@@ -146,7 +168,8 @@ class SliceAdder extends React.Component {
     }));
   }
 
-  handleSelect(sortBy) {
+  handleSelect(object) {
+    const sortBy = object.value;
     this.setState(prevState => ({
       sortBy,
       filteredSlices: this.getFilteredSortedSlices(
@@ -210,26 +233,25 @@ class SliceAdder extends React.Component {
       MARGIN_BOTTOM;
     return (
       <div className="slice-adder-container">
-        <div className="controls">
-          <SearchInput
+        <Controls>
+          <Input
             placeholder={t('Filter your charts')}
             className="search-input"
-            onChange={this.searchUpdated}
+            onChange={this.handleChange}
             onKeyPress={this.handleKeyPress}
             data-test="dashboard-charts-filter-search-input"
           />
-          <Select
+          <StyledSelect
             id="slice-adder-sortby"
-            defaultValue={DEFAULT_SORT_KEY}
+            value={this.state.sortBy}
             onChange={this.handleSelect}
-          >
-            {Object.entries(KEYS_TO_SORT).map(([key, label]) => (
-              <Select.Option key={key} value={key}>
-                Sort by {label}
-              </Select.Option>
-            ))}
-          </Select>
-        </div>
+            options={Object.entries(KEYS_TO_SORT).map(([key, label]) => ({
+              label: `${t('Sort by')} ${label}`,
+              value: key,
+            }))}
+            placeholder={t('Sort by')}
+          />
+        </Controls>
         {this.props.isLoading && <Loading />}
         {!this.props.isLoading && this.state.filteredSlices.length > 0 && (
           <List

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

@@ -90,63 +90,6 @@
     flex-grow: 1;
   }
 
-  .chart-card-container {
-    .chart-card {
-      border: 1px solid @gray-light;
-      font-weight: @font-weight-light;
-      padding: 8px;
-      margin: 0 8px 8px 8px;
-      position: relative;
-      cursor: move;
-      background: fade(@lightest, @opacity-medium-light);
-      white-space: nowrap;
-      overflow: hidden;
-
-      &:hover {
-        background: @gray-bg;
-      }
-    }
-
-    .card-title {
-      margin-right: 60px;
-      margin-bottom: 8px;
-      font-weight: @font-weight-bold;
-    }
-
-    .card-body {
-      display: flex;
-      flex-direction: column;
-
-      .item {
-        span {
-          word-break: break-all;
-
-          &:first-child {
-            font-weight: @font-weight-normal;
-          }
-        }
-      }
-    }
-
-    .chart-card.is-selected {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-
-    .is-added-label {
-      background: @almost-black;
-      color: @lightest;
-      font-size: @font-size-s;
-      line-height: @line-height-tight;
-      text-transform: uppercase;
-      position: absolute;
-      padding: 4px 8px;
-      top: 32px;
-      right: 32px;
-      pointer-events: none;
-    }
-  }
-
   .slice-adder-container {
     position: relative;
     background-color: white;