Add more info to outdated tooltip

BrunoQuaresma · BrunoQuaresma · commit 42643b63f703 · 2023-07-11T19:27:01.000Z
diff --git a/site/src/components/Tooltips/WorkspaceOutdatedTooltip.tsx b/site/src/components/Tooltips/WorkspaceOutdatedTooltip.tsx
@@ -10,6 +10,11 @@ import {
 import InfoIcon from "@mui/icons-material/InfoOutlined"
 import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
+import { useQuery } from "@tanstack/react-query"
+import { getTemplate, getTemplateVersion } from "api/api"
+import Box from "@mui/material/Box"
+import Skeleton from "@mui/material/Skeleton"
+import Link from "@mui/material/Link"
 
 export const Language = {
   outdatedLabel: "Outdated",
@@ -20,13 +25,24 @@ export const Language = {
 
 interface TooltipProps {
   onUpdateVersion: () => void
+  templateId: string
   ariaLabel?: string
 }
 
-export const WorkspaceOutdatedTooltip: FC<
-  React.PropsWithChildren<TooltipProps>
-> = ({ onUpdateVersion, ariaLabel }) => {
+export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
+  onUpdateVersion,
+  ariaLabel,
+  templateId,
+}) => {
   const styles = useStyles()
+  const { data: activeVersion } = useQuery({
+    queryFn: async () => {
+      const template = await getTemplate(templateId)
+      const activeVersion = await getTemplateVersion(template.active_version_id)
+      return activeVersion
+    },
+    queryKey: ["templates", templateId, "activeVersion"],
+  })
 
   return (
     <HelpTooltip
@@ -37,6 +53,63 @@ export const WorkspaceOutdatedTooltip: FC<
     >
       <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
       <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          py: 1,
+          fontSize: 13,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              color: (theme) => theme.palette.text.primary,
+              fontWeight: 600,
+            }}
+          >
+            New version
+          </Box>
+          <Box>
+            {activeVersion ? (
+              <Link
+                href={`/templates/docker/versions/${activeVersion.name}`}
+                target="_blank"
+                sx={{ color: (theme) => theme.palette.primary.light }}
+              >
+                {activeVersion.name}
+              </Link>
+            ) : (
+              <Skeleton variant="text" height={20} width={100} />
+            )}
+          </Box>
+        </Box>
+
+        <Box>
+          <Box
+            sx={{
+              color: (theme) => theme.palette.text.primary,
+              fontWeight: 600,
+            }}
+          >
+            Message
+          </Box>
+          <Box>
+            {activeVersion ? (
+              activeVersion.message === "" ? (
+                "No message"
+              ) : (
+                activeVersion.message
+              )
+            ) : (
+              <Skeleton variant="text" height={20} width={150} />
+            )}
+          </Box>
+        </Box>
+      </Box>
+
       <HelpTooltipLinksGroup>
         <HelpTooltipAction
           icon={RefreshIcon}
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -102,6 +102,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
 
               {workspace.outdated && (
                 <WorkspaceOutdatedTooltip
+                  templateId={workspace.template_id}
                   onUpdateVersion={handleUpdate}
                   ariaLabel="update version"
                 />
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -35,6 +35,7 @@ export const WorkspacesRow: FC<{
               {workspace.name}
               {workspace.outdated && (
                 <WorkspaceOutdatedTooltip
+                  templateId={workspace.template_id}
                   onUpdateVersion={() => {
                     onUpdateWorkspace(workspace)
                   }}
