feat: IndexedDB based caching for labels, inboxes and teams [CW-50] (#6710)

* feat: allow caching of labels in the account scope

* feat: send cache keys in account json response

* feat: kickstart web worker

* feat: setup basic architecture for workers

* feat: install idb

* feat: add datamanger

* fix: typos

* refactor: rename method

* feat: make init db a manual step

* refactor: separate accountIdFromRoute

* feat: cache enabled API client

* feat: enable caching for inboxes and labels

* feat: enable cache for team

* feat: manage exceptions for team

* feat: add team to data manager

* feat: add a generic listener

* refactor: send only cache keys

* refactor: separate validate method

* feat: add listeners

* feat: add event for revalidate

* feat: add cache keys endpoint

* refactor: fetch cache keys instead of full account data

* fix: key pattern

* feat: don't fetch account for cache_keys

* fix: cache key base class

* refactor: cache keys helper

* feat: add helper

* fix: cache-key update logic

* feat: delete indexeddb on logout

* feat: remove worker.js

* refactor: move data-manager

* refactor: name of file

* feat: add test for DataManager

* refactor: add fake idb to jest setup

* test: cache keys helper

* test: cache keys helper

* test: cache_keys in accounts controller

* refactor: remove cache_keys context

* feat: add policy for cache-keys

app/javascript/dashboard/helper/CacheHelper/DataManager.js

@@ -0,0 +1,70 @@
+import { openDB } from 'idb';
+import { DATA_VERSION } from './version';
+
+export class DataManager {
+  constructor(accountId) {
+    this.modelsToSync = ['inbox', 'label', 'team'];
+    this.accountId = accountId;
+    this.db = null;
+  }
+
+  async initDb() {
+    if (this.db) return this.db;
+    this.db = await openDB(`cw-store-${this.accountId}`, DATA_VERSION, {
+      upgrade(db) {
+        db.createObjectStore('cache-keys');
+        db.createObjectStore('inbox', { keyPath: 'id' });
+        db.createObjectStore('label', { keyPath: 'id' });
+        db.createObjectStore('team', { keyPath: 'id' });
+      },
+    });
+
+    return this.db;
+  }
+
+  validateModel(name) {
+    if (!name) throw new Error('Model name is not defined');
+    if (!this.modelsToSync.includes(name)) {
+      throw new Error(`Model ${name} is not defined`);
+    }
+    return true;
+  }
+
+  async replace({ modelName, data }) {
+    this.validateModel(modelName);
+
+    this.db.clear(modelName);
+    return this.push({ modelName, data });
+  }
+
+  async push({ modelName, data }) {
+    this.validateModel(modelName);
+
+    if (Array.isArray(data)) {
+      const tx = this.db.transaction(modelName, 'readwrite');
+      data.forEach(item => {
+        tx.store.add(item);
+      });
+      await tx.done;
+    } else {
+      await this.db.add(modelName, data);
+    }
+  }
+
+  async get({ modelName }) {
+    this.validateModel(modelName);
+    return this.db.getAll(modelName);
+  }
+
+  async setCacheKeys(cacheKeys) {
+    Object.keys(cacheKeys).forEach(async modelName => {
+      this.db.put('cache-keys', cacheKeys[modelName], modelName);
+    });
+  }
+
+  async getCacheKey(modelName) {
+    this.validateModel(modelName);
+
+    return this.db.get('cache-keys', modelName);
+  }
+}

app/javascript/dashboard/helper/CacheHelper/version.js

@@ -0,0 +1,3 @@
+// Monday, 13 March 2023
+// Change this version if you want to invalidate old data
+export const DATA_VERSION = '1678706392';

app/javascript/dashboard/helper/actionCable.js

@@ -26,6 +26,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
+      'account.cache_invalidated': this.onCacheInvalidate,
     };
   }
 
@@ -156,6 +157,13 @@ class ActionCableConnector extends BaseActionCableConnector {
   onFirstReplyCreated = () => {
     bus.$emit('fetch_overview_reports');
   };
+
+  onCacheInvalidate = data => {
+    const keys = data.cache_keys;
+    this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });
+    this.app.$store.dispatch('inboxes/revalidate', { newKey: keys.inbox });
+    this.app.$store.dispatch('teams/revalidate', { newKey: keys.team });
+  };
 }
 
 export default {

app/javascript/dashboard/helper/specs/CacheHelper/DataManger.spec.js

@@ -0,0 +1,114 @@
+import { DataManager } from '../../CacheHelper/DataManager';
+
+describe('DataManager', () => {
+  const accountId = 'test-account';
+  let dataManager;
+
+  beforeAll(async () => {
+    dataManager = new DataManager(accountId);
+    await dataManager.initDb();
+  });
+
+  afterEach(async () => {
+    const tx = dataManager.db.transaction(
+      dataManager.modelsToSync,
+      'readwrite'
+    );
+    dataManager.modelsToSync.forEach(modelName => {
+      tx.objectStore(modelName).clear();
+    });
+    await tx.done;
+  });
+
+  describe('initDb', () => {
+    it('should initialize the database', async () => {
+      expect(dataManager.db).not.toBeNull();
+    });
+
+    it('should return the same instance of the database', async () => {
+      const db1 = await dataManager.initDb();
+      const db2 = await dataManager.initDb();
+      expect(db1).toBe(db2);
+    });
+  });
+
+  describe('validateModel', () => {
+    it('should throw an error for empty input', async () => {
+      expect(() => {
+        dataManager.validateModel();
+      }).toThrow();
+    });
+
+    it('should throw an error for invalid model', async () => {
+      expect(() => {
+        dataManager.validateModel('invalid-model');
+      }).toThrow();
+    });
+
+    it('should not throw an error for valid model', async () => {
+      expect(dataManager.validateModel('label')).toBeTruthy();
+    });
+  });
+
+  describe('replace', () => {
+    it('should replace existing data in the specified model', async () => {
+      const inboxData = [
+        { id: 1, name: 'inbox-1' },
+        { id: 2, name: 'inbox-2' },
+      ];
+      const newData = [
+        { id: 3, name: 'inbox-3' },
+        { id: 4, name: 'inbox-4' },
+      ];
+
+      await dataManager.push({ modelName: 'inbox', data: inboxData });
+      await dataManager.replace({ modelName: 'inbox', data: newData });
+      const result = await dataManager.get({ modelName: 'inbox' });
+      expect(result).toEqual(newData);
+    });
+  });
+
+  describe('push', () => {
+    it('should add data to the specified model', async () => {
+      const inboxData = { id: 1, name: 'inbox-1' };
+
+      await dataManager.push({ modelName: 'inbox', data: inboxData });
+      const result = await dataManager.get({ modelName: 'inbox' });
+      expect(result).toEqual([inboxData]);
+    });
+
+    it('should add multiple items to the specified model if an array of data is provided', async () => {
+      const inboxData = [
+        { id: 1, name: 'inbox-1' },
+        { id: 2, name: 'inbox-2' },
+      ];
+
+      await dataManager.push({ modelName: 'inbox', data: inboxData });
+      const result = await dataManager.get({ modelName: 'inbox' });
+      expect(result).toEqual(inboxData);
+    });
+  });
+
+  describe('get', () => {
+    it('should return all data in the specified model', async () => {
+      const inboxData = [
+        { id: 1, name: 'inbox-1' },
+        { id: 2, name: 'inbox-2' },
+      ];
+
+      await dataManager.push({ modelName: 'inbox', data: inboxData });
+      const result = await dataManager.get({ modelName: 'inbox' });
+      expect(result).toEqual(inboxData);
+    });
+  });
+
+  describe('setCacheKeys', () => {
+    it('should add cache keys for each model', async () => {
+      const cacheKeys = { inbox: 'cache-key-1', label: 'cache-key-2' };
+
+      await dataManager.setCacheKeys(cacheKeys);
+      const result = await dataManager.getCacheKey('inbox');
+      expect(result).toEqual(cacheKeys.inbox);
+    });
+  });
+});