Refactor clickable experience

coder · BrunoQuaresma · Oct 18, 2022 · Oct 14, 2022 · Oct 17, 2022 · Oct 17, 2022
commit c78e4194f7429e24b1bd71fdc032d5e5892daac6
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -0,0 +1,39 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Tooltip from "@material-ui/core/Tooltip"
+import { useClickable } from "hooks/useClickable"
+import { useClipboard } from "hooks/useClipboard"
+import React, { HTMLProps } from "react"
+import { combineClasses } from "util/combineClasses"
+
+interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
+  value: string
+}
+
+export const CopyableValue: React.FC<CopyableValueProps> = ({
+  value,
+  className,
+  ...props
+}) => {
+  const { isCopied, copy } = useClipboard(value)
+  const clickableProps = useClickable(copy)
+  const styles = useStyles()
+
+  return (
+    <Tooltip
+      title={isCopied ? "Copied!" : "Click to copy"}
+      placement="bottom-start"
+    >
+      <span
+        {...props}
+        {...clickableProps}
+        className={combineClasses([styles.value, className])}
+      />
+    </Tooltip>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  value: {
+    cursor: "pointer",
+  },
+}))
diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx
@@ -34,7 +34,7 @@ export const AgentVersion: FC<{
         onMouseEnter={() => setIsOpen(true)}
         className={styles.trigger}
       >
-        {displayVersion}
+        Agent Outdated
       </span>
       <HelpPopover
         id={id}
@@ -54,9 +54,8 @@ export const AgentVersion: FC<{
   )
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   trigger: {
     cursor: "pointer",
-    color: theme.palette.warning.light,
   },
 }))
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -23,6 +23,7 @@ import {
 import IconButton from "@material-ui/core/IconButton"
 import Tooltip from "@material-ui/core/Tooltip"
 import { Maybe } from "components/Conditionals/Maybe"
+import { CopyableValue } from "components/CopyableValue/CopyableValue"
 
 const getAgentStatusColor = (theme: Theme, agent: WorkspaceAgent) => {
   switch (agent.status) {
@@ -101,7 +102,9 @@ export const ResourceCard: FC<ResourceCardProps> = ({
                     {meta.sensitive ? (
                       <SensitiveValue value={meta.value} />
                     ) : (
-                      meta.value
+                      <CopyableValue value={meta.value}>
+                        {meta.value}
+                      </CopyableValue>
                     )}
                   </div>
                 </div>
@@ -264,7 +267,6 @@ const useStyles = makeStyles((theme) => ({
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    userSelect: "all",
   },
 
   agentRow: {

diff --git a/site/src/components/Resources/SensitiveValue.tsx b/site/src/components/Resources/SensitiveValue.tsx
@@ -3,6 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined"
 import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined"
+import { CopyableValue } from "components/CopyableValue/CopyableValue"
 import { useState } from "react"
 
 const Language = {
@@ -23,7 +24,9 @@ export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
 
   return (
     <div className={styles.sensitiveValue}>
-      <div className={styles.value}>{displayValue}</div>
+      <CopyableValue value={value} className={styles.value}>
+        {displayValue}
+      </CopyableValue>
       <Tooltip title={buttonLabel}>
         <IconButton
           className={styles.button}

diff --git a/site/src/hooks/useClickable.ts b/site/src/hooks/useClickable.ts
@@ -0,0 +1,21 @@
+import { KeyboardEvent } from "react"
+
+interface UseClickableResult {
+  tabIndex: 0
+  role: "button"
+  onClick: () => void
+  onKeyDown: (event: KeyboardEvent) => void
+}
+
+export const useClickable = (onClick: () => void): UseClickableResult => {
+  return {
+    tabIndex: 0,
+    role: "button",
+    onClick,
+    onKeyDown: (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        onClick()
+      }
+    },
+  }
+}