Merge pull request #165 from PublicHealthEngland/development

Essential updates and improvements

No conflict detected.

.env.development

@@ -0,0 +1,3 @@
+REACT_APP_BASE_URL=http://localhost:3000
+REACT_APP_MAIN_CDN=c19pubdev.azureedge.net
+REACT_APP_DOWNLOADS_CDN=c19downloadsdev.azureedge.net

.github/workflows/build_test.yml

@@ -29,10 +29,17 @@ jobs:
       run: |
         npm install
         yarn install
-        
+
+    # NOTE: Do NOT use trailing slashes in the URLs.
+    # ATTENTION: `BASE_URL` must have the HTTP(S) protocol, but other URLs must not.
     - name: Build
       env:
         CI: false
-        BASE_URL: https://coronavirus-staging.data.gov.uk/ 
+        BUILD_ENV: development
+        BASE_URL: https://covid19statdev.azureedge.net
+        MAIN_CDN: c19pubdev.azureedge.net
+        DOWNLOADS_CDN: c19downloadsdev.azureedge.net
+        NODE_ENV: production
+
       run: |
         npm run build

.github/workflows/covid19staging.yml

@@ -0,0 +1,46 @@
+name: Build and deploy Node.js app to Azure Web App - Covid19StaticSTAGING
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: windows-latest
+
+    steps:
+    - uses: actions/checkout@master
+
+    - name: Set up Node.js version
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.13.0'
+
+    - name: Install dependencies
+      run: |
+        npm install -g yarn
+        npm install
+        yarn install
+
+    # NOTE: Do NOT use trailing slashes in the URLs.
+    # ATTENTION: `BASE_URL` must have the HTTP(S) protocol, but other URLs must not.
+    - name: Build yarn
+      env:
+        CI: false
+        BUILD_ENV: staging
+        BASE_URL: https://Covid19StaticStaging.azureedge.net
+        MAIN_CDN: c19pub.azureedgestaging.net
+        DOWNLOADS_CDN: c19downloadsstaging.azureedge.net
+        NODE_ENV: production
+
+      run: |
+        yarn run build
+
+    - name: 'Deploy to Azure Web App'
+      uses: azure/webapps-deploy@v1
+      with:
+        app-name: 'Covid19StaticSTAGING'
+        slot-name: 'production'
+        publish-profile: ${{ secrets.AzureAppServiceStaging }}
+        package: ./build

.github/workflows/development_covid19-test-dashboard.yml

@@ -25,10 +25,18 @@ jobs:
         npm install -g yarn
         npm install
         yarn install
-        
+
+    # NOTE: Do NOT use trailing slashes in the URLs.
+    # ATTENTION: `BASE_URL` must have the HTTP(S) protocol, but other URLs must not.
     - name: Build yarn
       env:
         CI: false
+        BUILD_ENV: development
+        BASE_URL: https://covid19statdev.azureedge.net
+        MAIN_CDN: c19pubdev.azureedge.net
+        DOWNLOADS_CDN: c19downloadsdev.azureedge.net
+        NODE_ENV: production
+
       run: |
         yarn run build
 

.github/workflows/master_covid19static.yml

@@ -25,10 +25,18 @@ jobs:
         npm install -g yarn
         npm install
         yarn install
-        
+
+    # NOTE: Do NOT use trailing slashes in the URLs.
+    # ATTENTION: `BASE_URL` must have the HTTP(S) protocol, but other URLs must not.
     - name: Build yarn
       env:
         CI: false
+        BUILD_ENV: production
+        BASE_URL: https://coronavirus.data.gov.uk
+        MAIN_CDN: c19pub.azureedge.net
+        DOWNLOADS_CDN: c19downloads.azureedge.net
+        NODE_ENV: production
+
       run: |
         yarn run build
 

README.md

@@ -4,7 +4,11 @@
 
 
 
-This is the source code for the [Coronavirus Dashboard](https://coronavirus.data.gov.uk) service.
+This is the main source code for the [Coronavirus Dashboard](https://coronavirus.data.gov.uk) service.
+
+There are two additional repositories associated with this project:
+- The [Pipeline ETL repository](https://github.com/PublicHealthEngland/coronavirus-dashboard-pipeline-etl) for data transformation.
+- The [Terraform repository](https://github.com/PublicHealthEngland/coronavirus-dashboard-terraform) for building the test, staging and deployment environments.
 
 ## Development and contribution
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-public",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": true,
   "homepage": "https://coronavirus.data.gov.uk/",
   "dependencies": {
@@ -28,12 +28,13 @@
     "remark-toc": "^7.0.0",
     "remark-slug": "^6.0.0",
     "remark-html": "^11.0.1",
-    "remark-external-links": "^6.0.0"
+    "remark-external-links": "^6.0.0",
+    "replacestream": "^4.0.3"
   },
   "scripts": {
     "lint": "yarn flow",
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && node scripts/patchUrls.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/index.html

@@ -2,16 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%REACT_APP_BASE_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <base href="%REACT_APP_BASE_URL%">
     <meta
       name="description"
       content="GOV.UK Coronavirus dashboard"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Coronavirus (COVID-19) cases in the UK</title>
+    <link rel="apple-touch-icon" href="%REACT_APP_BASE_URL%/favicon.png" />
+    <link rel="manifest" href="%REACT_APP_BASE_URL%/manifest.json" />
+    <title>Coronavirus (COVID-19) in the UK</title>
     <!-- Google Analytics -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

scripts/patchUrls.js

@@ -0,0 +1,129 @@
+"use strict";
+
+const
+    fs = require("fs"),
+    path = require("path"),
+    replaceStream = require("replacestream");
+
+
+/**
+ * Default variables.
+ *
+ * .. note:: The behaviour of  this function depends on two environment variables:
+ *           Either the `BUILD_ENV` should be set to one of `development`, `staging`
+ *           or `production`; or `NODE_ENV` must be set to `production`.
+ *
+ * .. note:: Do **NOT** use trailing slashes in the URL.
+ *
+ * .. attention:: `BASE_URL` must have the HTTP(S) protocol, but other URLs must not.
+ *
+ * @returns { {}|{DOWNLOADS_CDN: string, BASE_URL: string, MAIN_CDN: string} }
+ */
+const extractEnvVars = () => {
+
+    const prod = {
+        BASE_URL: "https://coronavirus.data.gov.uk",
+        MAIN_CDN: "c19pub.azureedge.net",
+        DOWNLOADS_CDN: "c19downloads.azureedge.net"
+    };
+
+    if ( process.env.NODE_ENV === "production" && !process.env.hasOwnProperty("BUILD_ENV"))
+        return  prod;
+
+
+    switch (process.env.BUILD_ENV) {
+        case "development":
+            return {
+                BASE_URL: "https://covid19statdev.azureedge.net",
+                MAIN_CDN: "c19pub.azureedgedev.net",
+                DOWNLOADS_CDN: "c19downloadsdev.azureedge.net"
+            }
+
+        case "staging":
+            return {
+                BASE_URL: "https://Covid19StaticStaging.azureedge.net",
+                MAIN_CDN: "c19pub.azureedgestaging.net",
+                DOWNLOADS_CDN: "c19downloadsstaging.azureedge.net"
+            }
+
+        case "production":
+            return prod
+
+        default:
+            return {}
+
+    }
+
+}; // extractEnvVars
+
+
+/**
+ * Extracts ".js" and ".html" files in `directory` and its subdirectories
+ * and returns an array of absolute paths.
+ *
+ * @param directory { string }
+ * @returns { string[] }
+ */
+const getFiles = (directory) =>  {
+
+    return fs
+        .readdirSync(directory, { withFileTypes: true })
+        .reduce((acc, item) => [
+            ...acc,
+            ...item.isDirectory()
+                ? getFiles(path.join(directory, item.name))
+                : [ path.join(directory, item.name) ]
+        ], [])
+        .filter(file => /\.(js|html)$/i.exec(file))
+
+}; // getFiles
+
+
+/**
+ * Replaces placeholders formatted as `%key%` with environment
+ * variables defined using the same key.
+ *
+ * @returns {  Promise<void> }
+ */
+const main = async () => {
+
+    const
+        directory = path.join(__dirname, "..", "build"),
+        files = getFiles(directory),
+        Replacements = {
+            ...extractEnvVars(),
+            ...process.env
+        };
+
+    for ( const file of files ) {
+
+        const tmpFile = `${ file }.tmp`;
+
+        await new Promise((resolve, reject) => {
+            const stream = Object
+                .keys(Replacements)
+                .reduce((stream, key) =>
+                    stream
+                        .pipe(replaceStream(`%${ key }%`, Replacements[key]))
+                        .pipe(replaceStream(`%REACT_APP_${ key }%`, Replacements[key])),
+                    fs.createReadStream(file)
+                )
+                .pipe(fs.createWriteStream(tmpFile));
+
+            stream.on("finish", resolve);
+            stream.on("error", reject);
+        });
+
+        fs.unlinkSync(file);
+        fs.copyFileSync(tmpFile, file);
+        fs.unlinkSync(tmpFile);
+
+    }
+
+}; // main
+
+
+main().catch(err => {
+    console.error(err);
+    process.exitCode = 1;
+});

src/App.js

@@ -77,6 +77,7 @@ const App = () => {
                 {/* These back-to-top links are the 'overlay' style that stays
                     on screen as we scroll. */}
                 <Route path="/about" exact render={ () => <BackToTop mode={ "overlay" }/> } />
+                <Route path="/accessibility" exact render={ () => <BackToTop mode={ "overlay" }/> } />
                 <Route path="/" exact render={ () => <BackToTop mode={ "overlay" }/> } />
             </Switch>
 

src/common/Icons/Icons.js

@@ -0,0 +1,62 @@
+import React from "react";
+
+
+export const ArrowUp = () => {
+
+    return <svg role={ "presentation" }
+                focusable={ "false" }
+                className={ "back-to-top" }
+                xmlns={ "http://www.w3.org/2000/svg" }
+                width={ "13" }
+                height={ "17" }
+                viewBox={ "0 0 13 17" }>
+        <path fill={ "currentColor" }
+              d={ "M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z" }/>
+    </svg>
+
+}; // ArrowUp
+
+
+export const CaretUp = () => {
+
+    return <svg height={ "12" }
+                viewBox={ "0 0 1200 1200" }
+                width={ "20" }
+                xmlns={ "http://www.w3.org/2000/svg" }>
+        <path d={ `m1036.571442,526.857147q0,26 -19,45t-45,19l-896,0q-26,0 -45,-19t-19,
+        -45t19,-45l448,-448q19,-19 45,-19t45,19l448,448q19,19 19,45z` }/>
+    </svg>
+
+}; // CaretUp
+
+
+export const CaretDown = () => {
+
+    return <svg width={ "20" }
+                height={ "12" }
+                viewBox={ "0 0 1200 1200" }
+                xmlns={ "http://www.w3.org/2000/svg" }>
+        <path d={ `m1038.43512,83.653076q0,26 -19,45l-448,448q-19,19 -45,19t-45,-19l-448,
+        -448q-19,-19 -19,-45t19,-45t45,-19l896,0q26,0 45,19t19,45z` }/>
+    </svg>
+
+}; // CaretDown
+
+
+export const CaretUpDown = () => {
+
+    return <svg height={ "20" }
+                width={ "24" }
+                viewBox={ "0 0 25 36" }
+                xmlns="http://www.w3.org/2000/svg">
+        <path d={ `m25.105327,18.861907q0,0.477077 -0.348634,0.825711l-8.220412,
+        8.220412q-0.348634,0.348634 -0.825711,0.348634t-0.825711,-0.348634l-8.220412,
+        -8.220412q-0.348634,-0.348634 -0.348634,-0.825711t0.348634,-0.825711t0.825711,
+        -0.348634l16.440824,0q0.477077,0 0.825711,0.348634t0.348634,0.825711zm0,
+        -7.046067q0,0.477077 -0.348634,0.825711t-0.825711,0.348634l-16.440824,0q-0.477077,
+        0 -0.825711,-0.348634t-0.348634,-0.825711t0.348634,-0.825711l8.220412,
+        -8.220412q0.348634,-0.348634 0.825711,-0.348634t0.825711,0.348634l8.220412,
+        8.220412q0.348634,0.348634 0.348634,0.825711z` }/>
+    </svg>
+
+}; // Unsorted

src/common/Icons/index.js

@@ -0,0 +1 @@
+export * from "./Icons"