From de2ed220253e236d1d761537bda56ddeacfa472f Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Thu, 19 May 2022 10:39:05 +0200
Subject: [PATCH] feat(dashboard): Add create chart button in dashboard edit
 mode

---
 .../src/dashboard/components/SliceAdder.jsx   | 45 ++++++++++++++++++-
 .../stylesheets/builder-sidepane.less         |  1 +
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
index 8c2fc920e9b20..eeb83d7c56e46 100644
--- 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,6 +87,7 @@ 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)`
@@ -86,6 +95,28 @@ const StyledSelect = styled(Select)`
   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
index 19ea8b526e075..ad26877771a23 100644
--- 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 {