Merge branch 'restructure-frontend-featurechoices' into 'master'

Toggle frontend features with env vars

See merge request !427

frontend/.env

@@ -15,3 +15,7 @@ REACT_APP_RESPONSIBLE_ORGANIZATION_LINK='https://www.usit.uio.no/om/organisasjon
 REACT_APP_VERIFY_GUEST_EXPLANATION_LINK='https://www.uio.no/tjenester/it/brukernavn-passord/gjestetjenesten/hjelp/verifisering.html'
 
 REACT_APP_DISABLE_NIN_VERIFICATION='false'
+REACT_APP_DISPLAYCONTACTATUNIT='true'
+REACT_APP_DISPLAYCOMMENT='true'
+REACT_APP_DISPLAYCONTACTATUNITGUESTINPUT='true'
+REACT_APP_DISPLAYGENDERFIELDFORGUEST='false'

frontend/src/appConfig.ts

@@ -16,31 +16,12 @@ export const appTimezone: string = 'Europe/Oslo'
 export const appVersion: string = process.env.REACT_APP_VERSION as string
 export const appName: string = process.env.REACT_APP_NAME as string
 
-/* Institution (used for features and theming */
+/* Institution (used for theming) */
 export const appInst: string = env.REACT_APP_INST as string
 
-/* Show warning in the footer about this being a staging/test system */
-export const appStagingWarning: boolean =
-  env.REACT_APP_STAGING_WARNING === 'true'
-
-/* Is there a consent step during guest registration? */
-export const guestConsentStepEnabled: boolean =
-  env.REACT_APP_GUEST_CONSENT_STEP_ENABLED === 'true'
-
 /* Link to read more about the importance of verifying a guest */
 export const verifyGuestExplanationLink: string = env.REACT_APP_VERIFY_GUEST_EXPLANATION_LINK as string
 
-/* Should the 'available in search' field on roles be available for use? */
-export const availableInSearchEnabled: boolean =
-  env.REACT_APP_AVAILABLE_IN_SEARCH_ENABLED === 'true'
-
-/* Should nin verification be disabled for sponsors? */
-export const disableNinVerification: boolean =
-  env.REACT_APP_DISABLE_NIN_VERIFICATION === 'true'
-
-/* Should iga be checked when verifying identificators? */
-export const enableIgaCheck: boolean = env.REACT_APP_ENABLE_IGA_CHECK === 'true'
-
 /* Footer content */
 export const responsibleOrganization: string =
   env.REACT_APP_RESPONSIBLE_ORGANIZATION as string
@@ -74,3 +55,28 @@ const sentryProjectId: string = env.REACT_APP_SENTRY_PROJECT_ID as string
 const sentryHost: string = env.REACT_APP_SENTRY_HOST as string
 export const sentryEnabled: boolean = sentryHost !== undefined
 export const sentryDsn: string = `https://${sentryPublicKey}@${sentryHost}/${sentryProjectId}`
+
+/* Feature toggles */
+export const displayContactAtUnit: boolean = env.REACT_APP_DISPLAYCONTACTATUNIT === 'true'
+export const displayComment: boolean = env.REACT_APP_DISPLAYCOMMENT === 'true'
+export const displayContactAtUnitGuestInput: boolean = env.REACT_APP_DISPLAYCONTACTATUNITGUESTINPUT === 'true'
+export const displayGenderFieldForGuest: boolean = env.REACT_APP_DISPLAYGENDERFIELDFORGUEST === 'true'
+
+/* Show warning in the footer about this being a staging/test system */
+export const appStagingWarning: boolean =
+  env.REACT_APP_STAGING_WARNING === 'true'
+
+/* Is there a consent step during guest registration? */
+export const guestConsentStepEnabled: boolean =
+  env.REACT_APP_GUEST_CONSENT_STEP_ENABLED === 'true'
+
+/* Should the 'available in search' field on roles be available for use? */
+export const availableInSearchEnabled: boolean =
+  env.REACT_APP_AVAILABLE_IN_SEARCH_ENABLED === 'true'
+
+/* Should nin verification be disabled for sponsors? */
+export const disableNinVerification: boolean =
+  env.REACT_APP_DISABLE_NIN_VERIFICATION === 'true'
+
+/* Should iga be checked when verifying identificators? */
+export const enableIgaCheck: boolean = env.REACT_APP_ENABLE_IGA_CHECK === 'true'

frontend/src/contexts/featureContext.ts

@@ -8,14 +8,14 @@ export interface IFeatureContext {
   // Should the contact at unit field be shown for the guest when he registers his information?
   displayContactAtUnitGuestInput: boolean
   // Controls whether the gender field is shown for guests
-  showGenderFieldForGuest: boolean
+  displayGenderFieldForGuest: boolean
 }
 
 export const FeatureContext = createContext<IFeatureContext>({
   displayContactAtUnit: true,
   displayComment: true,
   displayContactAtUnitGuestInput: true,
-  showGenderFieldForGuest: true,
+  displayGenderFieldForGuest: true,
 })
 
 export const useFeatureContext = () => useContext(FeatureContext)

frontend/src/providers/featureProvider.tsx

 import { FeatureContext } from 'contexts'
 import React from 'react'
-import { appInst } from '../appConfig'
+import {
+  displayContactAtUnit,
+  displayComment,
+  displayContactAtUnitGuestInput,
+  displayGenderFieldForGuest,
+} from '../appConfig'
 import { IFeatureContext } from '../contexts/featureContext'
 
 type FeatureProviderProps = {
@@ -9,45 +14,11 @@ type FeatureProviderProps = {
 
 function FeatureProvider(props: FeatureProviderProps) {
   const { children } = props
-
-  let features: IFeatureContext
-  switch (appInst) {
-    case 'uib':
-      features = {
-        displayContactAtUnit: true,
-        displayComment: true,
-        displayContactAtUnitGuestInput: true,
-        showGenderFieldForGuest: true,
-      }
-      break
-
-    case 'ntnu':
-      features = {
-        displayContactAtUnit: true,
-        displayComment: true,
-        displayContactAtUnitGuestInput: true,
-        showGenderFieldForGuest: true,
-      }
-      break
-
-    case "uit":
-      features = {
-        displayContactAtUnit: true,
-        displayComment: true,
-        displayContactAtUnitGuestInput: true,
-        showGenderFieldForGuest: true,
-      }
-      break
-
-    case 'uio':
-    default:
-      features = {
-        displayContactAtUnit: true,
-        displayComment: true,
-        displayContactAtUnitGuestInput: true,
-        showGenderFieldForGuest: false,
-      }
-      break
+  const features: IFeatureContext = {
+    displayContactAtUnit,
+    displayComment,
+    displayContactAtUnitGuestInput,
+    displayGenderFieldForGuest,
   }
 
   return (

frontend/src/routes/guest/register/index.test.tsx

@@ -37,7 +37,7 @@ const allFeaturesOn = {
   displayContactAtUnit: true,
   displayComment: true,
   displayContactAtUnitGuestInput: true,
-  showGenderFieldForGuest: true,
+  displayGenderFieldForGuest: true,
 }
 
 test('Field showing values correctly', async () => {
@@ -197,7 +197,7 @@ test('Gender not required when gender field is not shown', async () => {
     displayContactAtUnit: true,
     displayComment: true,
     displayContactAtUnitGuestInput: true,
-    showGenderFieldForGuest: false,
+    displayGenderFieldForGuest: false,
   }
 
   render(

frontend/src/routes/guest/register/index.tsx

@@ -70,7 +70,8 @@ type InvitationData = {
 export default function GuestRegister() {
   const { t } = useTranslation(['common'])
   const navigate = useNavigate()
-  const { showGenderFieldForGuest } = useContext(FeatureContext)
+  const { displayGenderFieldForGuest } =
+    useContext(FeatureContext)
 
   const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
   const guestConsentRef = useRef<GuestRegisterCallableMethods>(null)
@@ -281,7 +282,7 @@ export default function GuestRegister() {
     }
 
     // Do not expect gender to be set if the field should not be shown
-    if (showGenderFieldForGuest && registerData.gender) {
+    if (displayGenderFieldForGuest && registerData.gender) {
       payload.person.gender = registerData.gender
     }
 

frontend/src/routes/guest/register/steps/register.test.tsx

@@ -36,7 +36,7 @@ const allFeaturesOn = {
   displayContactAtUnit: true,
   displayComment: true,
   displayContactAtUnitGuestInput: true,
-  showGenderFieldForGuest: true,
+  displayGenderFieldForGuest: true,
 }
 
 test('Guest register page showing passport field on manual registration', async () => {
@@ -240,11 +240,11 @@ test('Gender not required to be set if gender field is not showing', async () =>
     console.log(`Entered data: ${registerData}`)
   }
 
-  const showGenderFieldOff = {
+  const displayGenderFieldOff = {
     displayContactAtUnit: true,
     displayComment: true,
     displayContactAtUnitGuestInput: true,
-    showGenderFieldForGuest: false,
+    displayGenderFieldForGuest: false,
   }
 
   const formData: GuestRegisterData = {
@@ -267,7 +267,7 @@ test('Gender not required to be set if gender field is not showing', async () =>
   }
 
   render(
-    <FeatureContext.Provider value={showGenderFieldOff}>
+    <FeatureContext.Provider value={displayGenderFieldOff}>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <GuestRegisterStep
           nextHandler={nextHandler}

frontend/src/routes/guest/register/steps/register.tsx

@@ -58,7 +58,8 @@ const GuestRegisterStep = forwardRef(
   (props: GuestRegisterProperties, ref: Ref<GuestRegisterCallableMethods>) => {
     const { i18n, t } = useTranslation(['common'])
     const { nextHandler, initialGuestData, registerData } = props
-    const { showGenderFieldForGuest } = useContext(FeatureContext)
+    const { displayGenderFieldForGuest } =
+      useContext(FeatureContext)
     const defaultCountryCode = 'NO'
 
     // For select-components it seems to be easier to tie them to a state
@@ -183,7 +184,7 @@ const GuestRegisterStep = forwardRef(
       }
       setIdErrorState('')
 
-      if (showGenderFieldForGuest && !gender) {
+      if (displayGenderFieldForGuest && !gender) {
         setGenderErrorState(t('validation.genderIsRequired'))
         return
       }
@@ -322,7 +323,7 @@ const GuestRegisterStep = forwardRef(
         (initialGuestData.authentication_method ===
           AuthenticationMethod.Feide ||
           initialGuestData.authentication_method ===
-          AuthenticationMethod.IdPorten) &&
+            AuthenticationMethod.IdPorten) &&
         initialGuestData.fnr !== null &&
         initialGuestData.fnr?.length !== 0,
     }
@@ -414,7 +415,7 @@ const GuestRegisterStep = forwardRef(
                 )}
               />
 
-              {showGenderFieldForGuest && (
+              {displayGenderFieldForGuest && (
                 <>
                   <Select
                     sx={{