From 229568bdd6e5dc997e68cd4e9e902452336555a8 Mon Sep 17 00:00:00 2001
From: jay-hodgson <jay.hodgson@sagebase.org>
Date: Tue, 13 Aug 2024 13:16:14 -0700
Subject: [PATCH 1/2] SWC-7026: full page reload on toggling experimental mode

---
 .../src/components/ExperimentalMode/ExperimentalMode.tsx        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx b/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
index 3b39b2a8d0..40c208ce72 100644
--- a/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
+++ b/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
@@ -31,12 +31,14 @@ const ExperimentalMode: React.FC = () => {
   const createExperimentalModeCookie = () => {
     cookies.set(EXPERIMENTAL_MODE_COOKIE, { path: '/' })
     setIsExperimentalModeOn(true)
+    window.location.reload()
   }
 
   const deleteExperimentalModeCookie = () => {
     // cookie.remove requires to re-calculate date obj each time, this is more straightforward
     document.cookie = `${EXPERIMENTAL_MODE_COOKIE}= ; expires = Thu, 01 Jan 1970 00:00:00 GMT`
     setIsExperimentalModeOn(false)
+    window.location.reload()
   }
 
   return (

From 6f1e2f9a8468512c58111cf830cbe54ca66be8d0 Mon Sep 17 00:00:00 2001
From: jay-hodgson <jay.hodgson@sagebase.org>
Date: Tue, 13 Aug 2024 13:54:18 -0700
Subject: [PATCH 2/2] SWC-7026

---
 .../ExperimentalMode/ExperimentalMode.tsx         | 15 ++++++++++++---
 .../SynapseFooter/SynapseFooter.stories.ts        |  5 +++++
 .../components/SynapseFooter/SynapseFooter.tsx    |  4 +++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx b/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
index 40c208ce72..150916269a 100644
--- a/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
+++ b/packages/synapse-react-client/src/components/ExperimentalMode/ExperimentalMode.tsx
@@ -11,7 +11,12 @@ import { useTheme } from '@mui/material'
 const experimentalModeText =
   'This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.'
 
-const ExperimentalMode: React.FC = () => {
+export type ExperimentalModeProps = {
+  onExperimentalModeToggle?: (newValue: boolean) => void
+}
+const ExperimentalMode: React.FunctionComponent<ExperimentalModeProps> = ({
+  onExperimentalModeToggle,
+}) => {
   const [isExperimentalModeOn, setIsExperimentalModeOn] =
     useState<boolean>(false)
   const cookies = new UniversalCookies()
@@ -31,14 +36,18 @@ const ExperimentalMode: React.FC = () => {
   const createExperimentalModeCookie = () => {
     cookies.set(EXPERIMENTAL_MODE_COOKIE, { path: '/' })
     setIsExperimentalModeOn(true)
-    window.location.reload()
+    if (onExperimentalModeToggle) {
+      onExperimentalModeToggle(true)
+    }
   }
 
   const deleteExperimentalModeCookie = () => {
     // cookie.remove requires to re-calculate date obj each time, this is more straightforward
     document.cookie = `${EXPERIMENTAL_MODE_COOKIE}= ; expires = Thu, 01 Jan 1970 00:00:00 GMT`
     setIsExperimentalModeOn(false)
-    window.location.reload()
+    if (onExperimentalModeToggle) {
+      onExperimentalModeToggle(false)
+    }
   }
 
   return (
diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.stories.ts b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.stories.ts
index f852ee145d..55da1d1520 100644
--- a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.stories.ts
+++ b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.stories.ts
@@ -16,5 +16,10 @@ export const Demo: Story = {
     gotoPlace: (href: string) => {
       window.alert(`Footer calling back to change route to ${href}`)
     },
+    onExperimentalModeToggle: (newMode: boolean) => {
+      window.alert(
+        `Footer calling back to toggle experimental mode to ${newMode}`,
+      )
+    },
   },
 }
diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx
index 459b557ac0..b6cf216fd5 100644
--- a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx
+++ b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx
@@ -18,6 +18,7 @@ export type SynapseFooterProps = {
   srcVersion: string
   repoVersion: string
   gotoPlace: (href: string) => void
+  onExperimentalModeToggle: (newValue: boolean) => void
 }
 
 const currentYear = new Date().getFullYear()
@@ -26,6 +27,7 @@ export const SynapseFooter: React.FunctionComponent<SynapseFooterProps> = ({
   srcVersion,
   repoVersion,
   gotoPlace,
+  onExperimentalModeToggle,
 }) => {
   const { accessToken } = useSynapseContext()
   const registrationUrl = useOneSageURL('/register1')
@@ -298,7 +300,7 @@ export const SynapseFooter: React.FunctionComponent<SynapseFooterProps> = ({
             repo: {repoVersion}
           </Typography>
         </Box>
-        <ExperimentalMode />
+        <ExperimentalMode onExperimentalModeToggle={onExperimentalModeToggle} />
       </Box>
     </Box>
   )