Add tooltip for agent and resource

coder · BrunoQuaresma · Jun 7, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 6, 2022
commit 915c3c55e2f30fd98e7a5e5bb2a94beb0ee82371
@@ -6,13 +6,15 @@ import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import { useState } from "react"
 import { Stack } from "../Stack/Stack"
 
+type Size = "small" | "medium"
 export interface HelpTooltipProps {
   // Useful to test on storybook
   open?: boolean
+  size?: Size
 }
 
-export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open }) => {
-  const styles = useStyles()
+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
@@ -78,28 +80,47 @@ export const HelpTooltipLinksGroup: React.FC = ({ children }) => {
   )
 }
 
+const getButtonSpacingFromSize = (size?: Size): number => {
+  switch (size) {
+    case "small":
+      return 2.75
+    case "medium":
+    default:
+      return 3
+  }
+}
+
+const getIconSpacingFromSize = (size?: Size): number => {
+  switch (size) {
+    case "small":
+      return 1.75
+    case "medium":
+    default:
+      return 2
+  }
+}
+
 const useStyles = makeStyles((theme) => ({
   button: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: theme.spacing(3),
-    height: theme.spacing(3),
+    width: ({ size }: { size?: Size }) => theme.spacing(getButtonSpacingFromSize(size)),
+    height: ({ size }: { size?: Size }) => theme.spacing(getButtonSpacingFromSize(size)),
     padding: 0,
     border: 0,
     background: "transparent",
     color: theme.palette.text.secondary,
     cursor: "pointer",
-    marginLeft: theme.spacing(1),
 
     "&:hover": {
       color: theme.palette.text.primary,
     },
   },
 
   icon: {
-    width: theme.spacing(2),
-    height: theme.spacing(2),
+    width: ({ size }: { size?: Size }) => theme.spacing(getIconSpacingFromSize(size)),
+    height: ({ size }: { size?: Size }) => theme.spacing(getIconSpacingFromSize(size)),
   },
 
   popoverPaper: {

@@ -9,6 +9,13 @@ import { FC } from "react"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { getDisplayAgentStatus } from "../../util/workspace"
 import { AppLink } from "../AppLink/AppLink"
+import {
+  HelpTooltip,
+  HelpTooltipLink,
+  HelpTooltipLinksGroup,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "../HelpTooltip/HelpTooltip"
 import { Stack } from "../Stack/Stack"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
@@ -23,6 +30,31 @@ const Language = {
   accessLabel: "Access",
 }
 
+const ResourcesHelpTooltip: React.FC = () => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>What is a resource?</HelpTooltipTitle>
+      <HelpTooltipText>
+        A resource is an infrastructure object that is create when the workspace is provisioned.
+      </HelpTooltipText>
+      <HelpTooltipLinksGroup>
+        <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/templates.md#persistent-and-ephemeral-resources">
+          Persistent and ephemeral resources
+        </HelpTooltipLink>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  )
+}
+
+const AgentHelpTooltip: React.FC = () => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>What is an agent?</HelpTooltipTitle>
+      <HelpTooltipText>An agent is a software that executes Coder inside of the resource.</HelpTooltipText>
+    </HelpTooltip>
+  )
+}
+
 interface ResourcesProps {
   resources?: WorkspaceResource[]
   getResourcesError?: Error
@@ -41,8 +73,18 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
         <Table className={styles.table}>
           <TableHead>
             <TableHeaderRow>
-              <TableCell>{Language.resourceLabel}</TableCell>
-              <TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
+              <TableCell>
+                <Stack direction="row" spacing={0.5} alignItems="center">
+                  {Language.resourceLabel}
+                  <ResourcesHelpTooltip />
+                </Stack>
+              </TableCell>
+              <TableCell className={styles.agentColumn}>
+                <Stack direction="row" spacing={0.5} alignItems="center">
+                  {Language.agentLabel}
+                  <AgentHelpTooltip />
+                </Stack>
+              </TableCell>
               <TableCell>{Language.accessLabel}</TableCell>
               <TableCell>{Language.statusLabel}</TableCell>
             </TableHeaderRow>

@@ -1,4 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { CSSProperties } from "@material-ui/core/styles/withStyles"
 import { FC } from "react"
 import { combineClasses } from "../../util/combineClasses"
 
@@ -7,24 +8,27 @@ type Direction = "column" | "row"
 interface StyleProps {
   direction: Direction
   spacing: number
+  alignItems?: CSSProperties["alignItems"]
 }
 
 const useStyles = makeStyles((theme) => ({
   stack: {
     display: "flex",
     flexDirection: ({ direction }: StyleProps) => direction,
     gap: ({ spacing }: StyleProps) => theme.spacing(spacing),
+    alignItems: ({ alignItems }: StyleProps) => alignItems,
   },
 }))
 
 export interface StackProps {
   className?: string
   direction?: Direction
   spacing?: number
+  alignItems?: CSSProperties["alignItems"]
 }
 
-export const Stack: FC<StackProps> = ({ children, className, direction = "column", spacing = 2 }) => {
-  const styles = useStyles({ spacing, direction })
+export const Stack: FC<StackProps> = ({ children, className, direction = "column", spacing = 2, alignItems }) => {
+  const styles = useStyles({ spacing, direction, alignItems })
 
   return <div className={combineClasses([styles.stack, className])}>{children}</div>
 }