Implement IndexedDB for flow definitions and add revision handling logic

src/components/floweditor/FlowEditor.helper.tsx

@@ -4,9 +4,139 @@ import '@nyaruka/temba-components/dist/temba-components.js';
 
 import Tooltip from 'components/UI/Tooltip/Tooltip';
 import styles from './FlowEditor.module.css';
+import { getAuthSession } from 'services/AuthService';
+import setLogs from 'config/logs';
 
 const glificBase = FLOW_EDITOR_API;
 
+const DB_NAME = 'FlowDefinitionDB';
+const VERSION = 1;
+const STORE_NAME = 'flowDefinitions';
+let dbInstance: IDBDatabase | null = null;
+
+async function initDB(): Promise<IDBDatabase> {
+  if (dbInstance) {
+    return dbInstance;
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, VERSION);
+
+    request.onerror = () => {
+      reject(new Error('Failed to open IndexedDB'));
+    };
+
+    request.onsuccess = () => {
+      dbInstance = request.result;
+      resolve(dbInstance);
+    };
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: 'uuid' });
+        store.createIndex('timestamp', 'timestamp', { unique: false });
+      }
+    };
+  });
+}
+
+export const getFlowDefinition = async (uuid: string): Promise<any | null> => {
+  const db = dbInstance || (await initDB());
+  if (!db) {
+    console.warn('Database not initialized. Call initDB() first.');
+    return null;
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([STORE_NAME], 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.get(uuid);
+
+    request.onsuccess = () => {
+      const result = request.result;
+      resolve(result ? result : null);
+    };
+
+    request.onerror = () => {
+      reject(new Error('Failed to get flow definition'));
+    };
+  });
+};
+
+export const deleteFlowDefinition = async (uuid: string): Promise<boolean> => {
+  const db = dbInstance || (await initDB());
+
+  if (!db) {
+    setLogs('Database not initialized. Call initDB() first.', 'error');
+    return false;
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([STORE_NAME], 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.delete(uuid);
+
+    request.onsuccess = () => {
+      resolve(true);
+    };
+
+    request.onerror = () => {
+      reject(new Error(`Failed to delete flow definition with UUID: ${uuid}`));
+    };
+  });
+};
+
+export const fetchLatestRevision = async (uuid: string) => {
+  try {
+    let latestRevision = null;
+    const token = getAuthSession('access_token');
+
+    const response = await fetch(`${glificBase}revisions/${uuid}?version=13.2`, {
+      headers: {
+        authorization: token,
+      },
+    });
+    const data = await response.json();
+
+    if (data.results.length > 0) {
+      latestRevision = data.results.reduce((latest: any, current: any) => {
+        return new Date(latest.created_on) > new Date(current.created_on) ? latest : current;
+      });
+    }
+
+    return latestRevision;
+  } catch (error) {
+    console.error('Error fetching latest revision:', error);
+    return null;
+  }
+};
+
+export const postLatestRevision = async (uuid: string, definition: any) => {
+  const url = `${glificBase}revisions/${uuid}`;
+  const token = getAuthSession('access_token');
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: token,
+      },
+      body: JSON.stringify(definition),
+    });
+
+    if (response.ok) {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Error posting latest revision:', error);
+    return false;
+  }
+};
+
 export const setConfig = (uuid: any, isTemplate: boolean, skipValidation: boolean) => {
   const services = JSON.parse(localStorage.getItem('organizationServices') || '{}');
 
@@ -109,7 +239,7 @@ export const setConfig = (uuid: any, isTemplate: boolean, skipValidation: boolea
   return config;
 };
 
-export const loadfiles = (startFlowEditor: any) => {
+export const loadfiles = async (startFlowEditor: any) => {
   const files: Array<HTMLScriptElement | HTMLLinkElement> = [];
   const filesToLoad: any = Manifest.files;
 

src/components/floweditor/FlowEditor.test.tsx

@@ -51,7 +51,23 @@ const mockedAxios = axios as any;
 vi.mock('../simulator/Simulator', () => ({
   default: ({ message }: { message: string }) => <div data-testid="simulator">{message}</div>, // Mocking the component's behavior
 }));
+mockedAxios.get.mockImplementation(() =>
+  Promise.resolve({
+    data: {
+      results: [],
+    },
+  })
+);
 
+beforeAll(() => {
+  globalThis.indexedDB = {
+    open: vi.fn(() => ({
+      onerror: vi.fn(),
+      onsuccess: vi.fn(),
+      result: {},
+    })),
+  } as unknown as IDBFactory;
+});
 const mocks = [
   messageReceivedSubscription({ organizationId: null }),
   messageSendSubscription({ organizationId: null }),

src/components/floweditor/FlowEditor.tsx

@@ -19,9 +19,19 @@ import { Loading } from 'components/UI/Layout/Loading/Loading';
 import Track from 'services/TrackService';
 import { exportFlowMethod } from 'common/utils';
 import styles from './FlowEditor.module.css';
-import { checkElementInRegistry, getKeywords, loadfiles, setConfig } from './FlowEditor.helper';
+import {
+  checkElementInRegistry,
+  deleteFlowDefinition,
+  fetchLatestRevision,
+  getFlowDefinition,
+  getKeywords,
+  loadfiles,
+  postLatestRevision,
+  setConfig,
+} from './FlowEditor.helper';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { BackdropLoader, FlowTranslation } from 'containers/Flow/FlowTranslation';
+import dayjs from 'dayjs';
 
 declare function showFlowEditor(node: any, config: any): void;
 
@@ -114,14 +124,15 @@ export const FlowEditor = () => {
   });
 
   const [publishFlow] = useMutation(PUBLISH_FLOW, {
-    onCompleted: (data) => {
+    onCompleted: async (data) => {
       if (data.publishFlow.errors && data.publishFlow.errors.length > 0) {
         setFlowValidation(data.publishFlow.errors);
         setIsError(true);
       } else if (data.publishFlow.success) {
         setPublished(true);
       }
       setPublishLoading(false);
+      if (uuid) await deleteFlowDefinition(uuid);
     },
     onError: () => {
       setPublishLoading(false);
@@ -208,8 +219,10 @@ export const FlowEditor = () => {
       Track('Flow opened');
 
       return () => {
-        Object.keys(files).forEach((node: any) => {
+        Object.keys(files).forEach((node) => {
+          // @ts-ignore
           if (files[node] && document.body.contains(files[node])) {
+            // @ts-ignore
             document.body.removeChild(files[node]);
           }
         });
@@ -227,8 +240,33 @@ export const FlowEditor = () => {
     return () => {};
   }, [flowId]);
 
-  const handlePublishFlow = () => {
-    publishFlow({ variables: { uuid: params.uuid } });
+  const checkLatestRevision = async () => {
+    let revisionSaved = false;
+    if (uuid) {
+      const latestRevision = await fetchLatestRevision(uuid);
+      const flowDefinition = await getFlowDefinition(uuid);
+
+      if (latestRevision && flowDefinition) {
+        const latestRevisionTime = dayjs(latestRevision.created_on);
+        const flowDefinitionTime = dayjs(flowDefinition.timestamp);
+
+        if (flowDefinitionTime.isAfter(latestRevisionTime)) {
+          const timeDifferenceSeconds = flowDefinitionTime.diff(latestRevisionTime, 'seconds');
+          revisionSaved =
+            timeDifferenceSeconds > 300 ? await postLatestRevision(uuid, flowDefinition.definition) : true;
+        } else {
+          revisionSaved = true;
+        }
+      }
+
+      return revisionSaved;
+    }
+  };
+
+  const handlePublishFlow = async () => {
+    if (await checkLatestRevision()) {
+      publishFlow({ variables: { uuid: params.uuid } });
+    }
   };
 
   const handleCancelFlow = () => {