Add version tooltup

coder · BrunoQuaresma · Jun 15, 2022 · Jun 13, 2022 · Jun 13, 2022 · Jun 14, 2022
commit e5cbcd85b967d3b37cda8a938cc0a7fe2d194206
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -3,9 +3,11 @@ import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
 import HelpIcon from "@material-ui/icons/HelpOutline"
 import OpenInNewIcon from "@material-ui/icons/OpenInNew"
-import { useState } from "react"
+import React, { useState } from "react"
 import { Stack } from "../Stack/Stack"
 
+type Icon = typeof HelpIcon
+
 type Size = "small" | "medium"
 export interface HelpTooltipProps {
   // Useful to test on storybook
@@ -70,6 +72,17 @@ export const HelpTooltipLink: React.FC<{ href: string }> = ({ children, href })
   )
 }
 
+export const HelpTooltipAction: React.FC<{ icon: Icon; onClick: () => void }> = ({ children, icon: Icon, onClick }) => {
+  const styles = useStyles()
+
+  return (
+    <button className={styles.action} onClick={onClick}>
+      <Icon className={styles.actionIcon} />
+      {children}
+    </button>
+  )
+}
+
 export const HelpTooltipLinksGroup: React.FC = ({ children }) => {
   const styles = useStyles()
 
@@ -110,11 +123,12 @@ const useStyles = makeStyles((theme) => ({
     padding: 0,
     border: 0,
     background: "transparent",
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.primary,
+    opacity: 0.5,
     cursor: "pointer",
 
     "&:hover": {
-      color: theme.palette.text.primary,
+      opacity: 0.75,
     },
   },
 
@@ -156,4 +170,22 @@ const useStyles = makeStyles((theme) => ({
   linksGroup: {
     marginTop: theme.spacing(2),
   },
+
+  action: {
+    display: "flex",
+    alignItems: "center",
+    background: "none",
+    border: 0,
+    color: theme.palette.primary.light,
+    padding: 0,
+    cursor: "pointer",
+    fontSize: 14,
+  },
+
+  actionIcon: {
+    color: "inherit",
+    width: 14,
+    height: 14,
+    marginRight: theme.spacing(1),
+  },
 }))
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -14,9 +14,11 @@ const Template: Story<WorkspacesPageViewProps> = (args) => <WorkspacesPageView {
 const createWorkspaceWithStatus = (
   status: ProvisionerJobStatus,
   transition: WorkspaceTransition = "start",
+  outdated = false,
 ): Workspace => {
   return {
     ...MockWorkspace,
+    outdated,
     latest_build: {
       ...MockWorkspace.latest_build,
       transition,
@@ -49,6 +51,11 @@ AllStates.args = {
   ],
 }
 
+export const Outdated = Template.bind({})
+Outdated.args = {
+  workspaces: [createWorkspaceWithStatus("running", "stop", true)],
+}
+
 export const OwnerHasNoWorkspaces = Template.bind({})
 OwnerHasNoWorkspaces.args = {
   workspaces: [],

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -13,6 +13,7 @@ import TableRow from "@material-ui/core/TableRow"
 import TextField from "@material-ui/core/TextField"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
+import RefreshIcon from "@material-ui/icons/Refresh"
 import SearchIcon from "@material-ui/icons/Search"
 import useTheme from "@material-ui/styles/useTheme"
 import dayjs from "dayjs"
@@ -26,6 +27,7 @@ import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/Dro
 import { EmptyState } from "../../components/EmptyState/EmptyState"
 import {
   HelpTooltip,
+  HelpTooltipAction,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
@@ -54,6 +56,11 @@ export const Language = {
   workspaceTooltipLink1: "Create workspaces",
   workspaceTooltipLink2: "Connect with SSH",
   workspaceTooltipLink3: "Editors and IDEs",
+  outdatedLabel: "Outdated",
+  upToDateLabel: "Up to date",
+  versionTooltipText:
+    "Looks like the version you are using for this workspace is outdated and there is a newest version that you could use.",
+  updateVersionLabel: "Update version",
 }
 
 const WorkspaceHelpTooltip: React.FC = () => {
@@ -76,6 +83,20 @@ const WorkspaceHelpTooltip: React.FC = () => {
   )
 }
 
+const OutdatedHelpTooltip: React.FC<{ onUpdateVersion: () => void }> = ({ onUpdateVersion }) => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
+      <HelpTooltipLinksGroup>
+        <HelpTooltipAction icon={RefreshIcon} onClick={onUpdateVersion}>
+          {Language.updateVersionLabel}
+        </HelpTooltipAction>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  )
+}
+
 interface FilterFormValues {
   query: string
 }
@@ -256,9 +277,16 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
                   <TableCell>{workspace.template_name}</TableCell>
                   <TableCell>
                     {workspace.outdated ? (
-                      <span style={{ color: theme.palette.error.main }}>outdated</span>
+                      <span className={styles.outdatedLabel}>
+                        {Language.outdatedLabel}
+                        <OutdatedHelpTooltip
+                          onUpdateVersion={() => {
+                            console.log("UPDATE!!")
+                          }}
+                        />
+                      </span>
                     ) : (
-                      <span style={{ color: theme.palette.text.secondary }}>up to date</span>
+                      <span style={{ color: theme.palette.text.secondary }}>{Language.upToDateLabel}</span>
                     )}
                   </TableCell>
                   <TableCell>
@@ -341,4 +369,10 @@ const useStyles = makeStyles((theme) => ({
   arrowCell: {
     display: "flex",
   },
+  outdatedLabel: {
+    color: theme.palette.error.main,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+  },
 }))