Change request/ID verification flow to use separate pages instead of a modal #7238

jpople · 2026-01-16T08:02:14Z

Description Of Changes

Converted the privacy request flow from a modal-based approach to full-page routes. The form, verification, and success states now use dedicated Next.js pages with a consistent layout. Refactored ExternalAuthLayout to use a shared AuthFormLayout component to reduce code duplication.

Code Changes

Extracted request creation and ID verification to separate pages instead of modals
Refactored ExternalAuthLayout to use AuthFormLayout instead of duplicating layout code
Added e2e tests for the privacy request flow

Steps to Confirm

Navigate to the privacy center homepage and click a privacy request action
Fill out the form and verify request is submitted as expected
Update your privacy center config so requests require identity verification
Confirm navigation to the verification page and ability to enter OTP code
After successful verification, confirm navigation to the success page
Verify external manual task authentication pages still render correctly with the refactored layout

Pre-Merge Checklist

vercel · 2026-01-16T08:02:18Z

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Jan 27, 2026 11:29pm
fides-privacy-center	Ignored		Jan 27, 2026 11:29pm

greptile-apps · 2026-01-16T08:05:04Z

Greptile Summary

Converted the privacy request flow from a modal-based approach to dedicated full-page routes (/privacy-request/[actionIndex], /privacy-request/[actionIndex]/verify, /privacy-request/[actionIndex]/success). Successfully extracted a shared AuthFormLayout component to eliminate ~80 lines of duplicated code between ExternalAuthLayout and the new privacy request layouts.

Key Changes:

Created three new Next.js page routes for form submission, verification, and success states
Refactored ExternalAuthLayout to use the new shared AuthFormLayout component
Updated HomePage to navigate to routes instead of opening modals
Added comprehensive e2e tests covering the full page-based flow
Uses sessionStorage to pass privacy request ID between form and verification pages

Minor Style Issues:

AuthFormLayout uses div elements where Ant Design's Flex component would be more appropriate per coding standards

Confidence Score: 4/5

This PR is safe to merge with minimal risk - well-structured refactor with comprehensive test coverage
Score reflects a solid architectural refactor with good test coverage and clean code. The only concerns are minor style issues (using div instead of semantic components per coding standards) that don't affect functionality. The refactoring successfully eliminates code duplication and the new page-based flow is well-tested.
No files require special attention - the AuthFormLayout has minor style suggestions but they're non-blocking

Important Files Changed

Filename	Overview
clients/privacy-center/components/common/AuthFormLayout.tsx	New shared layout component extracted to reduce duplication - uses div elements instead of Flex/semantic components
clients/privacy-center/components/privacy-request/PrivacyRequestFormPage.tsx	Client component wrapper that bridges page routes to existing form component - uses sessionStorage to pass request ID
clients/privacy-center/components/privacy-request/VerificationPage.tsx	Verification page component with proper redirect handling when sessionStorage is missing
clients/privacy-center/features/external-manual-tasks/components/ExternalAuthLayout.tsx	Successfully refactored to use shared AuthFormLayout component, eliminating 80+ lines of duplicated code
clients/privacy-center/cypress/e2e/privacy-center/privacy-request.cy.ts	Comprehensive e2e tests added covering the full page-based flow including form submission, verification, and success states

greptile-apps

_{13 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-01-16T08:05:03Z

clients/privacy-center/components/common/AuthFormLayout.tsx

+      }}
+      data-testid={dataTestId}
+    >
+      <div style={{ width: "100%", maxWidth, padding: "48px 24px" }}>


style: uses div instead of semantic components - per coding standards, prefer Ant Design's Flex component or other semantic elements

Suggested change

<div style={{ width: "100%", maxWidth, padding: "48px 24px" }}>

<Flex style={{ width: "100%", maxWidth, padding: "48px 24px" }}>

Context Used: Rule from dashboard - Avoid using div elements when possible. Use semantic HTML elements or component library alternativ... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Not as worried about semantic dom here, but some of the styles could use tailwind instead of being inline

greptile-apps · 2026-01-16T08:05:04Z

clients/privacy-center/components/common/AuthFormLayout.tsx

+          <div
+            style={{
+              backgroundColor: "white",
+              padding: "48px",
+              width: "100%",
+              borderRadius: "4px",
+              boxShadow:
+                "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+            }}


style: uses div for form container - prefer semantic or Flex component

Suggested change

<div

style={{

backgroundColor: "white",

padding: "48px",

width: "100%",

borderRadius: "4px",

boxShadow:

"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",

}}

<Flex

style={{

backgroundColor: "white",

padding: "48px",

width: "100%",

borderRadius: "4px",

boxShadow:

"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",

}}

>

Context Used: Rule from dashboard - Avoid using div elements when possible. Use semantic HTML elements or component library alternativ... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

speaker-ender

Some minor nits and questions but overall looks good.

speaker-ender · 2026-01-26T14:47:22Z

clients/privacy-center/components/common/AuthFormLayout.tsx

+      }}
+      data-testid={dataTestId}
+    >
+      <div style={{ width: "100%", maxWidth, padding: "48px 24px" }}>


Not as worried about semantic dom here, but some of the styles could use tailwind instead of being inline

speaker-ender · 2026-01-26T14:47:35Z

clients/privacy-center/components/HomePage.tsx

        iconPath={action.icon_path}
        description={action.description}
-        onOpen={onPrivacyModalOpen}
+        onOpen={handlePrivacyRequestOpen}


nit: should we change the onOpen prop to onClick to match the native ant card component since it's not "opening" something?

speaker-ender · 2026-01-26T14:51:48Z

clients/privacy-center/components/modals/privacy-request-modal/usePrivacyRequestForm.ts

+          if (onSuccessWithoutVerification) {
+            onSuccessWithoutVerification();
+          } else {
+            onClose();


nit: can we rename onClose since we aren't closing a modal?

speaker-ender · 2026-01-26T14:54:19Z

clients/privacy-center/components/privacy-request/PrivacyRequestFormPage.tsx

+  }, [getIdVerificationConfigQuery]);
+
+  if (Number.isNaN(parsedActionIndex)) {
+    return null;


Should we re-direct or throw some kind of error message if the route isn't valid instead of displaying nothing?

speaker-ender · 2026-01-26T14:59:58Z

clients/privacy-center/components/privacy-request/PrivacyRequestFormPage.tsx

+  const action = config.actions[parsedActionIndex] as
+    | PrivacyRequestOption
+    | undefined;


Is there a reason to type cast here?

speaker-ender · 2026-01-26T15:06:53Z

clients/privacy-center/app/privacy-request/[actionIndex]/page.tsx

+  params: Promise<{ actionIndex: string }>;
+  searchParams: NextSearchParams;
+}) => {
+  const { actionIndex } = await params;


I like the idea of having a dynamic route for the different actions.
Are we able to/do you think it makes sense to use the action title or some other identifier instead of an index?
Using the index is a little less stable. If someone re-organizes the config, the links to actions would be mixed up.

Good suggestion, I've updated to use the action key instead of the index.

speaker-ender · 2026-01-26T15:08:27Z

clients/privacy-center/components/privacy-request/PrivacyRequestLayout.tsx

+  title,
+}: PrivacyRequestLayoutProps) => {
+  return (
+    <AuthFormLayout


Is this component doing anything other than passing some defaults to the AuthFormLayout component? If so, why not just use the component directly?

jpople added 7 commits January 15, 2026 01:50

robot

f2182ec

remove back button from verification page

216157d

test updates

34e8c91

Merge branch 'main' into jpople/eng-2283/id-verification-flow

c080c96

lint

b9d638d

more lint

94f7b8e

simplify page structure

7bd39f7

jpople requested a review from a team as a code owner January 16, 2026 08:02

jpople requested review from speaker-ender and removed request for a team January 16, 2026 08:02

greptile-apps bot reviewed Jan 16, 2026

View reviewed changes

changelog

302dc23

speaker-ender reviewed Jan 26, 2026

View reviewed changes

jpople added 4 commits January 27, 2026 16:59

code cleanup

5f5db0a

update to use keys instead of indices

1fc5e6f

test updates

cf1d4d6

format

579dc60

	<div style={{ width: "100%", maxWidth, padding: "48px 24px" }}>
	<Flex style={{ width: "100%", maxWidth, padding: "48px 24px" }}>

Change request/ID verification flow to use separate pages instead of a modal #7238

Are you sure you want to change the base?

Change request/ID verification flow to use separate pages instead of a modal #7238

Uh oh!

Conversation

jpople commented Jan 16, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Jan 16, 2026

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

speaker-ender left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jpople commented Jan 16, 2026 •

edited by atlassian bot

Loading

vercel bot commented Jan 16, 2026 •

edited

Loading