ENG-3287: Assessment grouping by processing activity (demo)

changelog/7913.yaml

@@ -0,0 +1,4 @@
+type: Changed
+description: Restructure assessment list page grouping by processing activity instead of regulatory template
+pr: 7913
+labels: []

clients/admin-ui/src/features/common/DaysLeftTag.tsx

@@ -39,7 +39,9 @@ const DaysLeftTag = ({ daysLeft, includeText, status }: DaysLeftTagProps) => {
       break;
   }
 
-  const text = includeText ? `${daysLeft} days left` : daysLeft;
+  const text = includeText
+    ? `${Math.abs(daysLeft)} days ${daysLeft < 0 ? "overdue" : "left"}`
+    : daysLeft;
 
   return <Tag color={color}>{text}</Tag>;
 };

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

@@ -76,11 +76,15 @@ export const AssessmentCard = ({
         <div>
           <Title level={3} className={`!mb-1 ${styles.titleLink}`}>
             <NextLink href={`${PRIVACY_ASSESSMENTS_ROUTE}/${assessment.id}`}>
-              {assessment.name}
+              {assessment.template_name ?? assessment.name}
             </NextLink>
           </Title>
-          <Text type="secondary" size="sm" className={styles.textWithTags}>
-            Processing{" "}
+          {assessment.system_name && (
+            <Text type="secondary" size="sm" className="block">
+              {assessment.system_name}
+            </Text>
+          )}
+          <div className={styles.textWithTags}>
             {(assessment.data_categories ?? []).length > 0 ? (
               <TagList
                 tags={(assessment.data_categories ?? []).map((key) => ({
@@ -92,13 +96,8 @@ export const AssessmentCard = ({
               />
             ) : (
               <Tag>0 data categories</Tag>
-            )}{" "}
-            for{" "}
-            <TagList
-              tags={assessment.data_use_name ? [assessment.data_use_name] : []}
-              maxTags={1}
-            />
-          </Text>
+            )}
+          </div>
           {riskLevel && (
             <div>
               <Tag

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

@@ -240,32 +240,28 @@ export const AssessmentDetail = ({ assessment }: AssessmentDetailProps) => {
             {isComplete ? "Completed" : "In progress"}
           </Tag>
         </Flex>
-        <Text type="secondary" size="sm" className="block">
-          System: {assessment.system_name}
-        </Text>
+        {assessment.template_name && (
+          <Text type="secondary" size="sm" className="block">
+            {assessment.template_name}
+          </Text>
+        )}
       </div>
 
       <Flex justify="space-between" align="center" className="mb-2 w-full">
-        <Text type="secondary" className="leading-loose">
-          Processing{" "}
+        <div>
           {(assessment.data_categories ?? []).length > 0 ? (
             <TagList
               tags={(assessment.data_categories ?? []).map((key) => ({
                 value: key,
                 label: getDataCategoryDisplayName(key),
               }))}
-              maxTags={1}
+              maxTags={2}
               expandable
             />
           ) : (
             <Tag>0 data categories</Tag>
-          )}{" "}
-          for{" "}
-          <TagList
-            tags={assessment.data_use_name ? [assessment.data_use_name] : []}
-            maxTags={1}
-          />
-        </Text>
+          )}
+        </div>
         {!isComplete && (
           <Tooltip
             title={

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

@@ -18,18 +18,20 @@ import { PrivacyAssessmentResponse } from "./types";
 const { Title } = Typography;
 
 interface AssessmentGroupProps {
-  templateId: string;
-  title: string;
-  assessments: PrivacyAssessmentResponse[];
+  dataUseName: string | null;
+  systemCount: number;
+  assessments?: PrivacyAssessmentResponse[];
 }
 
 export const AssessmentGroup = ({
-  templateId,
-  title,
-  assessments,
+  dataUseName,
+  systemCount,
+  assessments = [],
 }: AssessmentGroupProps) => {
   const router = useRouter();
 
+  const displayName = dataUseName ?? "Uncategorized";
+
   return (
     <div>
       <Flex justify="space-between" align="flex-end">
@@ -38,15 +40,15 @@ export const AssessmentGroup = ({
             shape="square"
             variant="outlined"
             size={40}
-            icon={<Icons.Document />}
+            icon={<Icons.Policy />}
           />
           <div>
             <Title level={2} className="!m-0">
-              {title}
+              {displayName}
             </Title>
             <Text type="secondary">
-              Template ID: {templateId} • {assessments.length} active
-              assessments
+              {systemCount} {systemCount === 1 ? "system" : "systems"} •{" "}
+              {assessments.length} active assessments
             </Text>
           </div>
         </Flex>

clients/admin-ui/src/features/privacy-assessments/privacy-assessments.slice.ts

@@ -8,6 +8,7 @@ import type {
 
 import {
   AssessmentEvidenceResponse,
+  AssessmentStatus,
   AssessmentTaskPage,
   AssessmentTaskResponse,
   BulkUpdateAnswersRequest,
@@ -16,8 +17,7 @@ import {
   CreateQuestionnaireRequest,
   CreateReminderRequest,
   GetAssessmentEvidenceParams,
-  GetPrivacyAssessmentsParams,
-  Page_PrivacyAssessmentResponse_,
+  GroupedAssessmentsResponse,
   PrivacyAssessmentConfigDefaults,
   PrivacyAssessmentConfigResponse,
   PrivacyAssessmentConfigUpdate,
@@ -35,8 +35,8 @@ const privacyAssessmentsApi = baseApi.injectEndpoints({
   overrideExisting: true,
   endpoints: (build) => ({
     getPrivacyAssessments: build.query<
-      Page_PrivacyAssessmentResponse_,
-      GetPrivacyAssessmentsParams | void
+      GroupedAssessmentsResponse,
+      { page?: number; size?: number; status?: AssessmentStatus } | void
     >({
       query: (params) => ({
         url: "plus/privacy-assessments",

clients/admin-ui/src/features/privacy-assessments/types.ts

@@ -242,10 +242,19 @@ export interface QuestionEvidence {
   evidence: EvidenceItem[];
 }
 
-export interface GetPrivacyAssessmentsParams {
-  page?: number;
-  size?: number;
-  status?: AssessmentStatus;
+export interface AssessmentGroupResponse {
+  data_use: string | null;
+  data_use_name: string | null;
+  system_count: number;
+  assessments?: PrivacyAssessmentResponse[];
+}
+
+export interface GroupedAssessmentsResponse {
+  items: AssessmentGroupResponse[];
+  total: number;
+  page: number;
+  size: number;
+  pages: number;
 }
 
 export interface GetAssessmentEvidenceParams {

clients/admin-ui/src/features/privacy-requests/cells.tsx

@@ -125,7 +125,11 @@ export const RequestDaysLeftCell = ({
 
   return (
     <BadgeCell
-      value={includeText ? `${daysLeft} days left` : daysLeft.toString()}
+      value={
+        includeText
+          ? `${Math.abs(daysLeft)} days ${daysLeft < 0 ? "overdue" : "left"}`
+          : daysLeft.toString()
+      }
       color={colorScheme}
     />
   );

clients/admin-ui/src/pages/privacy-assessments/index.tsx

@@ -10,7 +10,6 @@ import {
   AssessmentTaskStatusIndicator,
   EmptyState,
   GenerateAssessmentsModal,
-  useGetAssessmentTemplatesQuery,
   useGetPrivacyAssessmentsQuery,
 } from "~/features/privacy-assessments";
 
@@ -23,30 +22,10 @@ const PrivacyAssessmentsPage: NextPage = () => {
     isLoading,
     isError,
     refetch: refetchAssessments,
-  } = useGetPrivacyAssessmentsQuery({ page: 1, size: 100 });
+  } = useGetPrivacyAssessmentsQuery();
 
-  const assessments = assessmentsData?.items ?? [];
-
-  const { data: templatesData } = useGetAssessmentTemplatesQuery({
-    page: 1,
-    size: 100,
-  });
-
-  const templates = templatesData?.items ?? [];
-
-  const hasAssessments = assessments.length > 0;
-
-  const groupedAssessments = templates
-    .map((template) => ({
-      templateId: template.id,
-      key: template.key,
-      title: template.name,
-      description: template.description,
-      assessments: assessments.filter(
-        (a) => a.template_id === template.id || a.template_id === template.key,
-      ),
-    }))
-    .filter((group) => group.assessments.length > 0);
+  const groups = assessmentsData?.items ?? [];
+  const hasAssessments = groups.length > 0;
 
   if (isLoading) {
     return (
@@ -106,12 +85,12 @@ const PrivacyAssessmentsPage: NextPage = () => {
       ) : (
         <div className="py-6">
           <Space direction="vertical" size="large" className="w-full">
-            {groupedAssessments.map((template) => (
+            {groups.map((group, i) => (
               <AssessmentGroup
-                key={template.key}
-                templateId={template.templateId}
-                title={template.title}
-                assessments={template.assessments}
+                key={group.data_use ?? `uncategorized-${i}`}
+                dataUseName={group.data_use_name}
+                systemCount={group.system_count}
+                assessments={group.assessments}
               />
             ))}
           </Space>