👽️ Update GUI to match nested config for C-PAC ≥ v1.8.0 (Phase 1)

.circleci/config.yml

@@ -28,7 +28,7 @@ jobs:
           command: yarn && yarn run link
       - run:
           command:  |
-            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "production" || echo "development")
+            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "production" || echo "development")
             CSC_LINK=file:///tmp/default.p12 yarn run package:mac
       - run:
           command: mv dist dist-macos
@@ -48,7 +48,7 @@ jobs:
           command: yarn && yarn run link
       - run:
           command: |
-            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "production" || echo "development")
+            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "production" || echo "development")
             yarn run package:linux
       - run:
           command: mv dist dist-linux
@@ -68,12 +68,12 @@ jobs:
           command: yarn && yarn run link
       - run:
           command: |
-            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "production" || echo "development")
+            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "production" || echo "development")
             TARGET=electron yarn run build:renderer
             mv ./app/dist dist-web-electron
       - run:
           command: |
-            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "production" || echo "development")
+            export NODE_ENV=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "production" || echo "development")
             TARGET=browser yarn run build:renderer
             mv ./app/dist dist-web-browser
       - persist_to_workspace:
@@ -104,10 +104,10 @@ jobs:
           name: Deploy releases
           command: |
             VERSION=v`jq -r '.version' package.json`
-            TAG=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "latest" || echo "nightly")
+            TAG=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "latest" || echo "nightly")
 
             RELEASE_OPTS=""
-            if [ "${CIRCLE_BRANCH}" != "master" ]; then
+            if [ "${CIRCLE_BRANCH}" != "main" ]; then
               RELEASE_OPTS="--pre-release"
             fi
 
@@ -122,7 +122,8 @@ jobs:
             git tag "${TAG}"
             git push origin "${TAG}" -f
 
-            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+            if [ "${CIRCLE_BRANCH}" == "main" ]; then
+              github-release delete -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} --tag "${VERSION}" || true
               github-release release -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} --tag "${VERSION}" --name "${VERSION}" ${RELEASE_OPTS}
               github-release upload -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} --tag "${VERSION}" --name "c-pac_gui-${VERSION}-linux-amd64.deb" --file /tmp/workspace/dist-linux/c-pac_gui_*_amd64.deb
               github-release upload -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} --tag "${VERSION}" --name "c-pac_gui-${VERSION}-linux-amd64.snap" --file /tmp/workspace/dist-linux/c-pac_gui_*_amd64.snap
@@ -159,12 +160,12 @@ jobs:
           name: Deploy web-version
           command: |
             VERSION=v`jq -r '.version' package.json`
-            TAG=$([ "${CIRCLE_BRANCH}" == "master" ] && echo "latest" || echo "nightly")
+            TAG=$([ "${CIRCLE_BRANCH}" == "main" ] && echo "latest" || echo "nightly")
 
             git clone --single-branch --branch gh-pages [email protected]:${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}.git /tmp/repo
             cd /tmp/repo
 
-            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+            if [ "${CIRCLE_BRANCH}" == "main" ]; then
               rm -Rf /tmp/repo/versions/${VERSION} 2> /dev/null | true
               mkdir -p /tmp/repo/versions/${VERSION}
               cp -Rf /tmp/workspace/dist-web-browser /tmp/repo/versions/${VERSION}/browser
@@ -206,7 +207,7 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
                 - develop
           requires:
             - build-linux
@@ -216,7 +217,7 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
                 - develop
           requires:
             - build-web

.eslintrc

@@ -30,14 +30,16 @@
     }],
     "react/jsx-no-bind": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
-    "react/prefer-stateless-function": "off"
+    "react/prefer-stateless-function": "off",
+    "unused-imports/no-unused-imports": "error"
   },
   "plugins": [
     "@babel",
     "import",
     "promise",
     "compat",
-    "react"
+    "react",
+    "unused-imports"
   ],
   "settings": {
     "import/resolver": {

app/app.global.css

@@ -6,15 +6,17 @@
 
 * {
   -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 }
 
-html, body { margin: 0; padding: 0; overflow: hidden; }
+html,
+body {  margin: 0;  padding: 0;  overflow: hidden;
+}
 
 body {
   position: relative;
@@ -30,10 +32,11 @@ header#root-header {
 }
 
 header#root-header a {
-  opacity: 1.0;
+  opacity: 1;
 }
 
-header#root-header img, header#root-header a img {
+header#root-header img,
+header#root-header a img {
   max-height: 50px;
   box-shadow: #232c39;
 }
@@ -69,3 +72,8 @@ a:hover {
   text-decoration: none;
   cursor: pointer;
 }
+
+div#image_credit {
+  bottom: 2ex;
+  position: fixed;
+}

app/components/404.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Treachery from 'resources/treachery.jpg';
+import { withRouter } from 'react-router-dom';
+
+/** Custom 404 component */
+class NotFound extends Component {
+  render() {
+    return(
+      <div id="404">
+        <h2>The requested pipeline or page could not be found.</h2>
+        <div>
+          <img
+            src={Treachery}
+            alt="The Treachery of Images: This is not a pipe nor a territory."
+            id="treachery"
+          />
+        </div><div>
+          <br/>
+          <div id="image_credit">
+            Image credit: "<a href="https://www.flickr.com/photos/10688882@N00/18658146046">The Treachery of Images</a>" by Bill Smith (<a href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>) alluding to <i>The Treachery of Images</i> by Ren&eacute; Magritte.
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default NotFound;

app/components/Help.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
@@ -15,8 +15,8 @@ import {
   HelpIcon
 } from './icons'
 
-
-class Help extends React.Component {
+/** TODO: Refactor for 1.8+ syntax */
+class Help extends PureComponent {
   state = {
     open: false,
   }
@@ -58,8 +58,8 @@ class Help extends React.Component {
     let code = ""
 
     if (type && regex){
-      // @TODO include other templates
-      const t = type == "pipeline" ? cpac.pipeline.rawTemplate : ""
+      // @TODO replace this functionality
+      const t = '' // type == "pipeline" ? cpac.pipeline.rawTemplate : ""
       const lines = t.split('\n')
 
       for (matchedLine in lines) {
@@ -94,6 +94,8 @@ class Help extends React.Component {
     }
 
     const button = (
+      <>
+      {/* TODO: fix help
       <IconButton
         aria-label="Help"
         disableRipple
@@ -103,7 +105,8 @@ class Help extends React.Component {
         style={{ buttonStyle, ...rootStyle }}
         onClick={this.handleOpen}>
         <HelpIcon fontSize="small" />
-      </IconButton>
+      </IconButton> */}
+      </>
     )
 
     return (