feat(dashboard): Add create chart button in dashboard edit mode (#20126)

apache · May 19, 2022 · b2a7fad · b2a7fad
1 parent 0b3d3dd
commit b2a7fad
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -21,10 +21,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'react-virtualized';
 import { createFilter } from 'react-search-input';
-import { t, styled, isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
+import {
+  t,
+  styled,
+  isFeatureEnabled,
+  FeatureFlag,
+  css,
+} from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Select } from 'src/components';
 import Loading from 'src/components/Loading';
+import Button from 'src/components/Button';
+import Icons from 'src/components/Icons';
 import {
   CHART_TYPE,
   NEW_COMPONENT_SOURCE_TYPE,
@@ -79,13 +87,36 @@ const Controls = styled.div`
   display: flex;
   flex-direction: row;
   padding: ${({ theme }) => theme.gridUnit * 3}px;
+  padding-top: ${({ theme }) => theme.gridUnit * 4}px;
 `;
 
 const StyledSelect = styled(Select)`
   margin-left: ${({ theme }) => theme.gridUnit * 2}px;
   min-width: 150px;
 `;
 
+const NewChartButtonContainer = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    justify-content: flex-end;
+    padding-right: ${theme.gridUnit * 2}px;
+  `}
+`;
+
+const NewChartButton = styled(Button)`
+  ${({ theme }) => css`
+    height: auto;
+    & > .anticon + span {
+      margin-left: 0;
+    }
+    & > [role='img']:first-of-type {
+      margin-right: ${theme.gridUnit}px;
+      padding-bottom: 1px;
+      line-height: 0;
+    }
+  `}
+`;
+
 class SliceAdder extends React.Component {
   static sortByComparator(attr) {
     const desc = attr === 'changed_on' ? -1 : 1;
@@ -240,6 +271,18 @@ class SliceAdder extends React.Component {
       MARGIN_BOTTOM;
     return (
       <div className="slice-adder-container">
+        <NewChartButtonContainer>
+          <NewChartButton
+            buttonStyle="link"
+            buttonSize="xsmall"
+            onClick={() =>
+              window.open('/chart/add', '_blank', 'noopener noreferrer')
+            }
+          >
+            <Icons.PlusSmall />
+            {t('Create new chart')}
+          </NewChartButton>
+        </NewChartButtonContainer>
         <Controls>
           <Input
             placeholder={t('Filter your charts')}

diff --git a/superset-frontend/src/dashboard/stylesheets/builder-sidepane.less b/superset-frontend/src/dashboard/stylesheets/builder-sidepane.less
@@ -49,6 +49,7 @@
     width: @builder-pane-width;
     height: 100%;
     box-shadow: -4px 0 4px 0 fade(@darkest, @opacity-light);
+    background-color: @lightest;
   }
 
   .slider-container {