SWC-6616: Add a redirect dialog that can be used in SWC

packages/synapse-react-client/src/components/RedirectDialog.stories.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react'
+import RedirectDialog from './RedirectDialog'
+
+const meta = {
+  title: 'Synapse/RedirectDialog',
+  component: RedirectDialog,
+} satisfies Meta
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Demo: Story = {
+  args: {
+    redirectInstructions:
+      'Customizable redirect text, this dialog will redirect back to the current window location!',
+    redirectUrl: window.location.href,
+  },
+}

packages/synapse-react-client/src/components/RedirectDialog.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  Button,
+  Typography,
+  DialogTitle,
+  DialogActions,
+} from '@mui/material'
+
+export type RedirectDialogProps = {
+  redirectUrl: string
+  redirectInstructions: string
+}
+
+const RedirectDialog = (props: RedirectDialogProps) => {
+  const [countdownSeconds, setCountdownSeconds] = React.useState<
+    number | undefined
+  >()
+  const { redirectUrl, redirectInstructions } = props
+  const [isCancelled, setIsCancelled] = React.useState<boolean>(false)
+
+  useEffect(() => {
+    if (countdownSeconds && !isCancelled) {
+      // You would expect that we should redirect when countdownSeconds reaches 0,
+      // but it actually takes about a second to perform the redirect.
+      // So let's start the process when we get to 1.
+      if (countdownSeconds <= 1) {
+        window.location.assign(redirectUrl)
+      }
+      setTimeout(() => {
+        if (countdownSeconds) {
+          setCountdownSeconds(countdownSeconds => countdownSeconds! - 1)
+        }
+      }, 1000)
+    }
+  }, [redirectUrl, countdownSeconds, isCancelled])
+
+  useEffect(() => {
+    if (countdownSeconds == undefined) {
+      setCountdownSeconds(10)
+    }
+  }, [countdownSeconds])
+
+  const onClose = () => {
+    setIsCancelled(true)
+  }
+
+  return (
+    <Dialog open={!isCancelled} onClose={onClose} className="RedirectDialog">
+      <DialogTitle>Redirecting</DialogTitle>
+      <DialogContent>
+        <Typography variant="body1" sx={{ paddingBottom: '20px' }}>
+          <strong>{redirectInstructions}</strong>
+        </Typography>
+        <Typography variant="body1" sx={{ paddingBottom: '20px' }}>
+          You will be redirected in <strong>{countdownSeconds} seconds</strong>
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            window.location.assign(redirectUrl)
+          }}
+        >
+          Go to the site now
+        </Button>
+        <Button variant="outlined" onClick={onClose}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default RedirectDialog

packages/synapse-react-client/src/umd.index.ts

@@ -1,5 +1,6 @@
 import { SkeletonButton } from './components/Skeleton/SkeletonButton'
 import { AccountLevelBadge } from './components/AccountLevelBadge/AccountLevelBadge'
+import RedirectDialog from './components/RedirectDialog'
 import ChangePassword from './components/ChangePassword/ChangePassword'
 import { ReviewerDashboard } from './components/dataaccess/ReviewerDashboard'
 import { FolderDownloadConfirmation } from './components/download_list/FolderDownloadConfirmation'
@@ -145,6 +146,7 @@ const SynapseComponents = {
   OrientationBanner,
   AccessRequirementList,
   TableColumnSchemaForm,
+  RedirectDialog,
 }
 
 // Include the version in the build