Implement IndexedDB for flow definitions and add revision handling logic

src/components/floweditor/FlowEditor.helper.tsx

@@ -4,9 +4,93 @@
 
 import Tooltip from 'components/UI/Tooltip/Tooltip';
 import styles from './FlowEditor.module.css';
+import axios from 'axios';
 
 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) => {
+  let latestRevision;
+  const response = await axios.get(`${glificBase}revisions/${uuid}`);
+  if (response.data.results.length > 0) {
+    latestRevision = response.data.results.reduce((latest: any, current: any) => {
+      return new Date(latest.created_on) > new Date(current.created_on) ? latest : current;
+    });
+  }
+
+  return latestRevision;
+};
+
+export const postLatestRevision = async (uuid: any, definition: any) => {
+  const url = `${glificBase}revisions/${uuid}`;
+
+  try {
+    const response = await axios.post(url, definition);
+    if (response.status === 200) {
+      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 +193,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,31 @@
     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);
+
+      const timeDifferenceSeconds = Math.abs(
+        dayjs(latestRevision.created_on).diff(dayjs(flowDefinition.timeStamp), 'seconds')
+      );
+
+      if (timeDifferenceSeconds > 300) {
+        revisionSaved = await postLatestRevision(uuid, flowDefinition.definition);
+      } else {
+        revisionSaved = true;
+      }
+    }
+    console.log(revisionSaved);
+    return revisionSaved;
+  };
+
+  const handlePublishFlow = async () => {
+    if (await checkLatestRevision()) {
+      publishFlow({ variables: { uuid: params.uuid } });
+    }
   };
 
   const handleCancelFlow = () => {