style: use tabs in dashboard edit pane

superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js

@@ -23,7 +23,7 @@ describe('Dashboard edit mode', () => {
     cy.server();
     cy.login();
     cy.visit(WORLD_HEALTH_DASHBOARD);
-    cy.get('.dashboard-header').contains('Edit dashboard').click();
+    cy.get('.dashboard-header [data-test=pencil]').click();
   });
 
   it('remove, and add chart flow', () => {
@@ -38,11 +38,12 @@ describe('Dashboard edit mode', () => {
         cy.get('.grid-container .box_plot').should('not.exist');
       });
 
-    // open charts list
-    cy.get('.component-layer').contains('Your charts & filters').click();
+    cy.get('.tabs-components .nav-tabs li a').contains('Charts').click();
 
     // find box plot is available from list
-    cy.get('.slices-layer').find('.chart-card-container').contains('Box plot');
+    cy.get('.tabs-components')
+      .find('.chart-card-container')
+      .contains('Box plot');
 
     // drag-n-drop
     const dataTransfer = { data: {} };
@@ -62,14 +63,14 @@ describe('Dashboard edit mode', () => {
     cy.get('.grid-container .box_plot').should('be.exist');
 
     // should show Save changes button
-    cy.get('.dashboard-header .button-container').contains('Save changes');
+    cy.get('.dashboard-header .button-container').contains('Save');
 
     // undo 2 steps
     cy.get('.dashboard-header .undo-action').click().click();
 
     // no changes, can switch to view mode
     cy.get('.dashboard-header .button-container')
-      .contains('Switch to view mode')
+      .contains('Discard Changes')
       .click();
   });
 });

superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js

@@ -53,20 +53,18 @@ describe('Dashboard save action', () => {
     cy.get('.grid-container .box_plot', { timeout: 5000 }); // wait for 5 secs
 
     // remove box_plot chart from dashboard
-    cy.get('.dashboard-header')
-      .contains('Edit dashboard')
-      .trigger('click', { force: true });
+    cy.get('.dashboard-header [data-test=pencil]').click();
     cy.get('.fa.fa-trash').last().trigger('click', { force: true });
     cy.get('.grid-container .box_plot').should('not.exist');
 
     cy.route('POST', '/superset/save_dash/**/').as('saveRequest');
     cy.get('.dashboard-header')
-      .contains('Save changes')
+      .contains('Save')
       .trigger('click', { force: true });
 
     // go back to view mode
     cy.wait('@saveRequest');
-    cy.get('.dashboard-header').contains('Edit dashboard');
+    cy.get('.dashboard-header [data-test=pencil]').click();
     cy.get('.grid-container .box_plot').should('not.exist');
   });
 });

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

@@ -32,7 +32,6 @@ import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
 import DashboardHeader from 'src/dashboard/containers/DashboardHeader';
 import DashboardGrid from 'src/dashboard/containers/DashboardGrid';
 import * as dashboardStateActions from 'src/dashboard/actions/dashboardState';
-import { BUILDER_PANE_TYPE } from 'src/dashboard/util/constants';
 
 import WithDragDropContext from '../helpers/WithDragDropContext';
 import {
@@ -64,7 +63,6 @@ describe('DashboardBuilder', () => {
     deleteTopLevelTabs() {},
     editMode: false,
     showBuilderPane() {},
-    builderPaneType: BUILDER_PANE_TYPE.NONE,
     setColorSchemeAndUnsavedChanges() {},
     colorScheme: undefined,
     handleComponentDrop() {},
@@ -155,7 +153,6 @@ describe('DashboardBuilder', () => {
     wrapper.setProps({
       ...props,
       editMode: true,
-      builderPaneType: BUILDER_PANE_TYPE.ADD_COMPONENTS,
     });
     expect(wrapper.find(BuilderComponentPane)).toExist();
   });
@@ -167,7 +164,6 @@ describe('DashboardBuilder', () => {
     wrapper.setProps({
       ...props,
       editMode: true,
-      builderPaneType: BUILDER_PANE_TYPE.COLORS,
     });
     expect(wrapper.find(BuilderComponentPane)).toExist();
   });

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

@@ -68,7 +68,7 @@ describe('HeaderActionsDropdown', () => {
 
     it('should render two MenuItems', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(MenuItem)).toHaveLength(2);
+      expect(wrapper.find(MenuItem)).toHaveLength(3);
     });
 
     it('should render the RefreshIntervalModal', () => {

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

@@ -25,7 +25,6 @@ import PublishedStatus from 'src/dashboard/components/PublishedStatus';
 import HeaderActionsDropdown from 'src/dashboard/components/HeaderActionsDropdown';
 import Button from 'src/components/Button';
 import UndoRedoKeylisteners from 'src/dashboard/components/UndoRedoKeylisteners';
-import { BUILDER_PANE_TYPE } from 'src/dashboard/util/constants';
 
 describe('Header', () => {
   const props = {
@@ -59,7 +58,6 @@ describe('Header', () => {
     editMode: false,
     setEditMode: () => {},
     showBuilderPane: () => {},
-    builderPaneType: BUILDER_PANE_TYPE.NONE,
     updateCss: () => {},
     hasUnsavedChanges: false,
     maxUndoHistoryExceeded: false,
@@ -111,11 +109,6 @@ describe('Header', () => {
       expect(wrapper.find(HeaderActionsDropdown)).toExist();
     });
 
-    it('should render one Button', () => {
-      const wrapper = setup(overrideProps);
-      expect(wrapper.find(Button)).toExist();
-    });
-
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();
@@ -154,11 +147,6 @@ describe('Header', () => {
       expect(wrapper.find(HeaderActionsDropdown)).toExist();
     });
 
-    it('should render one Button', () => {
-      const wrapper = setup(overrideProps);
-      expect(wrapper.find(Button)).toExist();
-    });
-
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();
@@ -199,7 +187,7 @@ describe('Header', () => {
 
     it('should render five Buttons', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(Button)).toHaveLength(5);
+      expect(wrapper.find(Button)).toHaveLength(4);
     });
 
     it('should set up undo/redo', () => {
@@ -239,11 +227,6 @@ describe('Header', () => {
       expect(wrapper.find(HeaderActionsDropdown)).toExist();
     });
 
-    it('should render one Button', () => {
-      const wrapper = setup(overrideProps);
-      expect(wrapper.find(Button)).toExist();
-    });
-
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
       expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();

superset-frontend/spec/javascripts/dashboard/fixtures/mockDashboardState.js

@@ -16,14 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { BUILDER_PANE_TYPE } from 'src/dashboard/util/constants';
 import { sliceId } from './mockChartQueries';
 
 export default {
   sliceIds: [sliceId],
   expandedSlices: {},
   editMode: false,
-  builderPaneType: BUILDER_PANE_TYPE.NONE,
   hasUnsavedChanges: false,
   maxUndoHistoryExceeded: false,
   isStarred: true,

superset-frontend/spec/javascripts/dashboard/reducers/dashboardState_spec.js

@@ -30,7 +30,6 @@ import {
 } from 'src/dashboard/actions/dashboardState';
 
 import dashboardStateReducer from 'src/dashboard/reducers/dashboardState';
-import { BUILDER_PANE_TYPE } from 'src/dashboard/util/constants';
 
 describe('dashboardState reducer', () => {
   it('should return initial state', () => {
@@ -72,7 +71,6 @@ describe('dashboardState reducer', () => {
       ),
     ).toEqual({
       editMode: true,
-      builderPaneType: BUILDER_PANE_TYPE.ADD_COMPONENTS,
     });
   });
 
@@ -128,7 +126,6 @@ describe('dashboardState reducer', () => {
       hasUnsavedChanges: false,
       maxUndoHistoryExceeded: false,
       editMode: false,
-      builderPaneType: BUILDER_PANE_TYPE.NONE,
       updatedColorScheme: false,
     });
   });

superset-frontend/src/components/Icon/index.tsx

@@ -32,6 +32,7 @@ import { ReactComponent as ErrorIcon } from 'images/icons/error.svg';
 import { ReactComponent as FavoriteSelectedIcon } from 'images/icons/favorite-selected.svg';
 import { ReactComponent as FavoriteUnselectedIcon } from 'images/icons/favorite-unselected.svg';
 import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
+import { ReactComponent as MoreIcon } from 'images/icons/more.svg';
 import { ReactComponent as SearchIcon } from 'images/icons/search.svg';
 import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
 import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
@@ -55,6 +56,7 @@ type IconName =
   | 'error'
   | 'favorite-selected'
   | 'favorite-unselected'
+  | 'more'
   | 'pencil'
   | 'search'
   | 'sort'
@@ -84,6 +86,7 @@ export const iconsRegistry: Record<
   close: CloseIcon,
   compass: CompassIcon,
   error: ErrorIcon,
+  more: MoreIcon,
   pencil: PencilIcon,
   search: SearchIcon,
   sort: SortIcon,

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -253,8 +253,8 @@ export function fetchCharts(
 }
 
 export const SHOW_BUILDER_PANE = 'SHOW_BUILDER_PANE';
-export function showBuilderPane(builderPaneType) {
-  return { type: SHOW_BUILDER_PANE, builderPaneType };
+export function showBuilderPane() {
+  return { type: SHOW_BUILDER_PANE };
 }
 
 export function addSliceToDashboard(id, component) {

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

@@ -22,24 +22,28 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
 
 const propTypes = {
-  datasourceLink: PropTypes.string,
+  datasourceUrl: PropTypes.string,
+  datasourceName: PropTypes.string,
   innerRef: PropTypes.func,
   isSelected: PropTypes.bool,
-  lastModified: PropTypes.string.isRequired,
+  lastModified: PropTypes.string,
   sliceName: PropTypes.string.isRequired,
   style: PropTypes.object,
   visType: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
-  datasourceLink: '—',
+  datasourceUrl: null,
+  datasourceName: '-',
   innerRef: null,
   isSelected: false,
   style: null,
+  lastModified: null,
 };
 
 function AddSliceCard({
-  datasourceLink,
+  datasourceUrl,
+  datasourceName,
   innerRef,
   isSelected,
   lastModified,
@@ -62,9 +66,7 @@ function AddSliceCard({
           </div>
           <div className="item">
             <span>{t('Data source')} </span>
-            <span // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: datasourceLink }}
-            />
+            <a href={datasourceUrl}>{datasourceName}</a>
           </div>
         </div>
       </div>