Merge pull request #1258 from nickgros/webhooks-feature-flag

Sage-Bionetworks · Oct 4, 2024 · 0cca79a · 0cca79a
2 parents 213fc12 + 49d1774
commit 0cca79a
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 48 deletions.
diff --git a/apps/SageAccountWeb/src/App.tsx b/apps/SageAccountWeb/src/App.tsx
@@ -1,4 +1,5 @@
 import { AppContextConsumer } from './AppContext'
+import Footer from './components/Footer'
 import { SageResourcesPage } from './components/SageResourcesPage'
 import { AccountCreatedPage } from './components/AccountCreatedPage'
 import { AccountSettings } from './components/AccountSettings'
@@ -141,6 +142,7 @@ function App() {
                       exact
                       render={() => <WebhookManagementPage />}
                     />
+                    <Footer />
                   </>
                 )}
               </>

diff --git a/apps/SageAccountWeb/src/components/AccountSettings.tsx b/apps/SageAccountWeb/src/components/AccountSettings.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useRef, useState } from 'react'
 import {
   Alert,
   AlertTitle,
@@ -12,30 +11,36 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import { UserBundle, UserProfile } from '@sage-bionetworks/synapse-types'
+import {
+  FeatureFlagEnum,
+  UserBundle,
+  UserProfile,
+  VerificationState,
+  VerificationStateEnum,
+} from '@sage-bionetworks/synapse-types'
+import React, { useEffect, useRef, useState } from 'react'
+import { Form } from 'react-bootstrap'
+import { Link as RouterLink, useHistory, useLocation } from 'react-router-dom'
 import {
   ChangePassword,
+  CookiePreferencesDialog,
   displayToast,
   IconSvg,
   SynapseClient,
   SynapseConstants,
   SynapseHookUtils,
+  SynapseQueries,
   TwoFactorAuthSettingsPanel,
-  useSynapseContext,
-  CookiePreferencesDialog,
   useApplicationSessionContext,
+  useSynapseContext,
 } from 'synapse-react-client'
-import { Link as RouterLink, useHistory, useLocation } from 'react-router-dom'
-import { Form } from 'react-bootstrap'
-import { ORCiDButton } from './ProfileValidation/ORCiDButton'
+import UniversalCookies from 'universal-cookie'
 import AccountSettingsTopBar from './AccountSettingsTopBar'
 import { ConfigureEmail } from './ConfigureEmail'
+import { ProfileAvatar } from './ProfileAvatar'
+import { ORCiDButton } from './ProfileValidation/ORCiDButton'
 import { UnbindORCiDDialog } from './ProfileValidation/UnbindORCiD'
-import UniversalCookies from 'universal-cookie'
 import { StyledFormControl } from './StyledComponents'
-import { ProfileAvatar } from './ProfileAvatar'
-import { VerificationStateEnum } from '@sage-bionetworks/synapse-types'
-import { VerificationState } from '@sage-bionetworks/synapse-types'
 
 const CompletionStatus: React.FC<{ isComplete: boolean | undefined }> = ({
   isComplete,
@@ -95,6 +100,10 @@ export const AccountSettings = () => {
 
   const { clearSession } = useApplicationSessionContext()
 
+  const showWebhooks = SynapseQueries.useGetFeatureFlag(
+    FeatureFlagEnum.WEBHOOKS_UI,
+  )
+
   const cookies = new UniversalCookies()
   const [isUTCTime, setUTCTime] = useState<string>(
     SynapseClient.getUseUtcTimeFromCookie().toString(),
@@ -238,9 +247,11 @@ export const AccountSettings = () => {
               >
                 OAuth Clients
               </ListItemButton>
-              <ListItemButton onClick={() => handleScroll(webhooksRef)}>
-                Webhooks
-              </ListItemButton>
+              {showWebhooks && (
+                <ListItemButton onClick={() => handleScroll(webhooksRef)}>
+                  Webhooks
+                </ListItemButton>
+              )}
               <ListItemButton onClick={() => handleScroll(cookieManagementRef)}>
                 Privacy Preferences
               </ListItemButton>
@@ -713,31 +724,33 @@ 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>
+              {showWebhooks && (
+                <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"

diff --git a/apps/SageAccountWeb/src/components/Footer.tsx b/apps/SageAccountWeb/src/components/Footer.tsx
@@ -0,0 +1,25 @@
+import { Box, Typography } from '@mui/material'
+import React from 'react'
+import { ExperimentalMode } from 'synapse-react-client'
+
+function Footer() {
+  return (
+    <footer id="footer">
+      <Box
+        sx={{
+          backgroundColor: '#76919e',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          p: { xs: '20px 40px', md: '40px 80px' },
+          color: 'white',
+        }}
+      >
+        <Typography variant="body1">Sage Bionetworks</Typography>
+        <ExperimentalMode />
+      </Box>
+    </footer>
+  )
+}
+
+export default React.memo(Footer)
diff --git a/apps/SageAccountWeb/src/style/_AccountSetting.scss b/apps/SageAccountWeb/src/style/_AccountSetting.scss
@@ -1,5 +1,4 @@
 .account-settings-page {
-  height: 100vh;
   overflow-y: scroll;
   position: relative;
 }

diff --git a/packages/synapse-react-client/src/mocks/msw/handlers/featureFlagHandlers.ts b/packages/synapse-react-client/src/mocks/msw/handlers/featureFlagHandlers.ts
@@ -2,14 +2,11 @@ import { rest } from 'msw'
 import { FeatureFlagEnum, FeatureFlags } from '@sage-bionetworks/synapse-types'
 import { BackendDestinationEnum, getEndpoint } from '../../../utils/functions'
 
-const MOCK_FEATURE_FLAGS_VALUE: FeatureFlags = {
-  [FeatureFlagEnum.DESCRIPTION_FIELD]: false,
-  [FeatureFlagEnum.VIRTUALTABLE_SUPPORT]: false,
-  [FeatureFlagEnum.JSONSCHEMA_VALIDATION_STATUS]: false,
-  [FeatureFlagEnum.REACT_ENTITY_ACL_EDITOR]: false,
-  [FeatureFlagEnum.HOMEPAGE_CHATBOT]: false,
-  [FeatureFlagEnum.PORTALS_DROPDOWN]: false,
-}
+const MOCK_FEATURE_FLAGS_VALUE: FeatureFlags = Object.values(
+  FeatureFlagEnum,
+).reduce((prev, curr) => {
+  return { ...prev, [curr]: false }
+}, {} as FeatureFlags)
 
 type FeatureFlagHandlerOptions = {
   portalOrigin?: string

diff --git a/packages/synapse-types/src/FeatureFlags.ts b/packages/synapse-types/src/FeatureFlags.ts
@@ -18,4 +18,7 @@ export enum FeatureFlagEnum {
 
   // If enabled, show the Portals dropdown on the portal site (to discover other portals)
   PORTALS_DROPDOWN = 'PORTALS_DROPDOWN',
+
+  // If enabled, account settings will link to a page to manage webhooks
+  WEBHOOKS_UI = 'WEBHOOKS_UI',
 }