feat: show template.display_name on Workspace pages (#5082)

* feat: expose template.display_name via Workspaces endpoint

* Fix: MockWorkspace

* UI: Workspace stats and row

* Show template.display_name on pages

* Fix: address PR comments

* Add helper function: getDisplayWorkspaceTemplateName

site/src/api/typesGenerated.ts

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

site/src/components/WorkspaceStats/WorkspaceStats.tsx

@@ -5,7 +5,10 @@ import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
 import { createDayString } from "util/createDayString"
-import { getDisplayWorkspaceBuildInitiatedBy } from "util/workspace"
+import {
+  getDisplayWorkspaceBuildInitiatedBy,
+  getDisplayWorkspaceTemplateName,
+} from "util/workspace"
 import { Workspace } from "../../api/typesGenerated"
 
 const Language = {
@@ -36,6 +39,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
   const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(
     workspace.latest_build,
   )
+  const displayTemplateName = getDisplayWorkspaceTemplateName(workspace)
 
   return (
     <div className={styles.stats} aria-label={Language.workspaceDetails}>
@@ -46,7 +50,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
           to={`/templates/${workspace.template_name}`}
           className={combineClasses([styles.statsValue, styles.link])}
         >
-          {workspace.template_name}
+          {displayTemplateName}
         </Link>
       </div>
       <div className={styles.statItem}>

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -7,6 +7,7 @@ import { AvatarData } from "components/AvatarData/AvatarData"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
+import { getDisplayWorkspaceTemplateName } from "util/workspace"
 import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
 import { LastUsed } from "../LastUsed/LastUsed"
 import {
@@ -32,6 +33,7 @@ export const WorkspacesRow: FC<
   const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`
   const hasTemplateIcon =
     workspace.template_icon && workspace.template_icon !== ""
+  const displayTemplateName = getDisplayWorkspaceTemplateName(workspace)
 
   return (
     <TableRow
@@ -61,7 +63,7 @@ export const WorkspacesRow: FC<
       </TableCellLink>
 
       <TableCellLink to={workspacePageLink}>
-        <TableCellDataPrimary>{workspace.template_name}</TableCellDataPrimary>
+        <TableCellDataPrimary>{displayTemplateName}</TableCellDataPrimary>
       </TableCellLink>
       <TableCellLink to={workspacePageLink}>
         <TableCellData>

site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx

@@ -1,7 +1,10 @@
 import { screen, waitFor } from "@testing-library/react"
 import { rest } from "msw"
 import * as CreateDayString from "util/createDayString"
-import { MockWorkspace } from "../../testHelpers/entities"
+import {
+  MockWorkspace,
+  MockWorkspacesResponse,
+} from "../../testHelpers/entities"
 import { history, render } from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
 import WorkspacesPage from "./WorkspacesPage"
@@ -54,5 +57,9 @@ describe("WorkspacesPage", () => {
       { timeout: 2000 },
     )
     await screen.findByText(`${MockWorkspace.name}1`)
+    const templateDisplayNames = await screen.findAllByText(
+      `${MockWorkspace.template_display_name}`,
+    )
+    expect(templateDisplayNames).toHaveLength(MockWorkspacesResponse.count)
   })
 })

site/src/testHelpers/entities.ts

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

site/src/util/workspace.test.ts

@@ -5,6 +5,7 @@ import {
   defaultWorkspaceExtension,
   getDisplayVersionStatus,
   getDisplayWorkspaceBuildInitiatedBy,
+  getDisplayWorkspaceTemplateName,
   isWorkspaceOn,
 } from "./workspace"
 
@@ -120,4 +121,22 @@ describe("util > workspace", () => {
       },
     )
   })
+
+  describe("getDisplayWorkspaceTemplateName", () => {
+    it("display name is not set", async () => {
+      const workspace: TypesGen.Workspace = {
+        ...Mocks.MockWorkspace,
+        template_display_name: "",
+      }
+      const displayed = getDisplayWorkspaceTemplateName(workspace)
+      expect(displayed).toEqual(workspace.template_name)
+    })
+    it("display name is set", async () => {
+      const workspace: TypesGen.Workspace = {
+        ...Mocks.MockWorkspace,
+      }
+      const displayed = getDisplayWorkspaceTemplateName(workspace)
+      expect(displayed).toEqual(workspace.template_display_name)
+    })
+  })
 })

site/src/util/workspace.ts

@@ -182,3 +182,11 @@ export const getFaviconByStatus = (
       return "favicon"
   }
 }
+
+export const getDisplayWorkspaceTemplateName = (
+  workspace: TypesGen.Workspace,
+): string => {
+  return workspace.template_display_name.length > 0
+    ? workspace.template_display_name
+    : workspace.template_name
+}