fix: use ui alertbar instead of material-ui (#1149)

The following changes have been made in this PR:

* switch from material-ui to @dhis2/ui AlertStack/AlertBar.
** One consequence of this is that we lose the formatting (bold) of the dashboard name in the message.
** Slight visual difference - previously the bar rested on the bottom of the viewport, now it is positioned slightly above the bottom
* rename snackbar to alert for reducers, actions and the component
* simplify the alert redux store to only include the message string

i18n/en.pot

@@ -5,12 +5,15 @@ 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-09-08T17:54:39.674Z\n"
-"PO-Revision-Date: 2020-09-08T17:54:39.674Z\n"
+"POT-Creation-Date: 2020-10-12T06:11:46.298Z\n"
+"PO-Revision-Date: 2020-10-12T06:11:46.298Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
 
+msgid "Loading dashboard – {{name}}"
+msgstr ""
+
 msgid "Cancel"
 msgstr ""
 

src/actions/alert.js

@@ -0,0 +1,10 @@
+import { SET_ALERT_MESSAGE, CLEAR_ALERT_MESSAGE } from '../reducers/alert'
+
+export const acSetAlertMessage = value => ({
+    type: SET_ALERT_MESSAGE,
+    value,
+})
+
+export const acClearAlertMessage = () => ({
+    type: CLEAR_ALERT_MESSAGE,
+})

src/actions/selected.js

@@ -1,8 +1,5 @@
-import {
-    getCustomDashboards,
-    sGetDashboardById,
-    EMPTY_DASHBOARD,
-} from '../reducers/dashboards'
+import i18n from '@dhis2/d2-i18n'
+import { getCustomDashboards, sGetDashboardById } from '../reducers/dashboards'
 import {
     SET_SELECTED_ID,
     SET_SELECTED_ISLOADING,
@@ -17,9 +14,8 @@ import { sGetUserUsername } from '../reducers/user'
 import { acSetDashboardItems, acAppendDashboards } from './dashboards'
 import { acClearItemFilters } from './itemFilters'
 import { tGetMessages } from '../components/Item/MessagesItem/actions'
-import { acReceivedSnackbarMessage, acCloseSnackbar } from './snackbar'
+import { acSetAlertMessage, acClearAlertMessage } from './alert'
 import { acAddVisualization, acClearVisualizations } from './visualizations'
-
 import { apiFetchDashboard } from '../api/dashboards'
 import { storePreferredDashboardId } from '../api/localStorage'
 import {
@@ -28,7 +24,6 @@ import {
 } from '../api/description'
 
 import { withShape } from '../components/ItemGrid/gridUtil'
-import { loadingDashboardMsg } from '../components/SnackbarMessage/SnackbarMessage'
 import { extractFavorite } from '../components/Item/VisualizationItem/plugin'
 
 import {
@@ -75,18 +70,14 @@ export const acClearSelectedItemActiveTypes = () => ({
 export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
     dispatch(acSetSelectedIsLoading(true))
 
-    const snackbarTimeout = setTimeout(() => {
-        const dashboardName = (
-            sGetDashboardById(getState(), id) || EMPTY_DASHBOARD
-        ).displayName
-        if (sGetSelectedIsLoading(getState()) && dashboardName) {
-            loadingDashboardMsg.name = dashboardName
+    const alertTimeout = setTimeout(() => {
+        const name = sGetDashboardById(getState(), id)?.displayName
 
+        if (sGetSelectedIsLoading(getState()) && name) {
             dispatch(
-                acReceivedSnackbarMessage({
-                    message: loadingDashboardMsg,
-                    open: true,
-                })
+                acSetAlertMessage(
+                    i18n.t('Loading dashboard – {{name}}', { name })
+                )
             )
         }
     }, 500)
@@ -127,9 +118,9 @@ export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
 
         dispatch(acSetSelectedIsLoading(false))
 
-        clearTimeout(snackbarTimeout)
+        clearTimeout(alertTimeout)
 
-        dispatch(acCloseSnackbar())
+        dispatch(acClearAlertMessage())
 
         return selected
     }

src/components/AlertBar/AlertBar.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { AlertBar, AlertStack } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+
+import { sGetAlertMessage } from '../../reducers/alert'
+import { acClearAlertMessage } from '../../actions/alert'
+
+export const Alert = ({ message, onClose }) =>
+    message ? (
+        <AlertStack>
+            <AlertBar onHidden={onClose} permanent>
+                {message}
+            </AlertBar>
+        </AlertStack>
+    ) : null
+
+Alert.propTypes = {
+    message: PropTypes.string,
+    onClose: PropTypes.func,
+}
+
+const mapStateToProps = state => ({
+    message: sGetAlertMessage(state),
+})
+
+export default connect(mapStateToProps, {
+    onClose: acClearAlertMessage,
+})(Alert)

src/components/AlertBar/__tests__/AlertBar.spec.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import { Alert } from '../AlertBar'
+
+describe('AlertBar', () => {
+    it('renders alert message', () => {
+        const AlertBar = shallow(
+            <Alert message="Luke I am your father" onClose={jest.fn()} />
+        )
+        expect(toJson(AlertBar)).toMatchSnapshot()
+    })
+
+    it('renders nothing when no message', () => {
+        const AlertBar = shallow(<Alert />)
+        expect(toJson(AlertBar)).toMatchSnapshot()
+    })
+})

src/components/AlertBar/__tests__/__snapshots__/AlertBar.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertBar renders alert message 1`] = `
+<AlertStack
+  dataTest="dhis2-uicore-alertstack"
+>
+  <AlertBar
+    dataTest="dhis2-uicore-alertbar"
+    duration={8000}
+    icon={true}
+    onHidden={[MockFunction]}
+    permanent={true}
+  >
+    Luke I am your father
+  </AlertBar>
+</AlertStack>
+`;
+
+exports[`AlertBar renders nothing when no message 1`] = `""`;

src/components/App.js

@@ -5,20 +5,22 @@ import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { CssVariables } from '@dhis2/ui'
 
+import Dashboard from './Dashboard/Dashboard'
+import AlertBar from './AlertBar/AlertBar'
+
+import { acReceivedUser } from '../actions/user'
+import { tFetchDashboards } from '../actions/dashboards'
+import { tSetControlBarRows } from '../actions/controlBar'
+import { tSetShowDescription } from '../actions/selected'
+import { tSetDimensions } from '../actions/dimensions'
+
 import {
     EDIT,
     VIEW,
     NEW,
     PRINT,
     PRINT_LAYOUT,
 } from './Dashboard/dashboardModes'
-import { acReceivedUser } from '../actions/user'
-import { tFetchDashboards } from '../actions/dashboards'
-import { tSetControlBarRows } from '../actions/controlBar'
-import { tSetShowDescription } from '../actions/selected'
-import { tSetDimensions } from '../actions/dimensions'
-import Dashboard from './Dashboard/Dashboard'
-import SnackbarMessage from './SnackbarMessage/SnackbarMessage'
 
 import './App.css'
 
@@ -85,7 +87,7 @@ export class App extends Component {
                         />
                     </Switch>
                 </Router>
-                <SnackbarMessage />
+                <AlertBar />
             </>
         )
     }

src/components/ControlBar/EditBar.js

@@ -148,7 +148,6 @@ export class EditBar extends Component {
                 onRequestClose={this.toggleTranslationDialog}
                 objectToTranslate={this.state.dashboardModel}
                 fieldsToTranslate={['name', 'description']}
-                // TODO handle messages in snackbar
                 onTranslationSaved={this.onTranslationsSaved}
                 onTranslationError={err =>
                     console.log('translation update error', err)

src/reducers/__tests__/alert.spec.js

@@ -0,0 +1,52 @@
+import reducer, {
+    DEFAULT_STATE_ALERT,
+    SET_ALERT_MESSAGE,
+    CLEAR_ALERT_MESSAGE,
+    sGetAlertMessage,
+} from '../alert'
+
+describe('alert reducer', () => {
+    it('should return the default state', () => {
+        const actualState = reducer(undefined, {})
+
+        expect(actualState).toEqual(DEFAULT_STATE_ALERT)
+    })
+
+    it('sets the alert message', () => {
+        const message = 'Loading dashboard: Rainbow dash'
+        const action = {
+            type: SET_ALERT_MESSAGE,
+            value: message,
+        }
+
+        const expectedState = message
+
+        const actualState = reducer(DEFAULT_STATE_ALERT, action)
+        expect(actualState).toEqual(expectedState)
+    })
+
+    it('clears the alert message', () => {
+        const action = {
+            type: CLEAR_ALERT_MESSAGE,
+        }
+
+        const currentState = 'Loading dashboard: Rainbow dash'
+
+        const actualState = reducer(currentState, action)
+
+        expect(actualState).toEqual(DEFAULT_STATE_ALERT)
+    })
+
+    it('gets the current message from state', () => {
+        const message = 'Loading dashboard: Rainbow dash'
+        const action = {
+            type: SET_ALERT_MESSAGE,
+            value: message,
+        }
+        const alert = reducer(null, action)
+
+        const messageInState = sGetAlertMessage({ alert })
+
+        expect(messageInState).toEqual(message)
+    })
+})