Add version link on workspace

coder · BrunoQuaresma · Nov 30, 2022 · Nov 29, 2022 · Nov 29, 2022 · Nov 29, 2022
commit 0dd3b3f84a43ad9863311f4c82d2b2eded6122c2
diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx
@@ -50,9 +50,10 @@ const useStyles = makeStyles((theme) => ({
 
   statsValue: {
     marginTop: theme.spacing(0.25),
-    display: "block",
+    display: "flex",
     wordWrap: "break-word",
     color: theme.palette.text.primary,
+    alignItems: "center",
 
     "& a": {
       color: theme.palette.text.primary,

diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -4,6 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import HelpIcon from "@material-ui/icons/HelpOutline"
 import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import React, { createContext, useContext, useRef, useState } from "react"
+import { combineClasses } from "util/combineClasses"
 import { Stack } from "../../Stack/Stack"
 
 type Icon = typeof HelpIcon
@@ -13,6 +14,9 @@ export interface HelpTooltipProps {
   // Useful to test on storybook
   open?: boolean
   size?: Size
+  icon?: Icon
+  iconClassName?: string
+  buttonClassName?: string
 }
 
 export const Language = {
@@ -66,7 +70,14 @@ export const HelpPopover: React.FC<
 
 export const HelpTooltip: React.FC<
   React.PropsWithChildren<HelpTooltipProps>
-> = ({ children, open, size = "medium" }) => {
+> = ({
+  children,
+  open,
+  size = "medium",
+  icon: Icon = HelpIcon,
+  iconClassName,
+  buttonClassName,
+}) => {
   const styles = useStyles({ size })
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(Boolean(open))
@@ -81,7 +92,7 @@ export const HelpTooltip: React.FC<
       <button
         ref={anchorRef}
         aria-describedby={id}
-        className={styles.button}
+        className={combineClasses([styles.button, buttonClassName])}
         onClick={(event) => {
           event.stopPropagation()
           setIsOpen(true)
@@ -94,7 +105,7 @@ export const HelpTooltip: React.FC<
         }}
         aria-label={Language.ariaLabel}
       >
-        <HelpIcon className={styles.icon} />
+        <Icon className={combineClasses([styles.icon, iconClassName])} />
       </button>
       <HelpPopover
         id={id}

diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
@@ -7,6 +7,9 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "./HelpTooltip"
+import InfoIcon from "@material-ui/icons/InfoOutlined"
+import { makeStyles } from "@material-ui/core/styles"
+import { colors } from "theme/colors"
 
 export const Language = {
   outdatedLabel: "Outdated",
@@ -24,8 +27,15 @@ export const OutdatedHelpTooltip: FC<React.PropsWithChildren<TooltipProps>> = ({
   onUpdateVersion,
   ariaLabel,
 }) => {
+  const styles = useStyles()
+
   return (
-    <HelpTooltip size="small">
+    <HelpTooltip
+      size="small"
+      icon={InfoIcon}
+      iconClassName={styles.icon}
+      buttonClassName={styles.button}
+    >
       <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
       <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
       <HelpTooltipLinksGroup>
@@ -40,3 +50,17 @@ export const OutdatedHelpTooltip: FC<React.PropsWithChildren<TooltipProps>> = ({
     </HelpTooltip>
   )
 }
+
+const useStyles = makeStyles(() => ({
+  icon: {
+    color: colors.yellow[5],
+  },
+
+  button: {
+    opacity: 1,
+
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+}))
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -1,15 +1,14 @@
 import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
 import { OutdatedHelpTooltip } from "components/Tooltips"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
 import { createDayString } from "util/createDayString"
 import {
   getDisplayWorkspaceBuildInitiatedBy,
   getDisplayWorkspaceTemplateName,
 } from "util/workspace"
 import { Workspace } from "../../api/typesGenerated"
+import { Stats, StatsItem } from "components/Stats/Stats"
 
 const Language = {
   workspaceDetails: "Workspace Details",
@@ -34,110 +33,55 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
   quota_budget,
   handleUpdate,
 }) => {
-  const styles = useStyles()
   const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(
     workspace.latest_build,
   )
   const displayTemplateName = getDisplayWorkspaceTemplateName(workspace)
 
   return (
-    <div className={styles.stats} aria-label={Language.workspaceDetails}>
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.templateLabel}:</span>
-        <Link
-          component={RouterLink}
-          to={`/templates/${workspace.template_name}`}
-          className={combineClasses([styles.statsValue, styles.link])}
-        >
-          {displayTemplateName}
-        </Link>
-      </div>
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.versionLabel}:</span>
-        <span className={styles.statsValue}>
-          {workspace.outdated ? (
-            <span className={styles.outdatedLabel}>
-              {Language.outdated}
+    <Stats aria-label={Language.workspaceDetails}>
+      <StatsItem
+        label={Language.templateLabel}
+        value={
+          <Link
+            component={RouterLink}
+            to={`/templates/${workspace.template_name}`}
+          >
+            {displayTemplateName}
+          </Link>
+        }
+      />
+      <StatsItem
+        label={Language.versionLabel}
+        value={
+          <>
+            <Link
+              component={RouterLink}
+              to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
+            >
+              {workspace.latest_build.template_version_name}
+            </Link>
+
+            {workspace.outdated && (
               <OutdatedHelpTooltip
                 onUpdateVersion={handleUpdate}
                 ariaLabel="update version"
               />
-            </span>
-          ) : (
-            Language.upToDate
-          )}
-        </span>
-      </div>
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.lastBuiltLabel}:</span>
-        <span className={styles.statsValue} data-chromatic="ignore">
-          {createDayString(workspace.latest_build.created_at)}
-        </span>
-      </div>
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.byLabel}:</span>
-        <span className={styles.statsValue}>{initiatedBy}</span>
-      </div>
+            )}
+          </>
+        }
+      />
+      <StatsItem
+        label={Language.lastBuiltLabel}
+        value={createDayString(workspace.latest_build.created_at)}
+      />
+      <StatsItem label={Language.byLabel} value={initiatedBy} />
       {workspace.latest_build.daily_cost > 0 && (
-        <div className={styles.statItem}>
-          <span className={styles.statsLabel}>{Language.costLabel}:</span>
-          <span className={styles.statsValue}>
-            {workspace.latest_build.daily_cost} / {quota_budget}
-          </span>
-        </div>
+        <StatsItem
+          label={Language.costLabel}
+          value={`${workspace.latest_build.daily_cost} / ${quota_budget}`}
+        />
       )}
-    </div>
+    </Stats>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  stats: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
-    display: "flex",
-    alignItems: "center",
-    color: theme.palette.text.secondary,
-    margin: "0px",
-    [theme.breakpoints.down("sm")]: {
-      display: "block",
-    },
-  },
-
-  statItem: {
-    padding: theme.spacing(2),
-    paddingTop: theme.spacing(1.75),
-    display: "flex",
-    alignItems: "baseline",
-    gap: theme.spacing(1),
-  },
-
-  statsLabel: {
-    display: "block",
-    wordWrap: "break-word",
-  },
-
-  statsValue: {
-    marginTop: theme.spacing(0.25),
-    display: "block",
-    wordWrap: "break-word",
-    color: theme.palette.text.primary,
-  },
-
-  capitalize: {
-    textTransform: "capitalize",
-  },
-
-  link: {
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-  },
-
-  outdatedLabel: {
-    color: theme.palette.error.main,
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5),
-  },
-}))