revert: "revert: "fix: upgrade webpack and fix favicons (#475)""

This reverts commit 9db48a2.

client/indexbuild.html

@@ -4,17 +4,22 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>DHIS2 App Hub</title>
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/assets/apple-touch-icon.png"
+        />
         <link
             rel="icon"
             type="image/png"
             sizes="32x32"
-            href="/favicon-32x32.png"
+            href="/assets/favicon-32x32.png"
         />
         <link
             rel="icon"
             type="image/png"
             sizes="16x16"
-            href="/favicon-16x16.png"
+            href="/assets/favicon-16x16.png"
         />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link

client/package.json

@@ -7,8 +7,8 @@
     "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",
+        "build": "cross-env NODE_ENV=production webpack --mode production --progress --config ./webpack.config.js",
+        "start": "cross-env NODE_ENV=development webpack serve",
         "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",
@@ -24,8 +24,6 @@
         "core-js": "^3.4.8",
         "debug": "^4.1.1",
         "history": "^4.5.1",
-        "html-webpack-plugin": "^3.2.0",
-        "jsonwebtoken": "^8.5.1",
         "jwt-decode": "^2.1.0",
         "lodash": "^4.17.19",
         "query-string": "^6.14.0",
@@ -56,12 +54,12 @@
         "babel-plugin-transform-imports": "^1.5.1",
         "chai": "^4.2.0",
         "chai-as-promised": "^7.1.1",
-        "copy-webpack-plugin": "^5.1.1",
+        "copy-webpack-plugin": "^8.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",
+        "html-webpack-plugin": "^5.3.1",
         "isomorphic-fetch": "^3.0.0",
         "jsdom": "^15.2.0",
         "mocha": "^6.2.2",
@@ -70,9 +68,9 @@
         "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"
+        "webpack": "^5.36.2",
+        "webpack-cli": "^4.7.0",
+        "webpack-dev-server": "^3.11.2"
     },
     "files": [
         "build"

client/src/components/Header/DropdownButton/ArrowDownIcon.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+
+export const ArrowDownIcon = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            className={className}
+            style={{
+                fill: 'inherit',
+                height: '12px',
+                width: '12px',
+                verticalAlign: 'middle',
+                pointerEvents: 'none',
+            }}
+        >
+            <path d="m5.29289 8.7071c.39053.3905 1.02369.3905 1.41422 0l2.99999-2.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-2.2929 2.2929-2.29289-2.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z" />
+        </svg>
+    )
+}
+
+ArrowDownIcon.propTypes = {
+    className: PropTypes.string,
+}
+
+export default ArrowDownIcon

client/src/components/Header/DropdownButton/DropdownButton.js

@@ -1,9 +1,11 @@
 import { Layer, Popper } from '@dhis2/ui'
-import { ArrowDown } from '@dhis2/ui-core/build/es/Icons/Arrow'
+import ArrowDown from './ArrowDownIcon'
 import PropTypes from 'prop-types'
 import { useState, useRef } from 'react'
 import styles from './DropdownButton.module.css'
 
+
+
 const DropdownButton = ({ icon, menu }) => {
     const [isOpen, setIsOpen] = useState(false)
     const handleToggle = () => setIsOpen(!isOpen)

client/src/pages/OrganisationInvitation/OrganisationInvitation.js

@@ -1,6 +1,6 @@
 import { useAuth0 } from '@auth0/auth0-react'
 import { CenteredContent, NoticeBox, Card, Button } from '@dhis2/ui'
-import JWT from 'jsonwebtoken'
+import jwtDecode from 'jwt-decode'
 import React from 'react'
 import { useQueryParams, StringParam } from 'use-query-params'
 import styles from './OrganisationInvitation.module.css'
@@ -12,7 +12,7 @@ const OrganisationInvitation = () => {
     const { loginWithRedirect } = useAuth0()
 
     const { invitationToken } = queryParams
-    const decoded = JWT.decode(invitationToken)
+    const decoded = jwtDecode(invitationToken)
     if (!decoded) {
         return (
             <CenteredContent>

client/webpack.config.js

@@ -1,5 +1,6 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
+const CopyPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
 const config = require('./config/configResolver.js').default
 const packageJSON = require('./package.json')
@@ -108,6 +109,9 @@ const webpackConfig = {
             filename: 'index.html',
             template: path.join(__dirname, 'indexbuild.html'),
         }),
+        new CopyPlugin({
+            patterns: [{ from: path.join(__dirname, 'public'), to: 'assets' }],
+        }),
     ],
 }