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

@@ -0,0 +1,2 @@
+- fix an issue where the upcoming host activities showed the incorrect created at date in the
+  tooltip

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)}

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;

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}