Remove popovers

BrunoQuaresma · BrunoQuaresma · commit 843f55b0e69f · 2023-04-20T16:01:27.000Z
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -1,124 +1,16 @@
-import Popover from "@material-ui/core/Popover"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import { watchAgentMetadata } from "api/api"
 import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
-import {
-  HelpTooltipText,
-  HelpTooltipTitle,
-} from "components/Tooltips/HelpTooltip"
 import dayjs from "dayjs"
-import {
-  createContext,
-  FC,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import { humanDuration } from "utils/duration"
+import { createContext, FC, useContext, useEffect, useState } from "react"
 import { Skeleton } from "@material-ui/lab"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 
 type ItemStatus = "stale" | "valid" | "loading"
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
-const MetadataItemValue: FC<
-  PropsWithChildren<{ item: WorkspaceAgentMetadata; status: ItemStatus }>
-> = ({ item, children, status }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const styles = useStyles()
-  const updatesInSeconds = -(item.description.interval - item.result.age)
-
-  return (
-    <>
-      <div
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        role="presentation"
-      >
-        {children}
-      </div>
-
-      <Popover
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onClose={() => setIsOpen(false)}
-        PaperProps={{
-          onMouseEnter: () => setIsOpen(true),
-          onMouseLeave: () => setIsOpen(false),
-        }}
-        classes={{ paper: styles.metadataPopover }}
-      >
-        {item.result.error.length > 0 ? (
-          <>
-            <div className={styles.metadataPopoverContent}>
-              <HelpTooltipTitle>
-                {item.description.display_name}
-              </HelpTooltipTitle>
-              <HelpTooltipText>
-                An error happened while executing the command{" "}
-                <pre className={styles.inlineCommand}>
-                  `{item.description.script}`
-                </pre>
-              </HelpTooltipText>
-            </div>
-            <div className={styles.metadataPopoverCode}>
-              <pre>{item.result.error}</pre>
-            </div>
-          </>
-        ) : (
-          <>
-            <div className={styles.metadataPopoverContent}>
-              <HelpTooltipTitle>
-                {item.description.display_name}
-              </HelpTooltipTitle>
-              {status === "stale" ? (
-                <HelpTooltipText>
-                  This item is now stale because the agent hasn{"'"}t reported a
-                  new value in {humanDuration(item.result.age, "s")}.
-                </HelpTooltipText>
-              ) : (
-                <></>
-              )}
-              {status === "valid" ? (
-                <HelpTooltipText>
-                  The agent collected this value{" "}
-                  {humanDuration(item.result.age, "s")} ago and will update it
-                  in {humanDuration(Math.min(updatesInSeconds, 0), "s")}.
-                </HelpTooltipText>
-              ) : (
-                <></>
-              )}
-              {status === "loading" ? (
-                <HelpTooltipText>
-                  This value is loading for the first time...
-                </HelpTooltipText>
-              ) : (
-                <></>
-              )}
-            </div>
-            <div className={styles.metadataPopoverCode}>
-              <pre>{item.description.script}</pre>
-            </div>
-          </>
-        )}
-      </Popover>
-    </>
-  )
-}
-
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   const styles = useStyles()
 
@@ -172,12 +64,10 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
 
   return (
     <div className={styles.metadata}>
-      <div className={styles.metadataLabel} role="presentation">
+      <div className={styles.metadataLabel}>
         {item.description.display_name}
       </div>
-      <MetadataItemValue item={item} status={status}>
-        {value}
-      </MetadataItemValue>
+      <div>{value}</div>
     </div>
   )
 }
@@ -307,41 +197,6 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.error.main,
   },
 
-  metadataPopover: {
-    marginTop: theme.spacing(0.5),
-
-    color: theme.palette.text.secondary,
-    pointerEvents: "auto",
-    width: "320px",
-    borderRadius: 4,
-
-    "& .MuiButton-root": {
-      padding: theme.spacing(1, 2),
-      borderRadius: 0,
-      border: 0,
-
-      "&:hover": {
-        background: theme.palette.action.hover,
-      },
-    },
-  },
-
-  metadataPopoverContent: {
-    padding: theme.spacing(2.5),
-  },
-
-  metadataPopoverCode: {
-    padding: theme.spacing(2.5),
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    background: theme.palette.background.default,
-    color: theme.palette.text.primary,
-
-    "& pre": {
-      padding: 0,
-      margin: 0,
-    },
-  },
-
   skeleton: {
     marginTop: theme.spacing(0.5),
   },
