From cac877e6bb6970d6bfcab16efd7d50d255dc6c9a Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sun, 2 Feb 2025 12:59:27 -0800
Subject: [PATCH] show update available stack table

---
 .../src/components/resources/stack/index.tsx  | 85 ++++++++++---------
 .../src/components/resources/stack/table.tsx  | 11 ++-
 2 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/resources/stack/index.tsx b/frontend/src/components/resources/stack/index.tsx
index 46f4da65b..b33557059 100644
--- a/frontend/src/components/resources/stack/index.tsx
+++ b/frontend/src/components/resources/stack/index.tsx
@@ -2,6 +2,7 @@ import { useInvalidate, useLocalStorage, useRead, useWrite } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
 import { Card } from "@ui/card";
 import {
+  CircleArrowUp,
   FolderGit,
   Layers,
   Loader2,
@@ -271,44 +272,7 @@ export const StackComponents: RequiredResourceComponents = {
         </HoverCard>
       );
     },
-    UpdateAvailable: ({ id }) => {
-      const info = useStack(id)?.info;
-      const state = info?.state ?? Types.StackState.Unknown;
-      if (
-        !info ||
-        !!info?.services.every((service) => !service.update_available) ||
-        [Types.StackState.Down, Types.StackState.Unknown].includes(state)
-      ) {
-        return null;
-      }
-      return (
-        <HoverCard openDelay={200}>
-          <HoverCardTrigger asChild>
-            <Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer">
-              <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
-                Update
-                {(info?.services.filter((s) => s.update_available).length ??
-                  0) > 0
-                  ? "s"
-                  : ""}{" "}
-                Available
-              </div>
-            </Card>
-          </HoverCardTrigger>
-          <HoverCardContent align="start" className="flex flex-col gap-2 w-fit">
-            {info?.services
-              .filter((service) => service.update_available)
-              .map((s) => (
-                <div className="text-sm flex gap-2">
-                  <div className="text-muted-foreground">{s.service}</div>
-                  <div className="text-muted-foreground"> - </div>
-                  <div>{s.image}</div>
-                </div>
-              ))}
-          </HoverCardContent>
-        </HoverCard>
-      );
-    },
+    UpdateAvailable: ({ id }) => <UpdateAvailable id={id} />,
     Hash: ({ id }) => {
       const info = useStack(id)?.info;
       const fullInfo = useFullStack(id)?.info;
@@ -484,3 +448,48 @@ export const StackComponents: RequiredResourceComponents = {
     );
   },
 };
+
+export const UpdateAvailable = ({
+  id,
+  small = false,
+}: {
+  id: string;
+  small?: boolean;
+}) => {
+  const info = useStack(id)?.info;
+  const state = info?.state ?? Types.StackState.Unknown;
+  if (
+    !info ||
+    !!info?.services.every((service) => !service.update_available) ||
+    [Types.StackState.Down, Types.StackState.Unknown].includes(state)
+  ) {
+    return null;
+  }
+  return (
+    <HoverCard openDelay={200}>
+      <HoverCardTrigger asChild>
+        <Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2">
+          <CircleArrowUp className="w-4 h-4" />
+          <div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
+            Update
+            {(info?.services.filter((s) => s.update_available).length ?? 0) > 1
+              ? "s"
+              : ""}{" "}
+            {!small && "Available"}
+          </div>
+        </Card>
+      </HoverCardTrigger>
+      <HoverCardContent align="start" className="flex flex-col gap-2 w-fit">
+        {info?.services
+          .filter((service) => service.update_available)
+          .map((s) => (
+            <div className="text-sm flex gap-2">
+              <div className="text-muted-foreground">{s.service}</div>
+              <div className="text-muted-foreground"> - </div>
+              <div>{s.image}</div>
+            </div>
+          ))}
+      </HoverCardContent>
+    </HoverCard>
+  );
+};
diff --git a/frontend/src/components/resources/stack/table.tsx b/frontend/src/components/resources/stack/table.tsx
index a7776bb93..bec69b601 100644
--- a/frontend/src/components/resources/stack/table.tsx
+++ b/frontend/src/components/resources/stack/table.tsx
@@ -2,7 +2,7 @@ import { useRead, useSelectedResources } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TableTags } from "@components/tags";
-import { StackComponents } from ".";
+import { StackComponents, UpdateAvailable } from ".";
 import { Types } from "komodo_client";
 import { useCallback } from "react";
 
@@ -29,7 +29,14 @@ export const StackTable = ({ stacks }: { stacks: Types.StackListItem[] }) => {
           header: ({ column }) => (
             <SortableHeader column={column} title="Name" />
           ),
-          cell: ({ row }) => <ResourceLink type="Stack" id={row.original.id} />,
+          cell: ({ row }) => {
+            return (
+              <div className="flex items-center justify-between gap-2">
+                <ResourceLink type="Stack" id={row.original.id} />
+                <UpdateAvailable id={row.original.id} small />
+              </div>
+            );
+          },
           size: 200,
         },
         {