-
- {content &&
{content}}
-
- {logs}
+const ActivityTimelineEntry = ({ item }: ActivityTimelineEntryProps) => {
+ const {
+ author,
+ title,
+ date,
+ type,
+ onClick,
+ isError,
+ isSkipped,
+ description,
+ } = item;
+
+ // Format the date for display
+ const formattedDate = formatDate(date);
+
+ const isClickable = !!onClick;
+
+ const content = (
+ <>
+
+
+ {author}:
+
+ {title && (
+
+ {title}
+ {isError && " failed"}
+
+ )}
+
+ {formattedDate}
+
+
+ {type}
+
+ {(isError || isSkipped) && (
+
+ View Log
+
+ )}
-
+ {description && (
+
+
+ {description}
+
+
+ )}
+
+ );
+
+ const commonProps = {
+ className: classNames(styles.itemButton, {
+ [styles["itemButton--error"]]: isError,
+ [styles["itemButton--clickable"]]: isClickable,
+ [styles["itemButton--comment"]]:
+ type === ActivityTimelineItemTypeEnum.INTERNAL_COMMENT,
+ }),
+ "data-testid": "activity-timeline-item",
+ };
+
+ // Render a button for clickable items, or a div for non-clickable items
+ // This maintains the same styling and data-testid attributes while changing the HTML element
+ return isClickable ? (
+
+ ) : (
+
{content}
);
};
+
export default ActivityTimelineEntry;
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.module.scss b/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.module.scss
deleted file mode 100644
index 5757ecbe1ed..00000000000
--- a/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.module.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-$border-width: 1px;
-$horizontal-padding: 20px;
-
-.itemButton {
- display: block;
- width: 100%;
- border: $border-width solid transparent;
-
- border-radius: 6px;
- transition: border-color 0.2s ease-in-out;
- margin-bottom: 20px;
- padding: 12px $horizontal-padding;
-
- &:hover,
- &--error {
- border-color: var(--fidesui-neutral-100);
- }
-
- &:focus-visible {
- border-color: var(--fidesui-neutral-700);
- }
-
- &--error,
- &--error:hover,
- &--error:focus {
- border-left: 8px solid var(--fidesui-error);
- }
-}
-
-.header {
- cursor: pointer;
- width: 100%;
-
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- align-items: center;
-}
-
-.title {
- font-weight: 600;
-
- &--error {
- color: var(--fidesui-error);
- }
-}
-
-.timestamp {
- color: var(--fidesui-neutral-700);
-}
-
-.viewLogs {
- color: var(--fidesui-link);
-}
-
-.logs {
- height: 0;
- overflow: hidden;
- transition: height 0.2s ease-in-out;
- box-sizing: border-box;
- padding: 0 $horizontal-padding;
-
- &--open {
- height: auto;
- margin-top: 20px;
- margin-bottom: 20px;
- }
-}
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.tsx b/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.tsx
deleted file mode 100644
index ceb7c2e431b..00000000000
--- a/clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimelineList.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import classNames from "classnames";
-import { AntList as List, AntTag as Tag } from "fidesui";
-import { map } from "lodash";
-import { useCallback } from "react";
-
-import { formatDate } from "~/features/common/utils";
-import { ExecutionLogStatus } from "~/types/api";
-
-import { ExecutionLog, PrivacyRequestResults } from "../types";
-import styles from "./ActivityTimelineList.module.scss";
-
-interface ActivityTimelineItem {
- // eslint-disable-next-line react/no-unused-prop-types
- logs: ExecutionLog[];
- // eslint-disable-next-line react/no-unused-prop-types
- key: string;
-}
-
-interface ActivityTimelineProps {
- results?: PrivacyRequestResults;
- onItemClicked: ({ key, logs }: ActivityTimelineItem) => void;
-}
-
-const ActivityTimelineList = ({
- results,
- onItemClicked,
-}: ActivityTimelineProps) => {
- const items: ActivityTimelineItem[] = map(results, (logs, key) => ({
- logs,
- key,
- }));
-
- const renderItem = useCallback(
- ({ logs, key }: ActivityTimelineItem) => {
- const hasUnresolvedError = logs.some(
- (log) => log.status === ExecutionLogStatus.ERROR,
- );
- const hasSkippedEntry = logs.some(
- (log) => log.status === ExecutionLogStatus.SKIPPED,
- );
-
- return (
-
- );
- },
- [onItemClicked],
- );
-
- return (
-
- {items.map(renderItem)}
-
- );
-};
-
-export default ActivityTimelineList;
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/CommentInput.tsx b/clients/admin-ui/src/features/privacy-requests/events-and-logs/CommentInput.tsx
new file mode 100644
index 00000000000..33f39eb53ee
--- /dev/null
+++ b/clients/admin-ui/src/features/privacy-requests/events-and-logs/CommentInput.tsx
@@ -0,0 +1,96 @@
+import {
+ AntButton as Button,
+ AntFlex as Flex,
+ AntInput as Input,
+ AntMessage as message,
+ AntTabs as Tabs,
+ AntTabsProps as TabsProps,
+} from "fidesui";
+import { useEffect, useRef, useState } from "react";
+
+import { CommentType } from "~/types/api/models/CommentType";
+
+import { useCreateCommentMutation } from "../comments/privacy-request-comments.slice";
+
+export interface CommentInputProps {
+ privacyRequestId: string;
+ onCancel: () => void;
+}
+
+export const CommentInput = ({
+ privacyRequestId,
+ onCancel,
+}: CommentInputProps) => {
+ const [commentText, setCommentText] = useState("");
+ const textAreaRef = useRef
(null);
+ const [createComment, { isLoading }] = useCreateCommentMutation();
+
+ // Focus the textarea when the component mounts
+ useEffect(() => {
+ if (textAreaRef.current) {
+ textAreaRef.current.focus();
+ }
+ }, []);
+
+ const handleSubmit = async () => {
+ if (commentText.trim()) {
+ try {
+ await createComment({
+ privacy_request_id: privacyRequestId,
+ comment_text: commentText,
+ comment_type: CommentType.NOTE,
+ }).unwrap();
+
+ // Reset and close
+ setCommentText("");
+ onCancel();
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error("Failed to add comment:", error);
+ message.error({
+ content: "Failed to add comment",
+ duration: 5,
+ });
+ }
+ }
+ };
+
+ const items: TabsProps["items"] = [
+ {
+ key: "internal",
+ label: "Internal comment",
+ children: (
+ setCommentText(e.target.value)}
+ rows={3}
+ className="mb-3 h-[150px] w-full !resize-none"
+ data-testid="comment-input"
+ />
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/index.ts b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/index.ts
new file mode 100644
index 00000000000..c878eedfdaa
--- /dev/null
+++ b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./usePrivacyRequestComments";
+export * from "./usePrivacyRequestEventLogs";
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestComments.ts b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestComments.ts
new file mode 100644
index 00000000000..5ae0442887e
--- /dev/null
+++ b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestComments.ts
@@ -0,0 +1,57 @@
+import { AntMessage as message } from "fidesui";
+import { useEffect } from "react";
+
+import { useGetCommentsQuery } from "~/features/privacy-requests/comments/privacy-request-comments.slice";
+import {
+ ActivityTimelineItem,
+ ActivityTimelineItemTypeEnum,
+} from "~/features/privacy-requests/types";
+import { CommentResponse } from "~/types/api/models/CommentResponse";
+
+/**
+ * Hook for fetching and processing privacy request comments
+ */
+export const usePrivacyRequestComments = (privacyRequestId: string) => {
+ // Fetch comments data for this privacy request
+ const {
+ data: commentsData,
+ isLoading,
+ error,
+ } = useGetCommentsQuery({
+ privacy_request_id: privacyRequestId,
+ size: 100, // Use a reasonable limit
+ });
+
+ // Handle error state
+ useEffect(() => {
+ if (error) {
+ message.error("Failed to fetch the request comments");
+ }
+ }, [error]);
+
+ // Map comments to ActivityTimelineItem
+ const commentItems: ActivityTimelineItem[] = !commentsData?.items
+ ? []
+ : commentsData.items.map((comment: CommentResponse) => {
+ const author =
+ comment.user_first_name && comment.user_last_name
+ ? `${comment.user_first_name} ${comment.user_last_name}`
+ : comment.username || "Unknown";
+
+ return {
+ author,
+ date: new Date(comment.created_at),
+ type: ActivityTimelineItemTypeEnum.INTERNAL_COMMENT,
+ showViewLog: false,
+ description: comment.comment_text,
+ isError: false,
+ isSkipped: false,
+ id: `comment-${comment.id}`,
+ };
+ });
+
+ return {
+ commentItems,
+ isLoading,
+ };
+};
diff --git a/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestEventLogs.ts b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestEventLogs.ts
new file mode 100644
index 00000000000..974a606a411
--- /dev/null
+++ b/clients/admin-ui/src/features/privacy-requests/events-and-logs/hooks/usePrivacyRequestEventLogs.ts
@@ -0,0 +1,43 @@
+import {
+ ActivityTimelineItem,
+ ActivityTimelineItemTypeEnum,
+ ExecutionLogStatus,
+ PrivacyRequestResults,
+} from "~/features/privacy-requests/types";
+
+/**
+ * Hook for processing privacy request event logs
+ */
+export const usePrivacyRequestEventLogs = (results?: PrivacyRequestResults) => {
+ // Determine if results are loading
+ const isLoading = !results;
+
+ // Map from source events to ActivityTimelineItems
+ const eventItems: ActivityTimelineItem[] = !results
+ ? []
+ : Object.entries(results).map(([key, logs]) => {
+ const hasUnresolvedError = logs.some(
+ (log) => log.status === ExecutionLogStatus.ERROR,
+ );
+ const hasSkippedEntry = logs.some(
+ (log) => log.status === ExecutionLogStatus.SKIPPED,
+ );
+
+ return {
+ author: "Fides",
+ title: key,
+ date: new Date(logs[0].updated_at),
+ type: ActivityTimelineItemTypeEnum.REQUEST_UPDATE,
+ showViewLog: hasUnresolvedError || hasSkippedEntry,
+ onClick: () => {}, // This will be overridden in the component
+ isError: hasUnresolvedError,
+ isSkipped: hasSkippedEntry,
+ id: `request-${key}`,
+ };
+ });
+
+ return {
+ eventItems,
+ isLoading,
+ };
+};
diff --git a/clients/admin-ui/src/features/privacy-requests/types.ts b/clients/admin-ui/src/features/privacy-requests/types.ts
index 953c63a5f64..11168143e74 100644
--- a/clients/admin-ui/src/features/privacy-requests/types.ts
+++ b/clients/admin-ui/src/features/privacy-requests/types.ts
@@ -207,3 +207,29 @@ export interface ConfigMessagingSecretsRequest {
twilio_sender_phone_number?: string;
};
}
+
+export enum ActivityTimelineItemTypeEnum {
+ REQUEST_UPDATE = "Request update",
+ INTERNAL_COMMENT = "Internal comment",
+}
+
+export const TimelineItemColorMap: Record<
+ ActivityTimelineItemTypeEnum,
+ string
+> = {
+ [ActivityTimelineItemTypeEnum.REQUEST_UPDATE]: "sandstone",
+ [ActivityTimelineItemTypeEnum.INTERNAL_COMMENT]: "marble",
+};
+
+export interface ActivityTimelineItem {
+ author: string;
+ title?: string;
+ date: Date;
+ type: ActivityTimelineItemTypeEnum;
+ showViewLog: boolean;
+ onClick?: () => void;
+ description?: string;
+ isError: boolean;
+ isSkipped: boolean;
+ id: string;
+}
diff --git a/clients/admin-ui/src/types/api/index.ts b/clients/admin-ui/src/types/api/index.ts
index dbe1240d7ff..415dabad83e 100644
--- a/clients/admin-ui/src/types/api/index.ts
+++ b/clients/admin-ui/src/types/api/index.ts
@@ -33,7 +33,7 @@ export type { BasicSystemResponse } from "./models/BasicSystemResponse";
export type { BigQueryConfig } from "./models/BigQueryConfig";
export type { BigQueryDocsSchema } from "./models/BigQueryDocsSchema";
export type { Body_acquire_access_token_api_v1_oauth_token_post } from "./models/Body_acquire_access_token_api_v1_oauth_token_post";
-export type { Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post } from "./models/Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post";
+export type { Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post } from "./models/Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post";
export type { Body_export_minimal_datamap_with_format_api_v1_plus_datamap_minimal__export_format__post } from "./models/Body_export_minimal_datamap_with_format_api_v1_plus_datamap_minimal__export_format__post";
export type { Body_upload_data_api_v1_storage__request_id__post } from "./models/Body_upload_data_api_v1_storage__request_id__post";
export type { BulkCustomFieldRequest } from "./models/BulkCustomFieldRequest";
diff --git a/clients/admin-ui/src/types/api/models/Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts b/clients/admin-ui/src/types/api/models/Body_create_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts
similarity index 62%
rename from clients/admin-ui/src/types/api/models/Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts
rename to clients/admin-ui/src/types/api/models/Body_create_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts
index 02c097ac211..bc949d18d09 100644
--- a/clients/admin-ui/src/types/api/models/Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts
+++ b/clients/admin-ui/src/types/api/models/Body_create_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post.ts
@@ -4,7 +4,7 @@
import type { AttachmentType } from "./AttachmentType";
-export type Body_create_privacy_request_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post =
+export type Body_create_attachment_api_v1_plus_privacy_request__privacy_request_id__attachment_post =
{
attachment_type: AttachmentType;
attachment_file: Blob;
diff --git a/clients/admin-ui/src/types/api/models/Body_create_privacy_request_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts b/clients/admin-ui/src/types/api/models/Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts
similarity index 73%
rename from clients/admin-ui/src/types/api/models/Body_create_privacy_request_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts
rename to clients/admin-ui/src/types/api/models/Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts
index c7abbd35b2f..2fef4454559 100644
--- a/clients/admin-ui/src/types/api/models/Body_create_privacy_request_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts
+++ b/clients/admin-ui/src/types/api/models/Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post.ts
@@ -5,7 +5,7 @@
import type { AttachmentType } from "./AttachmentType";
import type { CommentType } from "./CommentType";
-export type Body_create_privacy_request_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post =
+export type Body_create_comment_api_v1_plus_privacy_request__privacy_request_id__comment_post =
{
comment_text: string;
comment_type: CommentType;
diff --git a/clients/admin-ui/src/types/api/models/Page_CommentResponse_.ts b/clients/admin-ui/src/types/api/models/Page_CommentResponse_.ts
new file mode 100644
index 00000000000..2e5207fd995
--- /dev/null
+++ b/clients/admin-ui/src/types/api/models/Page_CommentResponse_.ts
@@ -0,0 +1,13 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { CommentResponse } from "./CommentResponse";
+
+export type Page_CommentResponse_ = {
+ items: Array;
+ total: number | null;
+ page: number | null;
+ size: number | null;
+ pages?: number | null;
+};
diff --git a/clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts b/clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts
index ef3a4959ebe..29e1d678511 100644
--- a/clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts
+++ b/clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts
@@ -21,6 +21,8 @@ export enum ScopeRegistryEnum {
CLIENT_DELETE = "client:delete",
CLIENT_READ = "client:read",
CLIENT_UPDATE = "client:update",
+ COMMENT_CREATE = "comment:create",
+ COMMENT_READ = "comment:read",
CONFIG_READ = "config:read",
CONFIG_UPDATE = "config:update",
CONNECTION_AUTHORIZE = "connection:authorize",