From 4345acbfd3c1b9866d1422cacd537d6b61071008 Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Mon, 8 Apr 2024 13:33:49 +0200
Subject: [PATCH] chore: removed uuid dependency

Related to #1103
---
 package-lock.json                               | 10 +++++-----
 packages/form-js-viewer/package.json            |  3 +--
 .../components/form-fields/JSFunctionField.js   | 17 +++++++++++------
 .../form-fields/JSFunctionField.spec.js         |  1 +
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 98b59cf86..68ea4179d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21199,6 +21199,7 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
       "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "dev": true,
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
@@ -22008,8 +22009,7 @@
         "lodash": "^4.5.0",
         "marked": "^12.0.1",
         "min-dash": "^4.2.1",
-        "preact": "^10.5.14",
-        "uuid": "^9.0.1"
+        "preact": "^10.5.14"
       }
     },
     "packages/form-js-viewer/node_modules/big.js": {
@@ -23587,8 +23587,7 @@
         "lodash": "^4.5.0",
         "marked": "^12.0.1",
         "min-dash": "^4.2.1",
-        "preact": "^10.5.14",
-        "uuid": "^9.0.1"
+        "preact": "^10.5.14"
       },
       "dependencies": {
         "big.js": {
@@ -36871,7 +36870,8 @@
     "uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.3.0",
diff --git a/packages/form-js-viewer/package.json b/packages/form-js-viewer/package.json
index 281710f29..13626b83a 100644
--- a/packages/form-js-viewer/package.json
+++ b/packages/form-js-viewer/package.json
@@ -58,8 +58,7 @@
     "lodash": "^4.5.0",
     "marked": "^12.0.1",
     "min-dash": "^4.2.1",
-    "preact": "^10.5.14",
-    "uuid": "^9.0.1"
+    "preact": "^10.5.14"
   },
   "sideEffects": [
     "*.css"
diff --git a/packages/form-js-viewer/src/render/components/form-fields/JSFunctionField.js b/packages/form-js-viewer/src/render/components/form-fields/JSFunctionField.js
index 9433d3c25..8c60f4c4d 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/JSFunctionField.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/JSFunctionField.js
@@ -3,10 +3,16 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useExpressionEvaluation, useDeepCompareMemoize, usePrevious } from '../../hooks';
 import { isObject } from 'min-dash';
 import { isEqual } from 'lodash';
-import { v4 as uuidv4 } from 'uuid';
 
 export function JSFunctionField(props) {
-  const { field, onChange, value } = props;
+
+  const {
+    field,
+    onChange,
+    value,
+    domId
+  } = props;
+
   const {
     jsFunction: functionDefinition,
     functionParameters: paramsDefinition,
@@ -16,7 +22,6 @@ export function JSFunctionField(props) {
 
   const [ sandbox, setSandbox ] = useState(null);
   const [ hasRunLoad, setHasRunLoad ] = useState(false);
-  const [ iframeContainerId ] = useState(`fjs-sandbox-iframe-container_${uuidv4()}`);
   const iframeContainerRef = useRef(null);
 
   const paramsEval = useExpressionEvaluation(paramsDefinition);
@@ -103,7 +108,7 @@ export function JSFunctionField(props) {
   `;
 
     const _sandbox = Sandbox.create(hostAPI, {
-      frameContainer: `#${iframeContainerId}`,
+      frameContainer: `#${domId}`,
       frameClassName: 'fjs-sandbox-iframe'
     });
 
@@ -119,7 +124,7 @@ export function JSFunctionField(props) {
     return () => {
       _sandbox.destroy();
     };
-  }, [ clearValue, functionDefinition, iframeContainerId, safeSetValue, sandboxError ]);
+  }, [ clearValue, functionDefinition, domId, safeSetValue, sandboxError ]);
 
   const prevParams = usePrevious(params);
   const prevSandbox = usePrevious(sandbox);
@@ -151,7 +156,7 @@ export function JSFunctionField(props) {
   }, [ params, prevParams, sandbox, prevSandbox, field, computeOn, hasRunLoad, interval, clearValue, safeSetValue ]);
 
   return (
-    <div ref={ iframeContainerRef } id={ iframeContainerId } className="fjs-sandbox-iframe-container"></div>
+    <div ref={ iframeContainerRef } id={ domId } className="fjs-sandbox-iframe-container"></div>
   );
 }
 
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/JSFunctionField.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/JSFunctionField.spec.js
index bbe5e1f06..3b935a23c 100644
--- a/packages/form-js-viewer/test/spec/render/components/form-fields/JSFunctionField.spec.js
+++ b/packages/form-js-viewer/test/spec/render/components/form-fields/JSFunctionField.spec.js
@@ -154,6 +154,7 @@ function createJSFunctionField({ services, ...restOptions } = {}) {
       options={ options }>
       <JSFunctionField
         field={ options.field }
+        domId={ 'testId' }
         onChange={ options.onChange } />
     </MockFormContext>, {
       container: options.container || container.querySelector('.fjs-form')