fix: save default dashboard title if user does not provide a title [D…

…HIS2-9234] (#1022) If there is no provided dashboard title, which is the case when starting a new dashboard, or deleting the title of the existing dashboard, a placeholder is added "Untitled dashboard" (translated). If the dashboard gets saved without the user adding a title, then the dashboard is saved with the translated "Untitled dashboard"
dhis2 · Aug 26, 2020 · 32d390d · 32d390d
1 parent 99a89e4
commit 32d390d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git 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: 2020-08-25T05:26:00.043Z\n"
-"PO-Revision-Date: 2020-08-25T05:26:00.043Z\n"
+"POT-Creation-Date: 2020-08-26T05:58:25.332Z\n"
+"PO-Revision-Date: 2020-08-26T05:58:25.332Z\n"
 
 msgid "Cancel"
 msgstr ""
@@ -177,6 +177,9 @@ msgstr ""
 msgid "Dashboard title"
 msgstr ""
 
+msgid "Untitled dashboard"
+msgstr ""
+
 msgid "Dashboard description"
 msgstr ""
 

diff --git a/src/actions/editDashboard.js b/src/actions/editDashboard.js
@@ -1,4 +1,5 @@
 import { generateUid } from 'd2/uid'
+import i18n from '@dhis2/d2-i18n'
 
 import {
     RECEIVED_EDIT_DASHBOARD,
@@ -125,6 +126,7 @@ export const tSaveDashboard = () => async (dispatch, getState) => {
     const dashboardToSave = {
         ...dashboard,
         dashboardItems: convertUiItemsToBackend(dashboard.dashboardItems),
+        name: dashboard.name || i18n.t('Untitled dashboard'),
     }
 
     try {

diff --git a/src/components/TitleBar/EditTitleBar.js b/src/components/TitleBar/EditTitleBar.js
@@ -38,6 +38,7 @@ export const EditTitleBar = ({
                     type="text"
                     onChange={updateTitle}
                     value={name}
+                    placeholder={i18n.t('Untitled dashboard')}
                 />
                 <TextAreaField
                     className={classes.description}

diff --git a/src/components/TitleBar/__tests__/EditTitleBar.spec.js b/src/components/TitleBar/__tests__/EditTitleBar.spec.js
@@ -3,8 +3,8 @@ import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import { EditTitleBar } from '../EditTitleBar'
 
-jest.mock('@dhis2/d2-ui-core/text-field/TextField', () => 'textfield')
-jest.mock('../../ItemSelector/ItemSelector', () => 'itemselector')
+jest.mock('@dhis2/d2-ui-core/text-field/TextField', () => 'TextField')
+jest.mock('../../ItemSelector/ItemSelector', () => 'ItemSelector')
 
 describe('EditTitleBar', () => {
     const props = {
@@ -23,15 +23,14 @@ describe('EditTitleBar', () => {
         },
     }
 
-    it('renders correctly when displayName not provided', () => {
+    it('renders correctly', () => {
         const tree = shallow(<EditTitleBar {...props} />)
         expect(toJson(tree)).toMatchSnapshot()
     })
 
-    it('renders correctly when displayName is provided', () => {
-        const tree = shallow(
-            <EditTitleBar displayName="Regnbue Dash" {...props} />
-        )
+    it('renders correctly when no name', () => {
+        props.name = ''
+        const tree = shallow(<EditTitleBar {...props} />)
         expect(toJson(tree)).toMatchSnapshot()
     })
 })
diff --git a/src/components/TitleBar/__tests__/__snapshots__/EditTitleBar.spec.js.snap b/src/components/TitleBar/__tests__/__snapshots__/EditTitleBar.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EditTitleBar renders correctly when displayName is provided 1`] = `
+exports[`EditTitleBar renders correctly 1`] = `
 <section
   className="section"
 >
@@ -13,6 +13,7 @@ exports[`EditTitleBar renders correctly when displayName is provided 1`] = `
       label="Dashboard title"
       name="Dashboard title input"
       onChange={[Function]}
+      placeholder="Untitled dashboard"
       type="text"
       value="Rainbow Dash"
     />
@@ -31,12 +32,12 @@ exports[`EditTitleBar renders correctly when displayName is provided 1`] = `
   <div
     className="itemSelector"
   >
-    <itemselector />
+    <ItemSelector />
   </div>
 </section>
 `;
 
-exports[`EditTitleBar renders correctly when displayName not provided 1`] = `
+exports[`EditTitleBar renders correctly when no name 1`] = `
 <section
   className="section"
 >
@@ -49,8 +50,9 @@ exports[`EditTitleBar renders correctly when displayName not provided 1`] = `
       label="Dashboard title"
       name="Dashboard title input"
       onChange={[Function]}
+      placeholder="Untitled dashboard"
       type="text"
-      value="Rainbow Dash"
+      value=""
     />
     <TextAreaField
       className="description"
@@ -67,7 +69,7 @@ exports[`EditTitleBar renders correctly when displayName not provided 1`] = `
   <div
     className="itemSelector"
   >
-    <itemselector />
+    <ItemSelector />
   </div>
 </section>
 `;