💄 Show updates available in the frontend, on sites & user devices

src/components/UserDevicesTable.tsx

@@ -38,6 +38,12 @@ import { ColumnFilterButton } from "./ColumnFilterButton";
 import IdpTypeBadge from "./IdpTypeBadge";
 import { Badge } from "./ui/badge";
 import { ControlledDataTable } from "./ui/controlled-data-table";
+import {
+    productUpdatesQueries,
+    type LatestVersionResponse
+} from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import semver from "semver";
 
 export type ClientRow = {
     id: number;
@@ -100,6 +106,9 @@ export default function UserDevicesTable({
         searchParams
     } = useNavigationContext();
     const [isRefreshing, startTransition] = useTransition();
+    const data = useQuery(productUpdatesQueries.latestVersion(true));
+
+    const latestPlatformVersions = data.data?.data;
 
     const defaultUserColumnVisibility = {
         subnet: false,
@@ -555,6 +564,37 @@ export default function UserDevicesTable({
                 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 ? (
@@ -567,9 +607,9 @@ export default function UserDevicesTable({
                                 "-"
                             )}
 
-                            {/*originalRow.olmUpdateAvailable && (
-                                <InfoPopup info={t("olmUpdateAvailableInfo")} />
-                            )*/}
+                            {updateAvailable && (
+                                <InfoPopup info={t("updateAvailableInfo")} />
+                            )}
                         </div>
                     );
                 }
@@ -714,7 +754,7 @@ export default function UserDevicesTable({
         }
 
         return allOptions;
-    }, [t]);
+    }, [t, latestPlatformVersions]);
 
     function handleFilterChange(
         column: string,