feat: Add "Outdated" tooltip and "Update version" button in the Workspaces page (#2322)

BrunoQuaresma · web-flow · commit b225953f68ab · 2022-06-15T13:52:05.000Z
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -72,6 +72,7 @@ export const GlobalSnackbar: React.FC = () => {
 
   return (
     <EnterpriseSnackbar
+      key={notification.msg}
       open={open}
       variant={variantFromMsgType(notification.msgType)}
       message={
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -3,35 +3,58 @@ 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, { createContext, useContext, useState } from "react"
 import { Stack } from "../Stack/Stack"
 
+type Icon = typeof HelpIcon
+
 type Size = "small" | "medium"
 export interface HelpTooltipProps {
   // Useful to test on storybook
   open?: boolean
   size?: Size
 }
 
+const HelpTooltipContext = createContext<{ open: boolean; onClose: () => void } | undefined>(undefined)
+
+const useHelpTooltip = () => {
+  const helpTooltipContext = useContext(HelpTooltipContext)
+
+  if (!helpTooltipContext) {
+    throw new Error("This hook should be used in side of the HelpTooltipContext.")
+  }
+
+  return helpTooltipContext
+}
+
 export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size = "medium" }) => {
   const styles = useStyles({ size })
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   open = open ?? Boolean(anchorEl)
   const id = open ? "help-popover" : undefined
 
+  const onClose = () => {
+    setAnchorEl(null)
+  }
+
   return (
     <>
-      <button aria-describedby={id} className={styles.button} onClick={(event) => setAnchorEl(event.currentTarget)}>
+      <button
+        aria-describedby={id}
+        className={styles.button}
+        onClick={(event) => {
+          event.stopPropagation()
+          setAnchorEl(event.currentTarget)
+        }}
+      >
         <HelpIcon className={styles.icon} />
       </button>
       <Popover
         classes={{ paper: styles.popoverPaper }}
         id={id}
         open={open}
         anchorEl={anchorEl}
-        onClose={() => {
-          setAnchorEl(null)
-        }}
+        onClose={onClose}
         anchorOrigin={{
           vertical: "bottom",
           horizontal: "left",
@@ -41,7 +64,7 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
           horizontal: "left",
         }}
       >
-        {children}
+        <HelpTooltipContext.Provider value={{ open, onClose }}>{children}</HelpTooltipContext.Provider>
       </Popover>
     </>
   )
@@ -70,6 +93,25 @@ 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()
+  const tooltip = useHelpTooltip()
+
+  return (
+    <button
+      className={styles.action}
+      onClick={(event) => {
+        event.stopPropagation()
+        onClick()
+        tooltip.onClose()
+      }}
+    >
+      <Icon className={styles.actionIcon} />
+      {children}
+    </button>
+  )
+}
+
 export const HelpTooltipLinksGroup: React.FC = ({ children }) => {
   const styles = useStyles()
 
@@ -110,11 +152,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 +199,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/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -10,13 +10,14 @@ import { WorkspacesPageView } from "./WorkspacesPageView"
 const WorkspacesPage: FC = () => {
   const [workspacesState, send] = useMachine(workspacesMachine)
   const [searchParams, setSearchParams] = useSearchParams()
+  const { workspaceRefs } = workspacesState.context
 
   useEffect(() => {
     const filter = searchParams.get("filter")
     const query = filter !== null ? filter : workspaceFilterQuery.me
 
     send({
-      type: "SET_FILTER",
+      type: "GET_WORKSPACES",
       query,
     })
   }, [searchParams, send])
@@ -30,7 +31,7 @@ const WorkspacesPage: FC = () => {
       <WorkspacesPageView
         filter={workspacesState.context.filter}
         loading={workspacesState.hasTag("loading")}
-        workspaces={workspacesState.context.workspaces}
+        workspaceRefs={workspaceRefs}
         onFilter={(query) => {
           searchParams.set("filter", query)
           setSearchParams(searchParams)
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -1,7 +1,9 @@
 import { ComponentMeta, Story } from "@storybook/react"
+import { spawn } from "xstate"
 import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
 import { MockWorkspace } from "../../testHelpers/entities"
 import { workspaceFilterQuery } from "../../util/workspace"
+import { workspaceItemMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"
 
 export default {
@@ -14,9 +16,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,
@@ -41,22 +45,29 @@ const workspaces: { [key in ProvisionerJobStatus]: Workspace } = {
 
 export const AllStates = Template.bind({})
 AllStates.args = {
-  workspaces: [
+  workspaceRefs: [
     ...Object.values(workspaces),
     createWorkspaceWithStatus("running", "stop"),
     createWorkspaceWithStatus("succeeded", "stop"),
     createWorkspaceWithStatus("running", "delete"),
-  ],
+  ].map((data) => spawn(workspaceItemMachine.withContext({ data }))),
+}
+
+export const Outdated = Template.bind({})
+Outdated.args = {
+  workspaceRefs: [createWorkspaceWithStatus("running", "stop", true)].map((data) =>
+    spawn(workspaceItemMachine.withContext({ data })),
+  ),
 }
 
 export const OwnerHasNoWorkspaces = Template.bind({})
 OwnerHasNoWorkspaces.args = {
-  workspaces: [],
+  workspaceRefs: [],
   filter: workspaceFilterQuery.me,
 }
 
 export const NoResults = Template.bind({})
 NoResults.args = {
-  workspaces: [],
+  workspaceRefs: [],
   filter: "searchtearmwithnoresults",
 }
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
diff --git a/site/src/xServices/workspaces/workspacesXService.ts b/site/src/xServices/workspaces/workspacesXService.ts
