From 97d0611b921cc45a20972f7506b7c7c58f2ee8d7 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 16 Apr 2025 10:17:48 +0100
Subject: [PATCH] Fix host upcoming activites showing wrong created at date in
 tooltip (#28242)

For #27775

fixes an issue where the host upcoming activities were showing the
incorrect created at dates in the tooltip.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-27775-fix-activity-date-tooltip |  2 ++
 .../components/ActivityItem/ActivityItem.tsx  | 24 +++++++++++++++----
 frontend/interfaces/activity.ts               |  5 +++-
 .../UpcomingActivityFeed.tsx                  |  2 +-
 4 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 changes/issue-27775-fix-activity-date-tooltip

diff --git a/changes/issue-27775-fix-activity-date-tooltip b/changes/issue-27775-fix-activity-date-tooltip
new file mode 100644
index 0000000000..dceeb64642
--- /dev/null
+++ b/changes/issue-27775-fix-activity-date-tooltip
@@ -0,0 +1,2 @@
+- fix an issue where the upcoming host activities showed the incorrect created at date in the
+  tooltip
diff --git a/frontend/components/ActivityItem/ActivityItem.tsx b/frontend/components/ActivityItem/ActivityItem.tsx
index c0640b2447..34df4fadc0 100644
--- a/frontend/components/ActivityItem/ActivityItem.tsx
+++ b/frontend/components/ActivityItem/ActivityItem.tsx
@@ -2,7 +2,12 @@ import React from "react";
 import ReactTooltip from "react-tooltip";
 import classnames from "classnames";
 
-import { IActivity, IActivityDetails } from "interfaces/activity";
+import {
+  IActivity,
+  IActivityDetails,
+  IHostPastActivity,
+  IHostUpcomingActivity,
+} from "interfaces/activity";
 import {
   addGravatarUrlToResource,
   internationalTimeFormat,
@@ -19,6 +24,15 @@ import { noop } from "lodash";
 
 const baseClass = "activity-item";
 
+const generateActivityId = (
+  activity: IActivity | IHostPastActivity | IHostUpcomingActivity
+) => {
+  if ("id" in activity) {
+    return `activity-${activity.id}`;
+  }
+  return `activity-${activity.uuid}`;
+};
+
 export interface IShowActivityDetailsData {
   type: string;
   details?: IActivityDetails;
@@ -35,7 +49,7 @@ export type ShowActivityDetailsHandler = ({
 }: IShowActivityDetailsData) => void;
 
 interface IActivityItemProps {
-  activity: IActivity;
+  activity: IActivity | IHostPastActivity | IHostUpcomingActivity;
   children: React.ReactNode;
   /**
    * Set this to `true` when rendering only this activity by itself. This will
@@ -108,6 +122,8 @@ const ActivityItem = ({
     onCancel();
   };
 
+  const tooltipId = generateActivityId(activity);
+
   return (
     <div className={classNames}>
       <div className={`${baseClass}__avatar-wrapper`}>
@@ -133,7 +149,7 @@ const ActivityItem = ({
           <span
             className={`${baseClass}__details-bottomline`}
             data-tip
-            data-for={`activity-${activity.id}`}
+            data-for={tooltipId}
           >
             {activityCreatedAt && dateAgo(activityCreatedAt)}
           </span>
@@ -143,7 +159,7 @@ const ActivityItem = ({
               place="top"
               type="dark"
               effect="solid"
-              id={`activity-${activity.id}`}
+              id={tooltipId}
               backgroundColor={COLORS["tooltip-bg"]}
             >
               {internationalTimeFormat(activityCreatedAt)}
diff --git a/frontend/interfaces/activity.ts b/frontend/interfaces/activity.ts
index 1f730781b9..3286823b32 100644
--- a/frontend/interfaces/activity.ts
+++ b/frontend/interfaces/activity.ts
@@ -158,7 +158,10 @@ export type IHostPastActivity = Omit<IActivity, "type" | "details"> & {
   details: IActivityDetails;
 };
 
-export type IHostUpcomingActivity = Omit<IActivity, "type" | "details"> & {
+export type IHostUpcomingActivity = Omit<
+  IActivity,
+  "id" | "type" | "details"
+> & {
   uuid: string;
   type: IHostUpcomingActivityType;
   details: IActivityDetails;
diff --git a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
index 8f0206c46e..a53b6d144f 100644
--- a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
+++ b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
@@ -59,7 +59,7 @@ const UpcomingActivityFeed = ({
             upcomingActivityComponentMap[activity.type];
           return (
             <ActivityItemComponent
-              key={activity.id}
+              key={activity.uuid}
               tab="upcoming"
               activity={activity}
               onShowDetails={onShowDetails}