Nu 1865 activities changes (#7133)

* NU-1865 fix issue with a search of removed attachment
TouK · Nov 8, 2024 · 98d45ad · 98d45ad
1 parent 332bf1a
commit 98d45ad
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 42 deletions.
diff --git a/designer/client/cypress/e2e/activities.cy.ts b/designer/client/cypress/e2e/activities.cy.ts
@@ -100,15 +100,12 @@ describe("Activities", () => {
         makeScreenshot();
 
         // modify comment
-        cy.intercept("/api/processes/*/activity/comment/*").as("modifyComment");
-        cy.get("[data-testid=activity-row-3]").as("modifyCommentRow").trigger("mouseover");
-        cy.get("@modifyCommentRow").find("[data-testid=edit-comment-icon]").click();
+        cy.intercept("/api/processes/*/activity/comment/*").as("editComment");
+        cy.get("[data-testid=activity-row-3]").as("editCommentRow").trigger("mouseover");
+        cy.get("@editCommentRow").find("[data-testid=edit-comment-icon]").click();
         cy.get("[data-testid=window]").find("textarea").eq(0).type(" new comment");
-        cy.get("[data-testid=window]")
-            .find("button")
-            .contains(/^Modify/i)
-            .click();
-        cy.wait("@modifyComment");
-        cy.get("@modifyCommentRow").contains("test comment new comment").should("be.visible");
+        cy.get("[data-testid=window]").find("button").contains(/^Edit/i).click();
+        cy.wait("@editComment");
+        cy.get("@editCommentRow").contains("test comment new comment").should("be.visible");
     });
 });
diff --git a/...ts/modals/ModifyExistingCommentDialog.tsx → ...ts/modals/ModifyActivityCommentDialog.tsx b/...ts/modals/ModifyExistingCommentDialog.tsx → ...ts/modals/ModifyActivityCommentDialog.tsx
@@ -12,7 +12,7 @@ import { getProcessName } from "../../reducers/selectors/graph";
 import { getScenarioActivities } from "../../actions/nk/scenarioActivities";
 import { ModifyActivityCommentMeta } from "../toolbars/activities/types";
 
-const ModifyExistingCommentDialog = (props: WindowContentProps<number, ModifyActivityCommentMeta>) => {
+const ModifyActivityCommentDialog = (props: WindowContentProps<number, ModifyActivityCommentMeta>) => {
     const meta = props.data.meta;
     const [comment, setState] = useState(meta.existingComment);
     const { t } = useTranslation();
@@ -35,9 +35,9 @@ const ModifyExistingCommentDialog = (props: WindowContentProps<number, ModifyAct
     const buttons: WindowButtonProps[] = useMemo(
         () => [
             { title: t("dialog.button.cancel", "Cancel"), action: () => props.close(), classname: LoadingButtonTypes.secondaryButton },
-            { title: t("dialog.button.modify", "Modify"), action: () => confirmAction() },
+            { title: meta.confirmButtonText, action: () => confirmAction() },
         ],
-        [confirmAction, props, t],
+        [confirmAction, meta.confirmButtonText, props, t],
     );
 
     return (
@@ -65,4 +65,4 @@ const ModifyExistingCommentDialog = (props: WindowContentProps<number, ModifyAct
     );
 };
 
-export default ModifyExistingCommentDialog;
+export default ModifyActivityCommentDialog;
diff --git a/designer/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItem.tsx b/designer/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItem.tsx
@@ -93,16 +93,10 @@ export const ActivityItem = forwardRef(
                             />
                         )}
 
-                        {activity?.attachment?.file.status === "DELETED" && (
-                            <Typography component={SearchHighlighter} highlights={[searchQuery]} variant={"overline"}>
-                                {t("activityItem.attachmentRemoved", "File ‘{{filename}}’ removed", {
-                                    filename: activity.attachment.filename,
-                                })}
-                            </Typography>
-                        )}
-
                         {activity.additionalFields.map((additionalField, index) => {
-                            const additionalFieldText = `${additionalField.name}: ${additionalField.value}`;
+                            const additionalFieldText = additionalField.name
+                                ? `${additionalField.name}: ${additionalField.value}`
+                                : additionalField.value;
 
                             return (
                                 <Typography component={SearchHighlighter} highlights={[searchQuery]} key={index} variant={"overline"}>

diff --git a/...er/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemComment.tsx b/...er/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemComment.tsx
@@ -81,6 +81,8 @@ const CommentActivity = ({
                     commentContent={activityComment.content}
                     data-testid={`edit-comment-icon`}
                     key={activityAction.id}
+                    title={t("panels.actions.editComment.title", "Edit comment")}
+                    confirmButtonText={t("panels.actions.editComment.confirmButton", "Edit")}
                     {...getEventTrackingProps({ selector: EventTrackingSelector.ScenarioActivitiesEditComment })}
                 />
             );
@@ -108,7 +110,13 @@ export const ActivityItemComment = ({ comment, searchQuery, activityActions, sce
     };
 
     return (
-        <Box ref={multilineDetection} display="grid" gridTemplateColumns={isMultiline ? "1fr 10%" : "1fr 15%"} alignItems="flex-start">
+        <Box
+            ref={multilineDetection}
+            display="grid"
+            gridTemplateColumns={isMultiline ? "1fr 10%" : "1fr 15%"}
+            alignItems="flex-start"
+            pr={0.5}
+        >
             <CommentContent
                 content={comment.content.value}
                 commentSettings={commentSettings}

diff --git a/...ent/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemCommentModify.tsx b/...ent/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemCommentModify.tsx
@@ -10,28 +10,47 @@ interface Props {
     scenarioActivityId: string;
     activityType: ActivityType;
     activityAction: ActionMetadata;
+    title: string;
+    confirmButtonText: string;
 }
-export const ActivityItemCommentModify = ({ commentContent, scenarioActivityId, activityType, activityAction, ...props }: Props) => {
+export const ActivityItemCommentModify = ({
+    commentContent,
+    scenarioActivityId,
+    activityType,
+    activityAction,
+    title,
+    confirmButtonText,
+    ...props
+}: Props) => {
     const featuresSettings = useSelector(getFeatureSettings);
     const { open } = useWindows();
 
     const handleOpenModifyComment = useCallback(() => {
         const permittedModifyCommentTypes: ActivityType[] = ["SCENARIO_DEPLOYED", "SCENARIO_CANCELED", "SCENARIO_PAUSED"];
 
         open<ModifyActivityCommentMeta>({
-            title: "Modify comment",
+            title,
             isModal: true,
             shouldCloseOnEsc: true,
-            kind: WindowKind.modifyComment,
+            kind: WindowKind.modifyActivityComment,
             meta: {
                 existingComment: commentContent.value,
                 scenarioActivityId,
                 placeholder: permittedModifyCommentTypes.includes(activityType)
                     ? featuresSettings?.deploymentCommentSettings?.exampleComment
                     : undefined,
+                confirmButtonText,
             },
         });
-    }, [activityType, commentContent.value, featuresSettings?.deploymentCommentSettings?.exampleComment, open, scenarioActivityId]);
+    }, [
+        activityType,
+        commentContent.value,
+        confirmButtonText,
+        featuresSettings?.deploymentCommentSettings?.exampleComment,
+        open,
+        scenarioActivityId,
+        title,
+    ]);
 
     return (
         <StyledActionIcon

diff --git a/...ner/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx b/...ner/client/src/components/toolbars/activities/ActivityPanelRowItem/ActivityItemHeader.tsx
@@ -25,6 +25,10 @@ const StyledHeaderIcon = styled(UrlIcon)(({ theme }) => ({
     width: "16px",
     height: "16px",
     color: theme.palette.primary.main,
+    svg: {
+        width: "16px",
+        height: "16px",
+    },
 }));
 
 const StyledHeaderActionRoot = styled("div")(({ theme }) => ({
@@ -37,7 +41,7 @@ const StyledActivityItemHeader = styled("div")<{ isHighlighted: boolean; isRunni
     ({ theme, isHighlighted, isRunning, isActiveFound }) => ({
         display: "flex",
         alignItems: "center",
-        padding: theme.spacing(0.5, 0, 0.5, 0.75),
+        padding: theme.spacing(0.5, 0.5, 0.5, 0.75),
         borderRadius: theme.spacing(0.5),
         ...getHeaderColors(theme, isHighlighted, isRunning, isActiveFound),
     }),
@@ -149,6 +153,8 @@ const HeaderActivity = ({
                     scenarioActivityId={scenarioActivityId}
                     activityType={activityType}
                     activityAction={activityAction}
+                    title={t("panels.actions.addComment.title", "Add comment")}
+                    confirmButtonText={t("panels.actions.addComment.confirmButton", "Add")}
                     {...getEventTrackingProps({ selector: EventTrackingSelector.ScenarioActivitiesAddCommentToActivity })}
                 />
             );

diff --git a/designer/client/src/components/toolbars/activities/helpers/extendActivitiesWithUIData.ts b/designer/client/src/components/toolbars/activities/helpers/extendActivitiesWithUIData.ts
@@ -3,6 +3,22 @@ import { v4 as uuid4 } from "uuid";
 import { Activity, ButtonActivity, DateActivity, UIActivity } from "../ActivitiesPanel";
 import { formatDate } from "./date";
 
+const createUiActivity = (activity: Activity) => {
+    const uiActivity: UIActivity = {
+        ...activity,
+        isActiveFound: false,
+        isFound: false,
+        uiGeneratedId: uuid4(),
+        uiType: "item",
+        isHidden: false,
+    };
+
+    if (uiActivity?.attachment?.file?.status === "DELETED") {
+        uiActivity.additionalFields.push({ name: "", value: `File '${uiActivity.attachment.filename}' removed` });
+    }
+
+    return uiActivity;
+};
 const getLatestDateItem = (uiActivities: UIActivity[]) => {
     let previousDateItem: DateActivity | undefined;
 
@@ -123,14 +139,9 @@ export const extendActivitiesWithUIData = (activitiesDataWithMetadata: Activity[
             const dateLabel = recursiveDateLabelDesignation(activity, index);
             const toggleItemsButton = recursiveToggleItemsButtonDesignation(activity, index);
             dateLabel && uiActivities.push(dateLabel);
-            uiActivities.push({
-                ...activity,
-                isActiveFound: false,
-                isFound: false,
-                uiGeneratedId: uuid4(),
-                uiType: "item",
-                isHidden: false,
-            });
+
+            uiActivities.push(createUiActivity(activity));
+
             if (toggleItemsButton) {
                 initiallyHideItems(toggleItemsButton.sameItemOccurrence);
                 uiActivities.push(toggleItemsButton);

diff --git a/designer/client/src/components/toolbars/activities/types.ts b/designer/client/src/components/toolbars/activities/types.ts
@@ -80,4 +80,9 @@ export interface ActivityMetadataResponse {
     actions: ActionMetadata[];
 }
 
-export type ModifyActivityCommentMeta = { existingComment?: string; scenarioActivityId: string; placeholder?: string };
+export type ModifyActivityCommentMeta = {
+    existingComment?: string;
+    scenarioActivityId: string;
+    placeholder?: string;
+    confirmButtonText: string;
+};
diff --git a/designer/client/src/components/toolbars/activities/useActivitiesSearch.test.ts b/designer/client/src/components/toolbars/activities/useActivitiesSearch.test.ts
@@ -94,17 +94,35 @@ const sampleActivitiesResponse: ActivitiesResponse["activities"] = [
         ],
         type: "SCENARIO_NAME_CHANGED",
     },
+    {
+        id: "524adff3-fb7d-42d1-bf92-f0903d548d00",
+        user: "writer",
+        date: "2022-11-07T11:55:53.127796Z",
+        scenarioVersionId: 7,
+        attachment: {
+            file: {
+                status: "DELETED",
+            },
+            filename: "Screenshot 2022-10-21 at 08.07.38.png",
+            lastModifiedBy: "writer",
+            lastModifiedAt: "2022-11-07T11:55:53.127796Z",
+        },
+        additionalFields: [],
+        overrideDisplayableName: "File removed",
+        type: "ATTACHMENT_ADDED",
+    },
 ];
 
 const mockedActivities = extendActivitiesWithUIData(mergeActivityDataWithMetadata(sampleActivitiesResponse, sampleMetadataResponse));
 
 describe(useActivitiesSearch.name, () => {
     it.each<[string, string[]]>([
-        ["atta", [mockedActivities[4].uiGeneratedId]],
+        ["atta", [mockedActivities[4].uiGeneratedId, mockedActivities[9].uiGeneratedId]],
         ["3 saved", [mockedActivities[3].uiGeneratedId]],
         ["2024-09-27", [mockedActivities[1].uiGeneratedId]],
         ["tests save", [mockedActivities[3].uiGeneratedId]],
         ["newName: old marketing campaign", [mockedActivities[7].uiGeneratedId]],
+        [".png", [mockedActivities[9].uiGeneratedId]],
     ])("should find elements when query is '%s'", (searchQuery, expected) => {
         const handleScrollToItemMock = jest.fn();
         const handleUpdateScenarioActivitiesMock = jest.fn();

diff --git a/designer/client/src/windowManager/ContentGetter.tsx b/designer/client/src/windowManager/ContentGetter.tsx
@@ -53,7 +53,7 @@ const AddCommentDialog = loadable(() => import("../components/modals/AddCommentD
     fallback: <LoaderSpinner show />,
 });
 
-const ModifyExistingCommentDialog = loadable(() => import("../components/modals/ModifyExistingCommentDialog"), {
+const ModifyActivityCommentDialog = loadable(() => import("../components/modals/ModifyActivityCommentDialog"), {
     fallback: <LoaderSpinner show />,
 });
 
@@ -97,8 +97,8 @@ const contentGetter: React.FC<WindowContentProps<WindowKind>> = (props) => {
             return <ScenarioDetailsDialog {...props} />;
         case WindowKind.addComment:
             return <AddCommentDialog {...props} />;
-        case WindowKind.modifyComment:
-            return <ModifyExistingCommentDialog {...props} />;
+        case WindowKind.modifyActivityComment:
+            return <ModifyActivityCommentDialog {...props} />;
         case WindowKind.addAttachment:
             return <AddAttachmentDialog {...props} />;
         default:

diff --git a/designer/client/src/windowManager/WindowKind.tsx b/designer/client/src/windowManager/WindowKind.tsx
@@ -19,6 +19,6 @@ export enum WindowKind {
     viewDescription,
     editDescription,
     addComment,
-    modifyComment,
+    modifyActivityComment,
     addAttachment,
 }