chore: bump version (#62)

This removes the initial visible layout shift

.github/workflows/build-noodl-editor.yml

@@ -1,4 +1,4 @@
-name: Build noodl-editor
+name: Build fluxscape-editor
 
 on:
   # Allows you to run this workflow manually from the Actions tab
@@ -72,6 +72,6 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:
-          name: noodl-editor-${{ matrix.platform }}-${{ github.head_ref }}-${{ github.sha }}
+          name: fluxscape-editor-${{ matrix.platform }}-${{ github.head_ref }}-${{ github.sha }}
           path: publish
-          retention-days: "12"
+          retention-days: '12'

.github/workflows/test-noodl-editor.yml

@@ -1,4 +1,4 @@
-name: Test noodl-editor
+name: Test fluxscape-editor
 
 on:
   # Allows you to run this workflow manually from the Actions tab

package-lock.json

@@ -2849,9 +2849,9 @@
       }
     },
     "node_modules/@electron/remote": {
-      "version": "2.1.1",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
       "peerDependencies": {
         "electron": ">= 13.0.0"
       }
@@ -25220,13 +25220,13 @@
       }
     },
     "node_modules/electron": {
-      "version": "28.1.4",
+      "version": "31.3.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.3.1.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "integrity": "sha512-9fiuWlRhBfygtcT+auRd/WdBK/f8LZZcrpx0RjpXhH2DPTP/PfnkC4JB1PW55qCbGbh4wAgkYbf4ExIag8oGCA==",
       "hasInstallScript": true,
       "dependencies": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.9.0",
         "extract-zip": "^2.0.1"
       },
       "bin": {
@@ -25452,6 +25452,14 @@
         "tiny-typed-emitter": "^2.1.0"
       }
     },
+    "node_modules/electron/node_modules/@types/node": {
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "dev": true,
@@ -27203,6 +27211,10 @@
         "react": "^15.0.2 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/fluxscape-editor": {
+      "resolved": "packages/noodl-editor",
+      "link": true
+    },
     "node_modules/focus-lock": {
       "version": "0.8.1",
       "dev": true,
@@ -35443,10 +35455,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/noodl-editor": {
-      "resolved": "packages/noodl-editor",
-      "link": true
-    },
     "node_modules/nopt": {
       "version": "1.0.10",
       "license": "MIT",
@@ -43191,6 +43199,11 @@
       "version": "1.13.6",
       "license": "MIT"
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/unfetch": {
       "version": "4.2.0",
       "dev": true,
@@ -48967,9 +48980,10 @@
       "dev": true
     },
     "packages/noodl-editor": {
-      "version": "1.0.0",
+      "name": "fluxscape-editor",
+      "version": "1.1.0",
       "dependencies": {
-        "@electron/remote": "^2.1.1",
+        "@electron/remote": "^2.1.2",
         "@jaames/iro": "^5.5.2",
         "@microsoft/fetch-event-source": "^2.0.1",
         "@noodl/git": "file:../noodl-git",
@@ -49025,7 +49039,7 @@
         "babel-loader": "^8.2.4",
         "concurrently": "^7.4.0",
         "css-loader": "^6.7.1",
-        "electron": "28.1.4",
+        "electron": "31.3.1",
         "electron-builder": "^24.9.1",
         "file-loader": "^6.2.0",
         "html-loader": "^3.1.0",
@@ -53375,9 +53389,9 @@
       }
     },
     "@electron/remote": {
-      "version": "2.1.1",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
       "requires": {}
     },
     "@electron/universal": {
@@ -74057,13 +74071,23 @@
       }
     },
     "electron": {
-      "version": "28.1.4",
+      "version": "31.3.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.3.1.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "integrity": "sha512-9fiuWlRhBfygtcT+auRd/WdBK/f8LZZcrpx0RjpXhH2DPTP/PfnkC4JB1PW55qCbGbh4wAgkYbf4ExIag8oGCA==",
       "requires": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.9.0",
         "extract-zip": "^2.0.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.14.10",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+          "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+          "requires": {
+            "undici-types": "~5.26.4"
+          }
+        }
       }
     },
     "electron-builder": {
@@ -75408,6 +75432,144 @@
         "fbjs": "^3.0.1"
       }
     },
+    "fluxscape-editor": {
+      "version": "file:packages/noodl-editor",
+      "requires": {
+        "@babel/core": "^7.19.1",
+        "@babel/preset-react": "^7.18.6",
+        "@electron/remote": "^2.1.2",
+        "@jaames/iro": "^5.5.2",
+        "@microsoft/fetch-event-source": "^2.0.1",
+        "@noodl/git": "file:../noodl-git",
+        "@noodl/noodl-parse-dashboard": "file:../noodl-parse-dashboard",
+        "@noodl/platform": "file:../noodl-platform",
+        "@noodl/platform-electron": "file:../noodl-platform-electron",
+        "@svgr/webpack": "^6.4.0",
+        "@types/checksum": "^0.1.33",
+        "@types/jasmine": "^4.3.0",
+        "@types/jquery": "^3.5.14",
+        "@types/react": "^17.0.50",
+        "@types/react-dom": "^18.0.0",
+        "@types/remarkable": "^2.0.3",
+        "@types/rimraf": "^3.0.2",
+        "@types/split2": "^3.2.1",
+        "@types/string.prototype.matchall": "^4.0.1",
+        "@types/underscore": "^1.11.4",
+        "@types/webpack-env": "^1.18.0",
+        "about-window": "^1.15.2",
+        "algoliasearch": "^4.14.2",
+        "archiver": "^5.3.0",
+        "async": "^3.2.4",
+        "babel-loader": "^8.2.4",
+        "classnames": "^2.3.2",
+        "concurrently": "^7.4.0",
+        "css-loader": "^6.7.1",
+        "diff3": "0.0.4",
+        "dmg-license": "^1.0.11",
+        "electron": "31.3.1",
+        "electron-builder": "^24.9.1",
+        "electron-store": "^8.1.0",
+        "electron-updater": "^6.1.7",
+        "express": "^4.17.3",
+        "file-loader": "^6.2.0",
+        "highlight.js": "^11.5.1",
+        "html-loader": "^3.1.0",
+        "isbinaryfile": "^5.0.0",
+        "md5": "^2.3.0",
+        "md5-file": "^5.0.0",
+        "mixpanel-browser": "^2.45.0",
+        "mkdirp": "0.5.1",
+        "mkdirp-sync": "0.0.2",
+        "monaco-editor": "^0.34.0",
+        "monaco-editor-webpack-plugin": "^7.0.1",
+        "ncp": "^2.0.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.0",
+        "react-hot-toast": "^2.4.0",
+        "react-instantsearch-hooks-web": "^6.38.0",
+        "react-json-view": "^1.21.3",
+        "react-rnd": "^10.3.7",
+        "remarkable": "^2.0.1",
+        "rimraf": "^3.0.2",
+        "s3": "git+https://github.com/noodlapp/node-s3-client.git",
+        "sass": "^1.55.0",
+        "sass-loader": "^12.6.0",
+        "string.prototype.matchall": "^4.0.7",
+        "stringify": "^5.2.0",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.4.1",
+        "ts-node": "^10.7.0",
+        "typescript": "^4.8.3",
+        "underscore": "^1.13.6",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-dev-server": "^4.11.1",
+        "webpack-merge": "^5.8.0",
+        "websocket-stream": "^5.5.2",
+        "ws": "^8.9.0"
+      },
+      "dependencies": {
+        "@webpack-cli/configtest": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+          "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+          "dev": true,
+          "requires": {}
+        },
+        "@webpack-cli/info": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+          "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+          "dev": true,
+          "requires": {
+            "envinfo": "^7.7.3"
+          }
+        },
+        "@webpack-cli/serve": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+          "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+          "dev": true,
+          "requires": {}
+        },
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "rechoir": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
+          "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+          "dev": true,
+          "requires": {
+            "resolve": "^1.9.0"
+          }
+        },
+        "webpack-cli": {
+          "version": "4.10.0",
+          "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+          "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
+          "dev": true,
+          "requires": {
+            "@discoveryjs/json-ext": "^0.5.0",
+            "@webpack-cli/configtest": "^1.2.0",
+            "@webpack-cli/info": "^1.5.0",
+            "@webpack-cli/serve": "^1.7.0",
+            "colorette": "^2.0.14",
+            "commander": "^7.0.0",
+            "cross-spawn": "^7.0.3",
+            "fastest-levenshtein": "^1.0.12",
+            "import-local": "^3.0.2",
+            "interpret": "^2.2.0",
+            "rechoir": "^0.7.0",
+            "webpack-merge": "^5.7.3"
+          }
+        }
+      }
+    },
     "focus-lock": {
       "version": "0.8.1",
       "dev": true,
@@ -80983,144 +81145,6 @@
       "version": "2.0.10",
       "dev": true
     },
-    "noodl-editor": {
-      "version": "file:packages/noodl-editor",
-      "requires": {
-        "@babel/core": "^7.19.1",
-        "@babel/preset-react": "^7.18.6",
-        "@electron/remote": "^2.1.1",
-        "@jaames/iro": "^5.5.2",
-        "@microsoft/fetch-event-source": "^2.0.1",
-        "@noodl/git": "file:../noodl-git",
-        "@noodl/noodl-parse-dashboard": "file:../noodl-parse-dashboard",
-        "@noodl/platform": "file:../noodl-platform",
-        "@noodl/platform-electron": "file:../noodl-platform-electron",
-        "@svgr/webpack": "^6.4.0",
-        "@types/checksum": "^0.1.33",
-        "@types/jasmine": "^4.3.0",
-        "@types/jquery": "^3.5.14",
-        "@types/react": "^17.0.50",
-        "@types/react-dom": "^18.0.0",
-        "@types/remarkable": "^2.0.3",
-        "@types/rimraf": "^3.0.2",
-        "@types/split2": "^3.2.1",
-        "@types/string.prototype.matchall": "^4.0.1",
-        "@types/underscore": "^1.11.4",
-        "@types/webpack-env": "^1.18.0",
-        "about-window": "^1.15.2",
-        "algoliasearch": "^4.14.2",
-        "archiver": "^5.3.0",
-        "async": "^3.2.4",
-        "babel-loader": "^8.2.4",
-        "classnames": "^2.3.2",
-        "concurrently": "^7.4.0",
-        "css-loader": "^6.7.1",
-        "diff3": "0.0.4",
-        "dmg-license": "^1.0.11",
-        "electron": "28.1.4",
-        "electron-builder": "^24.9.1",
-        "electron-store": "^8.1.0",
-        "electron-updater": "^6.1.7",
-        "express": "^4.17.3",
-        "file-loader": "^6.2.0",
-        "highlight.js": "^11.5.1",
-        "html-loader": "^3.1.0",
-        "isbinaryfile": "^5.0.0",
-        "md5": "^2.3.0",
-        "md5-file": "^5.0.0",
-        "mixpanel-browser": "^2.45.0",
-        "mkdirp": "0.5.1",
-        "mkdirp-sync": "0.0.2",
-        "monaco-editor": "^0.34.0",
-        "monaco-editor-webpack-plugin": "^7.0.1",
-        "ncp": "^2.0.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.0",
-        "react-hot-toast": "^2.4.0",
-        "react-instantsearch-hooks-web": "^6.38.0",
-        "react-json-view": "^1.21.3",
-        "react-rnd": "^10.3.7",
-        "remarkable": "^2.0.1",
-        "rimraf": "^3.0.2",
-        "s3": "git+https://github.com/noodlapp/node-s3-client.git",
-        "sass": "^1.55.0",
-        "sass-loader": "^12.6.0",
-        "string.prototype.matchall": "^4.0.7",
-        "stringify": "^5.2.0",
-        "style-loader": "^3.3.1",
-        "ts-loader": "^9.4.1",
-        "ts-node": "^10.7.0",
-        "typescript": "^4.8.3",
-        "underscore": "^1.13.6",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-merge": "^5.8.0",
-        "websocket-stream": "^5.5.2",
-        "ws": "^8.9.0"
-      },
-      "dependencies": {
-        "@webpack-cli/configtest": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-          "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
-          "dev": true,
-          "requires": {}
-        },
-        "@webpack-cli/info": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-          "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
-          "dev": true,
-          "requires": {
-            "envinfo": "^7.7.3"
-          }
-        },
-        "@webpack-cli/serve": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-          "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
-          "dev": true,
-          "requires": {}
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
-        },
-        "rechoir": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-          "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
-          "dev": true,
-          "requires": {
-            "resolve": "^1.9.0"
-          }
-        },
-        "webpack-cli": {
-          "version": "4.10.0",
-          "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
-          "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
-          "dev": true,
-          "requires": {
-            "@discoveryjs/json-ext": "^0.5.0",
-            "@webpack-cli/configtest": "^1.2.0",
-            "@webpack-cli/info": "^1.5.0",
-            "@webpack-cli/serve": "^1.7.0",
-            "colorette": "^2.0.14",
-            "commander": "^7.0.0",
-            "cross-spawn": "^7.0.3",
-            "fastest-levenshtein": "^1.0.12",
-            "import-local": "^3.0.2",
-            "interpret": "^2.2.0",
-            "rechoir": "^0.7.0",
-            "webpack-merge": "^5.7.3"
-          }
-        }
-      }
-    },
     "nopt": {
       "version": "1.0.10",
       "requires": {
@@ -86403,6 +86427,11 @@
     "underscore": {
       "version": "1.13.6"
     },
+    "undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "unfetch": {
       "version": "4.2.0",
       "dev": true

package.json

@@ -12,7 +12,7 @@
     "graph": "npx nx graph",
     "ci:prepare:editor": "ts-node ./scripts/ci-editor-prepare.ts",
     "ci:build:viewer": "lerna exec --scope @noodl/noodl-viewer-react -- npm run build",
-    "ci:build:editor": "lerna exec --scope noodl-editor -- npm run ci:build",
+    "ci:build:editor": "lerna exec --scope fluxscape-editor -- npm run ci:build",
     "build:editor": "ts-node ./scripts/build-editor.ts",
     "build:editor:_viewer": "ts-node ./scripts/noodl-editor/build-viewer.ts",
     "build:editor:_editor": "ts-node ./scripts/noodl-editor/build-editor.ts",
@@ -20,7 +20,7 @@
     "build:cloud-runtime": "lerna run build --scope @noodl/cloud-runtime --stream && lerna run build:pack --scope @noodl/cloud-runtime --stream",
     "start:storybook": "lerna exec --scope @noodl/noodl-core-ui -- npm run start",
     "start:viewer": "lerna run start --scope @noodl/noodl-viewer-react --stream",
-    "start:editor": "lerna run start --scope noodl-editor --stream",
+    "start:editor": "lerna run start --scope fluxscape-editor --stream",
     "dev": "ts-node ./scripts/start.ts",
     "start": "ts-node ./scripts/start.ts -- --build-viewer",
     "test:editor": "ts-node ./scripts/test-editor.ts",

packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss

@@ -9,6 +9,11 @@
   right: 0;
   bottom: 0;
 
+  &.is-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   &.has-backdrop {
     background-color: var(--theme-color-bg-1-transparent);
   }

packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.tsx

@@ -42,6 +42,7 @@ export interface BaseDialogProps extends UnsafeStyleProps {
   isVisible?: boolean;
   hasBackdrop?: boolean;
   hasArrow?: boolean;
+  alwaysMounted?: boolean;
 
   children?: Slot;
 
@@ -69,6 +70,7 @@ export function CoreBaseDialog({
   isVisible,
   hasBackdrop,
   hasArrow,
+  alwaysMounted,
 
   children,
 
@@ -261,7 +263,7 @@ export function CoreBaseDialog({
     }
   }, [background]);
 
-  if (!isVisible) return null;
+  if (!isVisible && !alwaysMounted) return null;
 
   return (
     <div
@@ -270,6 +272,7 @@ export function CoreBaseDialog({
         hasBackdrop && css['has-backdrop'],
         isLockingScroll && css['is-locking-scroll'],
         typeof triggerRef === 'undefined' && css['is-centered'],
+        !isVisible && css['is-hidden'],
         css[variant]
       )}
       onClick={onClose}

packages/noodl-editor/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "noodl-editor",
+  "name": "fluxscape-editor",
   "productName": "Fluxscape",
   "description": "Node-Based App Builder for Scalability & Rapid Development, a fork of Noodl",
   "author": "Fluxscape <contact@fluxscape.io>",
   "homepage": "https://fluxscape.io",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "src/main/main.js",
   "scripts": {
     "build": "npx ts-node -P ./tsconfig.build.json ./scripts/build.ts",
@@ -58,7 +58,7 @@
     ]
   },
   "dependencies": {
-    "@electron/remote": "^2.1.1",
+    "@electron/remote": "^2.1.2",
     "@jaames/iro": "^5.5.2",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@noodl/git": "file:../noodl-git",
@@ -114,7 +114,7 @@
     "babel-loader": "^8.2.4",
     "concurrently": "^7.4.0",
     "css-loader": "^6.7.1",
-    "electron": "28.1.4",
+    "electron": "31.3.1",
     "electron-builder": "^24.9.1",
     "file-loader": "^6.2.0",
     "html-loader": "^3.1.0",

packages/noodl-editor/src/assets/images/outline-cloud_done-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z"/></svg>

packages/noodl-editor/src/assets/images/sharp-add-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

packages/noodl-editor/src/assets/images/sharp-input-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3zM23 3.01H1V9h2V4.99h18v14.03H3V15H1v5.99h22V3.01zM11 16l4-4-4-4v3H1v2h10v3z"/></svg>

packages/noodl-editor/src/assets/images/sharp-library_books-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 6H2v16h16v-2H4V6zm18-4H6v16h16V2zm-3 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg>

packages/noodl-editor/src/assets/images/sharp-list-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>

packages/noodl-editor/src/assets/images/sharp-settings-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>

packages/noodl-editor/src/editor/src/contexts/PluginContext/commands/upload-aws-s3.ts

@@ -48,7 +48,7 @@ export async function execute(command: Command, event: MessageEvent) {
 
   // Deploy to temp folder
   await compilation.deployToFolder(tempDir, {
-    environment: command.cloudService ? new Environment("", command.cloudService) : undefined
+    environment: command.cloudService ? new Environment(command.cloudService) : undefined
   });
 
   // Upload to S3

packages/noodl-editor/src/editor/src/models/CloudServices/CloudService.ts

@@ -1,9 +1,9 @@
+import { Environment, ExternalCloudService } from '@noodl-models/CloudServices/ExternalCloudService';
 import {
   CloudServiceEvent,
   CloudServiceEvents,
   CreateEnvironment,
   CreateEnvironmentRequest,
-  Environment,
   ICloudBackendService,
   ICloudService,
   UpdateEnvironmentRequest
@@ -12,9 +12,6 @@ import { ProjectModel } from '@noodl-models/projectmodel';
 import { getCloudServices } from '@noodl-models/projectmodel.editor';
 import { Model } from '@noodl-utils/model';
 
-import { GlobalCloudService } from './providers/GlobalCloudService';
-import { ProjectCloudService } from './providers/ProjectCloudService';
-
 export type CloudQueueItem = {
   frontendId: string;
   environmentId: string;
@@ -23,9 +20,7 @@ export type CloudQueueItem = {
 class CloudBackendService implements ICloudBackendService {
   private _isLoading = false;
   private _collection?: Environment[];
-
+  private _localExternal = new ExternalCloudService();
-  private _globalProvider = new GlobalCloudService();
-  private _projectProvider = new ProjectCloudService();
 
   get isLoading(): boolean {
     return this._isLoading;
@@ -37,14 +32,12 @@ class CloudBackendService implements ICloudBackendService {
 
   constructor(private readonly service: CloudService) {}
 
-  async fetch(project: ProjectModel): Promise<Environment[]> {
+  async fetch(): Promise<Environment[]> {
     this._isLoading = true;
     try {
-      const projectResults = await this._projectProvider.list(project);
+      // Fetch environments from local machine
-      this._collection = projectResults.map((x) => new Environment("project", x));
+      const localEnvironments = await this._localExternal.list();
-
+      this._collection = localEnvironments.map((x) => new Environment(x));
-      const globalResults = await this._globalProvider.list(project);
-      this._collection = this._collection.concat(globalResults.map((x) => new Environment("global", x)));
     } finally {
       this._isLoading = false;
       this.service.notifyListeners(CloudServiceEvent.BackendUpdated);
@@ -55,7 +48,7 @@ class CloudBackendService implements ICloudBackendService {
   async fromProject(project: ProjectModel): Promise<Environment> {
     const activeCloudServices = getCloudServices(project);
     if (!this._collection) {
-      await this.fetch(project);
+      await this.fetch();
     }
 
     return this.items.find((b) => {
@@ -63,16 +56,16 @@ class CloudBackendService implements ICloudBackendService {
     });
   }
 
-  async create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
+  async create(options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
-    return await this._projectProvider.create(project, options);
+    return await this._localExternal.create(options);
   }
 
-  async update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
+  async update(options: UpdateEnvironmentRequest): Promise<boolean> {
-    return await this._projectProvider.update(project, options);
+    return await this._localExternal.update(options);
   }
 
-  async delete(project: ProjectModel, id: string): Promise<boolean> {
+  async delete(id: string): Promise<boolean> {
-    return await this._projectProvider.delete(project, id);
+    return await this._localExternal.delete(id);
   }
 }
 
@@ -102,11 +95,15 @@ export class CloudService extends Model<CloudServiceEvent, CloudServiceEvents> i
    */
   public async prefetch() {
     this.reset();
-    await this.backend.fetch(ProjectModel.instance);
+    await this.fetch();
+  }
+
+  public async fetch() {
+    await this.backend.fetch();
   }
 
   public async getActiveEnvironment(project: ProjectModel): Promise<Environment> {
-    await this.backend.fetch(project);
+    await this.backend.fetch();
     return this.backend.fromProject(project);
   }
 }

packages/noodl-editor/src/editor/src/models/CloudServices/ExternalCloudService.ts

@@ -1,21 +1,25 @@
 import { JSONStorage } from '@noodl/platform';
 
-import {
+import { CreateEnvironment, CreateEnvironmentRequest, UpdateEnvironmentRequest } from '@noodl-models/CloudServices';
-  CreateEnvironment,
-  CreateEnvironmentRequest,
-  EnvironmentDataFormat,
-  ICloudServiceProvider,
-  UpdateEnvironmentRequest
-} from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
 
-export class GlobalCloudService implements ICloudServiceProvider {
+/** The data format is separated from our internal model. */
-  async list(_project: ProjectModel): Promise<EnvironmentDataFormat[]> {
+export type EnvironmentDataFormat = {
+  enabled: boolean;
+  id: string;
+  name: string;
+  description: string;
+  masterKey: string;
+  appId: string;
+  endpoint: string;
+};
+
+export class ExternalCloudService {
+  async list(): Promise<EnvironmentDataFormat[]> {
     const local = await JSONStorage.get('externalBrokers');
     return local.brokers || [];
   }
 
-  async create(_project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
+  async create(options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
     const id = `${options.url}-${options.appId}`;
 
     const newBroker: EnvironmentDataFormat = {
@@ -40,7 +44,7 @@ export class GlobalCloudService implements ICloudServiceProvider {
     };
   }
 
-  async update(_project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
+  async update(options: UpdateEnvironmentRequest): Promise<boolean> {
     const local = await JSONStorage.get('externalBrokers');
     const brokers: EnvironmentDataFormat[] = local.brokers || [];
 
@@ -59,7 +63,7 @@ export class GlobalCloudService implements ICloudServiceProvider {
     return true;
   }
 
-  async delete(_project: ProjectModel, id: string): Promise<boolean> {
+  async delete(id: string): Promise<boolean> {
     const local = await JSONStorage.get('externalBrokers');
     const brokers: EnvironmentDataFormat[] = local.brokers || [];
 
@@ -75,3 +79,25 @@ export class GlobalCloudService implements ICloudServiceProvider {
     return true;
   }
 }
+
+export class Environment {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  masterKeyUpdatedAt: string;
+  masterKey: string;
+  appId: string;
+  url: string;
+
+  constructor(item: EnvironmentDataFormat) {
+    this.id = item.id;
+    this.name = item.name;
+    this.description = item.description;
+    this.createdAt = '';
+    this.masterKeyUpdatedAt = '';
+    this.masterKey = item.masterKey;
+    this.appId = item.appId;
+    this.url = item.endpoint;
+  }
+}

packages/noodl-editor/src/editor/src/models/CloudServices/index.ts

@@ -1,2 +1,3 @@
 export * from './CloudService';
 export * from './type';
+export * from './ExternalCloudService';

packages/noodl-editor/src/editor/src/models/CloudServices/providers/ProjectCloudService.ts

@@ -1,101 +0,0 @@
-import { filesystem } from '@noodl/platform';
-
-import {
-  CreateEnvironment,
-  CreateEnvironmentRequest,
-  EnvironmentDataFormat,
-  ICloudServiceProvider,
-  UpdateEnvironmentRequest
-} from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
-
-/**
- * Store the Cloud Service relative to the project folder.
- */
-export class ProjectCloudService implements ICloudServiceProvider {
-  private async load(project: ProjectModel) {
-    const dirpath = filesystem.resolve(project._retainedProjectDirectory, ".noodl");
-    const filepath = filesystem.resolve(dirpath, "cloudservices.json");
-    if (!filesystem.exists(filepath)) {
-      return []
-    }
-
-    // TODO: Validate file content
-    return filesystem.readJson(filepath);
-  }
-
-  private async save(project: ProjectModel, items: EnvironmentDataFormat[]) {
-    const dirpath = filesystem.resolve(project._retainedProjectDirectory, ".noodl");
-    const filepath = filesystem.resolve(dirpath, "cloudservices.json");
-    if (!filesystem.exists(filepath)) {
-      await filesystem.makeDirectory(dirpath);
-    }
-
-    await filesystem.writeJson(filepath, items);
-  }
-  
-  async list(project: ProjectModel): Promise<EnvironmentDataFormat[]> {
-    if (!project || !project._retainedProjectDirectory) {
-      return []
-    }
-
-    return await this.load(project);
-  }
-
-  async create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
-    const id = `${options.url}-${options.appId}`;
-
-    const newBroker: EnvironmentDataFormat = {
-      enabled: true,
-      id,
-      name: options.name,
-      description: options.description,
-      masterKey: options.masterKey,
-      appId: options.appId,
-      endpoint: options.url
-    };
-
-    const current = await this.load(project);
-    await this.save(project, [...current, newBroker]);
-
-    return {
-      id: newBroker.id,
-      appId: newBroker.appId,
-      url: newBroker.endpoint,
-      masterKey: newBroker.masterKey
-    };
-  }
-
-  async update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
-    const current = await this.load(project);
-
-    // Find and update
-    const broker = current.find((x) => x.id === options.id);
-    if (!broker) return false;
-
-    if (typeof options.name !== undefined) broker.name = options.name;
-    if (typeof options.description !== undefined) broker.description = options.description;
-    if (typeof options.appId !== undefined) broker.appId = options.appId;
-    if (typeof options.masterKey !== undefined) broker.masterKey = options.masterKey;
-    if (typeof options.url !== undefined) broker.endpoint = options.url;
-
-    await this.save(project, current);
-
-    return true;
-  }
-
-  async delete(project: ProjectModel, id: string): Promise<boolean> {
-    const current = await this.load(project);
-
-    // Find the environment
-    const found = current.find((b) => b.id === id);
-    if (found) {
-      // Delete the environment
-      current.splice(current.indexOf(found), 1);
-    }
-
-    // Save the list
-    await this.save(project, current);
-    return true;
-  }
-}

packages/noodl-editor/src/editor/src/models/CloudServices/type.ts

@@ -1,3 +1,4 @@
+import { Environment } from '@noodl-models/CloudServices';
 import { ProjectModel } from '@noodl-models/projectmodel';
 import { IModel } from '@noodl-utils/model';
 
@@ -29,11 +30,11 @@ export interface ICloudBackendService {
   get isLoading(): boolean;
   get items(): Environment[];
 
-  fetch(project: ProjectModel): Promise<Environment[]>;
+  fetch(): Promise<Environment[]>;
   fromProject(project: ProjectModel): Promise<Environment> | undefined;
-  create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
+  create(options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
-  update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean>;
+  update(options: UpdateEnvironmentRequest): Promise<boolean>;
-  delete(project: ProjectModel, id: string): Promise<boolean>;
+  delete(id: string): Promise<boolean>;
 }
 
 export enum CloudServiceEvent {
@@ -54,54 +55,3 @@ export interface ICloudService extends IModel<CloudServiceEvent, CloudServiceEve
 
   get backend(): ICloudBackendService;
 }
-
-/** The data format is separated from our internal model. */
-export type EnvironmentDataFormat = {
-  enabled: boolean;
-  id: string;
-  name: string;
-  description: string;
-  masterKey: string;
-  appId: string;
-  endpoint: string;
-};
-
-export class Environment {
-  id: string;
-  name: string;
-  description: string;
-  createdAt: string;
-  masterKeyUpdatedAt: string;
-  masterKey: string;
-  appId: string;
-  url: string;
-
-  provider: string;
-
-  get typeDisplayName() {
-    switch (this.provider) {
-      case "project": return "Self hosted";
-      default: return "Global Self hosted"
-    }
-  }
-
-  constructor(provider: string, item: EnvironmentDataFormat) {
-    this.provider = provider;
-
-    this.id = item.id;
-    this.name = item.name;
-    this.description = item.description;
-    this.createdAt = '';
-    this.masterKeyUpdatedAt = '';
-    this.masterKey = item.masterKey;
-    this.appId = item.appId;
-    this.url = item.endpoint;
-  }
-}
-
-export interface ICloudServiceProvider {
-  list(project: ProjectModel | undefined): Promise<EnvironmentDataFormat[]>;
-  create(project: ProjectModel | undefined, options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
-  update(project: ProjectModel | undefined, options: UpdateEnvironmentRequest): Promise<boolean>;
-  delete(project: ProjectModel | undefined, id: string): Promise<boolean>;
-}

packages/noodl-editor/src/editor/src/utils/LocalProjectsModel.ts

@@ -16,6 +16,7 @@ import { projectFromDirectory, unzipIntoDirectory } from '../models/projectmodel
 import FileSystem from './filesystem';
 import { tracker } from './tracker';
 import { guid } from './utils';
+import { getTopLevelWorkingDirectory } from '@noodl/git/src/core/open';
 
 export interface ProjectItem {
   id: string;
@@ -267,12 +268,15 @@ export class LocalProjectsModel extends Model {
     });
   }
 
-  isGitProject(project: ProjectModel): boolean {
+  /**
-    // TODO: check if there's is git in any parent folder too
+   * Check if this project is in a git repository.
-
+   *
-    // Check if the git folder exists.
+   * @param project 
-    const gitPath = filesystem.join(project._retainedProjectDirectory, '.git');
+   * @returns 
-    return filesystem.exists(gitPath);
+   */
+  async isGitProject(project: ProjectModel): Promise<boolean> {
+    const gitPath = await getTopLevelWorkingDirectory(project._retainedProjectDirectory);
+    return gitPath !== null;
   }
 
   setCurrentGlobalGitAuth(projectId: string) {

packages/noodl-editor/src/editor/src/utils/cloudformation.ts

@@ -1,5 +1,4 @@
 import { CloudService } from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
 import SchemaModel from '@noodl-models/schemamodel';
 
 class FormCollection {
@@ -194,7 +193,7 @@ export default class CloudFormation {
   }) {
     // Create new cloud services if needed
     if (options.cloudServices.id === undefined) {
-      CloudService.instance.backend.fetch(ProjectModel.instance).then((collection) => {
+      CloudService.instance.backend.fetch().then((collection) => {
         // TODO(OS): Cloud formation Cloud Service
         // // Make sure we have a unique name for the cloud services
         // const orgName = options.cloudServices.name;

packages/noodl-editor/src/editor/src/utils/projectmerger.diff.ts

@@ -11,6 +11,14 @@ export interface ArrayDiff<T> {
   changed: T[];
   unchanged: T[];
 }
+export function createEmptyArrayDiff<T>(): ArrayDiff<T> {
+  return {
+    deleted: [],
+    created: [],
+    changed: [],
+    unchanged: [],
+  }
+}
 
 export interface ProjectDiffItem {
   graph: TSFixme;

packages/noodl-editor/src/editor/src/utils/schemahandler.ts

@@ -13,6 +13,7 @@ export default class SchemaHandler {
   public dbCollections: TSFixme[];
   public systemCollections: TSFixme[];
   public configSchema: TSFixme;
+  public parseServerVersion: string;
 
   constructor() {
     EventDispatcher.instance.on(
@@ -41,7 +42,7 @@ export default class SchemaHandler {
         return; // No project broker
       }
 
-      CloudService.instance.backend.fetch(ProjectModel.instance).then((collection) => {
+      CloudService.instance.backend.fetch().then((collection) => {
         // Find by the Url / Endpoint and app id
         let environment = collection.find((b) => {
           return b.url === activeBroker.endpoint && b.appId === activeBroker.appId;
@@ -119,6 +120,20 @@ export default class SchemaHandler {
             console.log(e);
           }
         });
+
+        // Get Parse Server Version & Supported features
+        fetch(environment.url + '/serverInfo', {
+          method: 'POST',
+          body: JSON.stringify({
+            "_method": "GET",
+            "_ApplicationId": environment.appId,
+            "_MasterKey": environment.masterKey,
+          })
+        })
+          .then((response) => response.json())
+          .then((json) => {
+            this.parseServerVersion = json.parseServerVersion;
+          });
       });
     });
   }
@@ -129,10 +144,20 @@ export default class SchemaHandler {
         ProjectModel.instance.setMetaData('dbCollections', this.dbCollections);
         ProjectModel.instance.setMetaData('systemCollections', this.systemCollections);
         ProjectModel.instance.setMetaData('dbConfigSchema', this.configSchema);
+
+        const versionNumbers = this.parseServerVersion?.split(".")
+        if (versionNumbers && versionNumbers.length > 0) {
+          // Let's only save the major version number,
+          // since this will be used to determine which verison of the API to use.
+          ProjectModel.instance.setMetaData('dbVersionMajor', versionNumbers[0]);
+        } else {
+          ProjectModel.instance.setMetaData('dbVersionMajor', undefined);
+        }
       } else {
         ProjectModel.instance.setMetaData('dbCollections', undefined);
         ProjectModel.instance.setMetaData('systemCollections', undefined);
         ProjectModel.instance.setMetaData('dbConfigSchema', undefined);
+        ProjectModel.instance.setMetaData('dbVersionMajor', undefined);
       }
     }
   }

packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx

@@ -1,5 +1,6 @@
-import { usePluginContext } from '@noodl-contexts/PluginContext';
+import React, { RefObject } from 'react';
-import React, { RefObject, useEffect, useRef } from 'react';
+
+import { ProjectModel } from '@noodl-models/projectmodel';
 
 import { ActivityIndicator } from '@noodl-core-ui/components/common/ActivityIndicator';
 import { BaseDialog } from '@noodl-core-ui/components/layout/BaseDialog';
@@ -54,6 +55,7 @@ export function DeployPopup(props: DeployPopupProps) {
         onClose={props.onClose}
         hasArrow
         isLockingScroll
+        alwaysMounted
       >
         <DeployPopupChild />
       </BaseDialog>
@@ -62,6 +64,19 @@ export function DeployPopup(props: DeployPopupProps) {
 }
 
 function FluxscapeDeployTab() {
-  // Preview URL:  'http://192.168.0.33:8574/'
+  const params = {};
-  return <iframe src="https://portal.fluxscape.io" style={{ width: "100%", height: "50vh", borderStyle: "none" }} />;
+
+  const projectId = ProjectModel.instance.id;
+  if (projectId) {
+    params['projectId'] = projectId;
+  }
+
+  const urlParams = new URLSearchParams(params);
+
+  return (
+    <iframe
+      src={`https://portal.fluxscape.io/?${urlParams.toString()}`}
+      style={{ width: '100%', height: '50vh', borderStyle: 'none' }}
+    />
+  );
 }

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx

@@ -87,7 +87,7 @@ export function CloudServiceCard({
         <div className={css['MetaBar']}>
           <div className={classNames([css['TypeDisplay'], isEditorEnvironment && css['is-editor-environment']])}>
             <Icon icon={IconName.CloudCheck} size={IconSize.Small} UNSAFE_style={{ marginRight: 4 }} />
-            {environment.typeDisplayName + ' '}
+            {'Self hosted '}
             {errorMessage && <span className={css['ArchivedDisplay']}>({errorMessage})</span>}
             {isEditorEnvironment && <span className={css['UsedInEditorDisplay']}>(Used in editor)</span>}
           </div>

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCardItem/CloudServiceCardItem.tsx

@@ -5,7 +5,6 @@ import { CloudService, Environment } from '@noodl-models/CloudServices';
 import { ToastType } from '../../../ToastLayer/components/ToastCard';
 import { CloudServiceCard } from '../CloudServiceCard';
 import { useCloudServiceContext } from '../CloudServicePanel.context';
-import { ProjectModel } from '@noodl-models/projectmodel';
 
 export interface CloudServiceCardItemProps {
   environment: Environment;
@@ -21,7 +20,7 @@ export function CloudServiceCardItem({ environment, deleteEnvironment }: CloudSe
   async function onDelete() {
     await deleteEnvironment();
     await runActivity('Deleting cloud service...', async () => {
-      const response: boolean = await CloudService.instance.backend.delete(ProjectModel.instance, environment.id);
+      const response: boolean = await CloudService.instance.backend.delete(environment.id);
       return {
         type: ToastType.Success,
         message: 'Cloud service deleted'

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCreateModal/CloudServiceCreateModal.tsx

@@ -12,7 +12,6 @@ import { Text, TextType } from '@noodl-core-ui/components/typography/Text';
 
 import { ToastType } from '../../../ToastLayer/components/ToastCard';
 import { useCloudServiceContext } from '../CloudServicePanel.context';
-import { ProjectModel } from '@noodl-models/projectmodel';
 
 function isValidParseUrl(url: string) {
   if (!url) return false;
@@ -64,7 +63,7 @@ export function CloudServiceCreateModal({ isVisible, onClose }: CloudServiceCrea
 
   async function onCreate() {
     await runActivity('Creating Cloud Service...', async () => {
-      await cloudService.backend.create(ProjectModel.instance, {
+      await cloudService.backend.create({
         name,
         description,
         masterKey: masterKey ? masterKey : undefined,

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceModal/CloudSerivceModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { FeedbackType } from '@noodl-constants/FeedbackType';
 import { CloudService, Environment } from '@noodl-models/CloudServices';
@@ -12,7 +12,6 @@ import { HStack, VStack } from '@noodl-core-ui/components/layout/Stack';
 import { Text } from '@noodl-core-ui/components/typography/Text';
 
 import { ToastLayer } from '../../../ToastLayer';
-import { ProjectModel } from '@noodl-models/projectmodel';
 
 export interface CloudServiceModalProps {
   isVisible: boolean;
@@ -61,7 +60,7 @@ function AsSelfHosted({
     }
 
     CloudService.instance.backend
-      .update(ProjectModel.instance, {
+      .update({
         id: environment.id,
         name,
         description,
@@ -71,7 +70,7 @@ function AsSelfHosted({
       })
       .then(() => {
         ToastLayer.showSuccess(`Updated Cloud Service`);
-        CloudService.instance.backend.fetch(ProjectModel.instance);
+        CloudService.instance.backend.fetch();
       })
       .catch(() => {
         ToastLayer.showError(`Failed to update Cloud Service`);

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServicePanel.context.tsx

@@ -35,7 +35,7 @@ export function CloudServiceContextProvider({ children }) {
   const { hasActivity, runActivity } = useActivityQueue({
     onSuccess: async () => {
       // Always fetch all the backends after something have changed
-      await cloudService.backend.fetch(ProjectModel.instance);
+      await cloudService.backend.fetch();
     }
   });
 

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx

@@ -199,6 +199,7 @@ function BaseVersionControlPanel() {
 
 export function VersionControlPanel() {
   const [git, setGit] = useState<Git>(null);
+  const [state, setState] = useState<'loading' | 'loaded' | 'not-git'>('loading');
 
   async function createGit() {
     const gitClient = new Git(mergeProject);
@@ -206,12 +207,18 @@ export function VersionControlPanel() {
     setGit(gitClient);
   }
 
-  const isGitProject = git === null ? LocalProjectsModel.instance.isGitProject(ProjectModel.instance) : true;
   useEffect(() => {
+    LocalProjectsModel.instance
+      .isGitProject(ProjectModel.instance)
+      .then(async (isGitProject) => {
         if (isGitProject) {
-      createGit();
+          await createGit();
+          setState('loaded');
+        } else {
+          setState('not-git');
         }
-  }, [isGitProject]);
+      });
+  }, []);
 
   async function setupGit() {
     const gitClient = new Git(mergeProject);
@@ -220,7 +227,7 @@ export function VersionControlPanel() {
     setGit(gitClient);
   }
 
-  if (git === null && !isGitProject) {
+  if (git === null && state === 'not-git') {
     return (
       <BasePanel isFill title="Version Control">
         <Box hasXSpacing hasYSpacing>

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/CommitChangesDiff.tsx

@@ -6,11 +6,13 @@ import { Commit } from '@noodl/git/src/core/models/snapshot';
 import { FileChange } from '@noodl/git/src/core/models/status';
 import { revRange } from '@noodl/git/src/core/rev-list';
 
+import { ProjectModel } from '@noodl-models/projectmodel';
 import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
 import { mergeProject } from '@noodl-utils/projectmerger';
 import { ProjectDiff, diffProject } from '@noodl-utils/projectmerger.diff';
 
 import { useVersionControlContext } from '../context';
+import { getProjectFilePath } from '../context/DiffUtils';
 import { DiffList } from './DiffList';
 
 //Kind:
@@ -124,7 +126,10 @@ async function getMergeDiff(repositoryPath: string, commit: Commit, refToDiffTo:
 }
 
 async function getProjectFile(commit: Commit) {
-  const projectContent = JSON.parse(await commit.getFileAsString('project.json'));
+  const projectFilePath = getProjectFilePath(commit.repositoryDir, ProjectModel.instance._retainedProjectDirectory);
+
+  const projectContentRaw = await commit.getFileAsString(projectFilePath);
+  const projectContent = JSON.parse(projectContentRaw);
   applyPatches(projectContent);
   return projectContent;
 }

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/DiffList.tsx

@@ -61,7 +61,7 @@ export function DiffList({ diff, fileChanges, componentDiffTitle, actions, commi
   const [imageDiff, setImageDiff] = useState<IImageDiff>(null);
 
   const components = diff?.components ? getChangedComponents(diff.components) : [];
-  const files = (fileChanges || [])?.filter((f) => f.path !== 'project.json') || [];
+  const files = (fileChanges || [])?.filter((f) => !f.path.endsWith('project.json')) || [];
   const settings = diff?.settings ? getChangedObjectProperties(diff.settings) : [];
   const colorStyles = diff?.styles.colors ? getChangedObjectProperties(diff.styles.colors) : [];
   const textStyles = diff?.styles.text ? getChangedObjectProperties(diff.styles.text) : [];

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/DiffUtils.ts

@@ -1,19 +1,22 @@
+import path from 'path';
+import { getCommit } from '@noodl/git/src/core/logs';
+import { FileStatusKind } from '@noodl/git/src/core/models/status';
+
+import { FeedbackType } from '@noodl-constants/FeedbackType';
+import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
 import {
   ProjectDiff,
   ProjectDiffItem,
   ProjectBasicDiffItem,
   ArrayDiff,
-  diffProject
+  diffProject,
+  createEmptyArrayDiff
 } from '@noodl-utils/projectmerger.diff';
 
-import { ProjectModel } from '../../../../models/projectmodel';
-
-import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
-import { FileStatusKind } from '@noodl/git/src/core/models/status';
 import { IconName } from '@noodl-core-ui/components/common/Icon';
 import { ListItemProps } from '@noodl-core-ui/components/layout/ListItem';
-import { FeedbackType } from '@noodl-constants/FeedbackType';
+
-import { getCommit } from '@noodl/git/src/core/logs';
+import { ProjectModel } from '../../../../models/projectmodel';
 
 export interface ProjectLocalDiff extends ProjectDiff {
   baseProject: TSFixme; //Project model as an object from raw json
@@ -84,9 +87,22 @@ export function getFileStatusIconProps(status: FileStatusKind): Partial<ListItem
   }
 }
 
-export async function doLocalDiff(repositoryPath: string, headCommitId: string): Promise<ProjectLocalDiff> {
+export function getProjectFilePath(repositoryPath: string, projectPath: string) {
-  const baseCommit = await getCommit(repositoryPath, headCommitId);
+  const relativePath = path.relative(repositoryPath, projectPath);
-  const baseProjectJson = await baseCommit.getFileAsString('project.json');
+  const projectFilePath = path.join(relativePath, 'project.json').replaceAll('\\', '/');
+  return projectFilePath;
+}
+
+export async function doLocalDiff(
+  repositoryPath: string,
+  projectPath: string,
+  headCommitId: string
+): Promise<ProjectLocalDiff> {
+  const projectFilePath = getProjectFilePath(repositoryPath, projectPath);
+
+  try {
+    const baseCommit = await getCommit(projectPath, headCommitId);
+    const baseProjectJson = await baseCommit.getFileAsString(projectFilePath);
     const baseProject = JSON.parse(baseProjectJson);
     applyPatches(baseProject);
 
@@ -97,4 +113,23 @@ export async function doLocalDiff(repositoryPath: string, headCommitId: string):
       baseProject,
       commitShaDiffedTo: headCommitId
     };
+  } catch (error) {
+    if (error.toString().includes('exists on disk, but not in')) {
+      console.warn('project.json does not exist in this commit.');
+    }
+
+    // Return empty state
+    return {
+      baseProject: {},
+      commitShaDiffedTo: headCommitId,
+      components: createEmptyArrayDiff(),
+      variants: createEmptyArrayDiff(),
+      settings: createEmptyArrayDiff(),
+      styles: {
+        colors: createEmptyArrayDiff(),
+        text: createEmptyArrayDiff()
+      },
+      cloudservices: createEmptyArrayDiff()
+    };
+  }
 }

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/index.tsx

@@ -8,6 +8,7 @@ import { Slot } from '@noodl-core-ui/types/global';
 import { doLocalDiff, ProjectLocalDiff } from './DiffUtils';
 import { useVersionControlFetch } from './fetch.context';
 import { BranchStatus, IVersionControlContext } from './types';
+import { ProjectModel } from '@noodl-models/projectmodel';
 
 const VersionControlContext = createContext<IVersionControlContext>({
   git: null,
@@ -57,7 +58,8 @@ export function VersionControlProvider({ git, children }: { git: Git; children:
     (async () => {
       const currentCommitSha = await git.getHeadCommitId();
       if (currentCommitSha) {
-        const diff = await doLocalDiff(git.repositoryPath, currentCommitSha);
+        const projectPath = ProjectModel.instance._retainedProjectDirectory;
+        const diff = await doLocalDiff(git.repositoryPath, projectPath, currentCommitSha);
         setLocalDiff(diff);
       }
     })();

packages/noodl-git/src/core/open.ts

@@ -22,7 +22,11 @@ export async function open(basePath: string): Promise<string> {
   //   console.log("VCS error when opening project: " + e);
   // }
 
-  return basePath;
+
+  // Find the relative git repository path
+  const repositoryPath = await getTopLevelWorkingDirectory(basePath);
+
+  return repositoryPath;
 }
 
 /**

packages/noodl-runtime/src/api/cloudstore.js

@@ -32,12 +32,15 @@ class CloudStore {
 
   _initCloudServices() {
     _collections = undefined; // clear collection cache, so it's refetched
-    const cloudServices = NoodlRuntime.instance.getMetaData('cloudservices');
 
+    const cloudServices = NoodlRuntime.instance.getMetaData('cloudservices');
     if (cloudServices) {
       this.appId = cloudServices.appId;
       this.endpoint = cloudServices.endpoint;
     }
+
+    const dbVersionMajor = NoodlRuntime.instance.getMetaData('dbVersionMajor');
+    this.dbVersionMajor = dbVersionMajor;
   }
 
   on() {
@@ -168,13 +171,10 @@ class CloudStore {
       return;
     }
 
-    if (options.where) args.push('match=' + encodeURIComponent(JSON.stringify(options.where)));
     if (options.limit) args.push('limit=' + options.limit);
     if (options.skip) args.push('skip=' + options.skip);
 
-    const grouping = {
+    const grouping = {};
-      objectId: null
-    };
 
     Object.keys(options.group).forEach((k) => {
       const _g = {};
@@ -188,7 +188,20 @@ class CloudStore {
       grouping[k] = _g;
     });
 
+    // I don't know which version the API was changed, lets just say above 4 for now.
+    if (this.dbVersionMajor && this.dbVersionMajor > 4) {
+      grouping._id = null;
+      
+      if (options.where) args.push('$match=' + encodeURIComponent(JSON.stringify(options.where)));
+
+      args.push('$group=' + JSON.stringify(grouping));
+    } else {
+      grouping.objectId = null;
+      
+      if (options.where) args.push('match=' + encodeURIComponent(JSON.stringify(options.where)));
+
       args.push('group=' + JSON.stringify(grouping));
+    }
 
     this._makeRequest('/aggregate/' + options.collection + (args.length > 0 ? '?' + args.join('&') : ''), {
       success: function (response) {

packages/noodl-runtime/src/nodes/std-library/stringformat.js

@@ -2,6 +2,8 @@ const StringFormatDefinition = {
   name: 'String Format',
   docs: 'https://docs.noodl.net/nodes/string-manipulation/string-format',
   category: 'String Manipulation',
+  usePortAsLabel: 'format',
+  portLabelTruncationMode: 'length',
   initialize() {
     const internal = this._internal;
     internal.format = '';

packages/noodl-viewer-react/src/components/controls/Button/Button.tsx

@@ -8,6 +8,8 @@ export interface ButtonProps extends Noodl.ReactProps {
   enabled: boolean;
   buttonType: 'button' | 'submit';
   
+  attrs: React.Attributes;
+
   textStyle: Noodl.TextStyle;
 
   useLabel: boolean;
@@ -96,6 +98,7 @@ export function Button(props: ButtonProps) {
 
   return (
     <button
+      {...props.attrs}
       className={className}
       disabled={!props.enabled}
       {...Utils.controlEvents(props)}

packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx

@@ -9,6 +9,8 @@ export interface CheckboxProps extends Noodl.ReactProps {
   enabled: boolean;
   checked: boolean;
 
+  attrs: React.Attributes;
+
   useLabel: boolean;
   label: string;
   labelSpacing: string;
@@ -47,6 +49,7 @@ export function Checkbox(props: CheckboxProps) {
   Layout.align(style, props);
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     className: [props.className, 'ndl-controls-checkbox-2'].join(' '),
     disabled: !props.enabled,

packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx

@@ -10,6 +10,8 @@ export interface RadioButtonProps extends Noodl.ReactProps {
   enabled: boolean;
   value: string;
 
+  attrs: React.Attributes;
+
   useLabel: boolean;
   label: string;
   labelSpacing: string;
@@ -47,6 +49,7 @@ export function RadioButton(props: RadioButtonProps) {
   props.checkedChanged && props.checkedChanged(radioButtonGroup ? radioButtonGroup.selected === props.value : false);
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     disabled: !props.enabled,
     className: [props.className, 'ndl-controls-radio-2'].join(' '),

packages/noodl-viewer-react/src/components/controls/Select/Select.tsx

@@ -12,6 +12,8 @@ export interface SelectProps extends Noodl.ReactProps {
   textStyle: Noodl.TextStyle;
   items: TSFixme;
 
+  attrs: React.Attributes;
+
   placeholder: string;
   placeholderOpacity: string;
 
@@ -81,6 +83,7 @@ export function Select(props: SelectProps) {
   }
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     className: props.className,
     style: {

packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx

@@ -9,6 +9,8 @@ export interface SliderProps extends Noodl.ReactProps {
   id: string;
   enabled: boolean;
 
+  attrs: React.Attributes;
+
   value: number;
   min: number;
   max: number;
@@ -103,6 +105,7 @@ export function Slider(props: SliderProps) {
   const className = `ndl-controls-range2 ${instanceClassId} ${props.className ? props.className : ''} `;
 
   const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+    ...props.attrs,
     id: props.id,
     style: {
       width: '100%',

packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx

@@ -17,6 +17,8 @@ export interface TextInputProps extends Noodl.ReactProps {
   type: 'text' | 'textArea' | 'email' | 'number' | 'password' | 'url';
   textStyle: Noodl.TextStyle;
 
+  attrs: React.Attributes;
+
   enabled: boolean;
 
   placeholder: string;
@@ -149,6 +151,7 @@ export class TextInput extends React.Component<TextInputProps, State> {
     inputStyles.color = props.noodlNode.context.styles.resolveColor(inputStyles.color);
 
     const inputProps = {
+      ...props.attrs,
       id: props.id,
       value: this.state.value,
       ...Utils.controlEvents(props),

packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx

@@ -7,6 +7,8 @@ export interface ColumnsProps extends Noodl.ReactProps {
   marginX: string;
   marginY: string;
 
+  attrs: React.Attributes;
+
   justifyContent: 'flex-start' | 'flex-end' | 'center';
   direction: 'row' | 'column';
   minWidth: string;
@@ -115,7 +117,10 @@ export function Columns(props: ColumnsProps) {
 
   // ForEachCompoent breaks the layout but is needed to send onMount/onUnmount
   if (!Array.isArray(props.children)) {
-    children = [props.children];
+    // @ts-expect-error props.children.type is any
+    if (props.children.type !== ForEachComponent) {
+      children = [props.children]
+    }
   } else {
     children = props.children.filter((child) => child.type !== ForEachComponent);
     forEachComponent = props.children.find((child) => child.type === ForEachComponent);
@@ -123,9 +128,11 @@ export function Columns(props: ColumnsProps) {
 
   return (
     <div
+      {...props.attrs}
       className={['columns-container', props.className].join(' ')}
       ref={containerRef}
       style={{
+        visibility: containerWidth === null ? "hidden" : "visible",
         marginTop: parseFloat(props.marginY) * -1,
         marginLeft: parseFloat(props.marginX) * -1,
         display: 'flex',

packages/noodl-viewer-react/src/components/visual/Group/Group.tsx

@@ -19,6 +19,8 @@ BScroll.use(Slide);
 export interface GroupProps extends Noodl.ReactProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
 
+  attrs: React.Attributes;
+
   scrollSnapEnabled: boolean;
   showScrollbar: boolean;
   scrollEnabled: boolean;
@@ -271,6 +273,7 @@ export class Group extends React.Component<GroupProps> {
       <Component
         // @ts-expect-error Lets hope that the type passed here is always static!
         className={props.className}
+        {...props.attrs}
         {...props.dom}
         {...PointerListeners(props)}
         style={style}

packages/noodl-viewer-react/src/components/visual/Image/Image.tsx

@@ -10,6 +10,7 @@ export interface ImageProps extends Noodl.ReactProps {
     src: string;
     onLoad?: () => void;
   };
+  attrs: React.Attributes;
 }
 
 export function Image(props: ImageProps) {
@@ -30,5 +31,5 @@ export function Image(props: ImageProps) {
     }
   }
 
-  return <img className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
+  return <img {...props.attrs} className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
 }

packages/noodl-viewer-react/src/components/visual/Text/Text.tsx

@@ -7,6 +7,8 @@ import { Noodl } from '../../../types';
 export interface TextProps extends Noodl.ReactProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
 
+  attrs: React.Attributes;
+
   textStyle: Noodl.TextStyle;
   text: string;
 
@@ -48,6 +50,7 @@ export function Text(props: TextProps) {
   return (
     <Component
       className={['ndl-visual-text', props.className].join(' ')}
+      {...props.attrs}
       {...props.dom}
       {...PointerListeners(props)}
       style={style}

packages/noodl-viewer-react/src/nodes/controls/button.ts

@@ -30,11 +30,24 @@ const ButtonNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.layout = 'row'; //Used to tell child nodes what layout to expect
   },
   getReactComponent() {
     return Button;
   },
+  inputs: {
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
+    }
+  },
   inputCss: {
     backgroundColor: {
       index: 100,

packages/noodl-viewer-react/src/nodes/controls/checkbox.ts

@@ -31,6 +31,7 @@ const CheckBoxNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'explicit';
     this.props.id = 'input-' + guid();
     this.props.checked = this._internal.checked = false;
@@ -94,6 +95,16 @@ const CheckBoxNode = {
         this.flagOutputDirty('checked');
         this._updateVisualState();
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputCss: {

packages/noodl-viewer-react/src/nodes/controls/options.ts

@@ -31,6 +31,7 @@ const OptionsNode = {
     ]
   },
   initialize: function () {
+    this.props.attrs = {};
     this._itemsChanged = () => {
       this.forceUpdate();
     };
@@ -90,6 +91,16 @@ const OptionsNode = {
           this.flagOutputDirty('value');
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {

packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts

@@ -31,6 +31,7 @@ const RadioButtonNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'explicit';
     this.props.id = 'input-' + guid();
 
@@ -61,6 +62,16 @@ const RadioButtonNode = {
       set(value) {
         this.setStyle({ backgroundColor: value }, 'fill');
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {

packages/noodl-viewer-react/src/nodes/controls/slider.ts

@@ -27,6 +27,7 @@ const RangeNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'contentHeight';
     this.props.id = 'input-' + guid();
 
@@ -67,6 +68,16 @@ const RangeNode = {
       set(value) {
         this._setInputValue(value);
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   outputs: {

packages/noodl-viewer-react/src/nodes/controls/text-input.ts

@@ -43,6 +43,7 @@ const TextInputNode = {
     return TextInput;
   },
   initialize() {
+    this.props.attrs = {};
     this.props.startValue = '';
     this.props.id = this._internal.controlId = 'input-' + guid();
   },
@@ -167,6 +168,16 @@ const TextInputNode = {
             break;
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputCss: {

packages/noodl-viewer-react/src/nodes/std-library/openfilepicker.js

@@ -43,6 +43,10 @@ const OpenFilePicker = {
 
         input.accept = this._internal.acceptedFileTypes;
 
+        if (this._internal.capture) {
+          input.capture = this._internal.capture;
+        }
+
         input.onchange = onChange;
         input.click();
       }
@@ -54,6 +58,14 @@ const OpenFilePicker = {
       set(value) {
         this._internal.acceptedFileTypes = value;
       }
+    },
+    capture: {
+      group: 'General',
+      type: 'string',
+      displayName: 'Capture',
+      set(value) {
+        this._internal.capture = value;
+      }
     }
   },
   outputs: {

packages/noodl-viewer-react/src/nodes/std-library/switch.js

@@ -4,7 +4,7 @@ const Switch = {
   name: 'Switch',
   docs: 'https://docs.noodl.net/nodes/logic/switch',
   category: 'Logic',
-  initialize: function () {
+  initialize() {
     this._internal.state = false;
     this._internal.initialized = false;
   },
@@ -15,7 +15,7 @@ const Switch = {
     on: {
       displayName: 'On',
       group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         if (this._internal.state === true) {
           return;
         }
@@ -27,7 +27,7 @@ const Switch = {
     off: {
       displayName: 'Off',
       group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         if (this._internal.state === false) {
           return;
         }
@@ -39,7 +39,7 @@ const Switch = {
     flip: {
       displayName: 'Flip',
       group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         this._internal.state = !this._internal.state;
         this.flagOutputDirty('state');
         this.emitSignals();
@@ -50,7 +50,7 @@ const Switch = {
       displayName: 'State',
       group: 'General',
       default: false,
-      set: function (value) {
+      set(value) {
         this._internal.state = !!value;
         this.flagOutputDirty('state');
         this.emitSignals();
@@ -61,10 +61,15 @@ const Switch = {
     state: {
       type: 'boolean',
       displayName: 'Current State',
-      getter: function () {
+      getter() {
         return this._internal.state;
       }
     },
+    switched: {
+      displayName: 'Switched',
+      type: 'signal',
+      group: 'Signals'
+    },
     switchedToOn: {
       displayName: 'Switched To On',
       type: 'signal',
@@ -77,12 +82,13 @@ const Switch = {
     }
   },
   prototypeExtensions: {
-    emitSignals: function () {
+    emitSignals() {
       if (this._internal.state === true) {
         this.sendSignalOnOutput('switchedToOn');
       } else {
         this.sendSignalOnOutput('switchedToOff');
       }
+      this.sendSignalOnOutput('switched');
     }
   }
 };

packages/noodl-viewer-react/src/nodes/std-library/user/login.js

@@ -1,18 +1,13 @@
 'use strict';
 
-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');
 
-var LoginNodeDefinition = {
+const LoginNodeDefinition = {
   name: 'net.noodl.user.LogIn',
   docs: 'https://docs.noodl.net/nodes/data/user/log-in',
   displayNodeName: 'Log In',
   category: 'Cloud Services',
   color: 'data',
-  initialize: function () {
-    var internal = this._internal;
-  },
-  getInspectInfo() {},
   outputs: {
     success: {
       type: 'signal',
@@ -28,7 +23,7 @@ var LoginNodeDefinition = {
       type: 'string',
       displayName: 'Error',
       group: 'Error',
-      getter: function () {
+      getter() {
         return this._internal.error;
       }
     }
@@ -37,7 +32,7 @@ var LoginNodeDefinition = {
     login: {
       displayName: 'Do',
       group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         this.scheduleLogIn();
       }
     },
@@ -45,7 +40,7 @@ var LoginNodeDefinition = {
       displayName: 'Username',
       type: 'string',
       group: 'General',
-      set: function (value) {
+      set(value) {
         this._internal.username = value;
       }
     },
@@ -53,13 +48,13 @@ var LoginNodeDefinition = {
       displayName: 'Password',
       type: 'string',
       group: 'General',
-      set: function (value) {
+      set(value) {
         this._internal.password = value;
       }
     }
   },
   methods: {
-    setError: function (err) {
+    setError(err) {
       this._internal.error = err;
       this.flagOutputDirty('error');
       this.sendSignalOnOutput('failure');
@@ -76,9 +71,7 @@ var LoginNodeDefinition = {
         this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
       }
     },
-    scheduleLogIn: function () {
+    scheduleLogIn() {
-      const internal = this._internal;
-
       if (this.logInScheduled === true) return;
       this.logInScheduled = true;
 
@@ -100,89 +93,7 @@ var LoginNodeDefinition = {
   }
 };
 
-/*function updatePorts(nodeId, parameters, editorConnection, dbCollections) {
-    var ports = [];
-
-    ports.push({
-        name: 'collectionName',
-        displayName: "Class",
-        group: "General",
-        type: { name: 'enum', enums: (dbCollections !== undefined) ? dbCollections.map((c) => { return { value: c.name, label: c.name } }) : [], allowEditOnly: true },
-        plug: 'input'
-    })
-
-    if (parameters.collectionName && dbCollections) {
-        // Fetch ports from collection keys
-        var c = dbCollections.find((c) => c.name === parameters.collectionName);
-        if (c && c.schema && c.schema.properties) {
-            var props = c.schema.properties;
-            for (var key in props) {
-                var p = props[key];
-                if (ports.find((_p) => _p.name === key)) continue;
-
-                if(p.type === 'Relation') { 
-                    
-                }
-                else { // Other schema type ports
-                    const _typeMap = {
-                        "String":"string",
-                        "Boolean":"boolean",
-                        "Number":"number",
-                        "Date":"date"
-                    }
-
-                    ports.push({
-                        type: {
-                            name: _typeMap[p.type]?_typeMap[p.type]:'*',
-                        },
-                        plug: 'output',
-                        group: 'Properties',
-                        name: 'prop-' + key,
-                        displayName: key,
-                    })
-
-                    ports.push({
-                        type: 'signal',
-                        plug: 'output',
-                        group: 'Changed Events',
-                        displayName: key+ ' Changed',
-                        name: 'changed-' + key,
-                    })
-                }
-            }
-        }
-    }
-
-     editorConnection.sendDynamicPorts(nodeId, ports);
-}*/
-
 module.exports = {
   node: LoginNodeDefinition,
-  setup: function (context, graphModel) {
+  setup(_context, _graphModel) {}
-    /* if (!context.editorConnection || !context.editorConnection.isRunningLocally()) {
-            return;
-        }
-
-        function _managePortsForNode(node) {
-            updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('dbCollections'));
-
-            node.on("parameterUpdated", function (event) {
-                updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('dbCollections'));
-            });
-
-            graphModel.on('metadataChanged.dbCollections', function (data) {
-                updatePorts(node.id, node.parameters, context.editorConnection, data);
-            })
-        }
-
-        graphModel.on("editorImportComplete", ()=> {
-            graphModel.on("nodeAdded.DbModel2", function (node) {
-				_managePortsForNode(node)
-			})
-
-			for(const node of graphModel.getNodesWithType('DbModel2')) {
-				_managePortsForNode(node)
-			}
-        })*/
-  }
 };

packages/noodl-viewer-react/src/nodes/std-library/user/logout.js

@@ -1,18 +1,13 @@
 'use strict';
 
-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');
 
-var LogOutNodeDefinition = {
+const LogOutNodeDefinition = {
   name: 'net.noodl.user.LogOut',
   docs: 'https://docs.noodl.net/nodes/data/user/log-out',
   displayNodeName: 'Log Out',
   category: 'Cloud Services',
   color: 'data',
-  initialize: function () {
-    var internal = this._internal;
-  },
-  getInspectInfo() {},
   outputs: {
     success: {
       type: 'signal',
@@ -28,7 +23,7 @@ var LogOutNodeDefinition = {
       type: 'string',
       displayName: 'Error',
       group: 'Error',
-      getter: function () {
+      getter() {
         return this._internal.error;
       }
     }
@@ -37,13 +32,13 @@ var LogOutNodeDefinition = {
     login: {
       displayName: 'Do',
       group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         this.scheduleLogOut();
       }
     }
   },
   methods: {
-    setError: function (err) {
+    setError(err) {
       this._internal.error = err;
       this.flagOutputDirty('error');
       this.sendSignalOnOutput('failure');
@@ -60,9 +55,7 @@ var LogOutNodeDefinition = {
         this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
       }
     },
-    scheduleLogOut: function () {
+    scheduleLogOut() {
-      const internal = this._internal;
-
       if (this.logOutScheduled === true) return;
       this.logOutScheduled = true;
 
@@ -84,5 +77,5 @@ var LogOutNodeDefinition = {
 
 module.exports = {
   node: LogOutNodeDefinition,
-  setup: function (context, graphModel) {}
+  setup(_context, _graphModel) {}
 };

packages/noodl-viewer-react/src/nodes/std-library/user/signup.js

@@ -1,20 +1,17 @@
 'use strict';
 
-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');
 
-var SignUpNodeDefinition = {
+const SignUpNodeDefinition = {
   name: 'net.noodl.user.SignUp',
   docs: 'https://docs.noodl.net/nodes/data/user/sign-up',
   displayNodeName: 'Sign Up',
   category: 'Cloud Services',
   color: 'data',
-  initialize: function () {
+  initialize() {
-    var internal = this._internal;
+    const internal = this._internal;
-
     internal.userProperties = {};
   },
-  getInspectInfo() {},
   outputs: {
     success: {
       type: 'signal',
@@ -30,7 +27,7 @@ var SignUpNodeDefinition = {
       type: 'string',
       displayName: 'Error',
       group: 'Error',
-      getter: function () {
+      getter() {
         return this._internal.error;
       }
     }
@@ -39,7 +36,7 @@ var SignUpNodeDefinition = {
     signup: {
       displayName: 'Do',
       group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
         this.scheduleSignUp();
       }
     },
@@ -47,7 +44,7 @@ var SignUpNodeDefinition = {
       displayName: 'Username',
       type: 'string',
       group: 'General',
-      set: function (value) {
+      set(value) {
         this._internal.username = value;
       }
     },
@@ -55,7 +52,7 @@ var SignUpNodeDefinition = {
       displayName: 'Password',
       type: 'string',
       group: 'General',
-      set: function (value) {
+      set(value) {
         this._internal.password = value;
       }
     },
@@ -63,13 +60,13 @@ var SignUpNodeDefinition = {
       displayName: 'Email',
       type: 'string',
       group: 'General',
-      set: function (value) {
+      set(value) {
         this._internal.email = value;
       }
     }
   },
   methods: {
-    setError: function (err) {
+    setError(err) {
       this._internal.error = err;
       this.flagOutputDirty('error');
       this.sendSignalOnOutput('failure');
@@ -86,7 +83,7 @@ var SignUpNodeDefinition = {
         this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
       }
     },
-    scheduleSignUp: function () {
+    scheduleSignUp() {
       const internal = this._internal;
 
       if (this.signUpScheduled === true) return;
@@ -109,23 +106,24 @@ var SignUpNodeDefinition = {
         });
       });
     },
-    setUserProperty: function (name, value) {
+    setUserProperty(name, value) {
       this._internal.userProperties[name] = value;
     },
-    registerInputIfNeeded: function (name) {
+    registerInputIfNeeded(name) {
       if (this.hasInput(name)) {
         return;
       }
 
-      if (name.startsWith('prop-'))
+      if (name.startsWith('prop-')) {
         return this.registerInput(name, {
           set: this.setUserProperty.bind(this, name.substring('prop-'.length))
         });
       }
     }
+  }
 };
 
-function updatePorts(nodeId, parameters, editorConnection, systemCollections) {
+function updatePorts(nodeId, _parameters, editorConnection, systemCollections) {
   var ports = [];
 
   if (systemCollections) {
@@ -169,7 +167,7 @@ function updatePorts(nodeId, parameters, editorConnection, systemCollections) {
 
 module.exports = {
   node: SignUpNodeDefinition,
-  setup: function (context, graphModel) {
+  setup(context, graphModel) {
     if (!context.editorConnection || !context.editorConnection.isRunningLocally()) {
       return;
     }
@@ -177,7 +175,7 @@ module.exports = {
     function _managePortsForNode(node) {
       updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('systemCollections'));
 
-      node.on('parameterUpdated', function (event) {
+      node.on('parameterUpdated', function (_event) {
         updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('systemCollections'));
       });
 

packages/noodl-viewer-react/src/nodes/visual/columns.js

@@ -23,7 +23,7 @@ const ColumnsNode = {
     ]
   },
 
-  initialize() {
+  initialize() {    this.props.attrs = {};
     this.props.layoutString = '1 2 1';
     this.props.minWidth = 0;
     this.props.marginX = 16;
@@ -62,6 +62,16 @@ const ColumnsNode = {
           );
         }
 
+        this.forceUpdate();
+      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
         this.forceUpdate();
       }
     }

packages/noodl-viewer-react/src/nodes/visual/group.js

@@ -11,6 +11,7 @@ const GroupNode = {
     groupPriority: ['General', 'Style', 'Events', 'Mounted', 'Hover Events', 'Pointer Events', 'Focus', 'Scroll']
   },
   initialize() {
+    this.props.attrs = {};
     this._internal = {
       scrollElementDuration: 500,
       scrollIndexDuration: 500,
@@ -143,6 +144,16 @@ const GroupNode = {
       valueChangedToTrue() {
         this.context.setNodeFocused(this, true);
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {

packages/noodl-viewer-react/src/nodes/visual/image.js

@@ -27,6 +27,7 @@ const ImageNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.default = '';
   },
   getReactComponent() {
@@ -86,6 +87,16 @@ const ImageNode = {
         this.props.dom.src = getAbsoluteUrl(url);
         this.forceUpdate();
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {
@@ -114,6 +125,12 @@ const ImageNode = {
       propPath: 'dom',
       type: 'signal',
       group: 'Events'
+    },
+    onError: {
+      displayName: 'On Error',
+      propPath: 'dom',
+      type: 'signal',
+      group: 'Events'
     }
   }
 };

packages/noodl-viewer-react/src/nodes/visual/text.js

@@ -20,6 +20,9 @@ const TextNode = {
   nodeDoubleClickAction: {
     focusPort: 'text'
   },
+  initialize() {
+    this.props.attrs = {};
+  },
   getReactComponent() {
     return Text;
   },
@@ -135,6 +138,16 @@ const TextNode = {
             break;
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   }
 };

scripts/noodl-editor/build-editor.ts

@@ -73,17 +73,17 @@ import { getCurrentPlatform } from '../helper';
   //       It basically means that some package is not relative to this path.
   console.log("--- Run 'npm install' ...");
 
-  if (platform === "darwin") {
+  if (platform === 'darwin') {
     execSync(`npm install electron-notarize`, {
       stdio: 'inherit',
       env: process.env
-    })
+    });
   }
 
-  execSync(`npm install --arch=${arch} --scope noodl-editor`, {
+  execSync(`npm install --arch=${arch} --scope fluxscape-editor`, {
     stdio: 'inherit',
     env: process.env
-  })
+  });
   console.log("--- 'npm install' done!");
 
   // NOTE: npm install --arch=  does this too
@@ -99,13 +99,13 @@ import { getCurrentPlatform } from '../helper';
   // Build: Replace "dugite"
   // Build: Replace "desktop-trampoline"
   console.log("--- Run 'npm run build' ...");
-  execSync('npx lerna exec --scope noodl-editor -- npm run build', {
+  execSync('npx lerna exec --scope fluxscape-editor -- npm run build', {
     stdio: 'inherit',
     env: {
       ...process.env,
       TARGET_PLATFORM,
       DISABLE_SIGNING,
-      CSC_NAME,
+      CSC_NAME
     }
   });
   console.log("--- 'npm run build' done!");

scripts/start.ts

@@ -74,7 +74,7 @@ const cloudRuntimeProcess = attachStdio(
   }
 );
 
-const editorProcess = attachStdio(exec('npx lerna exec --scope noodl-editor -- npm run start', processOptions), {
+const editorProcess = attachStdio(exec('npx lerna exec --scope fluxscape-editor -- npm run start', processOptions), {
   prefix: 'Editor',
   color: ConsoleColor.FgCyan
 });

scripts/test-editor.ts

@@ -1,36 +1,27 @@
-import path from "path";
+import { execSync } from 'child_process';
-import { execSync } from "child_process";
+import path from 'path';
 
-const CWD = path.join(__dirname, "..");
+const CWD = path.join(__dirname, '..');
-const LOCAL_GIT_DIRECTORY = path.join(
+const LOCAL_GIT_DIRECTORY = path.join(__dirname, '..', 'node_modules', 'dugite', 'git');
-  __dirname,
-  "..",
-  "node_modules",
-  "dugite",
-  "git"
-);
 const LOCAL_GIT_TRAMPOLINE_DIRECTORY = path.join(
   __dirname,
-  "..",
+  '..',
-  "node_modules",
+  'node_modules',
-  "desktop-trampoline/build/Release/desktop-trampoline"
+  'desktop-trampoline/build/Release/desktop-trampoline'
 );
 
-console.log("---");
+console.log('---');
 console.log(`> CWD: `, CWD);
 console.log(`> LOCAL_GIT_DIRECTORY: `, LOCAL_GIT_DIRECTORY);
-console.log(
+console.log(`> LOCAL_GIT_TRAMPOLINE_DIRECTORY: `, LOCAL_GIT_TRAMPOLINE_DIRECTORY);
-  `> LOCAL_GIT_TRAMPOLINE_DIRECTORY: `,
+console.log('---');
-  LOCAL_GIT_TRAMPOLINE_DIRECTORY
-);
-console.log("---");
 
-execSync("npx lerna exec --scope noodl-editor -- npm run test", {
+execSync('npx lerna exec --scope fluxscape-editor -- npm run test', {
   cwd: CWD,
-  stdio: "inherit",
+  stdio: 'inherit',
   env: {
     ...process.env,
     LOCAL_GIT_DIRECTORY,
-    LOCAL_GIT_TRAMPOLINE_DIRECTORY,
+    LOCAL_GIT_TRAMPOLINE_DIRECTORY
-  },
+  }
 });