Merge pull request Sage-Bionetworks#1236 from nickgros/SWC-7061

apps/SageAccountWeb/src/App.tsx

@@ -18,6 +18,7 @@ import {
   SynapseContextConsumer,
   SynapseContextType,
 } from 'synapse-react-client'
+import { WebhookManagementPage } from './components/WebhooksManagementPage'
 import { getSearchParam } from './URLUtils'
 import './App.scss'
 import LoginPage from './LoginPage'
@@ -135,6 +136,11 @@ function App() {
                       exact
                       render={() => <OAuthClientManagementPage />}
                     />
+                    <Route
+                      path={'/authenticated/webhook'}
+                      exact
+                      render={() => <WebhookManagementPage />}
+                    />
                   </>
                 )}
               </>

apps/SageAccountWeb/src/components/AccountSettings.tsx

@@ -86,6 +86,7 @@ export const AccountSettings = () => {
   const twoFactorAuthRef = useRef<HTMLDivElement>(null)
   const personalAccessTokenRef = useRef<HTMLDivElement>(null)
   const oauthClientManagementRef = useRef<HTMLDivElement>(null)
+  const webhooksRef = useRef<HTMLDivElement>(null)
   const cookieManagementRef = useRef<HTMLDivElement>(null)
   const signOutSectionRef = useRef<HTMLDivElement>(null)
   const [cookiePreferences] = SynapseHookUtils.useCookiePreferences()
@@ -237,6 +238,9 @@ export const AccountSettings = () => {
               >
                 OAuth Clients
               </ListItemButton>
+              <ListItemButton onClick={() => handleScroll(webhooksRef)}>
+                Webhooks
+              </ListItemButton>
               <ListItemButton onClick={() => handleScroll(cookieManagementRef)}>
                 Privacy Preferences
               </ListItemButton>
@@ -669,12 +673,13 @@ export const AccountSettings = () => {
                   as your password.
                 </Typography>
                 <div className="primary-button-container">
-                  <Link
+                  <Button
                     sx={credentialButtonSX}
+                    variant="outlined"
                     onClick={() => handleChangesFn('personalaccesstokens')}
                   >
                     Manage Personal Access Tokens
-                  </Link>
+                  </Button>
                   <Link
                     href="https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#ManagingYourAccount-PersonalAccessTokens"
                     target="_blank"
@@ -693,12 +698,13 @@ export const AccountSettings = () => {
                   Synapse as an identity provider.
                 </Typography>
                 <div className="primary-button-container">
-                  <Link
+                  <Button
                     sx={credentialButtonSX}
+                    variant="outlined"
                     onClick={() => handleChangesFn('oauthclientmanagement')}
                   >
                     Manage OAuth Clients
-                  </Link>
+                  </Button>
                   <Link
                     href="https://help.synapse.org/docs/Using-Synapse-as-an-OAuth-Server.2048327904.html"
                     target="_blank"
@@ -707,6 +713,31 @@ export const AccountSettings = () => {
                   </Link>
                 </div>
               </Paper>
+              <Paper
+                ref={webhooksRef}
+                className="account-setting-panel main-panel"
+              >
+                <Typography variant={'headline2'}>Webhooks</Typography>
+                <Typography variant={'body1'} sx={{ my: 1 }}>
+                  Webhooks can be used to receive programmatic events triggered
+                  by actions in Synapse.
+                </Typography>
+                <div className="primary-button-container">
+                  <Button
+                    sx={credentialButtonSX}
+                    variant="outlined"
+                    onClick={() => handleChangesFn('webhook')}
+                  >
+                    Manage Webhooks
+                  </Button>
+                  <Link
+                    href="https://rest-docs.synapse.org/rest/index.html#org.sagebionetworks.repo.web.controller.WebhookController"
+                    target="_blank"
+                  >
+                    More information
+                  </Link>
+                </div>
+              </Paper>
               <Paper
                 ref={cookieManagementRef}
                 className="account-setting-panel main-panel"

apps/SageAccountWeb/src/components/ConfigureEmail.tsx

@@ -1,11 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import {
-  displayToast,
-  SynapseClient,
-  SynapseQueries,
-  useSynapseContext,
-} from 'synapse-react-client'
-import { getSearchParam, hexDecodeAndDeserialize } from '../URLUtils'
+import AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'
+import DeleteIcon from '@mui/icons-material/DeleteTwoTone'
 import {
   Box,
   Button,
@@ -14,12 +8,18 @@ import {
   Divider,
   FormControlLabel,
   IconButton,
+  Stack,
   TextField,
   Typography,
 } from '@mui/material'
-import DeleteIcon from '@mui/icons-material/DeleteTwoTone'
-import AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'
-import { StyledFormControl } from './StyledComponents'
+import React, { useEffect, useState } from 'react'
+import {
+  displayToast,
+  SynapseClient,
+  SynapseQueries,
+  useSynapseContext,
+} from 'synapse-react-client'
+import { getSearchParam, hexDecodeAndDeserialize } from '../URLUtils'
 
 export type ConfigureEmailProps = {
   returnToPath: string
@@ -176,42 +176,42 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
           )
         }
       })}
-      <StyledFormControl variant="standard" margin="normal" fullWidth>
-        <Box sx={{ display: 'flex' }}>
-          <TextField
-            label={'Add an email address'}
-            id="additionalEmail"
-            sx={{ flexGrow: 1, marginRight: '10px' }}
-            value={newEmail}
-            onChange={e => setNewEmail(e.target.value)}
-          />
-          <Button
-            startIcon={<AddCircleTwoToneIcon />}
-            disabled={!newEmail}
-            variant={'contained'}
-            sx={{ alignSelf: 'flex-end', height: '47px' }}
-            onClick={e => {
-              addEmail(e)
-            }}
-          >
-            Add
-          </Button>
-        </Box>
-      </StyledFormControl>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={sendEmailNotifications}
-            onChange={e => updateEmailNotifications(!sendEmailNotifications)}
-          />
-        }
-        label={
-          <Typography variant="smallText1">
-            Allow Synapse to send me email notifications to my Primary email
-            address.
-          </Typography>
-        }
-      />
+      <Stack my={2} gap={2}>
+        <TextField
+          label={'Add an email address'}
+          id="additionalEmail"
+          fullWidth
+          value={newEmail}
+          onChange={e => setNewEmail(e.target.value)}
+        />
+        <Button
+          startIcon={<AddCircleTwoToneIcon />}
+          disabled={!newEmail}
+          variant={'contained'}
+          onClick={e => {
+            addEmail(e)
+          }}
+          sx={{
+            alignSelf: 'flex-start',
+          }}
+        >
+          Add
+        </Button>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={sendEmailNotifications}
+              onChange={e => updateEmailNotifications(!sendEmailNotifications)}
+            />
+          }
+          label={
+            <Typography variant="smallText1">
+              Allow Synapse to send me email notifications to my Primary email
+              address.
+            </Typography>
+          }
+        />
+      </Stack>
     </div>
   )
 }

apps/SageAccountWeb/src/components/RegisterAccount1.tsx

@@ -99,6 +99,7 @@ export const RegisterAccount1 = () => {
 
   const chooseButtonSx = {
     width: '100%',
+    height: '52px',
     marginBottom: '10px',
     padding: '10px',
     color: 'grey.800',

apps/SageAccountWeb/src/components/WebhooksManagementPage.tsx

@@ -0,0 +1,39 @@
+import { Box, Container, Paper } from '@mui/material'
+import React from 'react'
+import { WebhookDashboard } from 'synapse-react-client'
+import { BackButton } from './BackButton'
+import { SourceAppLogo } from './SourceApp'
+import { StyledOuterContainer } from './StyledComponents'
+import { SourceAppProvider, SYNAPSE_SOURCE_APP_ID } from './useSourceApp'
+
+export function WebhooksManagementPageInternal() {
+  return (
+    <StyledOuterContainer>
+      <Container>
+        <Paper
+          className="SageResourcesPage"
+          sx={{
+            margin: '0 auto',
+            '& .SourceAppLogo': {
+              display: 'block',
+            },
+          }}
+        >
+          <Box sx={{ padding: '60px', position: 'relative' }}>
+            <BackButton to={'/authenticated/myaccount'} />
+            <SourceAppLogo />
+            <WebhookDashboard />
+          </Box>
+        </Paper>
+      </Container>
+    </StyledOuterContainer>
+  )
+}
+export function WebhookManagementPage() {
+  // Webhooks are exclusively for Synapse, so use the Synapse theme
+  return (
+    <SourceAppProvider sourceAppId={SYNAPSE_SOURCE_APP_ID}>
+      <WebhooksManagementPageInternal />
+    </SourceAppProvider>
+  )
+}

apps/SageAccountWeb/src/style/theme.ts

@@ -13,15 +13,10 @@ export const sageAccountWebThemeOverrides: PartialDeep<ThemeOptions> = {
     MuiButton: {
       styleOverrides: {
         contained: {
-          justifyContent: 'center',
-          alignItems: 'center',
-          padding: '14px 16px',
-          height: '52px',
           fontWeight: '900',
           borderRadius: '3px',
         },
         outlined: {
-          height: '48px',
           background: '#FFFFFF',
           border: '1px solid #EAECEE',
           boxShadow:
@@ -34,7 +29,6 @@ export const sageAccountWebThemeOverrides: PartialDeep<ThemeOptions> = {
           },
         },
         containedSecondary: {
-          height: '48px',
           background: '#FFFFFF',
           border: '1px solid #EAECEE',
           boxShadow:
@@ -74,9 +68,6 @@ export const sageAccountWebThemeOverrides: PartialDeep<ThemeOptions> = {
       fontFamily: fontDefinition,
       fontSize: '14px',
     },
-    button: {
-      fontSize: '16px',
-    },
     headline2: {
       fontWeight: 700,
       fontSize: '24px',

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

@@ -12,7 +12,7 @@ import {
   SxProps,
 } from '@mui/material'
 import React from 'react'
-import { HelpPopover, HelpPopoverProps } from './HelpPopover'
+import { HelpPopover, HelpPopoverProps } from './HelpPopover/HelpPopover'
 
 const EMPTY_OBJECT = {}
 

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MarkdownPopover } from '../Markdown/MarkdownPopover'
-import { ButtonProps, TooltipProps } from '@mui/material'
+import { ButtonProps, SxProps, TooltipProps } from '@mui/material'
 import { HelpOutlineTwoTone } from '@mui/icons-material'
 
 export type HelpPopoverProps = {
@@ -9,6 +9,8 @@ export type HelpPopoverProps = {
   placement?: TooltipProps['placement']
   showCloseButton?: boolean
   className?: string
+  containerSx?: SxProps
+  iconSx?: SxProps
 }
 
 export const HelpPopover: React.FunctionComponent<HelpPopoverProps> = ({
@@ -17,6 +19,8 @@ export const HelpPopover: React.FunctionComponent<HelpPopoverProps> = ({
   placement = 'bottom',
   showCloseButton = true,
   className = '',
+  iconSx,
+  containerSx,
 }: HelpPopoverProps) => {
   const actionButtonConfig = helpUrl
     ? {
@@ -34,8 +38,9 @@ export const HelpPopover: React.FunctionComponent<HelpPopoverProps> = ({
         actionButton={actionButtonConfig}
         showCloseButton={showCloseButton}
         maxWidth="350px"
+        containerSx={containerSx}
       >
-        <HelpOutlineTwoTone className={`HelpButton ${className}`} />
+        <HelpOutlineTwoTone className={`HelpButton ${className}`} sx={iconSx} />
       </MarkdownPopover>
     </>
   )

packages/synapse-react-client/src/components/Markdown/MarkdownPopover.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   ButtonProps,
+  SxProps,
   tooltipClasses,
   TooltipProps,
   Typography,
@@ -25,6 +26,7 @@ export type MarkdownPopoverProps = React.PropsWithChildren<{
   }
   maxWidth?: string
   minWidth?: string
+  containerSx?: SxProps
 }>
 
 const buttonBoxSx = {
@@ -49,6 +51,7 @@ export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
   sx,
   maxWidth = '500px',
   minWidth = '300px',
+  containerSx,
 }: MarkdownPopoverProps) => {
   const id = useId()
   const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(
@@ -113,7 +116,7 @@ export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
           e.stopPropagation()
           setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))
         }}
-        sx={{ display: 'inline-block', cursor: 'pointer' }}
+        sx={{ display: 'inline-block', cursor: 'pointer', ...containerSx }}
       >
         {children}
       </Box>

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

@@ -119,13 +119,16 @@ export function StorybookComponentWrapper(props: {
       withErrorBoundary: true,
       downloadCartPageUrl: '/?path=/story/download-downloadcartpage--demo',
     }),
-    [accessToken],
+    [accessToken, currentStack, storybookContext.args.isAuthenticated],
   )
 
   return (
     <Suspense fallback={'global suspense loading...'}>
       <QueryClientProvider client={storybookQueryClient}>
-        <SynapseContextProvider synapseContext={synapseContext}>
+        <SynapseContextProvider
+          key={currentStack}
+          synapseContext={synapseContext}
+        >
           {storybookContext.globals.showReactQueryDevtools && (
             <ReactQueryDevtools />
           )}