From 7b0be1449bdd61fcddd3375e6ca0f0b25032d1da Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Sun, 9 Jun 2024 21:44:41 -0400
Subject: [PATCH] clear cache data

---
 .../src/search/useIndexedDBCachedQuery.tsx       | 16 +++++++++++++++-
 .../ui-core/src/workspace/WorkspaceContext.tsx   |  6 ++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/useIndexedDBCachedQuery.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/useIndexedDBCachedQuery.tsx
index d68344bf138c5..16d016d6b9804 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/useIndexedDBCachedQuery.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/useIndexedDBCachedQuery.tsx
@@ -29,9 +29,13 @@ export class CacheManager<TQuery> {
     return null;
   }
 
-  set(data: TQuery, version: number): Promise<void> {
+  async set(data: TQuery, version: number): Promise<void> {
     return this.cache.set('cache', {data, version}, {expiry: new Date('3030-01-01')});
   }
+
+  async clear() {
+    await this.cache.delete('cache');
+  }
 }
 
 interface QueryHookParams<TVariables extends OperationVariables, TQuery> {
@@ -158,6 +162,16 @@ export function useGetCachedData() {
     [],
   );
 }
+export function useClearCachedData() {
+  const {getCacheManager} = useContext(IndexedDBCacheContext);
+  return useCallback(
+    async <TQuery,>({key}: {key: string}) => {
+      const cacheManager = getCacheManager<TQuery>(key);
+      await cacheManager.clear();
+    },
+    [getCacheManager],
+  );
+}
 
 const contextValue = createIndexedDBCacheContextValue();
 export const IndexedDBCacheContext = createContext(contextValue);
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
index 332f924139185..99c6fc11b8723 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
@@ -26,6 +26,7 @@ import {useStateWithStorage} from '../hooks/useStateWithStorage';
 import {useUpdatingRef} from '../hooks/useUpdatingRef';
 import {codeLocationStatusAtom} from '../nav/useCodeLocationsStatus';
 import {
+  useClearCachedData,
   useGetCachedData,
   useGetData,
   useIndexedDBCachedQuery,
@@ -114,6 +115,7 @@ export const WorkspaceProvider = ({children}: {children: React.ReactNode}) => {
 
   const getCachedData = useGetCachedData();
   const getData = useGetData();
+  const clearCacheData = useClearCachedData();
 
   useLayoutEffect(() => {
     // Load data from the cache
@@ -250,12 +252,12 @@ export const WorkspaceProvider = ({children}: {children: React.ReactNode}) => {
     const copy = {...locationsData};
     locationsRemoved.forEach((loc) => {
       delete copy[loc.name];
-      indexedDB.deleteDatabase(`${localCacheIdPrefix}${locationWorkspaceKey(loc.name)}`);
+      clearCacheData({key: `${localCacheIdPrefix}${locationWorkspaceKey(loc.name)}`});
     });
     if (Object.keys(copy).length !== Object.keys(locationsData).length) {
       setLocationsData(copy);
     }
-  }, [localCacheIdPrefix, locationsData, locationsRemoved]);
+  }, [clearCacheData, localCacheIdPrefix, locationsData, locationsRemoved]);
 
   const locationEntries = useMemo(
     () =>