Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Implement global header in Dashboard #20146

Merged
merged 9 commits into from
May 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down Expand Up @@ -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');
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}

Expand All @@ -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();
Expand All @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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`);
});
Expand All @@ -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')
Expand All @@ -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
Expand Down Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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(
Expand Down
21 changes: 21 additions & 0 deletions superset-frontend/src/assets/images/icons/redo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions superset-frontend/src/assets/images/icons/undo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ export const DynamicEditableTitle = ({
refreshMode: 'debounce',
});

useEffect(() => {
setCurrentTitle(title);
}, [title]);

useEffect(() => {
if (isEditing && contentRef?.current) {
contentRef.current.focus();
Expand Down Expand Up @@ -202,6 +206,7 @@ export const DynamicEditableTitle = ({
className="dynamic-title"
aria-label={label ?? t('Title')}
ref={contentRef}
data-test="editable-title"
>
{currentTitle}
</span>
Expand Down
2 changes: 2 additions & 0 deletions superset-frontend/src/components/Icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ const IconFileNames = [
'tags',
'ballot',
'category',
'undo',
'redo',
];

const iconOverrides: Record<string, React.FC> = {};
Expand Down
18 changes: 16 additions & 2 deletions superset-frontend/src/components/PageHeaderWithActions/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 />
Expand Down
Loading