From 05739c40a6436f7412bdbf48c398ec0b9f2a5120 Mon Sep 17 00:00:00 2001 From: wanlingt Date: Fri, 5 Aug 2022 15:22:08 +0800 Subject: [PATCH 1/4] feat: remove infobox when public form respondents hits threshold --- .../components/PublicFormWrapper.tsx | 17 ++++++++++++++--- shared/types/core.ts | 2 ++ src/app/loaders/express/locals.ts | 6 ++++++ src/public/utils/injectedVariables.ts | 4 ++++ 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/frontend/src/features/public-form/components/PublicFormWrapper.tsx b/frontend/src/features/public-form/components/PublicFormWrapper.tsx index 2be7681249..3d81819982 100644 --- a/frontend/src/features/public-form/components/PublicFormWrapper.tsx +++ b/frontend/src/features/public-form/components/PublicFormWrapper.tsx @@ -1,7 +1,9 @@ import { useMemo } from 'react' import { Flex, Spacer } from '@chakra-ui/react' -import { FormColorTheme } from '~shared/types' +import { FormColorTheme, FormResponseMode } from '~shared/types' + +import { useEnv } from '~features/env/queries' import { usePublicFormContext } from '../PublicFormContext' @@ -39,17 +41,26 @@ export const PublicFormWrapper = ({ children, }: PublicFormWrapperProps): JSX.Element => { const { form, isLoading, isAuthRequired } = usePublicFormContext() + const { data: { respondentRolloutEmail, respondentRolloutStorage } = {} } = + useEnv() const bgColour = useBgColor({ colorTheme: isLoading ? undefined : form?.startPage.colorTheme, }) - + const isEmailForm = form?.responseMode === FormResponseMode.Email + const switchEnvRolloutPercentage = isEmailForm + ? respondentRolloutEmail + : respondentRolloutStorage + // Remove the switch env message if the React rollout for public form respondents is >10% + const showSwitchEnvMessage = !!( + switchEnvRolloutPercentage && switchEnvRolloutPercentage <= 10 + ) return ( {isAuthRequired ? null : } {/* TODO(#4279): Remove switch env message on full rollout */} - {!isPreview && } + {!isPreview && showSwitchEnvMessage && } {children} {isAuthRequired ? null : } diff --git a/shared/types/core.ts b/shared/types/core.ts index 8a3a94f4a3..05c4388b72 100644 --- a/shared/types/core.ts +++ b/shared/types/core.ts @@ -26,4 +26,6 @@ export type ClientEnvVars = { myInfoBannerContent: string // MyInfo maintenance message GATrackingID: string | null spcpCookieDomain: string // Cookie domain used for removing spcp cookies + respondentRolloutEmail: number + respondentRolloutStorage: number } diff --git a/src/app/loaders/express/locals.ts b/src/app/loaders/express/locals.ts index 4957e9f981..3ff462c89b 100644 --- a/src/app/loaders/express/locals.ts +++ b/src/app/loaders/express/locals.ts @@ -25,6 +25,10 @@ const frontendVars = { reactMigrationRespondentCookieName: config.reactMigration.respondentCookieName, reactMigrationAdminCookieName: config.reactMigration.adminCookieName, + reactMigrationRespondentRolloutEmail: + config.reactMigration.respondentRolloutEmail, + reactMigrationRespondentRolloutStorage: + config.reactMigration.respondentRolloutStorage, } const environment = ejs.render( ` @@ -51,6 +55,8 @@ const environment = ejs.render( // React Migration var reactMigrationRespondentCookieName = "<%= reactMigrationRespondentCookieName%>" var reactMigrationAdminCookieName = "<%= reactMigrationAdminCookieName%>" + var reactMigrationRespondentRolloutEmail = "<%= reactMigrationRespondentRolloutEmail%>" + var reactMigrationRespondentRolloutStorage = "<%= reactMigrationRespondentRolloutStorage%>" `, frontendVars, ) diff --git a/src/public/utils/injectedVariables.ts b/src/public/utils/injectedVariables.ts index 5d35809dfa..ff1a02bba7 100644 --- a/src/public/utils/injectedVariables.ts +++ b/src/public/utils/injectedVariables.ts @@ -14,6 +14,8 @@ interface FrontendInjectedVariables { myInfoBannerContent: string | null GATrackingID: string | null spcpCookieDomain: string | null + respondentRolloutEmail: number + respondentRolloutStorage: number } // NOTE: As these variables are not injected until runtime @@ -35,4 +37,6 @@ export const injectedVariables: FrontendInjectedVariables = { myInfoBannerContent: formsgWindow.myInfoBannerContent ?? null, GATrackingID: formsgWindow.GATrackingID ?? null, spcpCookieDomain: formsgWindow.spcpCookieDomain ?? null, + respondentRolloutEmail: formsgWindow.respondentRolloutEmail, + respondentRolloutStorage: formsgWindow.respondentRolloutStorage, } From 0ccaaf7ba29a9d39d6815ed45403155857b6baa2 Mon Sep 17 00:00:00 2001 From: wanlingt Date: Fri, 5 Aug 2022 15:27:11 +0800 Subject: [PATCH 2/4] feat: remove infobox for admins --- .../workspace/components/AdminSwitchEnvMessage.tsx | 8 ++++++-- shared/types/core.ts | 1 + src/app/loaders/express/locals.ts | 2 ++ src/public/utils/injectedVariables.ts | 2 ++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx b/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx index a304825e4d..9db2de1af7 100644 --- a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx +++ b/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx @@ -5,11 +5,13 @@ import Button from '~components/Button' import InlineMessage from '~components/InlineMessage' import { useEnvMutations } from '~features/env/mutations' +import { useEnv } from '~features/env/queries' export const AdminSwitchEnvMessage = (): JSX.Element => { const { adminSwitchEnvMutation } = useEnvMutations() - - return ( + const { data: { adminRollout } = {} } = useEnv() + const showSwitchEnvMessage = adminRollout && adminRollout <= 100 + return showSwitchEnvMessage ? ( Welcome to the new FormSG! You can still{' '} @@ -19,5 +21,7 @@ export const AdminSwitchEnvMessage = (): JSX.Element => { which is available until 28 May 2022. + ) : ( + <> ) } diff --git a/shared/types/core.ts b/shared/types/core.ts index 05c4388b72..dcc55e783b 100644 --- a/shared/types/core.ts +++ b/shared/types/core.ts @@ -28,4 +28,5 @@ export type ClientEnvVars = { spcpCookieDomain: string // Cookie domain used for removing spcp cookies respondentRolloutEmail: number respondentRolloutStorage: number + adminRollout: number } diff --git a/src/app/loaders/express/locals.ts b/src/app/loaders/express/locals.ts index 3ff462c89b..1fe0526672 100644 --- a/src/app/loaders/express/locals.ts +++ b/src/app/loaders/express/locals.ts @@ -29,6 +29,7 @@ const frontendVars = { config.reactMigration.respondentRolloutEmail, reactMigrationRespondentRolloutStorage: config.reactMigration.respondentRolloutStorage, + reactMigrationAdminRollout: config.reactMigration.adminRollout, } const environment = ejs.render( ` @@ -57,6 +58,7 @@ const environment = ejs.render( var reactMigrationAdminCookieName = "<%= reactMigrationAdminCookieName%>" var reactMigrationRespondentRolloutEmail = "<%= reactMigrationRespondentRolloutEmail%>" var reactMigrationRespondentRolloutStorage = "<%= reactMigrationRespondentRolloutStorage%>" + var reactMigrationAdminRollout = "<%= reactMigrationAdminRollout%>" `, frontendVars, ) diff --git a/src/public/utils/injectedVariables.ts b/src/public/utils/injectedVariables.ts index ff1a02bba7..ec307c11f8 100644 --- a/src/public/utils/injectedVariables.ts +++ b/src/public/utils/injectedVariables.ts @@ -16,6 +16,7 @@ interface FrontendInjectedVariables { spcpCookieDomain: string | null respondentRolloutEmail: number respondentRolloutStorage: number + adminRollout: number } // NOTE: As these variables are not injected until runtime @@ -39,4 +40,5 @@ export const injectedVariables: FrontendInjectedVariables = { spcpCookieDomain: formsgWindow.spcpCookieDomain ?? null, respondentRolloutEmail: formsgWindow.respondentRolloutEmail, respondentRolloutStorage: formsgWindow.respondentRolloutStorage, + adminRollout: formsgWindow.adminRollout, } From 66fc3c021d3174372e392d15d96cb8b37e36aba0 Mon Sep 17 00:00:00 2001 From: wanlingt Date: Fri, 5 Aug 2022 15:33:57 +0800 Subject: [PATCH 3/4] ref: change thresholds to constants --- .../src/features/public-form/components/PublicFormWrapper.tsx | 4 +++- .../features/workspace/components/AdminSwitchEnvMessage.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/features/public-form/components/PublicFormWrapper.tsx b/frontend/src/features/public-form/components/PublicFormWrapper.tsx index 3d81819982..6b8edb892e 100644 --- a/frontend/src/features/public-form/components/PublicFormWrapper.tsx +++ b/frontend/src/features/public-form/components/PublicFormWrapper.tsx @@ -40,6 +40,7 @@ export const PublicFormWrapper = ({ isPreview, children, }: PublicFormWrapperProps): JSX.Element => { + const REMOVE_RESPONDENTS_INFOBOX_THRESHOLD = 10 const { form, isLoading, isAuthRequired } = usePublicFormContext() const { data: { respondentRolloutEmail, respondentRolloutStorage } = {} } = useEnv() @@ -53,7 +54,8 @@ export const PublicFormWrapper = ({ : respondentRolloutStorage // Remove the switch env message if the React rollout for public form respondents is >10% const showSwitchEnvMessage = !!( - switchEnvRolloutPercentage && switchEnvRolloutPercentage <= 10 + switchEnvRolloutPercentage && + switchEnvRolloutPercentage <= REMOVE_RESPONDENTS_INFOBOX_THRESHOLD ) return ( diff --git a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx b/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx index 9db2de1af7..976680b393 100644 --- a/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx +++ b/frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx @@ -8,9 +8,11 @@ import { useEnvMutations } from '~features/env/mutations' import { useEnv } from '~features/env/queries' export const AdminSwitchEnvMessage = (): JSX.Element => { + const REMOVE_ADMIN_INFOBOX_THRESHOLD = 100 const { adminSwitchEnvMutation } = useEnvMutations() const { data: { adminRollout } = {} } = useEnv() - const showSwitchEnvMessage = adminRollout && adminRollout <= 100 + const showSwitchEnvMessage = + adminRollout && adminRollout < REMOVE_ADMIN_INFOBOX_THRESHOLD return showSwitchEnvMessage ? ( From d56751b1b561d71f0fd23925b6ff44eaf7b486d9 Mon Sep 17 00:00:00 2001 From: wanlingt Date: Fri, 5 Aug 2022 16:38:02 +0800 Subject: [PATCH 4/4] fix: add frontend envvars --- src/app/modules/frontend/frontend.service.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/modules/frontend/frontend.service.ts b/src/app/modules/frontend/frontend.service.ts index f914e54bff..fe431d1c01 100644 --- a/src/app/modules/frontend/frontend.service.ts +++ b/src/app/modules/frontend/frontend.service.ts @@ -20,5 +20,8 @@ export const getClientEnvVars = (): ClientEnvVars => { myInfoBannerContent: spcpMyInfoConfig.myInfoBannerContent, // MyInfo maintenance message GATrackingID: googleAnalyticsConfig.GATrackingID, spcpCookieDomain: spcpMyInfoConfig.spcpCookieDomain, // Cookie domain used for removing spcp cookies + respondentRolloutEmail: config.reactMigration.respondentRolloutEmail, + respondentRolloutStorage: config.reactMigration.respondentRolloutStorage, + adminRollout: config.reactMigration.adminRollout, } }