From 3f6dbe740f4fa0b72a2fe8cc4c8644e67dcae051 Mon Sep 17 00:00:00 2001
From: Marco polo <salazarm@users.noreply.github.com>
Date: Tue, 3 Sep 2024 12:30:05 -0400
Subject: [PATCH] Add user settings for clearing indexeddb caches (#24179)

## Summary & Motivation
![Screenshot 2024-09-03
110219](https://github.com/user-attachments/assets/a138c0cf-a88c-407c-9d1e-30ee971d0ced)
![Screenshot 2024-09-03
110311](https://github.com/user-attachments/assets/4d660820-87c0-4cd2-8818-ca1406b25a63)

## How I Tested These Changes

Used the setting

## Changelog [New]
[ui] Added an option under user settings to clear client side indexeddb
caches as an escape hatch for caching related bugs.

---------

Co-authored-by: Marco Salazar <marco@dagsterlabs.com>
---
 .../UserSettingsDialog/UserSettingsDialog.tsx | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx
index 65a335a6b8744..48fe170cbe02a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  ButtonLink,
   Checkbox,
   Colors,
   Dialog,
@@ -15,6 +16,7 @@ import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
 import {UserPreferences} from 'shared/app/UserSettingsDialog/UserPreferences.oss';
 
 import {CodeLinkProtocolSelect} from '../../code-links/CodeLinkProtocol';
+import {showCustomAlert} from '../CustomAlertProvider';
 import {getFeatureFlags, setFeatureFlags} from '../Flags';
 
 type OnCloseFn = (event: React.SyntheticEvent<HTMLElement>) => void;
@@ -128,12 +130,45 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps)
         <Box padding={{bottom: 8}} flex={{direction: 'column', gap: 4}}>
           <UserPreferences onChangeRequiresReload={setAreaPreferencesChanged} />
         </Box>
-        <Box padding={{top: 16}} border="top">
+        <Box padding={{vertical: 16}} border="top">
           <Box padding={{bottom: 8}}>
             <Subheading>Experimental features</Subheading>
           </Box>
           {experimentalSettings}
         </Box>
+        <Box padding={{top: 16}} border="top">
+          <ButtonLink
+            onClick={() => {
+              indexedDB.databases().then((databases) => {
+                databases.forEach((db) => {
+                  db.name && indexedDB.deleteDatabase(db.name);
+                });
+              });
+              showCustomAlert({
+                title: 'Caches reset',
+                body: (
+                  <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+                    IndexedDB cache has been reset.
+                    <ButtonLink
+                      onClick={() => {
+                        window.location.reload();
+                      }}
+                    >
+                      Click here to reload the page
+                    </ButtonLink>
+                  </Box>
+                ),
+              });
+            }}
+          >
+            <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+              Reset IndexedDB cache
+              <Tooltip content="If you're seeing stale definitions or experiencing client side bugs then this may fix it">
+                <Icon name="info" />
+              </Tooltip>
+            </Box>
+          </ButtonLink>
+        </Box>
       </DialogBody>
       <DialogFooter topBorder>
         <Button intent="primary" onClick={handleClose} disabled={reloading}>