💄 Show the latest new update in machine client table

src/components/MachineClientsTable.tsx

@@ -11,10 +11,10 @@ import {
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { cn } from "@app/lib/cn";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { PaginationState } from "@tanstack/react-table";
@@ -31,15 +31,18 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { startTransition, useMemo, useState, useTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
-import { type SelectedLabel } from "./labels-selector";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { Badge } from "./ui/badge";
 import { ControlledDataTable } from "./ui/controlled-data-table";
-import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import {
-import { useLocalLabels } from "@app/hooks/useLocalLabels";
+    productUpdatesQueries,
-import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
+    type LatestVersionResponse
+} from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import semver from "semver";
+import { InfoPopup } from "./ui/info-popup";
 
 export type ClientRow = {
     id: number;
@@ -101,6 +104,9 @@ export default function MachineClientsTable({
 
     const { isPaidUser } = usePaidStatus();
     const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
+    const data = useQuery(productUpdatesQueries.latestVersion(true));
+
+    const latestPlatformVersions = data.data?.data;
 
     const defaultMachineColumnVisibility = {
         subnet: false,
@@ -375,6 +381,37 @@ export default function MachineClientsTable({
                 cell: ({ row }) => {
                     const originalRow = row.original;
 
+                    const agentVersionMap: Record<string, string> = {
+                        "Pangolin Windows": "windows",
+                        "Pangolin Android": "android",
+                        "Pangolin iOS": "ios",
+                        "Pangolin iPadOS": "ios",
+                        "Pangolin macOS": "mac",
+                        "Pangolin CLI": "cli",
+                        "Olm CLI": "olm"
+                    };
+
+                    let updateAvailable = false;
+
+                    if (
+                        originalRow.olmVersion &&
+                        originalRow.agent &&
+                        latestPlatformVersions
+                    ) {
+                        const agent = agentVersionMap[
+                            originalRow.agent
+                        ] as keyof LatestVersionResponse;
+
+                        if (agent in latestPlatformVersions) {
+                            const agentVersion = latestPlatformVersions[agent];
+
+                            updateAvailable = semver.lt(
+                                originalRow.olmVersion,
+                                agentVersion.latestVersion
+                            );
+                        }
+                    }
+
                     return (
                         <div className="flex items-center space-x-1">
                             {originalRow.agent && originalRow.olmVersion ? (
@@ -386,9 +423,9 @@ export default function MachineClientsTable({
                             ) : (
                                 "-"
                             )}
-                            {/*originalRow.olmUpdateAvailable && (
+                            {updateAvailable && (
-                                <InfoPopup info={t("olmUpdateAvailableInfo")} />
+                                <InfoPopup info={t("updateAvailableInfo")} />
-                            )*/}
+                            )}
                         </div>
                     );
                 }