feat: don't block navigation when switch to angular

frontend/src/features/env/PublicFeedbackModal.tsx

@@ -34,6 +34,7 @@ import { ModalCloseButton } from '~components/Modal'
 import Textarea from '~components/Textarea'
 
 import { useEnvMutations, useFeedbackMutation } from '~features/env/mutations'
+import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
 import { usePublicFeedbackFormView } from './queries'
 import { isUsableFeedback } from './utils'
@@ -50,6 +51,7 @@ export const PublicFeedbackModal = ({
   responseMode?: FormResponseMode
   authType?: FormAuthType
 }): JSX.Element => {
+  const { setBlockNavigation } = usePublicFormContext()
   const modalSize = useBreakpointValue({
     base: 'mobile',
     xs: 'mobile',
@@ -68,7 +70,7 @@ export const PublicFeedbackModal = ({
 
   const url = window.location.href
   const rumSessionId = datadogRum.getInternalContext()?.session_id
-  const [showThanksPage, setShowThanksPage] = useState<boolean>(false)
+  const [showThanksPage, setShowThanksPage] = useState<boolean>(true)
 
   const { publicSwitchEnvMutation } = useEnvMutations()
   const { data: feedbackForm, isLoading } = usePublicFeedbackFormView()
@@ -88,8 +90,9 @@ export const PublicFeedbackModal = ({
   }, [onClose])
 
   const handleChangeEnv = useCallback(() => {
+    setBlockNavigation(false)
     publicSwitchEnvMutation.mutate()
-  }, [publicSwitchEnvMutation])
+  }, [publicSwitchEnvMutation, setBlockNavigation])
 
   const checkboxInputName = 'attachmentType'
 

frontend/src/features/public-form/PublicFormContext.tsx

@@ -46,6 +46,8 @@ export interface PublicFormContextProps
    */
   onMobileDrawerOpen: () => void
   onMobileDrawerClose: () => void
+  blockNavigation: boolean
+  setBlockNavigation: (val: boolean) => void
 }
 
 export const PublicFormContext = createContext<

frontend/src/features/public-form/PublicFormProvider.tsx

@@ -103,6 +103,7 @@ export const PublicFormProvider = ({
 }: PublicFormProviderProps): JSX.Element => {
   // Once form has been submitted, submission data will be set here.
   const [submissionData, setSubmissionData] = useState<SubmissionData>()
+  const [blockNavigation, setBlockNavigation] = useState(false)
 
   const { data, isLoading, error, ...rest } = usePublicFormView(
     formId,
@@ -323,6 +324,8 @@ export const PublicFormProvider = ({
         captchaContainerId: containerId,
         expiryInMs,
         isLoading: isLoading || (!!data?.form.hasCaptcha && !hasLoaded),
+        blockNavigation,
+        setBlockNavigation,
         ...commonFormValues,
         ...data,
         ...rest,

frontend/src/features/public-form/components/FormFields/FormFields.tsx

@@ -18,6 +18,7 @@ import {
   hasExistingFieldValue,
 } from '~features/myinfo/utils'
 import { useFetchPrefillQuery } from '~features/public-form/hooks/useFetchPrefillQuery'
+import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
 import { PublicFormSubmitButton } from './PublicFormSubmitButton'
 import { VisibleFormFields } from './VisibleFormFields'
@@ -35,6 +36,8 @@ export const FormFields = ({
   colorTheme,
   onSubmit,
 }: FormFieldsProps): JSX.Element => {
+  const { blockNavigation, setBlockNavigation } = usePublicFormContext()
+
   useFetchPrefillQuery()
   const [searchParams] = useSearchParams()
 
@@ -101,7 +104,11 @@ export const FormFields = ({
     }
   }, [defaultFormValues, isDirty, reset])
 
-  useNavigationPrompt(isDirty)
+  useEffect(() => {
+    if (isDirty) setBlockNavigation(true)
+  }, [isDirty, setBlockNavigation])
+
+  useNavigationPrompt(blockNavigation)
 
   return (
     <FormProvider {...formMethods}>