Implement IndexedDB for flow definitions and add revision handling logic

src/components/floweditor/FlowEditor.helper.tsx

@@ -4,9 +4,115 @@
 
 import Tooltip from 'components/UI/Tooltip/Tooltip';
 import styles from './FlowEditor.module.css';
+import { getAuthSession } from 'services/AuthService';
 
 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 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 +215,7 @@
   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,18 @@
 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,
+  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;
 
@@ -208,8 +217,10 @@
       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 +238,33 @@
     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 = () => {