Merge pull request #1128 from jay-hodgson/SWC-7026

SWC-7026: optional callback on toggling experimental mode
Sage-Bionetworks · Aug 13, 2024 · 2b95dad · 2b95dad
2 parents b59ab58 + 6f1e2f9
commit 2b95dad
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git 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,12 +36,18 @@ const ExperimentalMode: React.FC = () => {
   const createExperimentalModeCookie = () => {
     cookies.set(EXPERIMENTAL_MODE_COOKIE, { path: '/' })
     setIsExperimentalModeOn(true)
+    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)
+    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
@@ -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
@@ -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>
   )