From d7e5b6ae27b6418d1ec4d07407a7ea54ae5e9567 Mon Sep 17 00:00:00 2001
From: Tim Quelch <tim@tquelch.com>
Date: Sun, 18 Aug 2024 12:12:04 +1000
Subject: [PATCH] Add advanced setting to reload app from server

---
 .../src/browser-preload.browser.js            | 16 +++++++
 .../src/components/settings/ReloadApp.tsx     | 48 +++++++++++++++++++
 .../src/components/settings/index.tsx         |  2 +
 packages/loot-core/typings/window.d.ts        |  1 +
 4 files changed, 67 insertions(+)
 create mode 100644 packages/desktop-client/src/components/settings/ReloadApp.tsx

diff --git a/packages/desktop-client/src/browser-preload.browser.js b/packages/desktop-client/src/browser-preload.browser.js
index c7e0f0b35be..7c7850825c2 100644
--- a/packages/desktop-client/src/browser-preload.browser.js
+++ b/packages/desktop-client/src/browser-preload.browser.js
@@ -51,6 +51,22 @@ global.Actual = {
     window.location.reload();
   },
 
+  reload: () => {
+    if (window.navigator.serviceWorker == null) return;
+
+    // Unregister the service worker handling routing and then reload. This should force the reload
+    // to query the actual server rather than delegating to the worker
+    return window.navigator.serviceWorker
+      .getRegistration('/')
+      .then(registration => {
+        if (registration == null) return;
+        return registration.unregister();
+      })
+      .then(() => {
+        window.location.reload();
+      });
+  },
+
   openFileDialog: async ({ filters = [] }) => {
     return new Promise(resolve => {
       let createdElement = false;
diff --git a/packages/desktop-client/src/components/settings/ReloadApp.tsx b/packages/desktop-client/src/components/settings/ReloadApp.tsx
new file mode 100644
index 00000000000..f731788cf70
--- /dev/null
+++ b/packages/desktop-client/src/components/settings/ReloadApp.tsx
@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+
+import { ButtonWithLoading } from '../common/Button2';
+import { Text } from '../common/Text';
+
+import { Setting } from './UI';
+
+export function ReloadApp() {
+  const [reloading, setReloading] = useState(false);
+
+  const reload: undefined | (() => Promise<void>) = window.Actual?.reload;
+  const isReloadable = reload != null;
+
+  const onReloadApp = useCallback(async () => {
+    setReloading(true);
+    if (reload) {
+      await reload();
+    }
+    setReloading(false);
+  }, [setReloading, reload]);
+
+  return (
+    <Setting
+      primaryAction={
+        <ButtonWithLoading
+          isLoading={reloading}
+          isDisabled={!isReloadable}
+          onPress={onReloadApp}
+        >
+          Reload application
+        </ButtonWithLoading>
+      }
+    >
+      {isReloadable ? (
+        <Text>
+          <strong>Reload application</strong> will force the application to
+          reload from the server. This is done automatically when there are new
+          versions available, however forcing the application to reload may
+          resolve issues with redirects with custom authentication
+        </Text>
+      ) : (
+        <Text>
+          <strong>Reload application</strong> is only available on browser
+        </Text>
+      )}
+    </Setting>
+  );
+}
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 61c1b19145c..8d5ee2578d6 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -31,6 +31,7 @@ import { ExportBudget } from './Export';
 import { FixSplits } from './FixSplits';
 import { FormatSettings } from './Format';
 import { GlobalSettings } from './Global';
+import { ReloadApp } from './ReloadApp';
 import { ResetCache, ResetSync } from './Reset';
 import { ThemeSettings } from './Themes';
 import { AdvancedToggle, Setting } from './UI';
@@ -184,6 +185,7 @@ export function Settings() {
           <ResetCache />
           <ResetSync />
           <FixSplits />
+          <ReloadApp />
           <ExperimentalFeatures />
         </AdvancedToggle>
       </View>
diff --git a/packages/loot-core/typings/window.d.ts b/packages/loot-core/typings/window.d.ts
index ddb0da659cf..a0b55f56687 100644
--- a/packages/loot-core/typings/window.d.ts
+++ b/packages/loot-core/typings/window.d.ts
@@ -15,6 +15,7 @@ declare global {
         opts: Parameters<import('electron').Dialog['showOpenDialogSync']>[0],
       ) => Promise<string[]>;
       relaunch: () => void;
+      reload: (() => Promise<void>) | undefined;
     };
 
     __navigate?: import('react-router').NavigateFunction;