Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7d17c976cb | ||
|
|
c7c34f3640 | ||
|
|
dec5468cd5 | ||
|
|
d4dd5c64a7 | ||
|
|
4b2abcfbb2 | ||
|
|
261deaaeec |
@@ -7,6 +7,7 @@ class RoomChannel < ApplicationCable::Channel
|
||||
ensure_stream
|
||||
update_subscription
|
||||
broadcast_presence
|
||||
transmit_cache_keys
|
||||
end
|
||||
|
||||
def update_presence
|
||||
@@ -24,6 +25,19 @@ class RoomChannel < ApplicationCable::Channel
|
||||
ActionCable.server.broadcast(pubsub_token, { event: 'presence.update', data: data })
|
||||
end
|
||||
|
||||
# Push the authoritative cache-key map to this subscriber on every
|
||||
# (re)subscribe. Boot and reconnect cache freshness ride the same
|
||||
# account.cache_invalidated event the dashboard already handles for live
|
||||
# invalidations — the client never pulls /cache_keys itself.
|
||||
def transmit_cache_keys
|
||||
return if @current_account.blank? || !@current_user.is_a?(User)
|
||||
|
||||
transmit({
|
||||
event: Events::Types::ACCOUNT_CACHE_INVALIDATED,
|
||||
data: { account_id: @current_account.id, cache_keys: @current_account.cache_keys }
|
||||
})
|
||||
end
|
||||
|
||||
def ensure_stream
|
||||
stream_from pubsub_token
|
||||
stream_from "account_#{@current_account.id}" if @current_account.present? && @current_user.is_a?(User)
|
||||
|
||||
@@ -50,7 +50,6 @@ class Api::V1::AccountsController < Api::BaseController
|
||||
end
|
||||
|
||||
def cache_keys
|
||||
expires_in 10.seconds, public: false, stale_while_revalidate: 5.minutes
|
||||
render json: { cache_keys: cache_keys_for_account }, status: :ok
|
||||
end
|
||||
|
||||
@@ -93,11 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
|
||||
end
|
||||
|
||||
def cache_keys_for_account
|
||||
{
|
||||
label: fetch_value_for_key(params[:id], Label.name.underscore),
|
||||
inbox: fetch_value_for_key(params[:id], Inbox.name.underscore),
|
||||
team: fetch_value_for_key(params[:id], Team.name.underscore)
|
||||
}
|
||||
@account.cache_keys
|
||||
end
|
||||
|
||||
def fetch_account
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
verifyServiceWorkerExistence,
|
||||
} from './helper/pushHelper';
|
||||
import ReconnectService from 'dashboard/helper/ReconnectService';
|
||||
import paintStoresFromCache from 'dashboard/helper/CacheHelper/paintStoresFromCache';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
|
||||
export default {
|
||||
@@ -108,14 +109,21 @@ export default {
|
||||
this.$store.dispatch('setActiveAccount', {
|
||||
accountId: this.currentAccountId,
|
||||
});
|
||||
const { pubsub_token: pubsubToken } = this.currentUser || {};
|
||||
vueActionCable.init(this.store, pubsubToken);
|
||||
|
||||
// Paint cached config from IndexedDB instantly while the cable
|
||||
// connects. Freshness needs no orchestration here: RoomChannel pushes
|
||||
// the cache-key map on every (re)subscribe and on every server-side
|
||||
// change, all through the same account.cache_invalidated event.
|
||||
await paintStoresFromCache(this.$store, this.currentAccountId);
|
||||
|
||||
const account = this.getAccount(this.currentAccountId);
|
||||
const { locale, latest_chatwoot_version: latestChatwootVersion } =
|
||||
account;
|
||||
const { pubsub_token: pubsubToken } = this.currentUser || {};
|
||||
// If user locale is set, use it; otherwise use account locale
|
||||
this.setLocale(this.uiSettings?.locale || locale);
|
||||
this.latestChatwootVersion = latestChatwootVersion;
|
||||
vueActionCable.init(this.store, pubsubToken);
|
||||
this.reconnectService = new ReconnectService(this.store, this.router);
|
||||
window.reconnectService = this.reconnectService;
|
||||
|
||||
|
||||
@@ -5,14 +5,15 @@ import ApiClient from './ApiClient';
|
||||
class CacheEnabledApiClient extends ApiClient {
|
||||
constructor(resource, options = {}) {
|
||||
super(resource, options);
|
||||
// `cacheModel` is the Rails Model.name.underscore value — simultaneously
|
||||
// the server cache-key name and the IDB object-store name.
|
||||
this.cacheModelName = options.cacheModel;
|
||||
// inbox/label endpoints wrap collections in { payload }; the rest return
|
||||
// the bare array.
|
||||
this.payloadEnvelope = options.payloadEnvelope || false;
|
||||
this.dataManager = new DataManager(this.accountIdFromRoute);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
get cacheModelName() {
|
||||
throw new Error('cacheModelName is not defined');
|
||||
}
|
||||
|
||||
get(cache = false) {
|
||||
if (cache) {
|
||||
return this.getFromCache();
|
||||
@@ -25,14 +26,14 @@ class CacheEnabledApiClient extends ApiClient {
|
||||
return axios.get(this.url);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
extractDataFromResponse(response) {
|
||||
return response.data.payload;
|
||||
return this.payloadEnvelope ? response.data.payload : response.data;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
marshallData(dataToParse) {
|
||||
return { data: { payload: dataToParse } };
|
||||
return this.payloadEnvelope
|
||||
? { data: { payload: dataToParse } }
|
||||
: { data: dataToParse };
|
||||
}
|
||||
|
||||
async getFromCache() {
|
||||
@@ -43,24 +44,23 @@ class CacheEnabledApiClient extends ApiClient {
|
||||
return this.getFromNetwork();
|
||||
}
|
||||
|
||||
const { data } = await axios.get(
|
||||
`/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
|
||||
);
|
||||
const cacheKeyFromApi = data.cache_keys[this.cacheModelName];
|
||||
const isCacheValid = await this.validateCacheKey(cacheKeyFromApi);
|
||||
// Trust the IDB cache. Freshness is maintained by the
|
||||
// account.cache_invalidated event alone: RoomChannel pushes the cache-key
|
||||
// map on every (re)subscribe — boot and reconnect included — and the
|
||||
// server broadcasts it on every change. Skipping a per-call /cache_keys
|
||||
// preflight eliminates N GET requests per cold settings-page load.
|
||||
const localData = await this.dataManager.get({
|
||||
modelName: this.cacheModelName,
|
||||
});
|
||||
|
||||
let localData = [];
|
||||
if (isCacheValid) {
|
||||
localData = await this.dataManager.get({
|
||||
modelName: this.cacheModelName,
|
||||
});
|
||||
if (localData.length > 0) {
|
||||
return this.marshallData(localData);
|
||||
}
|
||||
|
||||
if (localData.length === 0) {
|
||||
return this.refetchAndCommit(cacheKeyFromApi);
|
||||
}
|
||||
|
||||
return this.marshallData(localData);
|
||||
// Empty IDB (first load or wiped): fetch data without a cache key. The
|
||||
// next pushed key map won't match the missing key and will refetch once,
|
||||
// stamping the authoritative key — the client never pulls keys itself.
|
||||
return this.refetchAndCommit(null);
|
||||
}
|
||||
|
||||
async refetchAndCommit(newKey = null) {
|
||||
@@ -69,7 +69,9 @@ class CacheEnabledApiClient extends ApiClient {
|
||||
try {
|
||||
await this.dataManager.initDb();
|
||||
|
||||
this.dataManager.replace({
|
||||
// Await replace so data is persisted before the cache key is — otherwise
|
||||
// a concurrent reader could see a fresh key paired with stale data.
|
||||
await this.dataManager.replace({
|
||||
modelName: this.cacheModelName,
|
||||
data: this.extractDataFromResponse(response),
|
||||
});
|
||||
@@ -89,8 +91,15 @@ class CacheEnabledApiClient extends ApiClient {
|
||||
await this.dataManager.initDb();
|
||||
}
|
||||
|
||||
const cachekey = await this.dataManager.getCacheKey(this.cacheModelName);
|
||||
return cacheKeyFromApi === cachekey;
|
||||
const cacheKey = await this.dataManager.getCacheKey(this.cacheModelName);
|
||||
if (cacheKey === undefined) {
|
||||
const localData = await this.dataManager.get({
|
||||
modelName: this.cacheModelName,
|
||||
});
|
||||
return localData.length === 0;
|
||||
}
|
||||
|
||||
return cacheKeyFromApi === cacheKey;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,13 +9,6 @@ class AccountAPI extends ApiClient {
|
||||
createAccount(data) {
|
||||
return axios.post(`${this.apiVersion}/accounts`, data);
|
||||
}
|
||||
|
||||
async getCacheKeys() {
|
||||
const response = await axios.get(
|
||||
`/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
|
||||
);
|
||||
return response.data.cache_keys;
|
||||
}
|
||||
}
|
||||
|
||||
export default new AccountAPI();
|
||||
|
||||
@@ -3,12 +3,11 @@ import CacheEnabledApiClient from './CacheEnabledApiClient';
|
||||
|
||||
class Inboxes extends CacheEnabledApiClient {
|
||||
constructor() {
|
||||
super('inboxes', { accountScoped: true });
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
get cacheModelName() {
|
||||
return 'inbox';
|
||||
super('inboxes', {
|
||||
accountScoped: true,
|
||||
cacheModel: 'inbox',
|
||||
payloadEnvelope: true,
|
||||
});
|
||||
}
|
||||
|
||||
getCampaigns(inboxId) {
|
||||
|
||||
@@ -2,12 +2,11 @@ import CacheEnabledApiClient from './CacheEnabledApiClient';
|
||||
|
||||
class LabelsAPI extends CacheEnabledApiClient {
|
||||
constructor() {
|
||||
super('labels', { accountScoped: true });
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
get cacheModelName() {
|
||||
return 'label';
|
||||
super('labels', {
|
||||
accountScoped: true,
|
||||
cacheModel: 'label',
|
||||
payloadEnvelope: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,25 +1,9 @@
|
||||
/* global axios */
|
||||
// import ApiClient from './ApiClient';
|
||||
import CacheEnabledApiClient from './CacheEnabledApiClient';
|
||||
|
||||
export class TeamsAPI extends CacheEnabledApiClient {
|
||||
constructor() {
|
||||
super('teams', { accountScoped: true });
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
get cacheModelName() {
|
||||
return 'team';
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
extractDataFromResponse(response) {
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
marshallData(dataToParse) {
|
||||
return { data: dataToParse };
|
||||
super('teams', { accountScoped: true, cacheModel: 'team' });
|
||||
}
|
||||
|
||||
getAgents({ teamId }) {
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { openDB } from 'idb';
|
||||
import { DATA_VERSION } from './version';
|
||||
import { cacheableModels, cacheableModelNames } from './cacheableModels';
|
||||
|
||||
export class DataManager {
|
||||
constructor(accountId) {
|
||||
this.modelsToSync = ['inbox', 'label', 'team'];
|
||||
this.modelsToSync = cacheableModelNames;
|
||||
this.accountId = accountId;
|
||||
this.db = null;
|
||||
}
|
||||
@@ -11,12 +12,26 @@ export class DataManager {
|
||||
async initDb() {
|
||||
if (this.db) return this.db;
|
||||
const dbName = `cw-store-${this.accountId}`;
|
||||
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' });
|
||||
this.db = await openDB(dbName, DATA_VERSION, {
|
||||
upgrade(db, oldVersion, _newVersion, tx) {
|
||||
// Flush data carried over from a previous schema version so a
|
||||
// DATA_VERSION bump acts as a global cache reset. oldVersion === 0 on
|
||||
// first install, so fresh devices skip this. Clearing before creating
|
||||
// means we only ever clear stores that pre-existed this upgrade.
|
||||
if (oldVersion > 0) {
|
||||
for (let index = 0; index < db.objectStoreNames.length; index += 1) {
|
||||
tx.objectStore(db.objectStoreNames.item(index)).clear();
|
||||
}
|
||||
}
|
||||
|
||||
if (!db.objectStoreNames.contains('cache-keys')) {
|
||||
db.createObjectStore('cache-keys');
|
||||
}
|
||||
cacheableModels.forEach(model => {
|
||||
if (!db.objectStoreNames.contains(model.name)) {
|
||||
db.createObjectStore(model.name, { keyPath: 'id' });
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -41,7 +56,7 @@ export class DataManager {
|
||||
async replace({ modelName, data }) {
|
||||
this.validateModel(modelName);
|
||||
|
||||
this.db.clear(modelName);
|
||||
await this.db.clear(modelName);
|
||||
return this.push({ modelName, data });
|
||||
}
|
||||
|
||||
@@ -65,9 +80,11 @@ export class DataManager {
|
||||
}
|
||||
|
||||
async setCacheKeys(cacheKeys) {
|
||||
Object.keys(cacheKeys).forEach(async modelName => {
|
||||
this.db.put('cache-keys', cacheKeys[modelName], modelName);
|
||||
});
|
||||
await Promise.all(
|
||||
Object.entries(cacheKeys).map(([modelName, value]) =>
|
||||
this.db.put('cache-keys', value, modelName)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
async getCacheKey(modelName) {
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
// Single source of truth for IDB-cached workspace config.
|
||||
//
|
||||
// Each entry must keep `name` equal to the Rails `Model.name.underscore` value
|
||||
// so the server's `cache_keys` payload (and the IDB object store name) lines up
|
||||
// with what the client looks up.
|
||||
//
|
||||
// `setMutation` is the full commit path used to seed Vuex from IDB (boot
|
||||
// paint) and to swap in refetched rows (event-driven revalidation). Every
|
||||
// SET_* mutation must REPLACE its records (not merge) so rows deleted
|
||||
// server-side never survive as phantoms.
|
||||
export const cacheableModels = [
|
||||
{ name: 'inbox', setMutation: 'inboxes/SET_INBOXES' },
|
||||
{ name: 'label', setMutation: 'labels/SET_LABELS' },
|
||||
{ name: 'team', setMutation: 'teams/SET_TEAMS' },
|
||||
];
|
||||
|
||||
export const cacheableModelNames = cacheableModels.map(model => model.name);
|
||||
@@ -0,0 +1,36 @@
|
||||
import InboxesAPI from 'dashboard/api/inboxes';
|
||||
import LabelsAPI from 'dashboard/api/labels';
|
||||
import TeamsAPI from 'dashboard/api/teams';
|
||||
import { cacheableModels } from './cacheableModels';
|
||||
|
||||
// model name → cache-enabled API client. Lives here rather than in
|
||||
// cacheableModels to keep that module import-cycle-free: the API clients
|
||||
// import DataManager, which imports cacheableModels.
|
||||
const apiByModel = {
|
||||
inbox: InboxesAPI,
|
||||
label: LabelsAPI,
|
||||
team: TeamsAPI,
|
||||
};
|
||||
|
||||
const revalidateModel = async (store, model, newKey) => {
|
||||
try {
|
||||
const api = apiByModel[model.name];
|
||||
if (await api.validateCacheKey(newKey)) return;
|
||||
|
||||
const response = await api.refetchAndCommit(newKey);
|
||||
store.commit(model.setMutation, api.extractDataFromResponse(response));
|
||||
} catch {
|
||||
// Ignore error — a failed refetch leaves the painted data in place; the
|
||||
// next pushed key map retries.
|
||||
}
|
||||
};
|
||||
|
||||
// The single freshness engine: given a pushed { model_name => key } map
|
||||
// (RoomChannel transmits one on every (re)subscribe, the server broadcasts
|
||||
// one on every change), diff each key against IDB and refetch mismatches.
|
||||
export const dispatchCacheRevalidations = (store, keys = {}) =>
|
||||
Promise.all(
|
||||
cacheableModels
|
||||
.filter(model => keys[model.name] !== undefined)
|
||||
.map(model => revalidateModel(store, model, keys[model.name]))
|
||||
);
|
||||
@@ -0,0 +1,31 @@
|
||||
import { DataManager } from './DataManager';
|
||||
import { cacheableModels } from './cacheableModels';
|
||||
|
||||
// Seed Vuex from IndexedDB before the dashboard renders so warm boots paint
|
||||
// cached config instantly. This is purely local — zero network calls.
|
||||
//
|
||||
// Freshness is handled entirely by the account.cache_invalidated event:
|
||||
// RoomChannel transmits the current cache-key map on every (re)subscribe, and
|
||||
// the server broadcasts it on every change. dispatchCacheRevalidations diffs
|
||||
// those keys against IDB and refetches mismatches — the client never pulls
|
||||
// cache keys itself.
|
||||
export default async function paintStoresFromCache(store, accountId) {
|
||||
let dm;
|
||||
try {
|
||||
dm = new DataManager(accountId);
|
||||
await dm.initDb();
|
||||
} catch {
|
||||
// IDB unsupported (e.g. Firefox private mode) — silent no-op. Components
|
||||
// will fetch from the network normally via the cache-enabled API client.
|
||||
return;
|
||||
}
|
||||
|
||||
// Stale-while-revalidate paint: commit cached data into Vuex immediately.
|
||||
await Promise.all(
|
||||
cacheableModels.map(async model => {
|
||||
const localData = await dm.get({ modelName: model.name });
|
||||
if (localData.length === 0) return;
|
||||
store.commit(model.setMutation, localData);
|
||||
})
|
||||
);
|
||||
}
|
||||
@@ -98,17 +98,6 @@ class ReconnectService {
|
||||
await this.store.dispatch('notifications/index', { ...filter, page: 1 });
|
||||
};
|
||||
|
||||
revalidateCaches = async () => {
|
||||
const { label, inbox, team } = await this.store.dispatch(
|
||||
'accounts/getCacheKeys'
|
||||
);
|
||||
await Promise.all([
|
||||
this.store.dispatch('labels/revalidate', { newKey: label }),
|
||||
this.store.dispatch('inboxes/revalidate', { newKey: inbox }),
|
||||
this.store.dispatch('teams/revalidate', { newKey: team }),
|
||||
]);
|
||||
};
|
||||
|
||||
handleRouteSpecificFetch = async () => {
|
||||
const currentRoute = this.router.currentRoute.value.name;
|
||||
if (isAConversationRoute(currentRoute, true)) {
|
||||
@@ -138,9 +127,11 @@ class ReconnectService {
|
||||
this.setConversationLastMessageId();
|
||||
};
|
||||
|
||||
// Cached workspace config needs no explicit revalidation here: ActionCable
|
||||
// auto-resubscribes after a drop, and RoomChannel pushes the cache-key map
|
||||
// on every subscribe via the account.cache_invalidated event.
|
||||
onReconnect = async () => {
|
||||
await this.handleRouteSpecificFetch();
|
||||
await this.revalidateCaches();
|
||||
emitter.emit(BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
|
||||
import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import { dispatchCacheRevalidations } from './CacheHelper/dispatchCacheRevalidations';
|
||||
|
||||
const { isImpersonating } = useImpersonation();
|
||||
const UNREAD_COUNTS_REFETCH_THROTTLE_MS = 5000;
|
||||
@@ -269,10 +270,7 @@ class ActionCableConnector extends BaseActionCableConnector {
|
||||
};
|
||||
|
||||
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 });
|
||||
dispatchCacheRevalidations(this.app.$store, data.cache_keys);
|
||||
};
|
||||
|
||||
onVoiceCallIncoming = data => {
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import { dispatchCacheRevalidations } from '../../CacheHelper/dispatchCacheRevalidations';
|
||||
import InboxesAPI from 'dashboard/api/inboxes';
|
||||
import LabelsAPI from 'dashboard/api/labels';
|
||||
import TeamsAPI from 'dashboard/api/teams';
|
||||
|
||||
vi.mock('dashboard/api/inboxes', () => ({
|
||||
default: {
|
||||
validateCacheKey: vi.fn(),
|
||||
refetchAndCommit: vi.fn(),
|
||||
extractDataFromResponse: vi.fn(),
|
||||
},
|
||||
}));
|
||||
vi.mock('dashboard/api/labels', () => ({
|
||||
default: {
|
||||
validateCacheKey: vi.fn(),
|
||||
refetchAndCommit: vi.fn(),
|
||||
extractDataFromResponse: vi.fn(),
|
||||
},
|
||||
}));
|
||||
vi.mock('dashboard/api/teams', () => ({
|
||||
default: {
|
||||
validateCacheKey: vi.fn(),
|
||||
refetchAndCommit: vi.fn(),
|
||||
extractDataFromResponse: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('dispatchCacheRevalidations', () => {
|
||||
let store;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
store = { commit: vi.fn() };
|
||||
});
|
||||
|
||||
it('refetches stale models and commits via their setMutation', async () => {
|
||||
InboxesAPI.validateCacheKey.mockResolvedValue(false);
|
||||
InboxesAPI.refetchAndCommit.mockResolvedValue({ data: { payload: [] } });
|
||||
InboxesAPI.extractDataFromResponse.mockReturnValue([{ id: 1 }]);
|
||||
LabelsAPI.validateCacheKey.mockResolvedValue(true);
|
||||
|
||||
await dispatchCacheRevalidations(store, {
|
||||
inbox: 'inbox-key',
|
||||
label: 'label-key',
|
||||
});
|
||||
|
||||
expect(InboxesAPI.refetchAndCommit).toHaveBeenCalledWith('inbox-key');
|
||||
expect(store.commit).toHaveBeenCalledWith('inboxes/SET_INBOXES', [
|
||||
{ id: 1 },
|
||||
]);
|
||||
expect(LabelsAPI.refetchAndCommit).not.toHaveBeenCalled();
|
||||
expect(store.commit).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('skips models absent from the key payload', async () => {
|
||||
InboxesAPI.validateCacheKey.mockResolvedValue(true);
|
||||
|
||||
await dispatchCacheRevalidations(store, { inbox: 'inbox-key' });
|
||||
|
||||
expect(TeamsAPI.validateCacheKey).not.toHaveBeenCalled();
|
||||
expect(store.commit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('treats missing keys as an empty payload', async () => {
|
||||
await dispatchCacheRevalidations(store);
|
||||
|
||||
expect(InboxesAPI.validateCacheKey).not.toHaveBeenCalled();
|
||||
expect(store.commit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('swallows per-model errors so one failure does not block the rest', async () => {
|
||||
InboxesAPI.validateCacheKey.mockResolvedValue(false);
|
||||
InboxesAPI.refetchAndCommit.mockRejectedValue(new Error('network down'));
|
||||
TeamsAPI.validateCacheKey.mockResolvedValue(false);
|
||||
TeamsAPI.refetchAndCommit.mockResolvedValue({ data: [] });
|
||||
TeamsAPI.extractDataFromResponse.mockReturnValue([{ id: 7 }]);
|
||||
|
||||
await dispatchCacheRevalidations(store, {
|
||||
inbox: 'inbox-key',
|
||||
team: 'team-key',
|
||||
});
|
||||
|
||||
expect(store.commit).toHaveBeenCalledWith('teams/SET_TEAMS', [{ id: 7 }]);
|
||||
expect(store.commit).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
import paintStoresFromCache from '../../CacheHelper/paintStoresFromCache';
|
||||
import { DataManager } from '../../CacheHelper/DataManager';
|
||||
|
||||
describe('paintStoresFromCache', () => {
|
||||
const accountId = 'paint-test-account';
|
||||
const originalAxios = window.axios;
|
||||
let axiosMock;
|
||||
let dm;
|
||||
let storeMock;
|
||||
|
||||
beforeEach(async () => {
|
||||
axiosMock = {
|
||||
get: vi.fn(),
|
||||
};
|
||||
window.axios = axiosMock;
|
||||
|
||||
storeMock = {
|
||||
commit: vi.fn(),
|
||||
dispatch: vi.fn(),
|
||||
};
|
||||
|
||||
dm = new DataManager(accountId);
|
||||
await dm.initDb();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
const tx = dm.db.transaction(
|
||||
[...dm.modelsToSync, 'cache-keys'],
|
||||
'readwrite'
|
||||
);
|
||||
[...dm.modelsToSync, 'cache-keys'].forEach(name => {
|
||||
tx.objectStore(name).clear();
|
||||
});
|
||||
await tx.done;
|
||||
window.axios = originalAxios;
|
||||
});
|
||||
|
||||
it('does nothing when IDB is empty (first ever load)', async () => {
|
||||
await paintStoresFromCache(storeMock, accountId);
|
||||
|
||||
expect(storeMock.commit).not.toHaveBeenCalled();
|
||||
expect(storeMock.dispatch).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('seeds Vuex from IDB without any network interaction', async () => {
|
||||
await dm.push({
|
||||
modelName: 'inbox',
|
||||
data: [{ id: 1, name: 'Support' }],
|
||||
});
|
||||
await dm.push({
|
||||
modelName: 'label',
|
||||
data: [{ id: 9, title: 'Bug' }],
|
||||
});
|
||||
|
||||
await paintStoresFromCache(storeMock, accountId);
|
||||
|
||||
expect(storeMock.commit).toHaveBeenCalledWith('inboxes/SET_INBOXES', [
|
||||
{ id: 1, name: 'Support' },
|
||||
]);
|
||||
expect(storeMock.commit).toHaveBeenCalledWith('labels/SET_LABELS', [
|
||||
{ id: 9, title: 'Bug' },
|
||||
]);
|
||||
expect(axiosMock.get).not.toHaveBeenCalled();
|
||||
expect(storeMock.dispatch).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('seeds teams via SET_TEAMS', async () => {
|
||||
await dm.push({
|
||||
modelName: 'team',
|
||||
data: [{ id: 1, name: 'Sales' }],
|
||||
});
|
||||
|
||||
await paintStoresFromCache(storeMock, accountId);
|
||||
|
||||
expect(storeMock.commit).toHaveBeenCalledWith('teams/SET_TEAMS', [
|
||||
{ id: 1, name: 'Sales' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -253,27 +253,6 @@ describe('ReconnectService', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('revalidateCaches', () => {
|
||||
it('should dispatch revalidate actions for labels, inboxes, and teams', async () => {
|
||||
storeMock.dispatch.mockResolvedValueOnce({
|
||||
label: 'labelKey',
|
||||
inbox: 'inboxKey',
|
||||
team: 'teamKey',
|
||||
});
|
||||
await reconnectService.revalidateCaches();
|
||||
expect(storeMock.dispatch).toHaveBeenCalledWith('accounts/getCacheKeys');
|
||||
expect(storeMock.dispatch).toHaveBeenCalledWith('labels/revalidate', {
|
||||
newKey: 'labelKey',
|
||||
});
|
||||
expect(storeMock.dispatch).toHaveBeenCalledWith('inboxes/revalidate', {
|
||||
newKey: 'inboxKey',
|
||||
});
|
||||
expect(storeMock.dispatch).toHaveBeenCalledWith('teams/revalidate', {
|
||||
newKey: 'teamKey',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleRouteSpecificFetch', () => {
|
||||
it('should fetch conversations and messages if current route is a conversation route', async () => {
|
||||
isAConversationRoute.mockReturnValue(true);
|
||||
@@ -335,12 +314,10 @@ describe('ReconnectService', () => {
|
||||
});
|
||||
|
||||
describe('onReconnect', () => {
|
||||
it('should handle route-specific fetch, revalidate caches, and emit WEBSOCKET_RECONNECT_COMPLETED event', async () => {
|
||||
it('should handle route-specific fetch and emit WEBSOCKET_RECONNECT_COMPLETED event', async () => {
|
||||
reconnectService.handleRouteSpecificFetch = vi.fn();
|
||||
reconnectService.revalidateCaches = vi.fn();
|
||||
await reconnectService.onReconnect();
|
||||
expect(reconnectService.handleRouteSpecificFetch).toHaveBeenCalled();
|
||||
expect(reconnectService.revalidateCaches).toHaveBeenCalled();
|
||||
expect(emitter.emit).toHaveBeenCalledWith(
|
||||
BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED
|
||||
);
|
||||
|
||||
@@ -163,10 +163,6 @@ export const actions = {
|
||||
commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: false });
|
||||
}
|
||||
},
|
||||
|
||||
getCacheKeys: async () => {
|
||||
return AccountAPI.getCacheKeys();
|
||||
},
|
||||
};
|
||||
|
||||
export const mutations = {
|
||||
|
||||
@@ -189,17 +189,6 @@ const sendAnalyticsEvent = channelType => {
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
revalidate: async ({ commit }, { newKey }) => {
|
||||
try {
|
||||
const isExistingKeyValid = await InboxesAPI.validateCacheKey(newKey);
|
||||
if (!isExistingKeyValid) {
|
||||
const response = await InboxesAPI.refetchAndCommit(newKey);
|
||||
commit(types.default.SET_INBOXES, response.data.payload);
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
}
|
||||
},
|
||||
get: async ({ commit }) => {
|
||||
commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
|
||||
@@ -32,18 +32,6 @@ export const getters = {
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
revalidate: async function revalidate({ commit }, { newKey }) {
|
||||
try {
|
||||
const isExistingKeyValid = await LabelsAPI.validateCacheKey(newKey);
|
||||
if (!isExistingKeyValid) {
|
||||
const response = await LabelsAPI.refetchAndCommit(newKey);
|
||||
commit(types.SET_LABELS, response.data.payload);
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
}
|
||||
},
|
||||
|
||||
get: async function getLabels({ commit }) {
|
||||
commit(types.SET_LABEL_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
import axios from 'axios';
|
||||
import { actions } from '../../inboxes';
|
||||
import * as types from '../../../mutation-types';
|
||||
import InboxesAPI from '../../../../api/inboxes';
|
||||
import inboxList from './fixtures';
|
||||
|
||||
const commit = vi.fn();
|
||||
global.axios = axios;
|
||||
vi.mock('axios');
|
||||
|
||||
// Clear the IDB-backed cache between tests so each case starts from a known
|
||||
// empty state and isn't affected by data persisted by a previous test.
|
||||
beforeEach(async () => {
|
||||
await InboxesAPI.dataManager.initDb();
|
||||
await InboxesAPI.dataManager.db.clear(InboxesAPI.cacheModelName);
|
||||
});
|
||||
|
||||
describe('#actions', () => {
|
||||
describe('#get', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
import axios from 'axios';
|
||||
import { actions } from '../../labels';
|
||||
import * as types from '../../../mutation-types';
|
||||
import LabelsAPI from '../../../../api/labels';
|
||||
import labelsList from './fixtures';
|
||||
|
||||
const commit = vi.fn();
|
||||
global.axios = axios;
|
||||
vi.mock('axios');
|
||||
|
||||
// Clear the IDB-backed cache between tests so each case starts from a known
|
||||
// empty state and isn't affected by data persisted by a previous test.
|
||||
beforeEach(async () => {
|
||||
await LabelsAPI.dataManager.initDb();
|
||||
await LabelsAPI.dataManager.db.clear(LabelsAPI.cacheModelName);
|
||||
});
|
||||
|
||||
describe('#actions', () => {
|
||||
describe('#get', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
|
||||
@@ -2,18 +2,25 @@ import axios from 'axios';
|
||||
import { actions } from '../../teams/actions';
|
||||
import {
|
||||
SET_TEAM_UI_FLAG,
|
||||
CLEAR_TEAMS,
|
||||
SET_TEAMS,
|
||||
SET_TEAM_ITEM,
|
||||
EDIT_TEAM,
|
||||
DELETE_TEAM,
|
||||
} from '../../teams/types';
|
||||
import TeamsAPI from '../../../../api/teams';
|
||||
import teamsList from './fixtures';
|
||||
|
||||
const commit = vi.fn();
|
||||
global.axios = axios;
|
||||
vi.mock('axios');
|
||||
|
||||
// Clear the IDB-backed cache between tests so each case starts from a known
|
||||
// empty state and isn't affected by data persisted by a previous test.
|
||||
beforeEach(async () => {
|
||||
await TeamsAPI.dataManager.initDb();
|
||||
await TeamsAPI.dataManager.db.clear(TeamsAPI.cacheModelName);
|
||||
});
|
||||
|
||||
describe('#actions', () => {
|
||||
describe('#get', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
@@ -33,7 +40,6 @@ describe('#actions', () => {
|
||||
await actions.get({ commit });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[SET_TEAM_UI_FLAG, { isFetching: true }],
|
||||
[CLEAR_TEAMS],
|
||||
[SET_TEAMS, teamsList[1]],
|
||||
[SET_TEAM_UI_FLAG, { isFetching: false }],
|
||||
]);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
CLEAR_TEAMS,
|
||||
SET_TEAMS,
|
||||
SET_TEAM_ITEM,
|
||||
EDIT_TEAM,
|
||||
@@ -11,10 +10,15 @@ describe('#mutations', () => {
|
||||
describe('#SET_teams', () => {
|
||||
it('set teams records', () => {
|
||||
const state = { records: {} };
|
||||
mutations[SET_TEAMS](state, [teams[1]]);
|
||||
mutations[SET_TEAMS](state, [teams[2]]);
|
||||
mutations[SET_TEAMS](state, [teams[1], teams[2]]);
|
||||
expect(state.records).toEqual(teams);
|
||||
});
|
||||
|
||||
it('drops records absent from the new list', () => {
|
||||
const state = { records: { ...teams } };
|
||||
mutations[SET_TEAMS](state, [teams[1]]);
|
||||
expect(state.records).toEqual({ 1: teams[1] });
|
||||
});
|
||||
});
|
||||
|
||||
describe('#ADD_TEAM', () => {
|
||||
@@ -43,12 +47,4 @@ describe('#mutations', () => {
|
||||
expect(state.records).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#CLEAR_TEAMS', () => {
|
||||
it('delete teams record', () => {
|
||||
const state = { records: { 1: teams[1] } };
|
||||
mutations[CLEAR_TEAMS](state);
|
||||
expect(state.records).toEqual({});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
SET_TEAM_UI_FLAG,
|
||||
CLEAR_TEAMS,
|
||||
SET_TEAMS,
|
||||
SET_TEAM_ITEM,
|
||||
EDIT_TEAM,
|
||||
@@ -22,22 +21,10 @@ export const actions = {
|
||||
commit(SET_TEAM_UI_FLAG, { isCreating: false });
|
||||
}
|
||||
},
|
||||
revalidate: async ({ commit }, { newKey }) => {
|
||||
try {
|
||||
const isExistingKeyValid = await TeamsAPI.validateCacheKey(newKey);
|
||||
if (!isExistingKeyValid) {
|
||||
const response = await TeamsAPI.refetchAndCommit(newKey);
|
||||
commit(SET_TEAMS, response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
}
|
||||
},
|
||||
get: async ({ commit }) => {
|
||||
commit(SET_TEAM_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const { data } = await TeamsAPI.get(true);
|
||||
commit(CLEAR_TEAMS);
|
||||
commit(SET_TEAMS, data);
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
SET_TEAM_UI_FLAG,
|
||||
CLEAR_TEAMS,
|
||||
SET_TEAMS,
|
||||
SET_TEAM_ITEM,
|
||||
EDIT_TEAM,
|
||||
@@ -15,19 +14,14 @@ export const mutations = {
|
||||
};
|
||||
},
|
||||
|
||||
[CLEAR_TEAMS]: $state => {
|
||||
$state.records = {};
|
||||
},
|
||||
|
||||
// Replaces (not merges) so rows deleted server-side never survive as
|
||||
// phantoms — SET_TEAMS only ever receives the full list.
|
||||
[SET_TEAMS]: ($state, data) => {
|
||||
const updatedRecords = { ...$state.records };
|
||||
const records = {};
|
||||
data.forEach(team => {
|
||||
updatedRecords[team.id] = {
|
||||
...(updatedRecords[team.id] || {}),
|
||||
...team,
|
||||
};
|
||||
records[team.id] = team;
|
||||
});
|
||||
$state.records = updatedRecords;
|
||||
$state.records = records;
|
||||
},
|
||||
|
||||
[SET_TEAM_ITEM]: ($state, data) => {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
export const SET_TEAM_UI_FLAG = 'SET_TEAM_UI_FLAG';
|
||||
export const CLEAR_TEAMS = 'CLEAR_TEAMS';
|
||||
export const SET_TEAMS = 'SET_TEAMS';
|
||||
export const SET_TEAM_ITEM = 'SET_TEAM_ITEM';
|
||||
export const EDIT_TEAM = 'EDIT_TEAM';
|
||||
|
||||
@@ -4,7 +4,11 @@ module CacheKeys
|
||||
include CacheKeysHelper
|
||||
include Events::Types
|
||||
|
||||
CACHE_KEYS_EXPIRY = 72.hours
|
||||
# Self-healing bound: if a write path ever changes cached data without
|
||||
# bumping its key, expiry forces the sentinel and every client refetches.
|
||||
# 7 days caps that staleness while sparing quiet models (labels, teams)
|
||||
# from a spurious full refetch after every idle weekend.
|
||||
CACHE_KEYS_EXPIRY = 7.days
|
||||
|
||||
included do
|
||||
class_attribute :cacheable_models
|
||||
|
||||
@@ -21,4 +21,19 @@ RSpec.describe RoomChannel do
|
||||
expect(subscription).to have_stream_for(user.pubsub_token)
|
||||
expect(subscription).to have_stream_for("account_#{account.id}")
|
||||
end
|
||||
|
||||
it 'transmits the account cache keys to user subscribers' do
|
||||
subscribe(user_id: user.id, pubsub_token: user.pubsub_token, account_id: account.id)
|
||||
|
||||
cache_event = transmissions.find { |message| message['event'] == 'account.cache_invalidated' }
|
||||
expect(cache_event['data']['account_id']).to eq(account.id)
|
||||
expect(cache_event['data']['cache_keys'].keys).to match_array(%w[label inbox team])
|
||||
end
|
||||
|
||||
it 'does not transmit cache keys to contact subscribers' do
|
||||
subscribe(pubsub_token: contact_inbox.pubsub_token)
|
||||
|
||||
cache_event = transmissions.find { |message| message['event'] == 'account.cache_invalidated' }
|
||||
expect(cache_event).to be_nil
|
||||
end
|
||||
end
|
||||
|
||||
@@ -216,14 +216,15 @@ RSpec.describe 'Accounts API', type: :request do
|
||||
expect(response.parsed_body['cache_keys'].keys).to match_array(%w[label inbox team])
|
||||
end
|
||||
|
||||
it 'sets the appropriate cache headers' do
|
||||
it 'does not allow cached cache key responses' do
|
||||
get "/api/v1/accounts/#{account.id}/cache_keys",
|
||||
headers: admin.create_new_auth_token,
|
||||
as: :json
|
||||
|
||||
expect(response.headers['Cache-Control']).to include('max-age=10')
|
||||
expect(response.headers['Cache-Control']).to include('max-age=0')
|
||||
expect(response.headers['Cache-Control']).to include('private')
|
||||
expect(response.headers['Cache-Control']).to include('stale-while-revalidate=300')
|
||||
expect(response.headers['Cache-Control']).to include('must-revalidate')
|
||||
expect(response.headers['Cache-Control']).not_to include('stale-while-revalidate')
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user