feat: upgrade to ui@5 (TECH-385) (#891)

Implements TECH-385 Depends on dhis2/analytics#476 Changes include: * upgrade from @dhis2/ui-core v4 to @dhis2/ui v5 * add styled-jsx as dependency since @dhis2/ui declares it as a peer dependency (it was already installed due to other dependencies) * The FilterSelector popover now uses @dhis2/ui instead of material-ui * margin-bottom added to EditTitleBar to account for some spacing changes between ui4 and ui5
dhis2 · Jun 16, 2020 · d551b81 · d551b81
1 parent 1ad9b6d
commit d551b81
Show file tree

Hide file tree

Showing 44 changed files with 6,732 additions and 2,270 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,7 @@
         "@dhis2/d2-ui-sharing-dialog": "^7.0.4",
         "@dhis2/d2-ui-translation-dialog": "^7.0.4",
         "@dhis2/data-visualizer-plugin": "^35.2.0",
-        "@dhis2/ui-core": "^4.21.1",
-        "@dhis2/ui-widgets": "^5.0.3",
+        "@dhis2/ui": "^5.0.3",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^4.9.1",
         "d2": "^31.8.1",
@@ -34,6 +33,7 @@
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0",
+        "styled-jsx": "^3.3.0",
         "typeface-roboto": "^0.0.75",
         "whatwg-fetch": "^3.0.0"
     },

diff --git a/src/components/App.js b/src/components/App.js
@@ -3,8 +3,7 @@ import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
-import { HeaderBar } from '@dhis2/ui-widgets';
-import { CssVariables } from '@dhis2/ui-core';
+import { HeaderBar, CssVariables } from '@dhis2/ui';
 
 import { EDIT, VIEW, NEW } from './Dashboard/dashboardModes';
 import { acReceivedUser } from '../actions/user';
@@ -100,7 +99,4 @@ const mapDispatchToProps = dispatch => {
     };
 };
 
-export default connect(
-    null,
-    mapDispatchToProps
-)(App);
+export default connect(null, mapDispatchToProps)(App);
diff --git a/src/components/ControlBar/ConfirmDeleteDialog.js b/src/components/ControlBar/ConfirmDeleteDialog.js
@@ -8,7 +8,7 @@ import {
     ModalActions,
     ButtonStrip,
     ModalTitle,
-} from '@dhis2/ui-core';
+} from '@dhis2/ui';
 
 import classes from './styles/ConfirmDeleteDialog.module.css';
 

diff --git a/src/components/ControlBar/ControlBar.js b/src/components/ControlBar/ControlBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 import { HEADERBAR_HEIGHT } from './controlBarDimensions';
 
 import classes from './styles/ControlBar.module.css';

diff --git a/src/components/ControlBar/DashboardItemChip.js b/src/components/ControlBar/DashboardItemChip.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Chip } from '@dhis2/ui-core';
+import { Chip } from '@dhis2/ui';
 import { Link } from 'react-router-dom';
 import debounce from 'lodash/debounce';
 

diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js
@@ -5,7 +5,7 @@ import { Redirect } from 'react-router-dom';
 import i18n from '@dhis2/d2-i18n';
 import ControlBar from './ControlBar';
 import TranslationDialog from '@dhis2/d2-ui-translation-dialog';
-import { Button } from '@dhis2/ui-core';
+import { Button } from '@dhis2/ui';
 
 import ConfirmDeleteDialog from './ConfirmDeleteDialog';
 import {
@@ -241,7 +241,4 @@ const mapDispatchToProps = dispatch => ({
     onTranslate: (id, value) => dispatch(acSetDashboardDisplayName(id, value)),
 });
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(EditBar);
+export default connect(mapStateToProps, mapDispatchToProps)(EditBar);
diff --git a/src/components/ControlBar/Filter.js b/src/components/ControlBar/Filter.js
@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import InputField from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 
 import ClearButton from './ClearButton';
 import { DEFAULT_STATE_DASHBOARDS_FILTER_NAME } from '../../reducers/dashboardsFilter';

diff --git a/src/components/ControlBar/__tests__/ConfirmDeleteDialog.spec.js b/src/components/ControlBar/__tests__/ConfirmDeleteDialog.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ButtonStrip } from '@dhis2/ui-core';
+import { ButtonStrip } from '@dhis2/ui';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog';
 import { getStubContext } from '../../../setupTests';
 

diff --git a/src/components/ControlBar/__tests__/ControlBar.spec.js b/src/components/ControlBar/__tests__/ControlBar.spec.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 
 import ControlBar from '../ControlBar';
 
-jest.mock('@dhis2/ui-core', () => {
+jest.mock('@dhis2/ui', () => {
     return {
         colors: { white: 'white', yellow050: 'yellow' },
     };

diff --git a/src/components/ControlBar/__tests__/DashboardItemChip.spec.js b/src/components/ControlBar/__tests__/DashboardItemChip.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Chip } from '@dhis2/ui-core';
+import { Chip } from '@dhis2/ui';
 import { DashboardItemChip } from '../DashboardItemChip';
 
 describe('DashboardItemChip', () => {

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

diff --git a/src/components/FilterBar/FilterBadge.js b/src/components/FilterBar/FilterBadge.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import i18n from '@dhis2/d2-i18n';
 
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 
 const styles = {
     badgeContainer: {

diff --git a/src/components/Item/DeleteItemButton.js b/src/components/Item/DeleteItemButton.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 
 import classes from './styles/DeleteItemButton.module.css';
 

diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 import DescriptionIcon from '../../../icons/Description';
 
 import DeleteIcon from '../../../icons/Delete';
@@ -76,9 +76,6 @@ ListItem.contextTypes = {
     d2: PropTypes.object,
 };
 
-export default connect(
-    null,
-    {
-        tRemoveListItemContent,
-    }
-)(ListItem);
+export default connect(null, {
+    tRemoveListItemContent,
+})(ListItem);
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
@@ -5,7 +5,7 @@ import i18n from '@dhis2/d2-i18n';
 
 import { sGetMessagesRoot } from '../../../reducers/messages';
 import { formatDate } from '../../../modules/util';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 import ItemHeader from '../ItemHeader';
 import Line from '../../../widgets/Line';
 
@@ -145,9 +145,6 @@ const mapStateToProps = state => {
     };
 };
 
-const MessagesContainer = connect(
-    mapStateToProps,
-    null
-)(MessagesItem);
+const MessagesContainer = connect(mapStateToProps, null)(MessagesItem);
 
 export default MessagesContainer;
diff --git a/src/components/Item/SpacerItem/Item.js b/src/components/Item/SpacerItem/Item.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 import ItemHeader from '../ItemHeader';
 
 const style = {

diff --git a/src/components/Item/VisualizationItem/ItemFooter.js b/src/components/Item/VisualizationItem/ItemFooter.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 import { getId } from './plugin';
 import InterpretationsComponent from '@dhis2/d2-ui-interpretations';
 

diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -7,7 +7,7 @@ import {
     VIS_TYPE_GAUGE,
     VIS_TYPE_PIE,
 } from '@dhis2/analytics';
-import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui-core';
+import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import Popover from '@material-ui/core/Popover';
 import TableIcon from '@material-ui/icons/ViewList';

diff --git a/src/components/Item/VisualizationItem/LoadingMask.js b/src/components/Item/VisualizationItem/LoadingMask.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularLoader } from '@dhis2/ui-core';
+import { CircularLoader } from '@dhis2/ui';
 
 import classes from './styles/LoadingMask.module.css';
 

diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/VisualizationItem/assets/icons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { colors } from '@dhis2/ui-core';
+import { colors } from '@dhis2/ui';
 
 export const ThreeDots = () => (
     <svg

diff --git a/src/components/ItemFilter/FilterDialog.js b/src/components/ItemFilter/FilterDialog.js
@@ -8,7 +8,7 @@ import {
     ModalContent,
     ModalActions,
     ButtonStrip,
-} from '@dhis2/ui-core';
+} from '@dhis2/ui';
 
 import i18n from '@dhis2/d2-i18n';