Assessment detail page UI by lucanovera · Pull Request #7434 · ethyca/fides

lucanovera · 2026-02-19T21:08:30Z

Ticket ENG-2371

Description Of Changes

Implements a detail page for assessment where you can view answers and update them.

Code Changes

Adds assessment detail page and components to build it
Exports notificationApi in fidesui
Updates types
Adds Slack icon

Steps to Confirm

Go to settings and enable alpha flag "Data protection assessments"
Go to assessments page
Click on Resume on an Assessment that shows progress
Try opening answer groups, editing answers
Confirm deletion of assessment works by clicking the trash icon in the header

Pre-Merge Checklist

…assessments-types-slice

Co-authored-by: Cursor <cursoragent@cursor.com>

…sment-dashboard-with-progress-tracking

…thyca/fides into ENG-2370-ui-assessment-dashboard-with-progress-tracking

…sment-dashboard-with-progress-tracking

Co-authored-by: Cursor <cursoragent@cursor.com>

…' of github.com:ethyca/fides into ENG-2370-ui-assessment-dashboard-with-progress-tracking

greptile-apps · 2026-02-25T02:39:44Z

Greptile Summary

This PR implements a detail page for privacy assessments, allowing users to view and edit individual assessment answers. The implementation adds several new React components (AssessmentDetail, QuestionCard, QuestionGroupPanel, EditableTextBlock) with proper state management, error handling, and loading states. The code also exports notificationApi from fidesui for future notification needs.

Key changes:

Added detail page at /privacy-assessments/[id] with loading and error states
Implemented editable answer interface with optimistic UI updates via RTK Query
Added collapse panels for question groups with completion tracking
Included proper feature flag checks and breadcrumb navigation
Added Slack icon component for team collaboration features (not yet implemented)

Style observations:

Several components use div elements where semantic HTML or Ant Design's Flex component would be more appropriate per the project's style guide

Confidence Score: 4/5

This PR is safe to merge with minimal risk - implements UI-only changes with proper error handling
The code is well-structured with proper TypeScript types, error handling, and follows most project patterns. The RTK Query integration correctly invalidates tags for cache updates. Minor style guide deviations regarding div usage don't affect functionality. No security concerns or logical errors found.
Files with div elements should consider using Flex components per style guide: QuestionGroupPanel.tsx, AssessmentDetail.tsx, QuestionCard.tsx

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/privacy-assessments/AssessmentDetail.tsx	Main detail component with deletion and completion logic. Uses divs appropriately within Flex components.
clients/admin-ui/src/features/privacy-assessments/EditableTextBlock.tsx	Clean editable text component with proper state management and loading states.
clients/admin-ui/src/features/privacy-assessments/QuestionCard.tsx	Question display and editing component with proper error handling.
clients/admin-ui/src/features/privacy-assessments/QuestionGroupPanel.tsx	Collapse panel header with status display. Uses absolute positioning for tag placement.
clients/admin-ui/src/pages/privacy-assessments/[id].tsx	Detail page with proper loading, error states, and feature flag checks.

_{Last reviewed commit: 7ccf872}

greptile-apps

_{19 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-02-25T02:39:48Z

clients/admin-ui/src/features/privacy-assessments/QuestionGroupPanel.tsx

+  return (
+    <>
+      <Flex gap="large" align="flex-start" className="min-w-0 flex-1">
+        <div className="flex-1">


use semantic element or Flex component instead of div

Suggested change

<div className="flex-1">

<Flex className="flex-1" direction="vertical">

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!}

clients/admin-ui/src/features/privacy-assessments/QuestionGroupPanel.tsx

clients/admin-ui/src/features/privacy-assessments/AssessmentDetail.tsx

clients/admin-ui/src/features/privacy-assessments/QuestionCard.tsx

speaker-ender

Minor nits/questions but otherwise looks good!

speaker-ender · 2026-02-25T14:25:15Z

clients/admin-ui/src/features/privacy-assessments/EditableTextBlock.tsx

+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+
+  useEffect(() => {
+    if (!isEditing) {
+      setEditValue(value);
+    }
+  }, [value, isEditing]);
+
+  const handleSave = async () => {
+    await onSave?.(editValue);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {


What problem is this boilerplate solving that ant form cannot do?
This seems very similar to just a form that manages a value + has a callback on submission.

Great catch! I've refactored it to use Ant Form to handle the state and it's much cleaner.

speaker-ender · 2026-02-25T14:35:36Z

clients/fidesui/src/FidesUIProvider.tsx

+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();


Higher level question that doesn't need to be solved here:
Is the only reason we are adding all of this to the provider in fidesui because it doesn't pick up styles for messages/modals/notifications?

I think yes, that's how we can get the modals/messages/notification to use our theme without needing to render the {modalContext} manually. I think Jeremy work on this solution.

…idual-answer-view-and-edit-interface

lucanovera and others added 30 commits February 3, 2026 15:56

feat: add privacy assessments types and RTK Query slice

04d7681

remove unnecesary comments, and tag types. improve naming.

3ec0a72

update changelog

040c658

lint fixes

66a4bfb

Merge branch 'main' of github.com:ethyca/fides into ENG-2437-privacy-…

1e34898

…assessments-types-slice

feat: add MSW mocks for privacy assessments API

9820b73

Co-authored-by: Cursor <cursoragent@cursor.com>

add changelog

02c9932

Co-authored-by: Cursor <cursoragent@cursor.com>

fix lint and type issues

ec383d9

feat: add privacy assessments navigation and list page

609c0c5

Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'main' of github.com:ethyca/fides into ENG-2370-ui-asses…

f780a1f

…sment-dashboard-with-progress-tracking

Merge branch 'ENG-2591-FE-Implement-mocked-endpoints' of github.com:e…

b27ac88

…thyca/fides into ENG-2370-ui-assessment-dashboard-with-progress-tracking

cleanup code

89f08d0

add types

06a7043

add imports

595224b

use real types, add new assessment screen

d5b8c6f

style updates

ef0609e

update wording

0b485a7

remove msw mocks

696f63b

Merge branch 'main' of github.com:ethyca/fides into ENG-2370-ui-asses…

e2eeb99

…sment-dashboard-with-progress-tracking

remove chagelogs

011f0c5

rever next config change

3e4f1f9

update types

ae21272

reorganize componet

0640019

split file

6705a97

remove comments

1f9056b

remove comments

53f8e4b

Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'ENG-2370-ui-assessment-dashboard-with-progress-tracking…

748abde

…' of github.com:ethyca/fides into ENG-2370-ui-assessment-dashboard-with-progress-tracking

move files around

66a9bbf

improve defaults

5df7574

implement tag limit on card

02810a6

remove utils file and updated by

2b68af7

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 02:27 View deployment

fix code style

c957c5c

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 02:32 View deployment

add changleog

7ccf872

lucanovera marked this pull request as ready for review February 25, 2026 02:36

lucanovera requested a review from a team as a code owner February 25, 2026 02:36

lucanovera requested review from speaker-ender and removed request for a team February 25, 2026 02:36

greptile-apps bot reviewed Feb 25, 2026

View reviewed changes

speaker-ender approved these changes Feb 25, 2026

View reviewed changes

refactor editabletextblock to use ant form for state handling

56d0590

lucanovera enabled auto-merge February 25, 2026 17:06

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 17:06 View deployment

lucanovera added this pull request to the merge queue Feb 25, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Feb 25, 2026

lucanovera added this pull request to the merge queue Feb 25, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Feb 25, 2026

Merge branch 'main' of github.com:ethyca/fides into ENG-2371-UI-Indiv…

44a04e6

…idual-answer-view-and-edit-interface

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 18:48 View deployment

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 18:57 View deployment

lucanovera force-pushed the ENG-2371-UI-Individual-answer-view-and-edit-interface branch from 60b1b53 to 44a04e6 Compare February 25, 2026 19:04

lucanovera enabled auto-merge February 25, 2026 19:44

lucanovera added this pull request to the merge queue Feb 25, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Feb 25, 2026

lucanovera added this pull request to the merge queue Feb 26, 2026

Merged via the queue into main with commit 9db995b Feb 26, 2026
84 of 94 checks passed

lucanovera deleted the ENG-2371-UI-Individual-answer-view-and-edit-interface branch February 26, 2026 15:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Assessment detail page UI#7434

Assessment detail page UI#7434
lucanovera merged 105 commits intomainfrom
ENG-2371-UI-Individual-answer-view-and-edit-interface

lucanovera commented Feb 19, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Feb 25, 2026

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Feb 25, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

speaker-ender left a comment

Uh oh!

speaker-ender Feb 25, 2026

Uh oh!

lucanovera Feb 25, 2026

Uh oh!

speaker-ender Feb 25, 2026

Uh oh!

lucanovera Feb 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div className="flex-1">
	<Flex className="flex-1" direction="vertical">

		const [notificationApi, notificationContextHolder] =
		notification.useNotification();

Conversation

lucanovera commented Feb 19, 2026 • edited 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!

greptile-apps bot commented Feb 25, 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 Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

speaker-ender left a comment

Choose a reason for hiding this comment

Uh oh!

speaker-ender Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

lucanovera Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

speaker-ender Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

lucanovera Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lucanovera commented Feb 19, 2026 •

edited

Loading

lucanovera Feb 25, 2026 •

edited

Loading