Add transferred hosts to activity feed UI (#12442)

changes/issue-12297-ui-transferred-hosts-activity

@@ -0,0 +1 @@
+- Updated UI for transferred hosts activity items.

frontend/interfaces/activity.ts

@@ -45,6 +45,7 @@ export enum ActivityType {
   DeletedMacOSSetupAssistant = "deleted_macos_setup_assistant",
   EnabledMacOSSetupEndUserAuth = "enabled_macos_setup_end_user_auth",
   DisabledMacOSSetupEndUserAuth = "disabled_macos_setup_end_user_auth",
+  TransferredHosts = "transferred_hosts",
 }
 export interface IActivity {
   created_at: string;
@@ -76,6 +77,8 @@ export interface IActivityDetails {
   role?: UserRole;
   host_serial?: string;
   host_display_name?: string;
+  host_display_names?: string[];
+  host_ids?: number[];
   installed_from_dep?: boolean;
   minimum_version?: string;
   deadline?: string;

frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tests.tsx

@@ -634,4 +634,78 @@ describe("Activity Feed", () => {
       )
     ).toBeInTheDocument();
   });
+
+  it("renders a 'transferred_hosts' type activity for one host transferred to no team.", () => {
+    const activity = createMockActivity({
+      type: ActivityType.TransferredHosts,
+      details: {
+        host_ids: [1],
+        host_display_names: ["foo"],
+      },
+    });
+    render(<ActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText("transferred host", { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.getByText("foo", { exact: false })).toBeInTheDocument();
+    expect(screen.getByText("no team", { exact: false })).toBeInTheDocument();
+  });
+
+  it("renders a 'transferred_hosts' type activity for one host transferred to a team.", () => {
+    const activity = createMockActivity({
+      type: ActivityType.TransferredHosts,
+      details: {
+        host_ids: [1],
+        host_display_names: ["foo"],
+        team_name: "Alphas",
+      },
+    });
+    render(<ActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText("transferred host", { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.getByText("foo", { exact: false })).toBeInTheDocument();
+    expect(screen.getByText("Alphas", { exact: false })).toBeInTheDocument();
+  });
+
+  it("renders a 'transferred_hosts' type activity for multiple hosts transferred to no team.", () => {
+    const activity = createMockActivity({
+      type: ActivityType.TransferredHosts,
+      details: {
+        host_ids: [1, 2, 3],
+        host_display_names: ["foo", "bar", "baz"],
+      },
+    });
+    render(<ActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText("transferred 3 hosts", { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.queryByText("foo")).toBeNull();
+    expect(screen.queryByText("bar")).toBeNull();
+    expect(screen.queryByText("baz")).toBeNull();
+    expect(screen.getByText("no team", { exact: false })).toBeInTheDocument();
+  });
+
+  it("renders a 'transferred_hosts' type activity for multiple hosts transferred to a team.", () => {
+    const activity = createMockActivity({
+      type: ActivityType.TransferredHosts,
+      details: {
+        host_ids: [1, 2, 3],
+        host_display_names: ["foo", "bar", "baz"],
+        team_name: "Alphas",
+      },
+    });
+    render(<ActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText("transferred 3 hosts", { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.queryByText("foo")).toBeNull();
+    expect(screen.queryByText("bar")).toBeNull();
+    expect(screen.queryByText("baz")).toBeNull();
+    expect(screen.getByText("Alphas", { exact: false })).toBeInTheDocument();
+  });
 });

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

@@ -24,6 +24,7 @@ const PREMIUM_ACTIVITIES = new Set([
   "disabled_macos_disk_encryption",
   "enabled_macos_setup_end_user_auth",
   "disabled_macos_setup_end_user_auth",
+  "tranferred_hosts",
 ]);
 
 const getProfileMessageSuffix = (
@@ -443,6 +444,26 @@ const TAGGED_TEMPLATES = {
       </>
     );
   },
+  transferredHosts: (activity: IActivity) => {
+    const hostNames = activity.details?.host_display_names || [];
+    const teamName = activity.details?.team_name;
+    if (hostNames.length === 1) {
+      return (
+        <>
+          {" "}
+          transferred host <b>{hostNames[0]}</b> to {teamName ? "team " : ""}
+          <b>{teamName || "no team"}</b>.
+        </>
+      );
+    }
+    return (
+      <>
+        {" "}
+        transferred {hostNames.length} hosts to {teamName ? "team " : ""}
+        <b>{teamName || "no team"}</b>.
+      </>
+    );
+  },
 };
 
 const getDetail = (
@@ -544,6 +565,9 @@ const getDetail = (
     case ActivityType.DisabledMacOSSetupEndUserAuth: {
       return TAGGED_TEMPLATES.disabledMacOSSetupEndUserAuth(activity);
     }
+    case ActivityType.TransferredHosts: {
+      return TAGGED_TEMPLATES.transferredHosts(activity);
+    }
     default: {
       return TAGGED_TEMPLATES.defaultActivityTemplate(activity);
     }