Refactor last seen table value

BrunoQuaresma · BrunoQuaresma · commit 55dd4b07fe88 · 2023-08-25T16:17:52.000Z
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -70,10 +70,8 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
                 <UserRoleHelpTooltip />
               </Stack>
             </TableCell>
-            <TableCell width="10%">{Language.loginTypeLabel}</TableCell>
-            <TableCell width="10%">{Language.statusLabel}</TableCell>
-            <TableCell width="10%">{Language.lastSeenLabel}</TableCell>
-
+            <TableCell width="15%">{Language.loginTypeLabel}</TableCell>
+            <TableCell width="15%">{Language.statusLabel}</TableCell>
             {/* 1% is a trick to make the table cell width fit the content */}
             {canEditUsers && <TableCell width="1%" />}
           </TableRow>
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -1,9 +1,8 @@
-import Box from "@mui/material/Box"
-import { makeStyles } from "@mui/styles"
+import Box, { BoxProps } from "@mui/material/Box"
+import { makeStyles, useTheme } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
-import { LastUsed } from "components/LastUsed/LastUsed"
 import { Pill } from "components/Pill/Pill"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
@@ -16,6 +15,8 @@ import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
 import { Stack } from "components/Stack/Stack"
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
+import dayjs from "dayjs"
+import { Theme } from "@mui/material/styles"
 
 const isOwnerRole = (role: TypesGen.Role): boolean => {
   return role.name === "owner"
@@ -166,11 +167,10 @@ export const UsersTableBody: FC<
                         : undefined,
                     ])}
                   >
-                    {user.status}
-                  </TableCell>
-                  <TableCell>
-                    <LastUsed lastUsedAt={user.last_seen_at} />
+                    <Box>{user.status}</Box>
+                    <LastSeen value={user.last_seen_at} sx={{ fontSize: 12 }} />
                   </TableCell>
+
                   {canEditUsers && (
                     <TableCell>
                       <TableRowMenu
@@ -236,6 +236,44 @@ export const UsersTableBody: FC<
   )
 }
 
+export const LastSeen = ({
+  value,
+  ...boxProps
+}: { value: string } & BoxProps) => {
+  const theme: Theme = useTheme()
+  const t = dayjs(value)
+  const now = dayjs()
+
+  let message = t.fromNow()
+  let color = theme.palette.text.secondary
+
+  if (t.isAfter(now.subtract(1, "hour"))) {
+    color = theme.palette.success.light
+    // Since the agent reports on a 10m interval,
+    // the last_used_at can be inaccurate when recent.
+    message = "Now"
+  } else if (t.isAfter(now.subtract(3, "day"))) {
+    color = theme.palette.text.secondary
+  } else if (t.isAfter(now.subtract(1, "month"))) {
+    color = theme.palette.warning.light
+  } else if (t.isAfter(now.subtract(100, "year"))) {
+    color = theme.palette.error.light
+  } else {
+    message = "Never"
+  }
+
+  return (
+    <Box
+      component="span"
+      data-chromatic="ignore"
+      {...boxProps}
+      sx={{ color, ...boxProps.sx }}
+    >
+      {message}
+    </Box>
+  )
+}
+
 const useStyles = makeStyles((theme) => ({
   status: {
     textTransform: "capitalize",
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -27,7 +27,7 @@ import Box from "@mui/material/Box"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import { Avatar } from "components/Avatar/Avatar"
 import { Stack } from "components/Stack/Stack"
-import { LastUsed } from "components/LastUsed/LastUsed"
+import { LastUsed } from "pages/WorkspacesPage/LastUsed"
 import { WorkspaceOutdatedTooltip } from "components/Tooltips"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { getDisplayWorkspaceTemplateName } from "utils/workspace"
