Remove cancel icon for all past activities and fix install vpp activity show details (#26846)

frontend/__mocks__/activityMock.ts

@@ -1,4 +1,8 @@
-import { IActivity, ActivityType } from "interfaces/activity";
+import {
+  IActivity,
+  ActivityType,
+  IHostPastActivity,
+} from "interfaces/activity";
 
 const DEFAULT_ACTIVITY_MOCK: IActivity = {
   created_at: "2022-11-03T17:22:14Z",
@@ -11,8 +15,22 @@ const DEFAULT_ACTIVITY_MOCK: IActivity = {
   type: ActivityType.EditedAgentOptions,
 };
 
-const createMockActivity = (overrides?: Partial<IActivity>): IActivity => {
+export const createMockActivity = (
+  overrides?: Partial<IActivity>
+): IActivity => {
   return { ...DEFAULT_ACTIVITY_MOCK, ...overrides };
 };
 
+const DEFAULT_HOST_PAST_ACTIVITY_MOCK: IHostPastActivity = {
+  ...DEFAULT_ACTIVITY_MOCK,
+  type: ActivityType.LockedHost,
+  details: {},
+};
+
+export const createMockHostPastActivity = (
+  overrides?: Partial<IHostPastActivity>
+): IHostPastActivity => {
+  return { ...DEFAULT_HOST_PAST_ACTIVITY_MOCK, ...overrides };
+};
+
 export default createMockActivity;

frontend/pages/DashboardPage/cards/ActivityFeed/GlobalActivityItem/GlobalActivityItem.tsx

@@ -46,6 +46,7 @@ const ACTIVITIES_WITH_DETAILS = new Set([
   ActivityType.EnabledActivityAutomations,
   ActivityType.EditedActivityAutomations,
   ActivityType.LiveQuery,
+  ActivityType.InstalledAppStoreApp,
 ]);
 
 const getProfileMessageSuffix = (

frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledScriptActivityItem/CanceledScriptActivityItem.tsx

@@ -10,9 +10,15 @@ const baseClass = "canceled-script-activity-item";
 
 const CanceledScriptActivityItem = ({
   activity,
+  hideCancel,
 }: IHostActivityItemComponentProps) => {
   return (
-    <ActivityItem className={baseClass} activity={activity}>
+    <ActivityItem
+      className={baseClass}
+      activity={activity}
+      hideCancel={hideCancel}
+      hideShowDetails
+    >
       <>
         <b>{activity.actor_full_name}</b> canceled{" "}
         <b>{formatScriptNameForActivityItem(activity.details?.script_name)}</b>{" "}

frontend/pages/hosts/details/cards/Activity/ActivityItems/CanceledSoftwareInstallActivityItem/CanceledSoftwareInstallActivityItem.tsx

@@ -7,9 +7,15 @@ const baseClass = "canceled-software-install-activity-item";
 
 const CanceledSoftwareInstallActivityItem = ({
   activity,
+  hideCancel,
 }: IHostActivityItemComponentProps) => {
   return (
-    <ActivityItem className={baseClass} activity={activity}>
+    <ActivityItem
+      className={baseClass}
+      activity={activity}
+      hideCancel={hideCancel}
+      hideShowDetails
+    >
       <>
         <b>{activity.actor_full_name}</b> canceled{" "}
         <b>{activity.details?.software_title}</b> install on this host.

frontend/pages/hosts/details/cards/Activity/ActivityItems/LockedHostActivityItem/LockHostActivityItem.tests.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { createMockHostPastActivity } from "__mocks__/activityMock";
+
+import LockHostActivityItem from "./LockedHostActivityItem";
+
+describe("LockHostActivityItem", () => {
+  it("renders the activity content", () => {
+    render(
+      <LockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.getByText("Test User")).toBeVisible();
+    expect(screen.getByText(/locked this host/i)).toBeVisible();
+  });
+
+  it("does not render the cancel icon", () => {
+    render(
+      <LockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.queryByTestId("close-icon")).not.toBeInTheDocument();
+  });
+
+  it("does not render the show details icon", () => {
+    render(
+      <LockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.queryByTestId("info-outline-icon")).not.toBeInTheDocument();
+  });
+});

frontend/pages/hosts/details/cards/Activity/ActivityItems/LockedHostActivityItem/LockedHostActivityItem.tsx

@@ -10,7 +10,12 @@ const LockedHostActivityItem = ({
   activity,
 }: IHostActivityItemComponentProps) => {
   return (
-    <ActivityItem className={baseClass} activity={activity}>
+    <ActivityItem
+      className={baseClass}
+      activity={activity}
+      hideCancel
+      hideShowDetails
+    >
       <b>{activity.actor_full_name}</b> locked this host.
     </ActivityItem>
   );

frontend/pages/hosts/details/cards/Activity/ActivityItems/RanScriptActivityItem/RanScriptActivityItem.tsx

@@ -11,7 +11,6 @@ const RanScriptActivityItem = ({
   tab,
   activity,
   onShowDetails,
-  onCancel,
   isSoloActivity,
   hideCancel,
 }: IHostActivityItemComponentPropsWithShowDetails) => {
@@ -25,7 +24,6 @@ const RanScriptActivityItem = ({
       className={baseClass}
       activity={activity}
       onShowDetails={onShowDetails}
-      onCancel={onCancel}
       isSoloActivity={isSoloActivity}
       hideCancel={hideCancel}
     >

frontend/pages/hosts/details/cards/Activity/ActivityItems/UnlockedHostActivityItem/UnlockHostActivityItem.tests.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { createMockHostPastActivity } from "__mocks__/activityMock";
+
+import UnlockHostActivityItem from "./UnlockedHostActivityItem";
+
+describe("UnlockHostActivityItem", () => {
+  it("renders the activity content for darwin hosts", () => {
+    render(
+      <UnlockHostActivityItem
+        activity={createMockHostPastActivity({
+          actor_full_name: "Test User",
+          details: { host_platform: "darwin" },
+        })}
+        tab="past"
+      />
+    );
+
+    expect(screen.getByText("Test User")).toBeVisible();
+    expect(
+      screen.getByText("viewed the six-digit unlock PIN for this host.")
+    ).toBeVisible();
+  });
+
+  it("renders the activity content for non-darwin hosts", () => {
+    render(
+      <UnlockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.getByText("Test User")).toBeVisible();
+    expect(screen.getByText(/unlocked this host/i)).toBeVisible();
+  });
+
+  it("does not render the cancel icon", () => {
+    render(
+      <UnlockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.queryByTestId("close-icon")).not.toBeInTheDocument();
+  });
+
+  it("does not render the show details icon", () => {
+    render(
+      <UnlockHostActivityItem
+        activity={createMockHostPastActivity({ actor_full_name: "Test User" })}
+        tab="past"
+      />
+    );
+
+    expect(screen.queryByTestId("info-outline-icon")).not.toBeInTheDocument();
+  });
+});

frontend/pages/hosts/details/cards/Activity/ActivityItems/UnlockedHostActivityItem/UnlockedHostActivityItem.tsx

@@ -13,8 +13,13 @@ const UnlockedHostActivityItem = ({
     desc = "viewed the six-digit unlock PIN for this host.";
   }
   return (
-    <ActivityItem className={baseClass} activity={activity}>
-      <b>{activity.actor_full_name} </b> {desc}
+    <ActivityItem
+      className={baseClass}
+      activity={activity}
+      hideCancel
+      hideShowDetails
+    >
+      <b>{activity.actor_full_name}</b> {desc}
     </ActivityItem>
   );
 };