Jh lab editor gui

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Node.js Build With Yarn
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  build:
+    name: Yarn Build
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [12.x]
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm i -g yarn
+      - run: yarn install
+      - name: Run TSLint
+        run: yarn run lint
+      - run: CI='' yarn run build

.github/workflows/sonar.yml

@@ -0,0 +1,21 @@
+name: SonarCloud Analysis
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  sonarcloud:
+    name: SonarCloud
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package.json

@@ -15,17 +15,19 @@
     "analyze:vendor": "source-map-explorer build/static/js/1.*",
     "analyze:app": "source-map-explorer build/static/js/main.*",
     "check-npm": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
-    "preinstall": "yarn run check-npm"
+    "preinstall": "yarn run check-npm",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.24",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.11.1",
-    "@fortawesome/free-solid-svg-icons": "^5.11.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@sentry/browser": "^5.11.2",
     "@types/history": "^4.7.3",
     "@types/humanize-duration": "^3.18.0",
     "@types/jwt-decode": "^2.2.1",
+    "@types/lodash": "^4.14.171",
     "@types/luxon": "^1.21.0",
     "@types/node": "^13.7.0",
     "@types/novnc-core": "^0.1.1",
@@ -38,18 +40,22 @@
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-select": "^3.0.11",
+    "@types/react-tag-autocomplete": "^6.1.1",
     "@types/uuid": "^3.4.6",
     "@types/winston": "^2.4.4",
     "@types/yup": "^0.26.27",
     "@types/zxcvbn": "^4.4.0",
-    "axios": "^0.19.2",
-    "axios-retry": "^3.1.2",
+    "axios": "^0.21.1",
+    "axios-retry": "^3.1.9",
+    "beautiful-react-diagrams": "^0.5.1",
     "browser-detect": "^0.2.28",
     "connected-react-router": "^6.6.1",
     "formik": "2.0.3",
     "history": "^4.10.1",
+    "html-to-image": "^1.9.0",
     "humanize-duration": "^3.21.0",
     "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.21",
     "luxon": "^1.21.3",
     "node-sass": "^4.12.0",
     "novnc-core": "^0.2.1",
@@ -58,14 +64,15 @@
     "react-app-polyfill": "^1.0.2",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-burger-menu": "^2.5.4",
-    "react-copy-to-clipboard": "^5.0.2",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dev-utils": "^10.1.0",
     "react-dom": "^16.9.0",
     "react-pdf": "^4.1.0",
     "react-redux": "^7.1.3",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.0",
     "react-select": "^3.1.0",
+    "react-tag-autocomplete": "^6.3.0",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
@@ -80,13 +87,16 @@
     "@types/jest": "^25.1.1",
     "@types/puppeteer": "^2.0.1",
     "@types/react-pdf": "^4.0.3",
+    "@types/react-tag-autocomplete": "^6.1.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
     "faker": "^4.1.0",
     "jest": "24.9.0",
     "jest-cli": "^25.2.3",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "puppeteer": "^2.1.1",
     "react-scripts": "^3.4.1",
     "source-map-explorer": "^2.2.2",

patches/beautiful-react-diagrams+0.5.1.patch

@@ -0,0 +1,136 @@
+diff --git a/node_modules/beautiful-react-diagrams/@types/DiagramSchema.ts b/node_modules/beautiful-react-diagrams/@types/DiagramSchema.ts
+index 2639876..0033790 100644
+--- a/node_modules/beautiful-react-diagrams/@types/DiagramSchema.ts
++++ b/node_modules/beautiful-react-diagrams/@types/DiagramSchema.ts
+@@ -12,6 +12,7 @@ export type NodeCoordinates = [number, number];
+
+ export type Node<P> = {
+   id: string;
++  nodeType: string;
+   coordinates: NodeCoordinates;
+   disableDrag?: boolean;
+   content?: ReactNode;
+diff --git a/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js b/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
+index e4a958b..5a34e47 100644
+--- a/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
++++ b/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
+@@ -62,9 +62,9 @@ var Link = function Link(props) {
+     return getEntityCoordinates['default'](output, portRefs, nodeRefs, canvas);
+   }, [output, portRefs, nodeRefs, canvas]);
+   var pathOptions = {
+-    type: input.type === 'port' || output.type === 'port' ? 'bezier' : 'curve',
+-    inputAlignment: input.entity.alignment || null,
+-    outputAlignment: output.entity.alignment || null
++    type: (input?.type === 'port' || output?.type === 'port') ? 'bezier' : 'curve',
++    inputAlignment: input?.entity?.alignment || null,
++    outputAlignment: output?.entity?.alignment || null
+   };
+   var path = React.useMemo(function () {
+     return makeSvgPath['default'](inputPoint, outputPoint, pathOptions);
+diff --git a/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js b/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
+index 87da7a7..1e69411 100644
+--- a/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
++++ b/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
+@@ -6,13 +6,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
+ var getRelativePoint = require('../../shared/functions/getRelativePoint.js');
+
+ var getEntityCoordinates = function getEntityCoordinates(entity, portRefs, nodeRefs, canvas) {
+-  if (entity && entity.type === 'node' && nodeRefs[entity.entity.id]) {
++  if (entity && entity?.type === 'node' && entity?.entity?.id && nodeRefs[entity.entity.id]) {
+     var nodeEl = nodeRefs[entity.entity.id];
+     var bbox = nodeEl.getBoundingClientRect();
+     return [entity.entity.coordinates[0] + bbox.width / 2, entity.entity.coordinates[1] + bbox.height / 2];
+   }
+
+-  if (portRefs && portRefs[entity.entity.id]) {
++  if (portRefs && entity?.entity?.id && portRefs[entity.entity.id]) {
+     var portEl = portRefs[entity.entity.id];
+
+     var _bbox = portEl.getBoundingClientRect();
+diff --git a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
+index 306fffc..8d87c56 100644
+--- a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
++++ b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
+@@ -52,9 +52,9 @@ var Link = function Link(props) {
+     return getEntityCoordinates(output, portRefs, nodeRefs, canvas);
+   }, [output, portRefs, nodeRefs, canvas]);
+   var pathOptions = {
+-    type: input.type === 'port' || output.type === 'port' ? 'bezier' : 'curve',
+-    inputAlignment: input.entity.alignment || null,
+-    outputAlignment: output.entity.alignment || null
++    type: (input?.type === 'port' || output?.type === 'port') ? 'bezier' : 'curve',
++    inputAlignment: input?.entity?.alignment || null,
++    outputAlignment: output?.entity?.alignment || null
+   };
+   var path = useMemo(function () {
+     return makeSvgPath(inputPoint, outputPoint, pathOptions);
+diff --git a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
+index be36a34..7a1e4f3 100644
+--- a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
++++ b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
+@@ -2,13 +2,13 @@
+ import getRelativePoint from '../../shared/functions/getRelativePoint.js';
+
+ var getEntityCoordinates = function getEntityCoordinates(entity, portRefs, nodeRefs, canvas) {
+-  if (entity && entity.type === 'node' && nodeRefs[entity.entity.id]) {
++  if (entity && entity?.type === 'node' && entity?.entity?.id && nodeRefs[entity.entity.id]) {
+     var nodeEl = nodeRefs[entity.entity.id];
+     var bbox = nodeEl.getBoundingClientRect();
+     return [entity.entity.coordinates[0] + bbox.width / 2, entity.entity.coordinates[1] + bbox.height / 2];
+   }
+
+-  if (portRefs && portRefs[entity.entity.id]) {
++  if (portRefs && entity?.entity?.id && portRefs[entity.entity.id]) {
+     var portEl = portRefs[entity.entity.id];
+
+     var _bbox = portEl.getBoundingClientRect();
+diff --git a/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js b/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
+index 829d14a..2198760 100644
+--- a/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
++++ b/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
+@@ -27,12 +27,14 @@ var schemaReducer = function schemaReducer(state, action) {
+
+         if (state.nodes) {
+           var index = findIndex(state.nodes, ['id', action.payload.nodeId]);
+-          var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
+-          var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
+-          nextLinks = nextLinks.filter(function (link) {
+-            return !inputPorts.includes(link.input) && !outputPorts.includes(link.output);
+-          });
+-          state.nodes.splice(index, 1);
++          if (index >= 0) {
++            var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
++            var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
++            nextLinks = nextLinks.filter(
++              (link) => !inputPorts.includes(link.input) && !outputPorts.includes(link.output),
++            );
++            state.nodes.splice(index, 1);
++          }
+         }
+
+         return {
+diff --git a/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js b/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
+index fd9b41c..82c69b8 100644
+--- a/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
++++ b/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
+@@ -35,12 +35,14 @@ var schemaReducer = function schemaReducer(state, action) {
+
+         if (state.nodes) {
+           var index = findIndex__default['default'](state.nodes, ['id', action.payload.nodeId]);
+-          var inputPorts = getNodePortsId['default'](state.nodes[index], 'inputs');
+-          var outputPorts = getNodePortsId['default'](state.nodes[index], 'outputs');
+-          nextLinks = nextLinks.filter(function (link) {
+-            return !inputPorts.includes(link.input) && !outputPorts.includes(link.output);
+-          });
+-          state.nodes.splice(index, 1);
++          if (index >= 0) {
++            var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
++            var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
++            nextLinks = nextLinks.filter(
++              (link) => !inputPorts.includes(link.input) && !outputPorts.includes(link.output),
++            );
++            state.nodes.splice(index, 1);
++          }
+         }
+
+         return {

public/vmware/css/extended-keypad.css

@@ -16,7 +16,7 @@
    background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */
-   background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */
+   background: linear-gradient(to top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */
 }
 
 .fnKey-pane-wrapper {
@@ -27,7 +27,7 @@
    background: -webkit-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* IE10+ */
-   background: linear-gradient(top, #c1c4d1 0%, #b0b1bd 100%); /* W3C */
+   background: linear-gradient(to top, #c1c4d1 0%, #b0b1bd 100%); /* W3C */
    position: absolute;
    padding: 0;
    -moz-box-shadow: 0px 5px 7px    rgba(0,0,0,.5);
@@ -43,7 +43,7 @@
    background: -webkit-linear-gradient(top,  #6e6e77 0%,#656565 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6e6e77 0%,#656565 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6e6e77 0%,#656565 100%); /* IE10+ */
-   background: linear-gradient(top, #6e6e77 0%, #656565 100%); /* W3C */
+   background: linear-gradient(to top, #6e6e77 0%, #656565 100%); /* W3C */
    position: absolute;
    padding: 0;
    -moz-box-shadow: 0px 5px 7px    rgba(0,0,0,.5);
@@ -128,7 +128,7 @@
    height: 57px;
    margin: 6px;
    -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
-   font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHeros', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+   font-family: "HelveticaNeue", "Helvetica Neue", 'TeXGyreHeros', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-size: 18px;
    text-shadow: 0 1px 1px #eeeeee;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .7);
@@ -140,14 +140,14 @@
    background: -webkit-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* IE10+ */
-   background: linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* W3C */
+   background: linear-gradient(to top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* W3C */
 }
 
 .ctrl-pane .ctrl-key-bottom-row {
    background: -webkit-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* IE10+ */
-   background: linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* W3C */
+   background: linear-gradient(to top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* W3C */
 }
 
 .ctrl-pane .up-position .fn-key-top-row {
@@ -156,7 +156,7 @@
    background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* IE10+ */
-   background: linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* W3C */
+   background: linear-gradient(to top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* W3C */
 }
 
 .ctrl-pane .up-position .fn-key-bottom-row {
@@ -165,7 +165,7 @@
    background: -webkit-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* IE10+ */
-   background: linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* W3C */
+   background: linear-gradient(to top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* W3C */
 }
 
 .ctrl-pane .down-position .fn-key-top-row {
@@ -174,7 +174,7 @@
    background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* IE10+ */
-   background: linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* W3C */
+   background: linear-gradient(to top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* W3C */
 }
 
 .ctrl-pane .down-position .fn-key-bottom-row {
@@ -183,7 +183,7 @@
    background: -webkit-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* IE10+ */
-   background: linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* W3C */
+   background: linear-gradient(to top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* W3C */
 }
 
 .ctrl-pane .fn-key-top-row {
@@ -216,7 +216,7 @@
    background: -webkit-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
    background:     -ms-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
    background:      -o-linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
-   background:         linear-gradient(bottom, #888888 25%, #CCCCCC 68%);
+   background:         linear-gradient(to bottom, #888888 25%, #CCCCCC 68%);
 }
 
 .ctrl-pane .ctrl-key-top-row div, .ctrl-pane .ctrl-key-bottom-row div,