fix: upgrade to @dhis2/cli-app-scripts@6 (DHIS2-9893) (#1006)

.eslintignore

@@ -1,2 +1,3 @@
 cypress/*
 coverage/*
+src/locales/*

.eslintrc.js

@@ -2,4 +2,13 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact],
+    overrides: [
+        {
+            files: ['*.test.js'],
+            rules: {
+                'import/no-unresolved': 0,
+                'import/order': 0,
+            },
+        },
+    ],
 }

.github/workflows/dhis2-verify-app.yml

@@ -76,6 +76,9 @@ jobs:
                   path: '**/node_modules'
                   key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 
+            - name: Lint
+              run: yarn d2-app-scripts i18n generate
+
             - name: Lint
               run: yarn lint
 

d2.config.js

@@ -5,7 +5,7 @@ const config = {
     coreApp: true,
 
     entryPoints: {
-        app: './src/App',
+        app: './src/App.js',
     },
 }
 

package.json

@@ -22,8 +22,8 @@
         "cy:run": "d2-utils-cypress run --appStart 'yarn cy:start'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^4.0.7",
-        "@dhis2/cli-style": "^7.0.0",
+        "@dhis2/cli-app-scripts": "^6.0.0",
+        "@dhis2/cli-style": "^7.3.0",
         "@dhis2/cli-utils-cypress": "^7.0.0",
         "@dhis2/cypress-commands": "^7.0.0",
         "@dhis2/cypress-plugins": "^7.0.0",
@@ -32,12 +32,10 @@
         "query-string": "^6.12.1"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^2.2.1",
-        "@dhis2/ui": "^5.7.2",
+        "@dhis2/app-runtime": "^2.8.0",
+        "@dhis2/d2-i18n": "^1.1.0",
+        "@dhis2/ui": "^6.5.5",
         "classnames": "^2.2.6",
         "react-router-dom": "^5.2.0"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
     }
 }

src/App.js

@@ -1,20 +1,18 @@
-import React from 'react'
-import { HashRouter } from 'react-router-dom'
-import i18n from './locales'
 import {
     CssVariables,
     CssReset,
     CircularLoader,
-    ScreenCover,
-} from '@dhis2/ui-core'
-
-import { TaskContext } from './contexts/'
-import { UserContext } from './contexts/'
-import { useUser, useTasks } from './hooks/'
-
+    ComponentCover,
+} from '@dhis2/ui'
+import React from 'react'
+import { HashRouter } from 'react-router-dom'
 import styles from './App.module.css'
 import { Sidebar } from './components/'
 import { Router } from './components/'
+import { UserContext } from './contexts/'
+import { TaskContext } from './contexts/'
+import { useUser, useTasks } from './hooks/'
+import i18n from './locales'
 
 const App = () => {
     const { tasks, addTask, jobOverview, updateJobOverview } = useTasks()
@@ -27,9 +25,9 @@ const App = () => {
             <CssReset />
             <CssVariables spacers colors />
             {loading && (
-                <ScreenCover dataTest="app-screen-cover">
+                <ComponentCover dataTest="app-screen-cover">
                     <CircularLoader dataTest="app-loader" />
-                </ScreenCover>
+                </ComponentCover>
             )}
             {error && (
                 <div data-test="app-error">

src/components/BasicOptions/BasicOptions.js

@@ -1,8 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { Divider } from '@dhis2/ui'
-
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './BasicOptions.module.css'
 
 const LABEL = i18n.t('Basic options')

src/components/DatePicker/DatePicker.js

@@ -1,7 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { InputField } from '@dhis2/ui'
-
+import PropTypes from 'prop-types'
+import React from 'react'
 import { jsDateToISO8601 } from '../../utils/helper'
 
 const DatePicker = ({ name, error, label, date, onChange, dataTest }) => {

src/components/DatePicker/DatePickerField.js

@@ -1,8 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { ReactFinalForm } from '@dhis2/ui'
-
+import PropTypes from 'prop-types'
+import React from 'react'
 import { DatePicker } from '../index'
 const { Field } = ReactFinalForm
 

src/components/Duration/DurationField.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { InputField } from '@dhis2/ui'
 import { ReactFinalForm } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { FormField } from '../index'
 
 const { Field } = ReactFinalForm

src/components/ElementSchemes/DataElementIdScheme.js

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react'
 import { useConfig } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
 import { SingleSelectFieldFF } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import i18n from '@dhis2/d2-i18n'
-
-import { StyledField } from '../index'
+import React, { useEffect, useState } from 'react'
 import { fetchAttributes } from '../../utils/helper'
 import { optionsPropType } from '../../utils/options'
+import { StyledField } from '../index'
 
 const DataElementIdScheme = ({
     name,

src/components/ElementSchemes/EventIdScheme.js

@@ -1,9 +1,8 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { SingleSelectFieldFF } from '@dhis2/ui'
-
-import { StyledField } from '../index'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { optionsPropType } from '../../utils/options'
+import { StyledField } from '../index'
 
 const EventIdScheme = ({ name, label, eventIdSchemeOptions, dataTest }) => {
     return (

src/components/ElementSchemes/IdScheme.js

@@ -1,12 +1,11 @@
-import React, { useState, useEffect } from 'react'
 import { useConfig } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
 import { SingleSelectFieldFF } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import i18n from '@dhis2/d2-i18n'
-
-import { StyledField } from '../index'
-import { optionsPropType } from '../../utils/options'
+import React, { useState, useEffect } from 'react'
 import { fetchAttributes } from '../../utils/helper'
+import { optionsPropType } from '../../utils/options'
+import { StyledField } from '../index'
 
 const attributeFoundIn = (attribute, collection) =>
     !!collection.find(({ value }) => value === attribute.value)

src/components/ElementSchemes/OrgUnitIdScheme.js

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react'
 import { useConfig } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
 import { SingleSelectFieldFF } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import i18n from '@dhis2/d2-i18n'
-
-import { StyledField } from '../index'
+import React, { useEffect, useState } from 'react'
 import { fetchAttributes } from '../../utils/helper'
 import { optionsPropType } from '../../utils/options'
+import { StyledField } from '../index'
 
 const OrgUnitIdScheme = ({ name, label, orgUnitIdSchemeOptions, dataTest }) => {
     const { baseUrl } = useConfig()

src/components/ElementSchemes/SchemeContainer.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './SchemeContainer.module.css'
 
 const SchemeContainer = ({ children }) => (

src/components/FileUpload/FileUpload.js

@@ -1,8 +1,7 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from 'prop-types'
 import { ReactFinalForm, FileInputFieldFF } from '@dhis2/ui'
-
+import PropTypes from 'prop-types'
+import React from 'react'
 import { FormField } from '../index'
 const { Field } = ReactFinalForm
 

src/components/FormAlerts/FormAlerts.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { AlertStack, AlertBar } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const FormAlerts = ({ alerts, dataTest }) => (
     <AlertStack data-test={dataTest}>

src/components/FormField/FormField.js

@@ -1,6 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-
+import React from 'react'
 import styles from './FormField.module.css'
 
 const FormField = ({ dataTest, label, required = false, children }) => {

src/components/Icon/Icon.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 const createStyle = (width, height) => ({
     width: width || 24,

src/components/ImportButtonStrip/ImportButtonStrip.js

@@ -1,8 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { Button, ButtonStrip, Help } from '@dhis2/ui'
-
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './ImportButtonStrip.module.css'
 const DRYRUN_HELPTEXT = i18n.t(
     'A dry run tests the import settings without importing any data'

src/components/ImportButtonStrip/__snapshots__/ImportButtonStrip.test.js.snap

@@ -34,7 +34,7 @@ exports[`matches snapshot 1`] = `
       </div>
     </div>
     <p
-      class="jsx-2306638964 "
+      class="jsx-4256586228 "
       data-test="import-strip-help"
     >
       A dry run tests the import settings without importing any data

src/components/Inputs/AssignedUserMode.js

@@ -1,6 +1,6 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import { ReactFinalForm, CheckboxFieldFF } from '@dhis2/ui'
+import React from 'react'
 import { FormField, RadioGroupField } from '../index'
 import { UserPicker } from './index'
 

src/components/Inputs/AtomicMode.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { RadioGroupField } from '../index'
 
 const atomicModeOptions = [

src/components/Inputs/ClassKey.js

@@ -1,10 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { SingleSelectFieldFF } from '@dhis2/ui'
-
-import { StyledField } from '../index'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { useClassKeys } from '../../hooks/index'
+import { StyledField } from '../index'
 
 const NAME = 'classKey'
 const LABEL = i18n.t('Class key')

src/components/Inputs/Compression.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { RadioGroupField } from '../index'
 
 const compressionOptions = [

src/components/Inputs/DataElementIdScheme.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { DataElementIdScheme as DataElementIdSchemeGeneric } from '../index'
 
 const dataElementIdSchemeOptions = [

src/components/Inputs/DataSetPicker.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { hasValue, composeValidators } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { ResourcePickerField } from '../index'
 import { resourceTypes } from '../ResourcePicker/resourceTypes'
 

src/components/Inputs/Dates.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import { FormField } from '../index'
 
 const DATATEST = 'input-dates'

src/components/Inputs/EndDate.js

@@ -1,8 +1,8 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import { hasValue, composeValidators } from '@dhis2/ui'
-import { DatePickerField } from '../index'
+import React from 'react'
 import { DATE_VALIDATOR } from '../DatePicker/DatePickerField'
+import { DatePickerField } from '../index'
 
 const NAME = 'endDate'
 const DATATEST = 'input-end-date'

src/components/Inputs/EventIdScheme.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { EventIdScheme as EventIdSchemeGeneric } from '../index'
 
 const eventIdSchemeOptions = [

src/components/Inputs/ExportButton.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const DATATEST = 'input-export-submit'
 

src/components/Inputs/FileUpload.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
-import { FileUpload as FileUploadGeneric } from '../index'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { SINGLE_FILE_VALIDATOR } from '../FileUpload/FileUpload'
+import { FileUpload as FileUploadGeneric } from '../index'
 
 const NAME = 'files'
 const LABEL = i18n.t('Select a file to import values from')

src/components/Inputs/FirstRowIsHeader.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { ReactFinalForm, CheckboxFieldFF } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { FormField } from '../index'
 
 const { Field } = ReactFinalForm

src/components/Inputs/FlushMode.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { RadioGroupField } from '../index'
 
 const flushModeOptions = [

src/components/Inputs/FollowUpStatus.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { RadioGroupField } from '../index'
 
 const followUpStatusOptions = [