refactor: Remove avatar from workspace name (#3006)

site/src/components/AvatarData/AvatarData.stories.tsx

@@ -14,6 +14,13 @@ Example.args = {
   subtitle: "coder@coder.com",
 }
 
+export const WithHighlightTitle = Template.bind({})
+WithHighlightTitle.args = {
+  title: "coder",
+  subtitle: "coder@coder.com",
+  highlightTitle: true,
+}
+
 export const WithLink = Template.bind({})
 WithLink.args = {
   title: "coder",

site/src/components/AvatarData/AvatarData.tsx

@@ -3,16 +3,21 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
+import {
+  TableCellData,
+  TableCellDataPrimary,
+  TableCellDataSecondary,
+} from "../TableCellData/TableCellData"
 
 export interface AvatarDataProps {
   title: string
   subtitle: string
+  highlightTitle?: boolean
   link?: string
 }
 
-export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link }) => {
+export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link, highlightTitle }) => {
   const styles = useStyles()
 
   return (
@@ -20,19 +25,17 @@ export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link }) => {
       <Avatar className={styles.avatar}>{firstLetter(title)}</Avatar>
 
       {link ? (
-        <Link
-          component={RouterLink}
-          to={link}
-          className={combineClasses([styles.info, styles.link])}
-        >
-          <b>{title}</b>
-          <span>{subtitle}</span>
+        <Link to={link} underline="none" component={RouterLink}>
+          <TableCellData>
+            <TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
+            <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
+          </TableCellData>
         </Link>
       ) : (
-        <div className={styles.info}>
-          <b>{title}</b>
-          <span>{subtitle}</span>
-        </div>
+        <TableCellData>
+          <TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
+          <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
+        </TableCellData>
       )}
     </div>
   )
@@ -46,20 +49,4 @@ const useStyles = makeStyles((theme) => ({
   avatar: {
     marginRight: theme.spacing(1.5),
   },
-  info: {
-    display: "flex",
-    flexDirection: "column",
-    color: theme.palette.text.primary,
-
-    "& span": {
-      fontSize: 12,
-      color: theme.palette.text.secondary,
-    },
-  },
-  link: {
-    textDecoration: "none",
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
 }))

site/src/components/TableCellData/TableCellData.tsx

@@ -0,0 +1,39 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { Stack } from "../Stack/Stack"
+
+interface StyleProps {
+  highlight?: boolean
+}
+
+export const TableCellData: React.FC = ({ children }) => {
+  return <Stack spacing={0}>{children}</Stack>
+}
+
+export const TableCellDataPrimary: React.FC<{ highlight?: boolean }> = ({
+  children,
+  highlight,
+}) => {
+  const styles = useStyles({ highlight })
+
+  return <span className={styles.primary}>{children}</span>
+}
+
+export const TableCellDataSecondary: React.FC = ({ children }) => {
+  const styles = useStyles()
+
+  return <span className={styles.secondary}>{children}</span>
+}
+
+const useStyles = makeStyles((theme) => ({
+  primary: {
+    color: ({ highlight }: StyleProps) =>
+      highlight ? theme.palette.text.primary : theme.palette.text.secondary,
+    fontWeight: ({ highlight }: StyleProps) => (highlight ? 600 : undefined),
+  },
+
+  secondary: {
+    fontSize: 12,
+    color: theme.palette.text.secondary,
+  },
+}))

site/src/components/UsersTable/UsersTableBody.tsx

@@ -72,7 +72,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
         return (
           <TableRow key={user.id}>
             <TableCell>
-              <AvatarData title={user.username} subtitle={user.email} />
+              <AvatarData title={user.username} subtitle={user.email} highlightTitle />
             </TableCell>
             <TableCell
               className={combineClasses([

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -10,6 +10,11 @@ import { useNavigate } from "react-router-dom"
 import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
 import { AvatarData } from "../AvatarData/AvatarData"
+import {
+  TableCellData,
+  TableCellDataPrimary,
+  TableCellDataSecondary,
+} from "../TableCellData/TableCellData"
 import { TableCellLink } from "../TableCellLink/TableCellLink"
 import { OutdatedHelpTooltip } from "../Tooltips"
 
@@ -43,15 +48,19 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
       className={styles.clickableTableRow}
     >
       <TableCellLink to={workspacePageLink}>
-        <AvatarData title={workspace.name} subtitle={workspace.owner_name} />
+        <TableCellData>
+          <TableCellDataPrimary highlight>{workspace.name}</TableCellDataPrimary>
+          <TableCellDataSecondary>{workspace.owner_name}</TableCellDataSecondary>
+        </TableCellData>
       </TableCellLink>
+
+      <TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
       <TableCellLink to={workspacePageLink}>
         <AvatarData
           title={initiatedBy}
           subtitle={dayjs().to(dayjs(workspace.latest_build.created_at))}
         />
       </TableCellLink>
-      <TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
       <TableCellLink to={workspacePageLink}>
         {workspace.outdated ? (
           <span className={styles.outdatedLabel}>

site/src/components/WorkspacesTable/WorkspacesTable.tsx

@@ -27,9 +27,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspace
       <TableHead>
         <TableRow>
           <TableCell width="25%">{Language.name}</TableCell>
-          <TableCell width="20%">{Language.lastBuiltBy}</TableCell>
           <TableCell width="20%">{Language.template}</TableCell>
-          <TableCell width="20%">{Language.version}</TableCell>
+          <TableCell width="25%">{Language.lastBuiltBy}</TableCell>
+          <TableCell width="15%">{Language.version}</TableCell>
           <TableCell width="15%">{Language.status}</TableCell>
           <TableCell width="1%"></TableCell>
         </TableRow>

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -139,7 +139,11 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
                 className={styles.clickableTableRow}
               >
                 <TableCellLink to={templatePageLink}>
-                  <AvatarData title={template.name} subtitle={template.description} />
+                  <AvatarData
+                    title={template.name}
+                    subtitle={template.description}
+                    highlightTitle
+                  />
                 </TableCellLink>
 
                 <TableCellLink to={templatePageLink}>