Fix: include monaco sources into bundle (#3796)

* Fix: include monaco sources into bundle

.gitignore

@@ -23,6 +23,7 @@ buildscan.log
 # JS & UI Related
 node_modules
 /ui/build
+/ui/public/monaco-editor
 
 # publishing secrets
 secrets/signing-key

docker/README.md

@@ -11,7 +11,7 @@ Conductor server with support for the following backend:
 
 ### Docker File for Server and UI
 
-[Docker Image Source for Server with UI](docker/server/DockerFile)
+[Docker Image Source for Server with UI](server/Dockerfile)
 
 ### Configuration Guide for Conductor Server
 Conductor uses a persistent store for managing state.  
@@ -48,4 +48,4 @@ TODO: Link to the helm charts
 |--------------------------------------------------------------|----------------------------|
 | [docker-compose.yaml](docker-compose.yaml)                   | Redis + Elasticsearch 7    |
 | [docker-compose-postgres.yaml](docker-compose-postgres.yaml) | Postgres + Elasticsearch 7 |
-| [docker-compose-postgres.yaml](docker-compose-mysql.yaml)    | Mysql + Elasticsearch 7    |
+| [docker-compose-mysql.yaml](docker-compose-mysql.yaml)    | Mysql + Elasticsearch 7    |

docker/server/Dockerfile

@@ -20,7 +20,9 @@ RUN apk add --update nodejs npm yarn
 
 COPY . /conductor
 WORKDIR /conductor/ui
-RUN yarn install && yarn build
+# Include monaco sources into bundle (instead of using CDN)
+ENV REACT_APP_MONACO_EDITOR_USING_CDN=false
+RUN yarn install && cp -r node_modules/monaco-editor public/ && yarn build
 RUN ls -ltr
 RUN echo "Done building UI"
 

docker/ui/Dockerfile

@@ -16,10 +16,13 @@ WORKDIR /usr/src/app
 COPY ./ui/package.json ./
 
 # Installs all node packages. Cached unless package.json changes
-RUN yarn install
+RUN yarn install && mkdir -p public && cp -r node_modules/monaco-editor public/
 
 # Copies everything else over to Docker environment
 # node_modules excluded in .dockerignore.
 COPY ./ui .
 
+# Include monaco sources into bundle (instead of using CDN)
+ENV REACT_APP_MONACO_EDITOR_USING_CDN=false
+
 CMD [ "yarn", "start" ]

ui/package.json

@@ -6,7 +6,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "^4.4.0",
     "clsx": "^1.1.1",
     "cronstrue": "^1.72.0",
     "d3": "^6.2.0",
@@ -18,6 +18,7 @@
     "json-bigint-string": "^1.0.0",
     "lodash": "^4.17.20",
     "moment": "^2.29.2",
+    "monaco-editor": "^0.44.0",
     "node-forge": "^1.3.0",
     "parse-svg-path": "^0.1.2",
     "prop-types": "^15.7.2",

ui/src/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { Route, Switch } from "react-router-dom";
 import { makeStyles } from "@material-ui/styles";
+import { loader } from '@monaco-editor/react';
 import { Button, AppBar, Toolbar } from "@material-ui/core";
 import AppLogo from "./plugins/AppLogo";
 import NavLink from "./components/NavLink";
@@ -132,3 +133,8 @@ export default function App() {
     </div>
   );
 }
+
+if (process.env.REACT_APP_MONACO_EDITOR_USING_CDN === "false") {
+  // Change the source of the monaco files, see https://github.com/suren-atoyan/monaco-react/issues/168#issuecomment-762336713
+  loader.config({ paths: { vs: '/monaco-editor/min/vs' } });
+}

ui/yarn.lock

@@ -1678,20 +1678,19 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
-"@monaco-editor/loader@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
-  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@^4.3.1":
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.5.tgz#beabe491efeb2457441a00d1c7651c653697f65b"
-  integrity sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==
+"@monaco-editor/react@^4.4.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
   dependencies:
-    "@monaco-editor/loader" "^1.3.2"
-    prop-types "^15.7.2"
+    "@monaco-editor/loader" "^1.4.0"
 
 "@nodelib/[email protected]":
   version "2.1.5"
@@ -7966,6 +7965,11 @@ moment@^2.29.2:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
+monaco-editor@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"