fix: update headerbar to latest and greatest (#405)

* fix: update headerbar to latest and greatest * chore: include abortcontroller polyfill * fix(abortcontroller): move the polyfill to the app component * refactor: re-order imports
dhis2 · Dec 16, 2019 · 7c8353f · 7c8353f
1 parent 57cc013
commit 7c8353f
Show file tree

Hide file tree

Showing 18 changed files with 181 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
         "analyze-bundle": "webpack --profile --json --progress > .webpack-profile.json && webpack-bundle-analyzer .webpack-profile.json"
     },
     "dependencies": {
+        "@dhis2/app-runtime": "^2.0.4",
         "@dhis2/d2-i18n": "^1.0.6",
         "@dhis2/d2-ui-analytics": "^0.0.3",
         "@dhis2/d2-ui-core": "5.2.10",
@@ -53,10 +54,12 @@
         "@dhis2/d2-ui-org-unit-dialog": "5.2.10",
         "@dhis2/d2-ui-org-unit-tree": "5.2.10",
         "@dhis2/gis-api": "^34.0.7",
-        "@dhis2/ui": "^1.0.0-beta.15",
+        "@dhis2/ui-core": "^4.1.1",
+        "@dhis2/ui-widgets": "^2.0.5",
         "@material-ui/core": "^3.9.3",
         "@material-ui/icons": "^3.0.2",
         "@material-ui/lab": "^3.0.0-alpha.23",
+        "abortcontroller-polyfill": "^1.4.0",
         "babel-preset-stage-0": "^6.24.1",
         "d2": "31.2.2",
         "d2-utilizr": "^0.2.15",
@@ -84,6 +87,7 @@
         "redux-observable": "^0.18.0",
         "redux-thunk": "^2.3.0",
         "rxjs": "5.5.6",
+        "typeface-roboto": "^0.0.75",
         "uglifyjs-webpack-plugin": "^2.1.2",
         "url-polyfill": "^1.1.0",
         "whatwg-fetch": "^3.0.0"

diff --git a/src/components/app/App.js b/src/components/app/App.js
@@ -1,9 +1,16 @@
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
+import 'typeface-roboto';
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import mui3theme from '@dhis2/d2-ui-core/theme/mui3.theme';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
 import i18n from '@dhis2/d2-i18n';
-import HeaderBar from '@dhis2/ui/widgets/HeaderBar';
-import mui3theme from '@dhis2/d2-ui-core/theme/mui3.theme';
+import { Provider } from '@dhis2/app-runtime';
+import { CssReset } from '@dhis2/ui-core';
+import { HeaderBar } from '@dhis2/ui-widgets';
+
 import AppMenu from './AppMenu';
 import LayersPanel from '../layers/LayersPanel';
 import LayersToggle from '../layers/LayersToggle';
@@ -17,7 +24,7 @@ import InterpretationsPanel from '../interpretations/InterpretationsPanel';
 import DataDownloadDialog from '../layers/download/DataDownloadDialog';
 import OpenAsMapDialog from '../openAs/OpenAsMapDialog';
 import FatalErrorBoundary from '../errors/FatalErrorBoundary';
-import '@dhis2/ui/css/reset.css';
+
 import './App.css';
 
 const theme = createMuiTheme(mui3theme);
@@ -40,23 +47,31 @@ export class App extends Component {
 
     render() {
         return (
-            <FatalErrorBoundary>
-                <HeaderBar appName={i18n.t('Maps')} />
-                <MuiThemeProvider theme={theme}>
-                    <AppMenu />
-                    <InterpretationsPanel />
-                    <LayersPanel />
-                    <LayersToggle />
-                    <MapContainer />
-                    <BottomPanel />
-                    <LayerEdit />
-                    <ContextMenu />
-                    <AlertSnackbar />
-                    <Message />
-                    <DataDownloadDialog />
-                    <OpenAsMapDialog />
-                </MuiThemeProvider>
-            </FatalErrorBoundary>
+            <Provider
+                config={{
+                    baseUrl: DHIS_CONFIG.baseUrl,
+                    apiVersion: '33',
+                }}
+            >
+                <FatalErrorBoundary>
+                    <CssReset />
+                    <HeaderBar appName={i18n.t('Maps')} />
+                    <MuiThemeProvider theme={theme}>
+                        <AppMenu />
+                        <InterpretationsPanel />
+                        <LayersPanel />
+                        <LayersToggle />
+                        <MapContainer />
+                        <BottomPanel />
+                        <LayerEdit />
+                        <ContextMenu />
+                        <AlertSnackbar />
+                        <Message />
+                        <DataDownloadDialog />
+                        <OpenAsMapDialog />
+                    </MuiThemeProvider>
+                </FatalErrorBoundary>
+            </Provider>
         );
     }
 }

diff --git a/src/components/app/FileMenu.css b/src/components/app/FileMenu.css
@@ -2,4 +2,4 @@
     text-transform: none;
     font-size: 16px;
     font-weight: 400;
-}
+}
diff --git a/src/components/datatable/BottomPanel.css b/src/components/datatable/BottomPanel.css
@@ -13,4 +13,4 @@
     right: 3px;
     z-index: 100;
     cursor: pointer;
-}
+}
diff --git a/src/components/datatable/ColorCell.css b/src/components/datatable/ColorCell.css
@@ -2,4 +2,4 @@
     height: 32px;
     line-height: 32px;
     text-align: center;
-}
+}
diff --git a/src/components/datatable/ColumnHeader.css b/src/components/datatable/ColumnHeader.css
@@ -16,4 +16,4 @@
     position: absolute;
     top: 5px;
     right: 0;
-}
+}
diff --git a/src/components/datatable/DataTable.css b/src/components/datatable/DataTable.css
@@ -1,4 +1,4 @@
-@import "../../../node_modules/react-virtualized/styles.css";
+@import '../../../node_modules/react-virtualized/styles.css';
 
 .DataTable {
     font-size: 11px;

diff --git a/src/components/datatable/FilterInput.css b/src/components/datatable/FilterInput.css
@@ -11,4 +11,4 @@
 
 .FilterInput::placeholder {
     color: #ddd;
-}
+}
diff --git a/src/components/indicator/__tests__/IndicatorSelect.spec.js b/src/components/indicator/__tests__/IndicatorSelect.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 describe('IndicatorSelect', () => {
-  it('should export be a valid test', () => {
-    expect(true).toBeTruthy();
-  });
-});
+    it('should export be a valid test', () => {
+        expect(true).toBeTruthy();
+    });
+});
diff --git a/src/components/layers/download/__tests__/DataDownloadDialog.spec.js b/src/components/layers/download/__tests__/DataDownloadDialog.spec.js
@@ -119,6 +119,10 @@ describe('DataDownloadDialogContent', () => {
             layer: dummyEventLayer,
             downloading: true,
         });
-        expect(wrapper.find('WithStyles(DataDownloadDialogActions)').prop('downloading')).toBe(true);
+        expect(
+            wrapper
+                .find('WithStyles(DataDownloadDialogActions)')
+                .prop('downloading')
+        ).toBe(true);
     });
 });
diff --git a/src/components/layers/download/__tests__/DataDownloadDialogActions.spec.js b/src/components/layers/download/__tests__/DataDownloadDialogActions.spec.js
@@ -45,17 +45,17 @@ describe('DataDownloadDialogActions', () => {
             onStartClick: fn,
         });
 
-        wrapper.find('WithStyles(Button)[variant="contained"]').simulate('click');
+        wrapper
+            .find('WithStyles(Button)[variant="contained"]')
+            .simulate('click');
         expect(fn).toHaveBeenCalled();
-    })
+    });
 
     it('Should call onCancel', () => {
         const fn = jest.fn();
         const wrapper = renderComponent({ onCancelClick: fn });
 
-        wrapper
-            .find('WithStyles(Button)[variant="text"]')
-            .simulate('click');
+        wrapper.find('WithStyles(Button)[variant="text"]').simulate('click');
         expect(fn).toHaveBeenCalled();
     });
 });
diff --git a/src/components/layers/download/__tests__/DataDownloadDialogContent.spec.js b/src/components/layers/download/__tests__/DataDownloadDialogContent.spec.js
@@ -49,8 +49,6 @@ describe('DataDownloadDialogContent', () => {
             error: 'This is an error!',
         });
         expect(wrapper.children().length).toBe(4);
-        expect(wrapper
-                .html()
-                .indexOf('Data download failed.')).not.toBe(-1);
+        expect(wrapper.html().indexOf('Data download failed.')).not.toBe(-1);
     });
 });
diff --git a/src/components/layers/download/__tests__/EventDownloadInputs.spec.js b/src/components/layers/download/__tests__/EventDownloadInputs.spec.js
@@ -8,17 +8,18 @@ describe('EventDownloadInputs', () => {
         { id: 2, name: 'No Format' },
         { id: 3, name: 'Some Format' },
     ];
-    const renderComponent = props => shallow(
-        <EventDownloadInputs
-            classes={{}}
-            formatOptions={formatOptions}
-            selectedFormatOption={0}
-            humanReadableChecked={false}
-            onChangeFormatOption={() => null}
-            onCheckHumanReadable={() => null}
-            {...props}
-        />
-    );
+    const renderComponent = props =>
+        shallow(
+            <EventDownloadInputs
+                classes={{}}
+                formatOptions={formatOptions}
+                selectedFormatOption={0}
+                humanReadableChecked={false}
+                onChangeFormatOption={() => null}
+                onCheckHumanReadable={() => null}
+                {...props}
+            />
+        );
 
     it('Should render select box and checkbox when an Event layer', () => {
         const wrapper = renderComponent();
@@ -27,9 +28,9 @@ describe('EventDownloadInputs', () => {
         expect(wrapper.find('WithStyles(SelectField)').prop('value')).toBe(0);
 
         expect(wrapper.find('WithStyles(Checkbox)').length).toBe(1);
-        expect(wrapper
-            .find('WithStyles(Checkbox)')
-            .prop('checked')).toBe(false);
+        expect(wrapper.find('WithStyles(Checkbox)').prop('checked')).toBe(
+            false
+        );
     });
 
     it('Should respect controlled inputs', () => {
@@ -40,9 +41,7 @@ describe('EventDownloadInputs', () => {
         expect(wrapper.find('WithStyles(SelectField)').prop('value')).toBe(2);
 
         expect(wrapper.find('WithStyles(Checkbox)').length).toBe(1);
-        expect(wrapper
-            .find('WithStyles(Checkbox)')
-            .prop('checked')).toBe(true);
+        expect(wrapper.find('WithStyles(Checkbox)').prop('checked')).toBe(true);
     });
 
     // it('Should toggle checked in onCheckHumanReadable callback when clicking the checkbox', () => {

diff --git a/src/components/layers/legend/Legend.css b/src/components/layers/legend/Legend.css
@@ -52,4 +52,4 @@
 .Legend table td {
     padding-left: 10px;
     white-space: nowrap;
-}
+}
diff --git a/src/components/layers/toolbar/__tests__/LayerToolbar.spec.js b/src/components/layers/toolbar/__tests__/LayerToolbar.spec.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { LayerToolbar } from '../LayerToolbar';
 
 describe('LayerToolbar', () => {
-    const shallowRenderLayerToolbar = props => (
+    const shallowRenderLayerToolbar = props =>
         shallow(
             <LayerToolbar
                 classes={{}}
@@ -13,8 +13,7 @@ describe('LayerToolbar', () => {
                 onOpacityChange={() => null}
                 {...props}
             />
-        )
-    )
+        );
     it('Should render only a visibility toggle and opacity slider', () => {
         const wrapper = shallowRenderLayerToolbar();
         expect(wrapper.find('WithStyles(IconButton)').length).toBe(1); // Visibility toggle
@@ -64,7 +63,7 @@ describe('LayerToolbar', () => {
     it('Should match toolbar snapshot WITH Edit button', () => {
         const wrapper = shallowRenderLayerToolbar({
             onEdit: () => null,
-        })
+        });
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -93,4 +92,4 @@ describe('LayerToolbar', () => {
         expect(toggleVisibleFn).toHaveBeenCalled();
         expect(editFn).toHaveBeenCalledTimes(1);
     });
-});
+});
diff --git a/src/components/layers/toolbar/__tests__/LayerToolbarMoreMenu.spec.js b/src/components/layers/toolbar/__tests__/LayerToolbarMoreMenu.spec.js
@@ -15,7 +15,9 @@ describe('LayerToolbarMoreMenu', () => {
 
         expect(wrapper.state('open')).toBe(false);
         expect(wrapper.state('anchorEl')).toBe(null);
-        wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 42 });
+        wrapper
+            .find('WithStyles(IconButton)')
+            .simulate('click', { currentTarget: 42 });
         expect(wrapper.state('open')).toBe(true);
         expect(wrapper.state('anchorEl')).toBe(42);
     });
@@ -33,7 +35,11 @@ describe('LayerToolbarMoreMenu', () => {
 
     it('Should render two MenuItems with no divider if only passed onEdit and onRemove', () => {
         const wrapper = shallow(
-            <LayerToolbarMoreMenu classes={{}} onEdit={() => null} onRemove={() => null} />
+            <LayerToolbarMoreMenu
+                classes={{}}
+                onEdit={() => null}
+                onRemove={() => null}
+            />
         );
 
         expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
@@ -55,7 +61,11 @@ describe('LayerToolbarMoreMenu', () => {
 
     it('Should render two MenuItems with no divider if only passed toggleDataTable and downloadData', () => {
         const wrapper = shallow(
-            <LayerToolbarMoreMenu classes={{}} toggleDataTable={() => null} downloadData={() => null} />
+            <LayerToolbarMoreMenu
+                classes={{}}
+                toggleDataTable={() => null}
+                downloadData={() => null}
+            />
         );
 
         expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
@@ -66,7 +76,12 @@ describe('LayerToolbarMoreMenu', () => {
 
     it('Should render three MenuItems WITH divider if passed toggleDataTable, onEdit, and onRemove', () => {
         const wrapper = shallow(
-            <LayerToolbarMoreMenu classes={{}} onEdit={() => null} onRemove={() => null} toggleDataTable={() => null} />
+            <LayerToolbarMoreMenu
+                classes={{}}
+                onEdit={() => null}
+                onRemove={() => null}
+                toggleDataTable={() => null}
+            />
         );
 
         expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
@@ -158,4 +173,4 @@ describe('LayerToolbarMoreMenu', () => {
         expect(onEdit).toHaveBeenCalledTimes(1);
         expect(onRemove).toHaveBeenCalledTimes(1);
     });
-});
+});
diff --git a/src/components/plugin/ContextMenu.css b/src/components/plugin/ContextMenu.css
@@ -1,19 +1,19 @@
 .MapContextMenu {
-  position: absolute;
-  background: #fff;
-  z-index: 1500;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  font-family: Roboto, sans-serif;
-  font-size: 12px;
-  line-height: 24px;
-  padding: 3px 0;
+    position: absolute;
+    background: #fff;
+    z-index: 1500;
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    line-height: 24px;
+    padding: 3px 0;
 }
 
 .MapContextMenu div {
-  padding: 0 10px;
+    padding: 0 10px;
 }
 
 .MapContextMenu div:hover {
-  background: #eee;
+    background: #eee;
 }