From 686d970cd40e0025916515ef3c02892a1bb3d8db Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Fri, 23 Apr 2021 12:14:54 +0200 Subject: [PATCH] fix: make New button icon-only and set redirect url rather than use Link component (#1714) Remove "New" from the New button to simplify the interface. Align the button and search field with the chips (bottom edge). The button is now a button rather than a Link, and sets a redirectUrl for navigation. --- cypress/integration/common/common.js | 4 +- .../ui/error_scenarios/no_dashboards.js | 4 +- .../responsive_dashboard.js | 9 +- cypress/selectors/viewDashboard.js | 2 +- i18n/en.pot | 8 +- src/pages/view/DashboardsBar/Content.js | 38 +- src/pages/view/DashboardsBar/Filter.js | 4 +- .../__snapshots__/DashboardsBar.spec.js.snap | 469 ++++++++---------- .../__snapshots__/Filter.spec.js.snap | 8 +- .../DashboardsBar/styles/Content.module.css | 7 +- .../DashboardsBar/styles/Filter.module.css | 4 - 11 files changed, 257 insertions(+), 300 deletions(-) diff --git a/cypress/integration/common/common.js b/cypress/integration/common/common.js index 125ef9494..b8b48267b 100644 --- a/cypress/integration/common/common.js +++ b/cypress/integration/common/common.js @@ -5,7 +5,7 @@ import { chartSel } from '../../selectors/dashboardItem' import { dashboardTitleSel, dashboardChipSel, - newDashboardLinkSel, + newButtonSel, } from '../../selectors/viewDashboard' beforeEach(() => { @@ -26,7 +26,7 @@ Then('the {string} dashboard displays in view mode', title => { }) Given('I choose to create new dashboard', () => { - cy.get(newDashboardLinkSel, EXTENDED_TIMEOUT).click() + cy.get(newButtonSel, EXTENDED_TIMEOUT).click() }) When('I choose to edit dashboard', () => { diff --git a/cypress/integration/ui/error_scenarios/no_dashboards.js b/cypress/integration/ui/error_scenarios/no_dashboards.js index 6f8014da5..64f15a139 100644 --- a/cypress/integration/ui/error_scenarios/no_dashboards.js +++ b/cypress/integration/ui/error_scenarios/no_dashboards.js @@ -1,6 +1,6 @@ import { Given, Then } from 'cypress-cucumber-preprocessor/steps' import { EXTENDED_TIMEOUT } from '../../../support/utils' -import { newDashboardLinkSel } from '../../../selectors/viewDashboard' +import { newButtonSel } from '../../../selectors/viewDashboard' // Scenario: There are no dashboards Given('I open an app with no dashboards', () => { @@ -10,5 +10,5 @@ Given('I open an app with no dashboards', () => { Then('a message displays informing that there are no dashboards', () => { cy.contains('No dashboards found', EXTENDED_TIMEOUT).should('be.visible') - cy.get(newDashboardLinkSel).should('be.visible') + cy.get(newButtonSel).should('be.visible') }) diff --git a/cypress/integration/ui/responsive_dashboard/responsive_dashboard.js b/cypress/integration/ui/responsive_dashboard/responsive_dashboard.js index 0bac79e17..e1d3eb07c 100644 --- a/cypress/integration/ui/responsive_dashboard/responsive_dashboard.js +++ b/cypress/integration/ui/responsive_dashboard/responsive_dashboard.js @@ -1,7 +1,10 @@ import { When, Then } from 'cypress-cucumber-preprocessor/steps' import { EXTENDED_TIMEOUT } from '../../../support/utils' import { chartSel } from '../../../selectors/dashboardItem' -import { dashboardTitleSel } from '../../../selectors/viewDashboard' +import { + dashboardTitleSel, + newButtonSel, +} from '../../../selectors/viewDashboard' import { dimensionsModalSel } from '../../../selectors/dashboardFilter' const TEST_DASHBOARD_TITLE = 'TEST_DASHBOARD_TITLE' @@ -18,7 +21,7 @@ When('dashboard title is changed', () => { Then('the small screen view is shown', () => { //controlbar - no search dashboard field - cy.get('[data-test="link-new-dashboard"]').should('not.be.visible') + cy.get(newButtonSel).should('not.be.visible') //titlebar - only the More button and the title cy.get('button').contains('Edit').should('not.be.visible') @@ -36,7 +39,7 @@ When('I restore the wide screen', () => { }) Then('the wide screen view is shown', () => { - cy.get('[data-test="link-new-dashboard"]').should('be.visible') + cy.get(newButtonSel).should('be.visible') cy.get('button').contains('Edit').should('be.visible') cy.get('button').contains('Share').should('be.visible') diff --git a/cypress/selectors/viewDashboard.js b/cypress/selectors/viewDashboard.js index 0e1693082..c50700d2e 100644 --- a/cypress/selectors/viewDashboard.js +++ b/cypress/selectors/viewDashboard.js @@ -1,6 +1,6 @@ // Dashboards bar export const dashboardChipSel = '[data-test="dashboard-chip"]' -export const newDashboardLinkSel = '[data-test="link-new-dashboard"]' +export const newButtonSel = '[data-test="new-button"]' export const chipStarSel = '[data-test="dhis2-uicore-chip-icon"]' export const dashboardSearchInputSel = 'input:visible[placeholder="Search for a dashboard"]' diff --git a/i18n/en.pot b/i18n/en.pot index b3e80469f..2550400c4 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2021-04-16T11:52:58.307Z\n" -"PO-Revision-Date: 2021-04-16T11:52:58.307Z\n" +"POT-Creation-Date: 2021-04-23T09:46:24.658Z\n" +"PO-Revision-Date: 2021-04-23T09:46:24.658Z\n" msgid "Untitled dashboard" msgstr "" @@ -267,10 +267,10 @@ msgid "" "print dialog" msgstr "" -msgid "Create a new dashboard" +msgid "Not available offline" msgstr "" -msgid "New" +msgid "Create a new dashboard" msgstr "" msgid "Search for a dashboard" diff --git a/src/pages/view/DashboardsBar/Content.js b/src/pages/view/DashboardsBar/Content.js index 7ce251d4c..fb725c474 100644 --- a/src/pages/view/DashboardsBar/Content.js +++ b/src/pages/view/DashboardsBar/Content.js @@ -1,9 +1,9 @@ -import React from 'react' +import React, { useState } from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' import cx from 'classnames' -import { Link, withRouter } from 'react-router-dom' +import { Redirect, withRouter } from 'react-router-dom' import { Button, Tooltip, colors, IconAdd24 } from '@dhis2/ui' import Chip from './Chip' @@ -25,6 +25,8 @@ const Content = ({ onChipClicked, onSearchClicked, }) => { + const [redirectUrl, setRedirectUrl] = useState(null) + const onSelectDashboard = () => { const id = getFilteredDashboards(dashboards, filterText)[0]?.id if (id) { @@ -32,6 +34,10 @@ const Content = ({ } } + const enterNewMode = () => { + setRedirectUrl('/new') + } + const getChips = () => getFilteredDashboards(dashboards, filterText).map(dashboard => ( ( -
- - - - - + + +
+ ) + if (redirectUrl) { + return + } + return (
)}
- + ) } diff --git a/src/pages/view/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap b/src/pages/view/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap index e67d3db55..348a56964 100644 --- a/src/pages/view/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap +++ b/src/pages/view/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap @@ -18,7 +18,7 @@ exports[`clicking "Show more" maximizes dashboards bar height 1`] = `
- -
+
-
- - - - - -
+ + + + +
-
-
+ + - - +
-
- - - - - -
+ + + + +
-
-
+ + - - +
-
- - - - - -
+ + + + +
-
-
+ + - - +
-
- - - - - -
+ + + + +
-
-
+ + @@ -933,7 +905,7 @@ exports[`renders a DashboardsBar with selected item 1`] = `
- -
+
-
- - - - - -
+ + + + +
-
-
+ + - - +
-
- - - - - -
+ + + + +
-
-
+ + - - +
-
- - - - - -
+ + + + +
-
-
+ + - - + `; exports[`Filter when filterText property is provided renders an input with correct value property 1`] = `
-
- + `; diff --git a/src/pages/view/DashboardsBar/styles/Content.module.css b/src/pages/view/DashboardsBar/styles/Content.module.css index 00360083b..387b5561f 100644 --- a/src/pages/view/DashboardsBar/styles/Content.module.css +++ b/src/pages/view/DashboardsBar/styles/Content.module.css @@ -2,9 +2,7 @@ display: inline; } -.newLink { - display: inline-block; - text-decoration: none; +.newButton { margin-right: var(--spacers-dp8); margin-top: var(--spacers-dp4); } @@ -14,7 +12,8 @@ } .controlsLarge { - display: inline; + position: relative; + top: var(--spacers-dp4); } @media only screen and (max-width: 480px) { diff --git a/src/pages/view/DashboardsBar/styles/Filter.module.css b/src/pages/view/DashboardsBar/styles/Filter.module.css index 11a3966f2..c45ed6154 100644 --- a/src/pages/view/DashboardsBar/styles/Filter.module.css +++ b/src/pages/view/DashboardsBar/styles/Filter.module.css @@ -82,10 +82,6 @@ margin-left: 8px; } -.container { - display: inline; -} - @media only screen and (max-width: 480px) { .input { width: 100%;