feat: UI redesign (#458)

* feat: enable css modules

* chore: add @dhis2/ui dependency

* feat: add Header.module.css

* chore: format client JS

* feat: redesign header

* refactor: remove unused CSS styles

* refactor: simplify header

* feat: redesign app cards container

* feat: redesign app filters

* feat: redesign app cards

* feat: redesign pagination

* fix: show query in input when returning from search result

* chore: remove unused dependencies

* refactor: move api/api.js to api/index.js

* feat: add screenshots to app view

* feat: redesign versions table

* fix: handle development-only and canary-only apps

* fix: fix tests

* chore: update formatting

* feat: add download button to about app section

* feat: add dhis version filtering

* fix: typo

* fix: replace material UI FontIcon with own component

* feat: add logout button

* feat: make profile dropdown keyboard accessible

* feat: highlight current route in header

* feat: start work on user view

* fix: use semantic <nav> tag

* fix: close dropdown menu after clicking on link

* refactor: remove user components

* feat: start work on user apps view

* fix: remove lexical const in case

* chore: fix some formatting errors

* fix: use same container for all pages

* feat: start work on user app status cards

* feat: add all app card styles for user apps view

* fix: simplify debouncing

* feat: add user apps filtering

* refactor: move user apps card to own file

* chore: update @dhis2/cli-style

* refactor: simplify css

* feat: add alerts bar

* feat: add 'upload new version' button

* feat: start work on user apps view

* fix: don't wrap complete app card with Link

* feat: add details section to user app view

* feat: use @dhis2/ui-forms for validation

* refactor: now that @dhis2/app-runtime is mocked use direct import

* fix: use @dhis2/ui instead of core/widgets/forms

* fix: show message if no user app matches search

* feat: add app version edit page

* feat: add API keys page

* fix: tweak user app edit button styles

* feat: add upload screenshots button

* feat: user can edit logo in user app view

* refactor: remove unused components

* chore: fix all client eslint errors

* fix: update nav link colour to match design specs

* chore: remove unused reducers and actions

* fix: add isomorphic-fetch dev dependency

* chore: remove unused action types

* feat: replace material ui icon font with svgs

* refactor: save 20KB by removing lodash/sortBy

* fix: correct API error handling

* fix: add space between API key and copy to clipboard button

* feat: user organisations list

* fix: restore user apps app card grid layout

* feat: add search filtering to user organisations

* feat: start work on organisation view

* feat: add modal to add organisation member

* feat: add modal to edit organisation name

* refactor: remove unused actions

* chore: format

* chore: add format scripts

* chore: remove reference to non-existent main file

* fix: use correct interpolation for source code URL href

* feat: add url validator to source code url

* fix(server): only accept http and https links for source code urls

* feat: add source code url to app cards

* feat: new organisation page

* fix: use correct interpolation for app version upload link

* feat: new app version page

* feat: add 'delete version' modal

* feat: start work on app upload page

* chore: update @dhis2/ui

* feat: add v2 create app handler

* refactor: simplify v2 create app handler

* refactor: create apps service

* refactor: remove v1 create app handler

* Revert "refactor: remove v1 create app handler"

This reverts commit 68b5b4b.

* refactor: move create app handler back to v1

* feat: add create organisation modal to app upload page

* feat: add title to relative date times

* feat: add mime type validation to create app handler

* fix: move v1 create app tests

* feat: update workflow

* fix: workflow version-name

* feat(app upload): set organisation after creating

* fix: add padding aroud no versions message

* fix: mobile-first design for apps page

* fix: mobile-first design for app page

* fix: mobile-first design for user apps and user organisations pages

* fix: tweak versions table responsive styles

* fix: consistent primary button width in headers

* fix: remove temporary code

* fix(frontend): do not allow editing of app type

* fix(frontend): do not allow editing of app versions

* fix: use single 'edit app details button'

* fix: show app name when uploading a new version

* fix: right-align modal actions for delete version modal

* fix: right-align modal actions for organisation modals

* fix: apply correct focus styles to app card items

* fix: use subtler app card hover/focus styles

* refactor: delete unused app version edit page

* fix: tweak text

* feat: add link to submission guidelines in new app submission page

* fix: use basic instead of primary buttons on user app page

* fix: tweak buttons for user apps page

* fix: tweak user API key page

* fix: tweak text

* fix: add loading text to submit app button

* fix: update css-loader to prevent classname collisions

* feat: add filtering by DHIS2 version on apps page

* fix: use semantic versioning in version placeholders

* fix: don't treat checkboxes as radio buttons

* fix: hide channels filter if only one channel

* fix: use server messages instead of status code when displaying errors

* fix: typo

* feat: set default minimum DHIS2 version

* feat: use modal when requesting confirmation for deleting screenshot

* fix: redirect back to app upload after creating first organisation

* fix: update api import

* fix: remove references to app developer name

* refactor: move organisation invitation page components

* feat: add styling for invitation page

* feat: add styling for invitation callback page

* fix: don't add invited users to organisations using useSWR mutate

* fix: use correct organisation redirect link

* fix: pass contact email to apps service

Co-authored-by: Birk Johansson <[email protected]>

.github/workflows/docker-publish.yml

@@ -5,6 +5,7 @@ on:
         branches:
             - master
             - next
+            - feat/ui-redesign
 
 env:
     ECR_REPOSITORY: dhis2/app-hub
@@ -59,6 +60,7 @@ jobs:
 
                   [ "$VERSION" == "master" ] && VERSION=latest
                   [ "$VERSION" == "next" ] && VERSION=staging
+                  [ "$VERSION" == "ui-redesign" ] && VERSION=redesign
 
                   echo VERSION=$VERSION
 
@@ -106,5 +108,17 @@ jobs:
                   region: ${{ env.AWS_REGION }}
                   deployment_package: deploy.zip
 
+            - name: Deploy to Redesign
+              if: steps.build-image.outputs.version == 'redesign'
+              uses: einaregilsson/beanstalk-deploy@v6
+              with:
+                  aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  application_name: app-hub
+                  environment_name: redesign
+                  version_label: app-hub-redesign-${{ github.run_id }}_${{ github.run_number}}
+                  region: ${{ env.AWS_REGION }}
+                  deployment_package: deploy.zip
+
             - name: Publish to GitHub
               run: npx @dhis2/cli-utils release

client/.eslintrc.js

@@ -3,7 +3,18 @@ const { config } = require('@dhis2/cli-style')
 module.exports = {
     extends: [config.eslintReact],
     rules: {
-        "react/prop-types": [1],
-        "no-unused-vars": ['error', { ignoreRestSiblings: true }],
-    }
+        'react/prop-types': [1],
+        'no-unused-vars': ['error', { ignoreRestSiblings: true }],
+        'react/no-unescaped-entities': 'off',
+        'react/react-in-jsx-scope': 'off',
+    },
+    globals: {
+        __APP_INFO__: 'readonly',
+        __APP_CONFIG__: 'readonly',
+        Cypress: 'readonly',
+        cy: 'readonly',
+    },
+    settings: {
+        'import/resolver': 'webpack',
+    },
 }

client/.prettierrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    ...require(config.prettier),
+}

client/babel.config.js

@@ -1,19 +1,15 @@
-module.exports = function(api) {
+module.exports = function (api) {
     api.cache(true)
 
     return {
         presets: [
+            '@babel/preset-env',
             [
-                '@babel/preset-env',
+                '@babel/preset-react',
                 {
-                    useBuiltIns: 'entry',
-                    corejs: '3',
-                    targets: {
-                        node: 'current',
-                    },
+                    runtime: 'automatic',
                 },
             ],
-            '@babel/preset-react',
         ],
         plugins: [
             [

client/config/configResolver.js

@@ -22,20 +22,25 @@ function getConfig() {
     if (getConfig.config) {
         return getConfig.config
     }
+
     const production = process.env.NODE_ENV || (!isDevBuild && 'production')
     const nodeEnv = production || 'development'
     const config = {}
 
     //Get default config
-    let configs = defaultConfigs.map(filename => loadFile(filename))
-    configs = configs.filter(config => !!config).map(cfg => merge(config, cfg))
+    const configs = defaultConfigs
+        .map(filename => loadFile(filename))
+        .filter(config => !!config)
+    configs.forEach(cfg => merge(config, cfg))
+
     //Get environment specific config
     if (envConfigNames[nodeEnv]) {
-        const configs = envConfigNames[nodeEnv].map(filename =>
-            loadFile(filename)
-        )
-        configs.filter(config => !!config).map(cfg => merge(config, cfg))
+        const configs = envConfigNames[nodeEnv]
+            .map(filename => loadFile(filename))
+            .filter(config => !!config)
+        configs.forEach(cfg => merge(config, cfg))
     }
+
     getConfig.config = config
     return config
 }

client/cypress/integration/app-details/index.js

@@ -7,10 +7,6 @@ Given('that a user clicks an app in the list', () => {
 })
 
 Then('the user can see details about that app', () => {
-    cy.get('[data-test="app-card-header"]')
-        .its('length')
-        .should('be', 1)
-    cy.get('.multiline-content')
-        .its('length')
-        .should('be', 1)
+    cy.get('[data-test="app-card-header"]').its('length').should('be', 1)
+    cy.get('.multiline-content').its('length').should('be', 1)
 })

client/cypress/integration/browse-published-apps/index.js

@@ -5,7 +5,5 @@ Given('that I visit the start page', () => {
 })
 
 Then('I can see at least one available app', () => {
-    cy.get('[data-test="app-card"]')
-        .its('length')
-        .should('be.gte', 1)
+    cy.get('[data-test="app-card"]').its('length').should('be.gte', 1)
 })

client/cypress/plugins/index.js

@@ -13,6 +13,6 @@
 
 const cucumber = require('cypress-cucumber-preprocessor').default
 
-module.exports = (on, config) => {
+module.exports = on => {
     on('file:preprocessor', cucumber())
 }

client/default.config.js

@@ -32,11 +32,12 @@ module.exports = {
             DASHBOARD_WIDGET: 'Dashboard',
             TRACKER_DASHBOARD_WIDGET: 'Tracker Dashboard',
         },
+        defaultAppType: 'APP',
         appChannelToDisplayName: {
             stable: 'Stable',
             development: 'Development',
             canary: 'Canary',
         },
-        defaultAppChannel: 'stable'
+        defaultAppChannel: 'stable',
     },
 }

client/development.config.js

@@ -12,5 +12,5 @@ module.exports = {
     routes: {
         baseAppName: '/',
     },
-    ui: defaultConfig.ui
+    ui: defaultConfig.ui,
 }

client/indexbuild.html

@@ -22,10 +22,9 @@
             rel="stylesheet"
         />
         <link
-            href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400"
+            href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
             rel="stylesheet"
         />
-
     </head>
     <body>
         <div id="appHub"></div>

client/package.json

@@ -2,58 +2,46 @@
     "name": "client",
     "version": "2.19.0",
     "description": "The App Hub Client",
-    "main": "src/index.js",
     "repository": "https://github.com/dhis2/app-hub",
     "author": "Birk Johansson <[email protected]>",
     "license": "BSD-3-Clause",
     "private": true,
     "scripts": {
         "build": "cross-env NODE_ENV=production webpack -p --config ./webpack.config.js",
         "start": "cross-env NODE_ENV=development webpack-dev-server",
-        "test": "cross-env NODE_ENV=test mocha --opts test/mocha.opts"
+        "test": "cross-env NODE_ENV=test mocha --opts test/mocha.opts",
+        "format": "yarn format:js && yarn format:text",
+        "format:staged": "yarn format:js --staged && yarn format:text --staged",
+        "format:js": "d2-style js apply",
+        "format:text": "d2-style text apply"
     },
     "dependencies": {
         "@auth0/auth0-react": "^1.2.0",
+        "@dhis2/d2-i18n": "^1.1.0",
+        "@dhis2/ui": "^6.6.1",
         "classnames": "^2.2.5",
         "copy-text-to-clipboard": "^3.0.1",
         "core-js": "^3.4.8",
-        "css-loader": "^0.26.1",
         "debug": "^4.1.1",
-        "file-loader": "^3.0.1",
         "history": "^4.5.1",
         "html-webpack-plugin": "^3.2.0",
         "jsonwebtoken": "^8.5.1",
         "jwt-decode": "^2.1.0",
         "lodash": "^4.17.19",
-        "material-components-web": "^0.16.0",
-        "material-design-icons": "^3.0.1",
-        "material-ui": "0",
         "query-string": "^6.14.0",
-        "react": "^16.14.0",
-        "react-animate-height": "^2.0.23",
-        "react-dom": "16",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-redux": "^7.2.1",
-        "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-slick": "^0.28.0",
-        "react-transition-group": "^2.2.0",
-        "recompose": "^0.30.0",
         "redux": "^4.0.5",
-        "redux-form": "8",
         "redux-logger": "^3.0.6",
         "redux-observable": "1",
-        "redux-optimistic-ui": "^3.0.0",
-        "regenerator-runtime": "^0.13.3",
-        "reselect": "^4.0.0",
         "rxjs": "6",
         "semver": "^7.3.2",
-        "slick-carousel": "^1.8.1",
-        "style-loader": "^0.13.1",
-        "svg-loader": "^0.0.2",
+        "styled-jsx": "3.3.0",
         "swr": "^0.4.1",
-        "transform-imports": "^2.0.0",
-        "use-query-params": "^1.1.9",
-        "whatwg-fetch": "^3.4.1"
+        "use-debounce": "^6.0.0",
+        "use-query-params": "^1.1.9"
     },
     "devDependencies": {
         "@babel/core": "^7.8.7",
@@ -62,16 +50,26 @@
         "@babel/preset-env": "^7.9.0",
         "@babel/preset-react": "^7.9.1",
         "@babel/register": "^7.9.0",
+        "@svgr/webpack": "^5.5.0",
         "babel-loader": "^8.1.0",
         "babel-plugin-rewire": "^1.2.0",
         "babel-plugin-transform-imports": "^1.5.1",
         "chai": "^4.2.0",
         "chai-as-promised": "^7.1.1",
         "copy-webpack-plugin": "^5.1.1",
+        "css-loader": "^1.0.1",
+        "cypress-cucumber-preprocessor": "^4.0.3",
+        "eslint-import-resolver-webpack": "^0.13.0",
+        "file-loader": "^3.0.1",
+        "html-webpack-plugin": "^3.2.0",
+        "isomorphic-fetch": "^3.0.0",
         "jsdom": "^15.2.0",
         "mocha": "^6.2.2",
         "sinon": "^7.5.0",
         "sinon-chai": "^3.3.0",
+        "style-loader": "^0.13.1",
+        "svg-loader": "^0.0.2",
+        "transform-imports": "^2.0.0",
         "webpack": "^4.41.2",
         "webpack-cli": "^3.3.5",
         "webpack-dev-server": "^3.8.2"

client/src/AppHub.js

@@ -0,0 +1,65 @@
+import { CssVariables, CssReset } from '@dhis2/ui'
+import React from 'react'
+import { Provider as ReduxProvider } from 'react-redux'
+import { Router, Route, Redirect, Switch } from 'react-router-dom'
+import { QueryParamProvider } from 'use-query-params'
+import { Auth } from './api'
+import styles from './AppHub.module.css'
+import AlertsProvider from './components/AlertsProvider/AlertsProvider'
+import AuthProvider from './components/auth/AuthProvider'
+import ProtectedRoute from './components/auth/ProtectedRoute'
+import Header from './components/Header/Header'
+import Apps from './pages/Apps/Apps'
+import AppView from './pages/AppView/AppView'
+import OrganisationInvitation from './pages/OrganisationInvitation/OrganisationInvitation'
+import OrganisationInvitationCallback from './pages/OrganisationInvitationCallback/OrganisationInvitationCallback'
+import UserView from './pages/UserView/UserView'
+import store from './store'
+import { history } from './utils/history'
+
+import './styles/auth0-overrides.css'
+import './styles/styles.css'
+
+const AppHub = () => (
+    <ReduxProvider store={store}>
+        <AuthProvider>
+            <Router history={history}>
+                <QueryParamProvider
+                    ReactRouterRoute={Route}
+                    stringifyOptions={{ skipEmptyString: true }}
+                >
+                    <AlertsProvider>
+                        <CssReset />
+                        <CssVariables colors spacers />
+                        <Header />
+                        <main className={styles.main}>
+                            <Switch>
+                                <Route exact path="/" component={Apps} />
+                                <Route path="/app/:appId" component={AppView} />
+                                <ProtectedRoute
+                                    path="/user"
+                                    auth={Auth}
+                                    component={UserView}
+                                />
+                                <ProtectedRoute
+                                    path="/verify/org/callback"
+                                    auth={Auth}
+                                    component={OrganisationInvitationCallback}
+                                />
+                                <Route
+                                    exact
+                                    path="/verify/org"
+                                    component={OrganisationInvitation}
+                                />
+                                {/* No-match route - redirect to index */}
+                                <Route render={() => <Redirect to="/" />} />
+                            </Switch>
+                        </main>
+                    </AlertsProvider>
+                </QueryParamProvider>
+            </Router>
+        </AuthProvider>
+    </ReduxProvider>
+)
+
+export default AppHub

client/src/AppHub.module.css

@@ -0,0 +1,7 @@
+@value m-medium from 'src/styles/breakpoints.css';
+
+@media m-medium {
+    .main {
+        padding: var(--spacers-dp16);
+    }
+}