From 42d25deba5d15760068bcb5c417d8d8026357111 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Tue, 16 Nov 2021 16:15:23 +0100
Subject: [PATCH] Adding feature flag functionality
---
frontend/src/contexts/featureContext.ts | 12 +++++++
frontend/src/contexts/index.ts | 3 +-
frontend/src/index.tsx | 17 ++++++----
frontend/src/providers/featureProvider.tsx | 32 ++++++++++++++++++
.../sponsor/register/stepPersonForm.tsx | 33 +++++++++++--------
5 files changed, 76 insertions(+), 21 deletions(-)
create mode 100644 frontend/src/contexts/featureContext.ts
create mode 100644 frontend/src/providers/featureProvider.tsx
diff --git a/frontend/src/contexts/featureContext.ts b/frontend/src/contexts/featureContext.ts
new file mode 100644
index 00000000..c8c4220b
--- /dev/null
+++ b/frontend/src/contexts/featureContext.ts
@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react'
+
+export interface IFeatureContext {
+ // Controls whether the contact person and comment optional fields be shown in the register new guest wizard
+ displayContactAndComment: boolean
+}
+
+export const FeatureContext = createContext<IFeatureContext>({
+ displayContactAndComment: true,
+})
+
+export const useFeatureContext = () => useContext(FeatureContext)
diff --git a/frontend/src/contexts/index.ts b/frontend/src/contexts/index.ts
index d6231cb0..c7483440 100644
--- a/frontend/src/contexts/index.ts
+++ b/frontend/src/contexts/index.ts
@@ -1,3 +1,4 @@
import { UserContext, useUserContext } from './userContext'
+import { FeatureContext } from './featureContext'
-export { UserContext, useUserContext }
+export { UserContext, useUserContext, FeatureContext }
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index becf7b9f..6532d0cc 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -11,19 +11,22 @@ import getTheme from 'themes'
import App from 'routes'
import { UserProvider } from 'providers'
import reportWebVitals from './reportWebVitals'
+import FeatureProvider from './providers/featureProvider'
function appRoot() {
return (
<React.StrictMode>
<Router>
<LocalizationProvider dateAdapter={AdapterDateFns}>
- <ThemeProvider theme={getTheme()}>
- <UserProvider>
- <Suspense fallback={<CircularProgress />}>
- <App />
- </Suspense>
- </UserProvider>
- </ThemeProvider>
+ <FeatureProvider>
+ <ThemeProvider theme={getTheme()}>
+ <UserProvider>
+ <Suspense fallback={<CircularProgress />}>
+ <App />
+ </Suspense>
+ </UserProvider>
+ </ThemeProvider>
+ </FeatureProvider>
</LocalizationProvider>
</Router>
</React.StrictMode>
diff --git a/frontend/src/providers/featureProvider.tsx b/frontend/src/providers/featureProvider.tsx
new file mode 100644
index 00000000..1e04f994
--- /dev/null
+++ b/frontend/src/providers/featureProvider.tsx
@@ -0,0 +1,32 @@
+import { FeatureContext } from 'contexts'
+import React from 'react'
+import { appInst } from '../appConfig'
+import { IFeatureContext } from '../contexts/featureContext'
+
+type FeatureProviderProps = {
+ children: React.ReactNode
+}
+
+function FeatureProvider(props: FeatureProviderProps) {
+ const { children } = props
+
+ let features: IFeatureContext
+ switch (appInst) {
+ case 'uib':
+ features = { displayContactAndComment: false }
+ break
+
+ case 'uio':
+ default:
+ features = { displayContactAndComment: true }
+ break
+ }
+
+ return (
+ <FeatureContext.Provider value={features}>
+ {children}
+ </FeatureContext.Provider>
+ )
+}
+
+export default FeatureProvider
diff --git a/frontend/src/routes/sponsor/register/stepPersonForm.tsx b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
index c13e7b5e..6524108d 100644
--- a/frontend/src/routes/sponsor/register/stepPersonForm.tsx
+++ b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
@@ -11,9 +11,10 @@ import {
} from '@mui/material'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'
import { DatePicker } from '@mui/lab'
-import {
+import React, {
forwardRef,
Ref,
+ useContext,
useEffect,
useImperativeHandle,
useState,
@@ -24,6 +25,7 @@ import { PersonFormMethods } from './personFormMethods'
import useOus, { enSort, nbSort } from '../../../hooks/useOus'
import useRoleTypes, { RoleTypeData } from '../../../hooks/useRoleTypes'
import { isValidEmail } from '../../../utils'
+import { FeatureContext } from '../../../contexts'
interface StepPersonFormProperties {
nextHandler(formState: RegisterFormData): void
@@ -43,6 +45,7 @@ const StepPersonForm = forwardRef(
formData.role_type ? formData.role_type : ''
)
const roleTypes = useRoleTypes()
+ const { displayContactAndComment } = useContext(FeatureContext)
const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
if (i18n.language === 'en') {
@@ -239,19 +242,23 @@ const StepPersonForm = forwardRef(
)}
/>
- <TextField
- id="contact_person"
- label={t('input.contactPersonUnit')}
- {...register(`contact_person_unit`)}
- />
+ {displayContactAndComment && (
+ <>
+ <TextField
+ id="contact_person"
+ label={t('input.contactPersonUnit')}
+ {...register(`contact_person_unit`)}
+ />
- <TextField
- id="comment"
- label={t('input.comment')}
- multiline
- rows={5}
- {...register(`comment`)}
- />
+ <TextField
+ id="comment"
+ label={t('input.comment')}
+ multiline
+ rows={5}
+ {...register(`comment`)}
+ />
+ </>
+ )}
</Stack>
</form>
</Box>
--
GitLab