chore: Update local randomUUID generation over crypto randomUUID (#2356)

OpenFn · Aug 7, 2024 · d0619f7 · d0619f7
1 parent 6d79aea
commit d0619f7
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git a/assets/dev-server/src/App.tsx b/assets/dev-server/src/App.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import WorkflowDiagram from '../../js/workflow-diagram/WorkflowDiagram'
 // import useStore from './store'
 import { createWorkflowStore } from '../../js/workflow-editor/store'
+import { randomUUID } from '../../js/common'
 import workflows from './workflows';
 import './main.css'
 import 'reactflow/dist/style.css';
@@ -95,7 +96,7 @@ export default () => {
   const addJob = useCallback(() => {
     const { add } = store.getState();
 
-    const newNodeId = crypto.randomUUID();
+    const newNodeId = randomUUID();
     add({
       jobs: [{
         id: newNodeId,

diff --git a/assets/js/common.js b/assets/js/common.js
@@ -13,3 +13,7 @@ export function initiateSaveAndRun(buttonElement) {
     );
   }
 }
+
+export function randomUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3'| '0x8')).toString(16))
+}
diff --git a/assets/js/workflow-diagram/useConnect.ts b/assets/js/workflow-diagram/useConnect.ts
@@ -4,11 +4,12 @@ import Connection from './edges/Connection';
 import { styleEdge } from './styles';
 import { Flow } from './types';
 import { WorkflowState } from '../workflow-editor/store';
+import { randomUUID } from '../common'
 import toWorkflow from './util/to-workflow';
 
 const generateEdgeDiff = (source: string, target: string) => {
   const newEdge = styleEdge({
-    id: crypto.randomUUID(),
+    id: randomUUID(),
     type: 'step',
     source,
     target,

diff --git a/assets/js/workflow-diagram/usePlaceholders.ts b/assets/js/workflow-diagram/usePlaceholders.ts
@@ -8,6 +8,7 @@ import { styleEdge } from './styles';
 import { Flow } from './types';
 import toWorkflow from './util/to-workflow';
 import type { WorkflowState } from '../workflow-editor/store';
+import { randomUUID } from '../common';
 import { DEFAULT_TEXT } from '../editor/Editor';
 
 // generates a placeholder node and edge as child of the parent
@@ -17,7 +18,7 @@ export const create = (parentNode: Flow.Node) => {
     edges: [],
   };
 
-  const targetId = crypto.randomUUID();
+  const targetId = randomUUID();
   newModel.nodes.push({
     id: targetId,
     type: 'placeholder',
@@ -37,7 +38,7 @@ export const create = (parentNode: Flow.Node) => {
 
   newModel.edges.push(
     styleEdge({
-      id: crypto.randomUUID(),
+      id: randomUUID(),
       type: 'step',
       source: parentNode.id,
       target: targetId,

diff --git a/assets/js/workflow-editor/index.ts b/assets/js/workflow-editor/index.ts
@@ -2,6 +2,7 @@
 import { DEFAULT_TEXT } from '../editor/Editor';
 import { PhoenixHook } from '../hooks/PhoenixHook';
 import { Lightning } from '../workflow-diagram/types';
+import { randomUUID } from '../common';
 import type { mount } from './component';
 import {
   Patch,
@@ -41,13 +42,13 @@ export type WorkflowEditorEntrypoint = PhoenixHook<
 const createNewWorkflow = () => {
   const triggers = [
     {
-      id: crypto.randomUUID(),
+      id: randomUUID(),
       type: 'webhook',
     },
   ];
   const jobs = [
     {
-      id: crypto.randomUUID(),
+      id: randomUUID(),
       name: 'New job',
       adaptor: '@openfn/language-common@latest',
       body: DEFAULT_TEXT,
@@ -56,7 +57,7 @@ const createNewWorkflow = () => {
 
   const edges = [
     {
-      id: crypto.randomUUID(),
+      id: randomUUID(),
       source_trigger_id: triggers[0].id,
       target_job_id: jobs[0].id,
       condition_type: 'always',

diff --git a/assets/js/workflow-editor/store.ts b/assets/js/workflow-editor/store.ts
@@ -3,6 +3,7 @@ import type { Patch as ImmerPatch } from 'immer';
 import { applyPatches, enablePatches, produce } from 'immer';
 import { createStore } from 'zustand';
 import type { Lightning } from '../workflow-diagram/types';
+import { randomUUID } from '../common';
 
 enablePatches();
 
@@ -99,7 +100,7 @@ export const createWorkflowStore = (
 
     console.debug('Proposing changes', patches);
 
-    if (onChange) onChange({ id: crypto.randomUUID(), fn, patches });
+    if (onChange) onChange({ id: randomUUID(), fn, patches });
 
     return nextState;
   }
@@ -117,7 +118,7 @@ export const createWorkflowStore = (
             if (data[key]) {
               data[key]!.forEach(item => {
                 if (!item.id) {
-                  item.id = crypto.randomUUID();
+                  item.id = randomUUID();
                 }
                 draft[key].push(item as any);
               });