feat: upgrade to ui@5 (TECH-387) (#476)

Implements TECH-387 Upgrades ui-core dep to ui@5 (which has a lot of breaking changes) Relates to dhis2/data-visualizer-app#1068 and dhis2/dashboard-app#891 Major topics: * PeriodSelector refactored to use name again * DynamicDimension refactored, note: won't work with pagination! * New stories for Filter, PeriodDimension and DynamicDimension * Any component using Transfer, SingleSelect or MultiSelect should've been updated
dhis2 · Jun 11, 2020 · 8045a6e · 8045a6e
1 parent 24b60a0
commit 8045a6e
Show file tree

Hide file tree

Showing 45 changed files with 579 additions and 474 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-05-22T11:34:10.538Z\n"
-"PO-Revision-Date: 2020-05-22T11:34:10.538Z\n"
+"POT-Creation-Date: 2020-06-03T21:43:03.758Z\n"
+"PO-Revision-Date: 2020-06-03T21:43:03.758Z\n"
 
 msgid "Data Type"
 msgstr ""
@@ -59,6 +59,9 @@ msgstr ""
 msgid "Dimension recommended with selected data"
 msgstr ""
 
+msgid "No items selected"
+msgstr ""
+
 msgid "Search"
 msgstr ""
 

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     },
     "dependencies": {
         "@dhis2/d2-ui-org-unit-dialog": "^7.0.4",
-        "@dhis2/ui-core": "^4.21.1",
+        "@dhis2/ui": "^5.0.3",
         "@material-ui/core": "^3.9.3",
         "@material-ui/icons": "^3.0.2",
         "classnames": "^2.2.6",

diff --git a/src/__demo__/DynamicDimension.stories.js b/src/__demo__/DynamicDimension.stories.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import ItemSelector from '../components/DynamicDimension/ItemSelector'
+
+const items = [
+    { id: '1', name: 'One' },
+    { id: '2', name: 'Two' },
+    { id: '3', name: 'Three' },
+    { id: '4', name: 'Four' },
+    { id: '5', name: 'Five' },
+]
+
+storiesOf('DynamicDimension', module).add('ItemSelector none selected', () => {
+    return (
+        <ItemSelector
+            onSelect={selected => console.log(selected)}
+            allItems={items}
+        />
+    )
+})
+
+storiesOf('DynamicDimension', module).add('ItemSelector one selected', () => {
+    return (
+        <ItemSelector
+            onSelect={selected => console.log(selected)}
+            allItems={items}
+            initialSelectedItemIds={[items[2].id]}
+        />
+    )
+})
+
+storiesOf('DynamicDimension', module).add(
+    'ItemSelector one selected not in options',
+    () => {
+        return (
+            <>
+                <ItemSelector
+                    onSelect={selected => console.log(selected)}
+                    allItems={items}
+                    initialSelectedItemIds={['6']}
+                />
+                <p>
+                    Note: This currently does not work as ui (currently @5.0.1)
+                    does not yet support selected items that are not part of the
+                    options array{' '}
+                    <a href="https://jira.dhis2.org/browse/TECH-380">
+                        https://jira.dhis2.org/browse/TECH-380
+                    </a>
+                </p>
+            </>
+            // TODO: fix the issue above
+        )
+    }
+)
diff --git a/src/__demo__/Filter.stories.js b/src/__demo__/Filter.stories.js
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Filter from '../components/Filter/Filter'
+
+function FilterWithState() {
+    const [text, setText] = useState(null)
+
+    const onTextChange = value => setText(value)
+    const onClearFilter = () => setText(null)
+    return (
+        <Filter
+            placeholder="Filter dimensions"
+            text={text}
+            onChange={onTextChange}
+            onClear={onClearFilter}
+            disableUnderline={true}
+            type="search"
+        />
+    )
+}
+
+storiesOf('Filter', module).add('default', () => {
+    return <FilterWithState />
+})
diff --git a/src/__demo__/PeriodDimension.stories.js b/src/__demo__/PeriodDimension.stories.js
@@ -3,6 +3,17 @@ import { storiesOf } from '@storybook/react'
 
 import PeriodDimension from '../components/PeriodDimension/PeriodDimension'
 
-storiesOf('PeriodDimension', module).add('default', () => {
-    return <PeriodDimension />
+const selectedPeriods = [{ id: 'LAST_12_MONTHS', name: 'Last 12 months' }]
+
+storiesOf('PeriodDimension', module).add('None selected', () => {
+    return <PeriodDimension onSelect={selected => console.log(selected)} />
+})
+
+storiesOf('PeriodDimension', module).add('One selected', () => {
+    return (
+        <PeriodDimension
+            selectedPeriods={selectedPeriods}
+            onSelect={selected => console.log(selected)}
+        />
+    )
 })
diff --git a/src/components/DataDimension/DataTypesSelector.js b/src/components/DataDimension/DataTypesSelector.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core'
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 
 import { dataTypes } from '../../modules/dataTypes'
 import styles from './styles/DataTypesSelector.style'
@@ -10,10 +10,7 @@ export const DataTypes = ({ currentDataType, onChange }) => (
     <div className="container">
         <SingleSelectField
             label={i18n.t('Data Type')}
-            selected={{
-                value: dataTypes[currentDataType]?.id,
-                label: dataTypes[currentDataType]?.getName(),
-            }}
+            selected={dataTypes[currentDataType]?.id}
             onChange={ref => onChange(ref.selected.value)}
             dense
         >

diff --git a/src/components/DataDimension/Detail.js b/src/components/DataDimension/Detail.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core'
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 import { TOTALS, DETAIL } from '../../modules/dataTypes'
 
 import styles from './styles/Detail.style'
@@ -13,19 +13,11 @@ const getOptions = () => ({
 
 export const Detail = ({ currentValue, onChange }) => {
     const options = getOptions()
-    const currentLabel = options[currentValue]
     return (
         <div className="detail-container">
             <SingleSelectField
                 label={i18n.t('Detail')}
-                selected={
-                    currentLabel
-                        ? {
-                              value: currentValue,
-                              label: currentLabel,
-                          }
-                        : null
-                }
+                selected={currentValue}
                 onChange={ref => onChange(ref.selected.value)}
                 dense
             >

diff --git a/src/components/DataDimension/Groups.js b/src/components/DataDimension/Groups.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core'
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 
 import { Detail } from './Detail'
 import { dataTypes } from '../../modules/dataTypes'
@@ -23,19 +23,13 @@ export const Groups = ({
 
     const groupDetail = dataTypes[dataType].groupDetail
 
-    const selected = optionItems.find(item => item.id === groupId) || {}
-
     return (
         <div className="container">
             <style jsx>{styles}</style>
             <div className="group-container">
                 <SingleSelectField
                     label={dataTypes[dataType].getGroupLabel()}
-                    selected={
-                        selected.id && selected.name
-                            ? { value: selected.id, label: selected.name }
-                            : {}
-                    }
+                    selected={groupId}
                     placeholder={
                         !groupId && dataTypes[dataType].getPlaceholder
                             ? dataTypes[dataType].getPlaceholder()

diff --git a/src/components/DataDimension/styles/Groups.style.js b/src/components/DataDimension/styles/Groups.style.js
@@ -1,5 +1,5 @@
 import css from 'styled-jsx/css'
-import { colors } from '@dhis2/ui-core'
+import { colors } from '@dhis2/ui'
 
 export default css`
     .container {

diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -1,4 +1,4 @@
-import { colors, theme } from '@dhis2/ui-core'
+import { colors, theme } from '@dhis2/ui'
 
 export const styles = {
     labelWrapper: {

diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
@@ -1,4 +1,4 @@
-import { colors, spacers } from '@dhis2/ui-core'
+import { colors, spacers } from '@dhis2/ui'
 
 // Fix for vertical flex scrolling in Firefox/Safari:
 // Wrap the list in a div with position:relative (and flex:1 instead of on the list)

diff --git a/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js b/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js
@@ -1,4 +1,4 @@
-import { colors, theme } from '@dhis2/ui-core'
+import { colors, theme } from '@dhis2/ui'
 
 export const styles = {
     toolTip: {

diff --git a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-core'
+import { colors } from '@dhis2/ui'
 
 export const styles = {
     divContainer: {

diff --git a/src/components/DynamicDimension/DynamicDimension.js b/src/components/DynamicDimension/DynamicDimension.js
@@ -20,14 +20,15 @@ export const DynamicDimension = ({
     }, [])
 
     const getItems = async () =>
-        setItems(await apiFetchItemsByDimension(context, dimensionId))
+        setItems(await apiFetchItemsByDimension(context, dimensionId)) // TODO: refactor to use the data engine instead
+    // TODO: *** Once pagination is in use, check if there are items that are in selectedItems that needs to be added to the items list
     // TODO: This needs to be refactored to use a loading spinner once Transfer supports it: https://jira.dhis2.org/browse/TECH-379
 
-    const selectItems = items => {
-        const formattedItems = items.map(item => ({
-            id: item.value,
-            name: item.label,
-        }))
+    const onSelectItems = selectedItemIds => {
+        const formattedItems = selectedItemIds.map(id => ({
+            id,
+            name: items.find(item => item.id === id).name, // TODO: Re: *** above, this won't work with pagination
+        })) // TODO: fetch the name from somewhere else, as not all content in selectedItems might be present in the items list
         onSelect({
             dimensionId: dimensionId,
             items: formattedItems,
@@ -36,9 +37,9 @@ export const DynamicDimension = ({
 
     return (
         <ItemSelector
-            onSelect={selectItems}
+            onSelect={onSelectItems}
             allItems={items}
-            initialSelectedItems={selectedItems}
+            initialSelectedItemIds={selectedItems.map(item => item.id)}
             rightFooter={rightFooter}
             // TODO: Pass in a func prop to fetch items, instead of fetching them on this level, to enable the loading spinner?
         />
@@ -48,7 +49,12 @@ export const DynamicDimension = ({
 DynamicDimension.propTypes = {
     context: PropTypes.object.isRequired,
     dimensionId: PropTypes.string.isRequired,
-    selectedItems: PropTypes.array.isRequired,
+    selectedItems: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string,
+            name: PropTypes.string,
+        })
+    ).isRequired,
     onSelect: PropTypes.func.isRequired,
     rightFooter: PropTypes.node,
 }

diff --git a/src/components/DynamicDimension/ItemSelector.js b/src/components/DynamicDimension/ItemSelector.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Transfer } from '@dhis2/ui-core'
+import { Transfer } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 
 import styles from '../styles/DimensionSelector.style'
@@ -15,16 +15,12 @@ import {
 const ItemSelector = ({
     allItems,
     onSelect,
-    initialSelectedItems,
+    initialSelectedItemIds,
     leftHeader,
     rightFooter,
 }) => {
-    const [selectedItems, setSelectedItems] = useState(
-        initialSelectedItems.map(item => ({
-            label: item.name,
-            value: item.id,
-            key: item.id,
-        }))
+    const [selectedItemIds, setSelectedItemIds] = useState(
+        initialSelectedItemIds
     )
 
     const renderEmptySelection = () => (
@@ -37,10 +33,10 @@ const ItemSelector = ({
     return (
         <Transfer
             onChange={({ selected }) => {
-                setSelectedItems(selected)
+                setSelectedItemIds(selected)
                 onSelect(selected)
             }}
-            selected={selectedItems}
+            selected={selectedItemIds}
             leftHeader={leftHeader}
             filterable
             enableOrderChange
@@ -49,31 +45,34 @@ const ItemSelector = ({
             selectedWidth={TRANSFER_SELECTED_WIDTH}
             selectedEmptyComponent={renderEmptySelection()}
             rightFooter={rightFooter}
+            options={allItems.map(({ id, name }) => ({
+                label: name,
+                value: id,
+            }))}
+            renderOption={props => (
+                <TransferOption {...props} icon={GenericIcon} />
+            )}
             // TODO: Add a filter placeholer once the Transfer component supports this (https://github.com/dhis2/ui/issues/131)
             // TODO: Add rightHeader "Selected Periods" once the Transfer component supports this (https://github.com/dhis2/ui-core/issues/885)
-        >
-            {allItems.map(item => (
-                <TransferOption
-                    label={item.name}
-                    value={item.id}
-                    key={item.id}
-                    icon={GenericIcon}
-                />
-            ))}
-        </Transfer>
+        />
     )
 }
 
 ItemSelector.propTypes = {
-    allItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+    allItems: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string,
+            name: PropTypes.string,
+        })
+    ).isRequired,
     onSelect: PropTypes.func.isRequired,
-    initialSelectedItems: PropTypes.arrayOf(PropTypes.object),
+    initialSelectedItemIds: PropTypes.arrayOf(PropTypes.string),
     leftHeader: PropTypes.node,
     rightFooter: PropTypes.node,
 }
 
 ItemSelector.defaultProps = {
-    initialSelectedItems: [],
+    initialSelectedItemIds: [],
 }
 
 export default ItemSelector
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { InputField } from '@dhis2/ui-core'
+import { InputField } from '@dhis2/ui'
 
 export const Filter = ({ text, onChange, onClear, placeholder, type }) => (
     <InputField

diff --git a/src/components/Filter/__tests__/Filter.spec.js b/src/components/Filter/__tests__/Filter.spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import { InputField } from '@dhis2/ui-core'
+import { InputField } from '@dhis2/ui'
 
 import { Filter } from '../Filter'