fix(runtime): Base URL with Script node external file

feat(editor): Deploy popup always mounted (#51 )
This removes the delayed loading when opening the deploy popup
2026-01-11 14:52:54 +01:00 · 2024-07-15 15:19:15 +02:00 · 2024-07-08 12:47:28 +02:00 · 2024-07-08 09:35:18 +02:00 · 2024-07-08 08:09:39 +02:00 · 2024-07-08 08:06:47 +02:00
51 changed files with 504 additions and 205 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -2849,9 +2849,9 @@
      }
    },
    "node_modules/@electron/remote": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
      "peerDependencies": {
        "electron": ">= 13.0.0"
      }
@@ -25220,13 +25220,13 @@
      }
    },
    "node_modules/electron": {
-      "version": "28.1.4",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "version": "31.1.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
+      "integrity": "sha512-TBOwqLxSxnx6+pH6GMri7R3JPH2AkuGJHfWZS0p1HsmN+Qr1T9b0IRJnnehSd/3NZAmAre4ft9Ljec7zjyKFJA==",
      "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,
@@ -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,
@@ -48969,7 +48982,7 @@
    "packages/noodl-editor": {
      "version": "1.0.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 +49038,7 @@
        "babel-loader": "^8.2.4",
        "concurrently": "^7.4.0",
        "css-loader": "^6.7.1",
-        "electron": "28.1.4",
+        "electron": "^31.1.0",
        "electron-builder": "^24.9.1",
        "file-loader": "^6.2.0",
        "html-loader": "^3.1.0",
@@ -53375,9 +53388,9 @@
      }
    },
    "@electron/remote": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
      "requires": {}
    },
    "@electron/universal": {
@@ -74057,13 +74070,23 @@
      }
    },
    "electron": {
-      "version": "28.1.4",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "version": "31.1.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
+      "integrity": "sha512-TBOwqLxSxnx6+pH6GMri7R3JPH2AkuGJHfWZS0p1HsmN+Qr1T9b0IRJnnehSd/3NZAmAre4ft9Ljec7zjyKFJA==",
      "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": {
@@ -80988,7 +81011,7 @@
      "requires": {
        "@babel/core": "^7.19.1",
        "@babel/preset-react": "^7.18.6",
-        "@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",
@@ -81017,7 +81040,7 @@
        "css-loader": "^6.7.1",
        "diff3": "0.0.4",
        "dmg-license": "^1.0.11",
-        "electron": "28.1.4",
+        "electron": "^31.1.0",
        "electron-builder": "^24.9.1",
        "electron-store": "^8.1.0",
        "electron-updater": "^6.1.7",
@@ -86403,6 +86426,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
--- a/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
+++ b/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);
  }
--- a/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.tsx
+++ b/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}
--- a/packages/noodl-editor/package.json
+++ b/packages/noodl-editor/package.json
@@ -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.1.0",
    "electron-builder": "^24.9.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
--- a/packages/noodl-editor/src/assets/images/getting-started-docs.png
+++ b/packages/noodl-editor/src/assets/images/getting-started-docs.png
--- a/packages/noodl-editor/src/assets/images/getting-started-vid-tuts.png
+++ b/packages/noodl-editor/src/assets/images/getting-started-vid-tuts.png
--- a/packages/noodl-editor/src/assets/images/ic_back.png
+++ b/packages/noodl-editor/src/assets/images/ic_back.png
--- a/packages/noodl-editor/src/assets/images/ic_logo.png
+++ b/packages/noodl-editor/src/assets/images/ic_logo.png
--- a/packages/noodl-editor/src/assets/images/import-icon.png
+++ b/packages/noodl-editor/src/assets/images/import-icon.png
--- a/packages/noodl-editor/src/assets/images/outline-cloud_done-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/personal.png
+++ b/packages/noodl-editor/src/assets/images/personal.png
--- a/packages/noodl-editor/src/assets/images/sharp-add-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/sharp-input-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/sharp-library_books-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/sharp-list-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/sharp-settings-24px.svg
+++ b/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>
--- a/packages/noodl-editor/src/assets/images/start.png
+++ b/packages/noodl-editor/src/assets/images/start.png
--- a/packages/noodl-editor/src/assets/images/workspace.png
+++ b/packages/noodl-editor/src/assets/images/workspace.png
--- a/packages/noodl-editor/src/editor/src/utils/LocalProjectsModel.ts
+++ b/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 the git folder exists.
-    const gitPath = filesystem.join(project._retainedProjectDirectory, '.git');
-    return filesystem.exists(gitPath);
+  /**
+   * Check if this project is in a git repository.
+   *
+   * @param project 
+   * @returns 
+   */
+  async isGitProject(project: ProjectModel): Promise<boolean> {
+    const gitPath = await getTopLevelWorkingDirectory(project._retainedProjectDirectory);
+    return gitPath !== null;
  }

  setCurrentGlobalGitAuth(projectId: string) {
--- a/packages/noodl-editor/src/editor/src/utils/projectmerger.diff.ts
+++ b/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;
--- a/packages/noodl-editor/src/editor/src/utils/schemahandler.ts
+++ b/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(
@@ -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);
      }
    }
  }
--- a/packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx
+++ b/packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx
@@ -1,5 +1,6 @@
-import { usePluginContext } from '@noodl-contexts/PluginContext';
-import React, { RefObject, useEffect, useRef } from 'react';
+import React, { RefObject } 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/'
-  return <iframe src="https://portal.fluxscape.io" style={{ width: "100%", height: "50vh", borderStyle: "none" }} />;
+  const params = {};
+
+  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' }}
+    />
+  );
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
+++ b/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(() => {
-    if (isGitProject) {
-      createGit();
-    }
-  }, [isGitProject]);
+    LocalProjectsModel.instance
+      .isGitProject(ProjectModel.instance)
+      .then(async (isGitProject) => {
+        if (isGitProject) {
+          await createGit();
+          setState('loaded');
+        } else {
+          setState('not-git');
+        }
+      });
+  }, []);

  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>
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/CommitChangesDiff.tsx
+++ b/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;
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/DiffList.tsx
+++ b/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) : [];
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/DiffUtils.ts
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/DiffUtils.ts
@@ -1,21 +1,24 @@
+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 { IconName } from '@noodl-core-ui/components/common/Icon';
+import { ListItemProps } from '@noodl-core-ui/components/layout/ListItem';
+
 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';
-
-export interface ProjectLocalDiff extends ProjectDiff{
+export interface ProjectLocalDiff extends ProjectDiff {
  baseProject: TSFixme; //Project model as an object from raw json
  commitShaDiffedTo: string;
 }
@@ -84,17 +87,49 @@ export function getFileStatusIconProps(status: FileStatusKind): Partial<ListItem
  }
 }

-export async function doLocalDiff(repositoryPath: string, headCommitId: string): Promise<ProjectLocalDiff> {
-  const baseCommit = await getCommit(repositoryPath, headCommitId);
-  const baseProjectJson = await baseCommit.getFileAsString('project.json');
-  const baseProject = JSON.parse(baseProjectJson);
-  applyPatches(baseProject);
-
-  const diff = diffProject(baseProject, ProjectModel.instance.toJSON());
-
-  return {
-    ...diff,
-    baseProject,
-    commitShaDiffedTo: headCommitId
-  };
+export function getProjectFilePath(repositoryPath: string, projectPath: string) {
+  const relativePath = path.relative(repositoryPath, projectPath);
+  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);
+
+    const diff = diffProject(baseProject, ProjectModel.instance.toJSON());
+
+    return {
+      ...diff,
+      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()
+    };
+  }
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/index.tsx
+++ b/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);
      }
    })();
--- a/packages/noodl-git/src/core/open.ts
+++ b/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;
 }

 /**
--- a/packages/noodl-runtime/src/api/cloudstore.js
+++ b/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 = {
-      objectId: null
-    };
+    const grouping = {};

    Object.keys(options.group).forEach((k) => {
      const _g = {};
@@ -188,7 +188,20 @@ class CloudStore {
      grouping[k] = _g;
    });

-    args.push('group=' + JSON.stringify(grouping));
+    // 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) {
--- a/packages/noodl-runtime/src/nodes/std-library/stringformat.js
+++ b/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 = '';
--- a/packages/noodl-runtime/src/utils.js
+++ b/packages/noodl-runtime/src/utils.js
@@ -1,15 +1,14 @@
 //this just assumes the base url is '/' always
 function getAbsoluteUrl(_url) {
-
  //convert to string in case the _url is a Cloud File (which is an object with a custom toString())
  const url = String(_url);

  //only add a the base url if this is a local URL (e.g. not a https url or  base64 string)
-  if (!url || url[0] === "/" || url.includes("://") || url.startsWith('data:')) {
+  if (!url || url[0] === '/' || url.includes('://') || url.startsWith('data:')) {
    return url;
  }

-  return (Noodl.baseUrl || '/') + url;
+  return (Noodl.Env['BaseUrl'] || '/') + url;
 }

 /**
--- a/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
+++ b/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)}
--- a/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
+++ b/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,
--- a/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
+++ b/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(' '),
--- a/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
+++ b/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: {
--- a/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
+++ b/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%',
--- a/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
+++ b/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),
--- a/packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx
+++ b/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,6 +128,7 @@ export function Columns(props: ColumnsProps) {

  return (
    <div
+      {...props.attrs}
      className={['columns-container', props.className].join(' ')}
      ref={containerRef}
      style={{
--- a/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
+++ b/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}
--- a/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
+++ b/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} />;
 }
--- a/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
+++ b/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}
--- a/packages/noodl-viewer-react/src/nodes/controls/button.ts
+++ b/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,
--- a/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/controls/options.ts
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/controls/slider.ts
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/visual/columns.js
+++ b/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();
      }
    }
--- a/packages/noodl-viewer-react/src/nodes/visual/group.js
+++ b/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: {
--- a/packages/noodl-viewer-react/src/nodes/visual/image.js
+++ b/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'
    }
  }
 };
--- a/packages/noodl-viewer-react/src/nodes/visual/text.js
+++ b/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();
+      }
    }
  }
 };
Author	SHA1	Message	Date
Eric Tuvesson	0668d0e928	fix(runtime): Base URL with Script node external file	2024-07-15 15:19:15 +02:00
Eric Tuvesson	d61effc615	feat(editor): Deploy popup always mounted (#51 ) This removes the delayed loading when opening the deploy popup	2024-07-08 12:47:28 +02:00
Eric Tuvesson	12be6dc69f	feat(editor): Upgrade electron (#50 )	2024-07-08 09:35:18 +02:00
Eric Tuvesson	17e3d16436	chore: clean up editor assets (#12 )	2024-07-08 08:09:39 +02:00
Eric Tuvesson	233479a1bc	feat: Add Support for Parse Server v7 (#20 ) * feat: Upgrade Aggregate queries to latest Parse API * feat: Save parse server major version in metadata This can be used to determine which version of the Parse API that will be used. * fix: Add support for both versions of aggregate queries	2024-07-08 08:06:47 +02:00
Eric Tuvesson	57e5246022	feat(runtime): Add default label to String Format node (#49 ) Update the String Format node default label to show the format, like how the other nodes work.	2024-07-04 15:54:20 +02:00
Eric Tuvesson	dda22e0de6	feat(runtime): Add Image node output "On Error" signal (#48 ) "On Error" is triggered when the image is not loading correctly, making it possible to hide the Image node or show a placeholder instead.	2024-07-04 14:02:34 +02:00
Eric Tuvesson	618955e1ee	feat: Portal include Project ID (#47 )	2024-06-28 00:43:34 +02:00
Eric Tuvesson	8c7d4faeca	fix(runtime): Column node added a div with empty Repeater (#45 ) When the Column node only had an empty Repeater child, there was an empty HTML element.	2024-06-27 21:16:50 +02:00
Eric Tuvesson	c5754c9160	feat(runtime): Add "data-testId" attribute to Columns node (#44 )	2024-06-27 15:42:25 +02:00
Eric Tuvesson	3fb3668fc3	feat: Allow relative git repository (#41 )	2024-06-26 21:11:50 +02:00
Eric Tuvesson	fa282d6169	feat(runtime): Add "data-testid" attributes to UI nodes (#42 )	2024-06-26 21:08:01 +02:00
				`@@ -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>
				`@@ -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>`