chore: Implement global header in Dashboard (#20146)

* Add gloal header * Reimplement report dropdown * Update unit tests * Clean up * Clean up * Remove unused import * Update Cypress * Update Cypress save dashboard test * Fix spacing
apache · May 25, 2022 · 3a4176a · 3a4176a
1 parent 40abb44
commit 3a4176a
Show file tree

Hide file tree

Showing 22 changed files with 560 additions and 446 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.applitools.test.ts
@@ -41,8 +41,8 @@ describe('Dashboard load', () => {
   });
 
   it('should load the Dashboard in edit mode', () => {
-    cy.get('[data-test="dashboard-header"]')
-      .find('[aria-label=edit-alt]')
+    cy.get('.header-with-actions')
+      .find('[aria-label="Edit dashboard"]')
       .click();
     // wait for a chart to appear
     cy.get('[data-test="grid-container"]').find('.box_plot', {

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js
@@ -22,8 +22,8 @@ describe('Dashboard edit mode', () => {
   beforeEach(() => {
     cy.login();
     cy.visit(WORLD_HEALTH_DASHBOARD);
-    cy.get('[data-test="dashboard-header"]')
-      .find('[aria-label=edit-alt]')
+    cy.get('.header-with-actions')
+      .find('[aria-label="Edit dashboard"]')
       .click();
   });
 
@@ -94,9 +94,9 @@ describe('Dashboard edit mode', () => {
       .find('[data-test="discard-changes-button"]')
       .should('be.visible')
       .click();
-    cy.get('[data-test="dashboard-header"]').within(() => {
+    cy.get('.header-with-actions').within(() => {
       cy.get('[data-test="dashboard-edit-actions"]').should('not.be.visible');
-      cy.get('[aria-label="edit-alt"]').should('be.visible');
+      cy.get('[aria-label="Edit dashboard"]').should('be.visible');
     });
   });
 });
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
@@ -66,9 +66,13 @@ function openAdvancedProperties() {
 
 function openDashboardEditProperties() {
   // open dashboard properties edit modal
-  cy.get('#save-dash-split-button').trigger('click', { force: true });
+  cy.get(
+    '.header-with-actions .right-button-panel .ant-dropdown-trigger',
+  ).trigger('click', {
+    force: true,
+  });
   cy.get('[data-test=header-actions-menu]')
-    .contains('Edit dashboard properties')
+    .contains('Edit properties')
     .click({ force: true });
 }
 
@@ -80,7 +84,7 @@ describe('Dashboard edit action', () => {
     cy.get('.dashboard-grid', { timeout: 50000 })
       .should('be.visible') // wait for 50 secs to load dashboard
       .then(() => {
-        cy.get('.dashboard-header [aria-label=edit-alt]')
+        cy.get('.header-with-actions [aria-label="Edit dashboard"]')
           .should('be.visible')
           .click();
         openDashboardEditProperties();
@@ -106,7 +110,10 @@ describe('Dashboard edit action', () => {
         cy.get('.ant-modal-body').should('not.exist');
 
         // assert title has been updated
-        cy.get('.editable-title input').should('have.value', dashboardTitle);
+        cy.get('[data-test="editable-title-input"]').should(
+          'have.value',
+          dashboardTitle,
+        );
       });
   });
   describe('the color picker is changed', () => {

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts
@@ -25,14 +25,12 @@ describe('Dashboard edit markdown', () => {
   });
 
   it('should add markdown component to dashboard', () => {
-    cy.get('[data-test="dashboard-header"]')
-      .find('[aria-label="edit-alt"]')
+    cy.get('.header-with-actions')
+      .find('[aria-label="Edit dashboard"]')
       .click();
 
     // lazy load - need to open dropdown for the scripts to load
-    cy.get('[data-test="dashboard-header"]')
-      .find('[aria-label="more-horiz"]')
-      .click();
+    cy.get('.header-with-actions').find('[aria-label="more-horiz"]').click();
     cy.get('[data-test="grid-row-background--transparent"]')
       .first()
       .as('component-background-first');

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js
@@ -25,18 +25,20 @@ import {
 } from './dashboard.helper';
 
 function openDashboardEditProperties() {
-  cy.get('.dashboard-header [aria-label=edit-alt]').click();
-  cy.get('#save-dash-split-button').trigger('click', { force: true });
-  cy.get('.dropdown-menu').contains('Edit dashboard properties').click();
+  cy.get('.header-with-actions [aria-label="Edit dashboard"]').click();
+  cy.get(
+    '.header-with-actions .right-button-panel .ant-dropdown-trigger',
+  ).trigger('click', { force: true });
+  cy.get('.dropdown-menu').contains('Edit properties').click();
 }
 
 describe('Dashboard save action', () => {
   beforeEach(() => {
     cy.login();
     cy.visit(WORLD_HEALTH_DASHBOARD);
     cy.get('#app').then(data => {
-      cy.get('[data-test="dashboard-header"]').then(headerElement => {
-        const dashboardId = headerElement.attr('data-test-id');
+      cy.get('.dashboard-header-container').then(headerContainerElement => {
+        const dashboardId = headerContainerElement.attr('data-test-id');
 
         cy.intercept('POST', `/superset/copy_dash/${dashboardId}/`).as(
           'copyRequest',
@@ -56,7 +58,7 @@ describe('Dashboard save action', () => {
   // change to what the title should be
   it('should save as new dashboard', () => {
     cy.wait('@copyRequest').then(xhr => {
-      cy.get('[data-test="editable-title-input"]').then(element => {
+      cy.get('[data-test="editable-title"]').then(element => {
         const dashboardTitle = element.attr('title');
         expect(dashboardTitle).to.not.equal(`World Bank's Data`);
       });
@@ -68,7 +70,7 @@ describe('Dashboard save action', () => {
     WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
 
     // remove box_plot chart from dashboard
-    cy.get('[aria-label="edit-alt"]').click({ timeout: 5000 });
+    cy.get('[aria-label="Edit dashboard"]').click({ timeout: 5000 });
     cy.get('[data-test="dashboard-delete-component-button"]')
       .last()
       .trigger('mouseenter')
@@ -79,15 +81,15 @@ describe('Dashboard save action', () => {
       .should('not.exist');
 
     cy.intercept('PUT', '/api/v1/dashboard/**').as('putDashboardRequest');
-    cy.get('[data-test="dashboard-header"]')
+    cy.get('.header-with-actions')
       .find('[data-test="header-save-button"]')
       .contains('Save')
       .click();
 
     // go back to view mode
     cy.wait('@putDashboardRequest');
-    cy.get('[data-test="dashboard-header"]')
-      .find('[aria-label="edit-alt"]')
+    cy.get('.header-with-actions')
+      .find('[aria-label="Edit dashboard"]')
       .click();
 
     // deleted boxplot should still not exist
@@ -142,7 +144,7 @@ describe('Dashboard save action', () => {
             cy.get('.ant-modal-body').should('not.exist');
 
             // save dashboard changes
-            cy.get('.dashboard-header').contains('Save').click();
+            cy.get('.header-with-actions').contains('Save').click();
 
             // assert success flash
             cy.contains('saved successfully').should('be.visible');

diff --git a/...t-frontend/cypress-base/cypress/integration/explore/visualizations/download_chart.test.js b/...t-frontend/cypress-base/cypress/integration/explore/visualizations/download_chart.test.js
@@ -34,7 +34,7 @@ describe('Download Chart > Distribution bar chart', () => {
     };
 
     cy.visitChartByParams(JSON.stringify(formData));
-    cy.get('.right-button-panel .ant-dropdown-trigger').click();
+    cy.get('.header-with-actions .ant-dropdown-trigger').click();
     cy.get(':nth-child(1) > .ant-dropdown-menu-submenu-title').click();
     cy.get(
       '.ant-dropdown-menu-submenu > .ant-dropdown-menu li:nth-child(3)',

diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -630,7 +630,8 @@ export const dashboardView = {
     trashIcon: dataTestLocator('dashboard-delete-component-button'),
     refreshChart: dataTestLocator('refresh-chart-menu-item'),
   },
-  threeDotsMenuIcon: '#save-dash-split-button',
+  threeDotsMenuIcon:
+    '.header-with-actions .right-button-panel .ant-dropdown-trigger',
   threeDotsMenuDropdown: dataTestLocator('header-actions-menu'),
   refreshDashboard: dataTestLocator('refresh-dashboard-menu-item'),
   saveAsMenuOption: dataTestLocator('save-as-menu-item'),
@@ -660,7 +661,7 @@ export const dashboardView = {
   },
   sliceThreeDots: '[aria-label="More Options"]',
   sliceThreeDotsDropdown: '[role="menu"]',
-  editDashboardButton: '[aria-label=edit-alt]',
+  editDashboardButton: '[aria-label="Edit dashboard"]',
   starIcon: dataTestLocator('fave-unfave-icon'),
   dashboardHeader: dataTestLocator('dashboard-header'),
   dashboardSectionContainer: dataTestLocator(

diff --git a/superset-frontend/src/assets/images/icons/redo.svg b/superset-frontend/src/assets/images/icons/redo.svg
diff --git a/superset-frontend/src/assets/images/icons/undo.svg b/superset-frontend/src/assets/images/icons/undo.svg
diff --git a/superset-frontend/src/components/DynamicEditableTitle/index.tsx b/superset-frontend/src/components/DynamicEditableTitle/index.tsx
@@ -92,6 +92,10 @@ export const DynamicEditableTitle = ({
     refreshMode: 'debounce',
   });
 
+  useEffect(() => {
+    setCurrentTitle(title);
+  }, [title]);
+
   useEffect(() => {
     if (isEditing && contentRef?.current) {
       contentRef.current.focus();
@@ -202,6 +206,7 @@ export const DynamicEditableTitle = ({
             className="dynamic-title"
             aria-label={label ?? t('Title')}
             ref={contentRef}
+            data-test="editable-title"
           >
             {currentTitle}
           </span>

diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx
@@ -155,6 +155,8 @@ const IconFileNames = [
   'tags',
   'ballot',
   'category',
+  'undo',
+  'redo',
 ];
 
 const iconOverrides: Record<string, React.FC> = {};

diff --git a/superset-frontend/src/components/PageHeaderWithActions/index.tsx b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
@@ -50,7 +50,21 @@ const headerStyles = (theme: SupersetTheme) => css`
   align-items: center;
   flex-wrap: nowrap;
   justify-content: space-between;
-  height: 100%;
+  background-color: ${theme.colors.grayscale.light5};
+  height: ${theme.gridUnit * 16}px;
+  padding: 0 ${theme.gridUnit * 4}px;
+
+  .editable-title {
+    overflow: hidden;
+
+    & > input[type='button'],
+    & > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      white-space: nowrap;
+    }
+  }
 
   span[role='button'] {
     display: flex;
@@ -113,7 +127,7 @@ export const PageHeaderWithActions = ({
 }: PageHeaderWithActionsProps) => {
   const theme = useTheme();
   return (
-    <div css={headerStyles}>
+    <div css={headerStyles} className="header-with-actions">
       <div className="title-panel">
         <DynamicEditableTitle {...editableTitleProps} />
         {showTitlePanelItems && (

diff --git a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
@@ -243,7 +243,11 @@ export default function HeaderReportDropDown({
             triggerNode.closest('.action-button')
           }
         >
-          <span role="button" className="action-button" tabIndex={0}>
+          <span
+            role="button"
+            className="action-button action-schedule-report"
+            tabIndex={0}
+          >
             <Icons.Calendar />
           </span>
         </NoAnimationDropdown>
@@ -253,7 +257,7 @@ export default function HeaderReportDropDown({
         role="button"
         title={t('Schedule email report')}
         tabIndex={0}
-        className="action-button"
+        className="action-button action-schedule-report"
         onClick={() => setShowModal(true)}
       >
         <Icons.Calendar />