refactor: update add job route to match design specs

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-04-30T08:35:39.556Z\n"
-"PO-Revision-Date: 2020-04-30T08:35:39.556Z\n"
+"POT-Creation-Date: 2020-06-25T09:59:16.015Z\n"
+"PO-Revision-Date: 2020-06-25T09:59:16.015Z\n"
 
 msgid "Checking permissions"
 msgstr ""
@@ -17,13 +17,16 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+msgid "Something went wrong whilst creating your job"
+msgstr ""
+
 msgid "CRON Expression"
 msgstr ""
 
 msgid "Delay"
 msgstr ""
 
-msgid "Delay in seconds ({{ lowerBound }} - {{ upperBound }})"
+msgid "Delay in seconds ({{ LOWERBOUND }} - {{ UPPERBOUND }})"
 msgstr ""
 
 msgid "Name"
@@ -38,9 +41,6 @@ msgstr ""
 msgid "No options available"
 msgstr ""
 
-msgid "Loading"
-msgstr ""
-
 msgid "Save job"
 msgstr ""
 

package.json

@@ -16,10 +16,10 @@
         "format:css": "prettier './src/**/*.css' --write"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^2.1.2",
+        "@dhis2/app-runtime": "^2.2.2",
         "@dhis2/d2-i18n": "^1.0.6",
-        "@dhis2/prop-types": "^2.0.0",
-        "@dhis2/ui": "^5.0.3",
+        "@dhis2/prop-types": "2.0.0",
+        "@dhis2/ui": "^5.0.5",
         "cronstrue": "^1.82.0",
         "history": "^4.9.0",
         "moment": "^2.24.0",
@@ -43,8 +43,7 @@
         "stylelint-no-unsupported-browser-features": "^3.0.2"
     },
     "resolutions": {
-        "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/app-runtime": "^2.1.2",
+        "@dhis2/app-runtime": "^2.2.2",
         "@dhis2/d2-i18n": "^1.0.6"
     },
     "husky": {

src/components/Buttons/CronPresetButton.js

@@ -4,12 +4,12 @@ import { Button } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import { CronPresetModal } from '../Modal'
 
-const CronPresetButton = ({ setCron }) => {
+const CronPresetButton = ({ setCron, small }) => {
     const [showModal, setShowModal] = useState(false)
 
     return (
         <React.Fragment>
-            <Button primary onClick={() => setShowModal(true)}>
+            <Button onClick={() => setShowModal(true)} small={small}>
                 {i18n.t('Choose from preset times')}
             </Button>
             {showModal && (
@@ -22,10 +22,15 @@ const CronPresetButton = ({ setCron }) => {
     )
 }
 
-const { func } = PropTypes
+CronPresetButton.defaultProps = {
+    small: false,
+}
+
+const { func, bool } = PropTypes
 
 CronPresetButton.propTypes = {
     setCron: func.isRequired,
+    small: bool,
 }
 
 export default CronPresetButton

src/components/Buttons/CronPresetButton.test.js

@@ -9,6 +9,12 @@ describe('<CronPresetButton>', () => {
         expect(wrapper).toMatchSnapshot()
     })
 
+    it('renders small correctly', () => {
+        const wrapper = shallow(<CronPresetButton setCron={() => {}} small />)
+
+        expect(wrapper).toMatchSnapshot()
+    })
+
     it('shows the modal when button is clicked', () => {
         const wrapper = mount(<CronPresetButton setCron={() => {}} />)
 

src/components/Buttons/DiscardFormButton.js

@@ -4,15 +4,17 @@ import { Button } from '@dhis2/ui'
 import history from '../../services/history'
 import { DiscardFormModal } from '../Modal'
 
-const DiscardFormButton = ({ shouldConfirm, children }) => {
+const DiscardFormButton = ({ shouldConfirm, children, small, className }) => {
     const [showModal, setShowModal] = useState(false)
     const onClick = shouldConfirm
         ? () => setShowModal(true)
         : () => history.push('/')
 
     return (
         <React.Fragment>
-            <Button onClick={onClick}>{children}</Button>
+            <Button onClick={onClick} small={small} className={className}>
+                {children}
+            </Button>
             {showModal && (
                 <DiscardFormModal hideModal={() => setShowModal(false)} />
             )}
@@ -21,14 +23,18 @@ const DiscardFormButton = ({ shouldConfirm, children }) => {
 }
 
 DiscardFormButton.defaultProps = {
+    className: '',
     shouldConfirm: false,
+    small: false,
 }
 
 const { string, bool } = PropTypes
 
 DiscardFormButton.propTypes = {
     children: string.isRequired,
+    className: string,
     shouldConfirm: bool,
+    small: bool,
 }
 
 export default DiscardFormButton

src/components/Buttons/DiscardFormButton.test.js

@@ -16,6 +16,26 @@ describe('<DiscardFormButton>', () => {
         expect(wrapper).toMatchSnapshot()
     })
 
+    it('renders small correctly', () => {
+        const wrapper = shallow(
+            <DiscardFormButton shouldConfirm={false} small>
+                Discard
+            </DiscardFormButton>
+        )
+
+        expect(wrapper).toMatchSnapshot()
+    })
+
+    it('applies className correctly', () => {
+        const wrapper = shallow(
+            <DiscardFormButton shouldConfirm={false} className="className">
+                Discard
+            </DiscardFormButton>
+        )
+
+        expect(wrapper).toMatchSnapshot()
+    })
+
     it('shows the modal when it should confirm and button is clicked', () => {
         const wrapper = mount(
             <DiscardFormButton shouldConfirm>Discard</DiscardFormButton>

src/components/Buttons/__snapshots__/CronPresetButton.test.js.snap

@@ -5,7 +5,20 @@ exports[`<CronPresetButton> renders correctly 1`] = `
   <Button
     dataTest="dhis2-uicore-button"
     onClick={[Function]}
-    primary={true}
+    small={false}
+    type="button"
+  >
+    Choose from preset times
+  </Button>
+</Fragment>
+`;
+
+exports[`<CronPresetButton> renders small correctly 1`] = `
+<Fragment>
+  <Button
+    dataTest="dhis2-uicore-button"
+    onClick={[Function]}
+    small={true}
     type="button"
   >
     Choose from preset times

src/components/Buttons/__snapshots__/DiscardFormButton.test.js.snap

@@ -1,10 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<DiscardFormButton> applies className correctly 1`] = `
+<Fragment>
+  <Button
+    className="className"
+    dataTest="dhis2-uicore-button"
+    onClick={[Function]}
+    small={false}
+    type="button"
+  >
+    Discard
+  </Button>
+</Fragment>
+`;
+
 exports[`<DiscardFormButton> renders correctly 1`] = `
 <Fragment>
   <Button
+    className=""
+    dataTest="dhis2-uicore-button"
+    onClick={[Function]}
+    small={false}
+    type="button"
+  >
+    Discard
+  </Button>
+</Fragment>
+`;
+
+exports[`<DiscardFormButton> renders small correctly 1`] = `
+<Fragment>
+  <Button
+    className=""
     dataTest="dhis2-uicore-button"
     onClick={[Function]}
+    small={true}
     type="button"
   >
     Discard

src/components/Cron/HumanReadableCron.js

@@ -1,22 +1,10 @@
 import { PropTypes } from '@dhis2/prop-types'
-import cronstrue from 'cronstrue/i18n'
-import { useGetUserSettings, selectors } from '../../hooks/user-settings'
+import { useHumanReadableCron } from '../../hooks/human-readable-cron'
 
 const HumanReadableCron = ({ cronExpression }) => {
-    const { loading, error, data } = useGetUserSettings()
+    const humanReadableCron = useHumanReadableCron(cronExpression)
 
-    if (loading) {
-        return null
-    }
-
-    // Fall back to default locale in case of errors (English for cronstrue)
-    if (error) {
-        return cronstrue.toString(cronExpression)
-    }
-
-    const locale = selectors.getLocale(data)
-
-    return cronstrue.toString(cronExpression, { locale })
+    return humanReadableCron
 }
 
 const { string } = PropTypes

src/components/Cron/HumanReadableCron.test.js

@@ -1,56 +1,17 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { useGetUserSettings, selectors } from '../../hooks/user-settings'
+import { useHumanReadableCron } from '../../hooks/human-readable-cron'
 import HumanReadableCron from './HumanReadableCron'
 
-jest.mock('../../hooks/user-settings', () => ({
-    useGetUserSettings: jest.fn(() => [() => {}]),
-    selectors: {
-        getLocale: jest.fn(() => ''),
-    },
+jest.mock('../../hooks/human-readable-cron', () => ({
+    useHumanReadableCron: jest.fn(() => ''),
 }))
 
 describe('<HumanReadableCron>', () => {
-    it('returns nothing while loading', () => {
-        useGetUserSettings.mockImplementationOnce(() => ({
-            loading: true,
-            error: undefined,
-            data: undefined,
-        }))
+    it('returns a human readable cron', () => {
         const cronExpression = '0 0 1 ? * *'
-        const wrapper = shallow(
-            <HumanReadableCron cronExpression={cronExpression} />
-        )
+        const humanReadableCron = 'Every day'
 
-        expect(wrapper).toMatchSnapshot()
-    })
-
-    it('falls back to English in case of an error', () => {
-        useGetUserSettings.mockImplementationOnce(() => ({
-            loading: false,
-            error: new Error('error'),
-            data: undefined,
-        }))
-        const cronExpression = '0 0 1 ? * *'
-        const wrapper = shallow(
-            <HumanReadableCron cronExpression={cronExpression} />
-        )
-
-        expect(wrapper.text()).toEqual(expect.stringContaining('At 01:00 AM'))
-    })
-
-    it('renders cron in locale when a locale is found', () => {
-        useGetUserSettings.mockImplementationOnce(() => ({
-            loading: false,
-            error: undefined,
-            data: {},
-        }))
-        selectors.getLocale.mockImplementationOnce(() => 'fr')
-        const cronExpression = '0 0 1 ? * *'
-        const wrapper = shallow(
-            <HumanReadableCron cronExpression={cronExpression} />
-        )
+        useHumanReadableCron.mockImplementationOnce(() => humanReadableCron)
 
-        expect(wrapper.text()).toEqual(expect.stringContaining('À 01:00 AM'))
+        expect(HumanReadableCron({ cronExpression })).toBe(humanReadableCron)
     })
 })

src/components/FormErrorBox/FormErrorBox.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { PropTypes } from '@dhis2/prop-types'
+import { NoticeBox } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import styles from './FormErrorBox.module.css'
+
+const FormErrorBox = ({ submitError }) => {
+    const hasGenericSubmitErrors = submitError.length > 0
+
+    if (!hasGenericSubmitErrors) {
+        return null
+    }
+
+    return (
+        <NoticeBox
+            error
+            title={i18n.t('Something went wrong whilst creating your job')}
+        >
+            <ul className={styles.list}>
+                {submitError.map(error => (
+                    <li key={error}>{error}</li>
+                ))}
+            </ul>
+        </NoticeBox>
+    )
+}
+
+const { array } = PropTypes
+
+FormErrorBox.propTypes = {
+    submitError: array.isRequired,
+}
+
+export default FormErrorBox

src/components/FormErrorBox/FormErrorBox.module.css

@@ -0,0 +1,4 @@
+.list {
+    margin: 0;
+    padding-left: 1em;
+}

src/components/FormErrorBox/FormErrorBox.test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import FormErrorBox from './FormErrorBox'
+
+describe('<FormErrorBox>', () => {
+    it('returns null if there are no errors', () => {
+        const props = { submitError: [] }
+
+        expect(FormErrorBox(props)).toBeNull()
+    })
+
+    it('shows errors if there are errors', () => {
+        const submitError = ['Error']
+        const wrapper = shallow(<FormErrorBox submitError={submitError} />)
+
+        expect(wrapper).toMatchSnapshot()
+    })
+})