fix: make New button icon-only and set redirect url rather than use L…

…ink 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

@@ -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', () => {

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')
 })

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')

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"]'

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"

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,13 +25,19 @@ const Content = ({
     onChipClicked,
     onSearchClicked,
 }) => {
+    const [redirectUrl, setRedirectUrl] = useState(null)
+
     const onSelectDashboard = () => {
         const id = getFilteredDashboards(dashboards, filterText)[0]?.id
         if (id) {
             history.push(id)
         }
     }
 
+    const enterNewMode = () => {
+        setRedirectUrl('/new')
+    }
+
     const getChips = () =>
         getFilteredDashboards(dashboards, filterText).map(dashboard => (
             <Chip
@@ -55,26 +61,28 @@ const Content = ({
     )
 
     const getControlsLarge = () => (
-        <div className={classes.controlsLarge}>
-            <Link
-                className={classes.newLink}
-                to={'/new'}
-                data-test="link-new-dashboard"
-            >
-                <Tooltip content={i18n.t('Create a new dashboard')}>
-                    <Button small icon={<IconAdd24 color={colors.grey600} />}>
-                        {i18n.t('New')}
-                    </Button>
-                </Tooltip>
-            </Link>
+        <span className={classes.controlsLarge}>
+            <Tooltip content={i18n.t('Create a new dashboard')}>
+                <Button
+                    className={classes.newButton}
+                    small
+                    icon={<IconAdd24 color={colors.grey600} />}
+                    onClick={enterNewMode}
+                    dataTest="new-button"
+                />
+            </Tooltip>
             <Filter
                 onKeypressEnter={onSelectDashboard}
                 onSearchClicked={onSearchClicked}
                 expanded={expanded}
             />
-        </div>
+        </span>
     )
 
+    if (redirectUrl) {
+        return <Redirect to={redirectUrl} />
+    }
+
     return (
         <div
             className={cx(

src/pages/view/DashboardsBar/Filter.js

@@ -73,7 +73,7 @@ export const FilterUnconnected = ({
     }
 
     return (
-        <div
+        <span
             className={cx(
                 classes.container,
                 expanded ? classes.expanded : classes.collapsed
@@ -109,7 +109,7 @@ export const FilterUnconnected = ({
                     </div>
                 )}
             </div>
-        </div>
+        </span>
     )
 }