UI – Clarify expected behavior of policy host counts, dashboard controls software count, and controls os updates versions count (#25150)

## For #23512 

<img width="1392" alt="Screenshot 2025-01-03 at 4 13 33 PM"
src="https://github.com/user-attachments/assets/0244a2db-eb97-4cf6-b50f-fd7567e14e40"
/>

<img width="860" alt="Screenshot 2025-01-03 at 3 59 56 PM"
src="https://github.com/user-attachments/assets/cc2e6adb-ac09-4f02-8e1b-4df060e90de8"
/>

<img width="1392" alt="Screenshot 2025-01-03 at 4 14 40 PM"
src="https://github.com/user-attachments/assets/316c359e-4081-4858-b890-f8d6c8052934"
/>

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/23512-clarify-expected-behavior-of-host-counts

@@ -0,0 +1,2 @@
+- Clarify expected behavior of policy host counts, dashboard controls software count, and controls
+  os updates versions count.

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -322,7 +322,15 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
             setSoftwareTitleDetail(
               <LastUpdatedText
                 lastUpdatedAt={data.counts_updated_at}
-                whatToRetrieve="software"
+                customTooltipText={
+                  <>
+                    Fleet periodically queries all hosts to
+                    <br />
+                    retrieve software. Click to view
+                    <br />
+                    hosts for the most up-to-date lists.
+                  </>
+                }
               />
             );
           setShowSoftwareCard(true);

frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx

@@ -81,7 +81,17 @@ const CurrentVersionSection = ({
     return (
       <LastUpdatedText
         lastUpdatedAt={data?.counts_updated_at}
-        whatToRetrieve="operating systems"
+        customTooltipText={
+          <>
+            Fleet periodically queries all hosts to
+            <br />
+            retrieve operating systems. Click to
+            <br />
+            view hosts for the most up-to-date
+            <br />
+            lists.
+          </>
+        }
       />
     );
   };

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -4,6 +4,7 @@ import { useQuery } from "react-query";
 import { InjectedRouter } from "react-router/lib/Router";
 import PATHS from "router/paths";
 import { isEqual } from "lodash";
+import { formatDistanceToNowStrict } from "date-fns";
 
 import { getNextLocationPath, wait } from "utilities/helpers";
 
@@ -44,6 +45,7 @@ import Spinner from "components/Spinner";
 import TeamsDropdown from "components/TeamsDropdown";
 import TableDataError from "components/DataError";
 import MainContent from "components/MainContent";
+import LastUpdatedText from "components/LastUpdatedText";
 
 import PoliciesTable from "./components/PoliciesTable";
 import OtherWorkflowsModal from "./components/OtherWorkflowsModal";
@@ -776,22 +778,43 @@ const ManagePolicyPage = ({
     }
   }
 
-  const renderPoliciesCount = (count?: number) => {
+  const renderPoliciesCountAndLastUpdated = (
+    count?: number,
+    policies?: IPolicyStats[]
+  ) => {
     // Hide count if fetching count || there are errors OR there are no policy results with no a search filter
     const isFetchingCount = !isAllTeamsSelected
       ? isFetchingTeamCountMergeInherited
       : isFetchingGlobalCount;
 
-    const hideCount =
+    const hide =
       isFetchingCount ||
       policiesErrors ||
       (!policyResults && searchQuery === "");
 
-    if (hideCount) {
+    if (hide) {
       return null;
     }
+    // Figure the time since the host counts were updated by finding first policy item with host_count_updated_at.
+    const updatedAt =
+      policies?.find((p) => !!p.host_count_updated_at)?.host_count_updated_at ||
+      "";
 
-    return <TableCount name="policies" count={count} />;
+    return (
+      <>
+        <TableCount name="policies" count={count} />
+        <LastUpdatedText
+          lastUpdatedAt={updatedAt}
+          customTooltipText={
+            <>
+              Counts are updated hourly. Click host
+              <br />
+              counts for the most up-to-date count.
+            </>
+          }
+        />
+      </>
+    );
   };
 
   const renderMainTable = () => {
@@ -815,7 +838,12 @@ const ManagePolicyPage = ({
           currentTeam={currentTeamSummary}
           currentAutomatedPolicies={currentAutomatedPolicies}
           isPremiumTier={isPremiumTier}
-          renderPoliciesCount={() => renderPoliciesCount(globalPoliciesCount)}
+          renderPoliciesCount={() =>
+            renderPoliciesCountAndLastUpdated(
+              globalPoliciesCount,
+              globalPolicies
+            )
+          }
           searchQuery={searchQuery}
           sortHeader={sortHeader}
           sortDirection={sortDirection}
@@ -844,7 +872,10 @@ const ManagePolicyPage = ({
           currentTeam={currentTeamSummary}
           currentAutomatedPolicies={currentAutomatedPolicies}
           renderPoliciesCount={() =>
-            renderPoliciesCount(teamPoliciesCountMergeInherited)
+            renderPoliciesCountAndLastUpdated(
+              teamPoliciesCountMergeInherited,
+              teamPolicies
+            )
           }
           isPremiumTier={isPremiumTier}
           searchQuery={searchQuery}

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -295,4 +295,8 @@
       }
     }
   }
+
+  .component__last-updated-text {
+    font-weight: normal;
+  }
 }

frontend/pages/policies/ManagePoliciesPage/components/PassingColumnHeader/PassingColumnHeader.tsx

@@ -1,37 +1,20 @@
 import Icon from "components/Icon";
 import React from "react";
-import TooltipWrapper from "components/TooltipWrapper";
 
 interface IPassingColumnHeaderProps {
   isPassing: boolean;
-  timeSinceHostCountUpdate: string;
 }
 
 const baseClass = "passing-column-header";
 
-const PassingColumnHeader = ({
+const PassingColumnHeader = ({ isPassing }: IPassingColumnHeaderProps) => {
-  isPassing,
-  timeSinceHostCountUpdate,
-}: IPassingColumnHeaderProps) => {
   const iconName = isPassing ? "success" : "error";
   const columnText = isPassing ? "Yes" : "No";
-  const updateText = timeSinceHostCountUpdate
-    ? `Host count updated ${timeSinceHostCountUpdate}.`
-    : "";
 
   return (
     <div className={baseClass}>
       <Icon name={iconName} />
-      <TooltipWrapper
+      <span className="status-header-text">{columnText}</span>
-        tipContent={
-          <>
-            {updateText}
-            <br /> Counts are updated hourly.
-          </>
-        }
-      >
-        <span className="status-header-text">{columnText}</span>
-      </TooltipWrapper>
     </div>
   );
 };

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx

@@ -97,7 +97,6 @@ const PoliciesTable = ({
             selectedTeamId: currentTeam?.id,
             hasPermissionAndPoliciesToDelete,
           },
-          policiesList,
           isPremiumTier
         )}
         data={generateDataSet(

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx

@@ -2,11 +2,7 @@
 // disable this rule as it was throwing an error in Header and Cell component
 // definitions for the selection row for some reason when we dont really need it.
 import React from "react";
-import {
+import { millisecondsToHours, millisecondsToMinutes } from "date-fns";
-  formatDistanceToNowStrict,
-  millisecondsToHours,
-  millisecondsToMinutes,
-} from "date-fns";
 import { Tooltip as ReactTooltip5 } from "react-tooltip-5";
 // @ts-ignore
 import Checkbox from "components/forms/fields/Checkbox";
@@ -91,27 +87,10 @@ const generateTableHeaders = (
     hasPermissionAndPoliciesToDelete?: boolean;
     tableType?: string;
   },
-  policiesList: IPolicyStats[] = [],
   isPremiumTier?: boolean
 ): IDataColumn[] => {
   const { selectedTeamId, hasPermissionAndPoliciesToDelete } = options;
   const viewingTeamPolicies = selectedTeamId !== -1;
-  // Figure the time since the host counts were updated.
-  // First, find first policy item with host_count_updated_at.
-  const updatedAt =
-    policiesList.find((p) => !!p.host_count_updated_at)
-      ?.host_count_updated_at || "";
-  let timeSinceHostCountUpdate = "";
-  if (updatedAt) {
-    try {
-      timeSinceHostCountUpdate = formatDistanceToNowStrict(
-        new Date(updatedAt),
-        { addSuffix: true }
-      );
-    } catch (e) {
-      // Do nothing.
-    }
-  }
 
   const tableHeaders: IDataColumn[] = [
     {
@@ -170,12 +149,7 @@ const generateTableHeaders = (
       title: "Yes",
       Header: (cellProps) => (
         <HeaderCell
-          value={
+          value={<PassingColumnHeader isPassing />}
-            <PassingColumnHeader
-              isPassing
-              timeSinceHostCountUpdate={timeSinceHostCountUpdate}
-            />
-          }
           isSortedDesc={cellProps.column.isSortedDesc}
         />
       ),
@@ -221,12 +195,7 @@ const generateTableHeaders = (
       title: "No",
       Header: (cellProps) => (
         <HeaderCell
-          value={
+          value={<PassingColumnHeader isPassing={false} />}
-            <PassingColumnHeader
-              isPassing={false}
-              timeSinceHostCountUpdate={timeSinceHostCountUpdate}
-            />
-          }
           isSortedDesc={cellProps.column.isSortedDesc}
         />
       ),