feat: Add template icon to the workspaces page (#3612)

This removes the last built by column from the page. It seemed
cluttered to have both on the page, and is simple enough to
click on the workspace to see additional info.

coderd/workspaces.go

@@ -891,6 +891,7 @@ func convertWorkspace(
 		TemplateID:        workspace.TemplateID,
 		LatestBuild:       convertWorkspaceBuild(owner, initiator, workspace, workspaceBuild, job),
 		TemplateName:      template.Name,
+		TemplateIcon:      template.Icon,
 		Outdated:          workspaceBuild.TemplateVersionID.String() != template.ActiveVersionID.String(),
 		Name:              workspace.Name,
 		AutostartSchedule: autostartSchedule,

codersdk/workspaces.go

@@ -24,6 +24,7 @@ type Workspace struct {
 	OwnerName         string         `json:"owner_name"`
 	TemplateID        uuid.UUID      `json:"template_id"`
 	TemplateName      string         `json:"template_name"`
+	TemplateIcon      string         `json:"template_icon"`
 	LatestBuild       WorkspaceBuild `json:"latest_build"`
 	Outdated          bool           `json:"outdated"`
 	Name              string         `json:"name"`

site/src/api/typesGenerated.ts

@@ -426,6 +426,7 @@ export interface Workspace {
   readonly owner_name: string
   readonly template_id: string
   readonly template_name: string
+  readonly template_icon: string
   readonly latest_build: WorkspaceBuild
   readonly outdated: boolean
   readonly name: string

site/src/components/AvatarData/AvatarData.tsx

@@ -12,7 +12,7 @@ import {
 
 export interface AvatarDataProps {
   title: string
-  subtitle: string
+  subtitle?: string
   highlightTitle?: boolean
   link?: string
   avatar?: React.ReactNode
@@ -39,13 +39,13 @@ export const AvatarData: FC<AvatarDataProps> = ({
         <Link to={link} underline="none" component={RouterLink}>
           <TableCellData>
             <TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
-            <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
+            {subtitle && <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>}
           </TableCellData>
         </Link>
       ) : (
         <TableCellData>
           <TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
-          <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
+          {subtitle && <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>}
         </TableCellData>
       )}
     </div>

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -6,8 +6,6 @@ import { useActor } from "@xstate/react"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
-import { createDayString } from "util/createDayString"
-import { getDisplayWorkspaceBuildInitiatedBy } from "util/workspace"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
 import { AvatarData } from "../AvatarData/AvatarData"
 import {
@@ -29,8 +27,8 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
   const theme: Theme = useTheme()
   const [workspaceState, send] = useActor(workspaceRef)
   const { data: workspace } = workspaceState.context
-  const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(workspace.latest_build)
   const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`
+  const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== ""
 
   return (
     <TableRow
@@ -51,11 +49,17 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
         </TableCellData>
       </TableCellLink>
 
-      <TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
       <TableCellLink to={workspacePageLink}>
         <AvatarData
-          title={initiatedBy}
-          subtitle={createDayString(workspace.latest_build.created_at)}
+          title={workspace.template_name}
+          highlightTitle={false}
+          avatar={
+            hasTemplateIcon ? (
+              <div className={styles.templateIconWrapper}>
+                <img alt="" src={workspace.template_icon} />
+              </div>
+            ) : undefined
+          }
         />
       </TableCellLink>
       <TableCellLink to={workspacePageLink}>
@@ -117,4 +121,14 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     fontSize: 12,
   },
+  templateIconWrapper: {
+    // Same size then the avatar component
+    width: 36,
+    height: 36,
+    padding: 2,
+
+    "& img": {
+      width: "100%",
+    },
+  },
 }))

site/src/components/WorkspacesTable/WorkspacesTable.tsx

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

site/src/testHelpers/entities.ts

@@ -208,6 +208,7 @@ export const MockWorkspace: TypesGen.Workspace = {
   updated_at: "",
   template_id: MockTemplate.id,
   template_name: MockTemplate.name,
+  template_icon: MockTemplate.icon,
   outdated: false,
   owner_id: MockUser.id,
   owner_name: MockUser.username,