feat: Add template icon to the workspaces page

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.
coder · kylecarbs · Aug 22, 2022 · Aug 20, 2022 · Aug 20, 2022 · 2dc3bbb06c074ab56c90cf7d5ce2ac1079808455
commit 2dc3bbb06c074ab56c90cf7d5ce2ac1079808455
diff --git a/coderd/workspaces.go b/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,

diff --git a/codersdk/workspaces.go b/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"`

diff --git a/site/src/api/typesGenerated.ts b/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

@@ -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>

@@ -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%",
+    },
+  },
 }))
@@ -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>

diff --git a/site/src/testHelpers/entities.ts b/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,