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 <[email protected]>
dagster-io · Sep 3, 2024 · 3f6dbe7 · 3f6dbe7 · github-actions · Sep 3, 2024
1 parent 793f354
commit 3f6dbe7
Showing 1 changed file with 36 additions and 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
@@ -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}>