Add helper function: getDisplayWorkspaceTemplateName

coder · mtojek · Nov 16, 2022 · Nov 15, 2022 · Nov 15, 2022 · Nov 15, 2022
commit ccbc60e1f6b004fed5d17c41705f00fcd8e8bc3f
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/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,9 +50,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
           to={`/templates/${workspace.template_name}`}
           className={combineClasses([styles.statsValue, styles.link])}
         >
-          {workspace.template_display_name.length > 0
-            ? workspace.template_display_name
-            : workspace.template_name}
+          {displayTemplateName}
         </Link>
       </div>
       <div className={styles.statItem}>

diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/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,11 +63,7 @@ export const WorkspacesRow: FC<
       </TableCellLink>
 
       <TableCellLink to={workspacePageLink}>
-        <TableCellDataPrimary>
-          {workspace.template_display_name.length > 0
-            ? workspace.template_display_name
-            : workspace.template_name}
-        </TableCellDataPrimary>
+        <TableCellDataPrimary>{displayTemplateName}</TableCellDataPrimary>
       </TableCellLink>
       <TableCellLink to={workspacePageLink}>
         <TableCellData>

diff --git a/site/src/util/workspace.test.ts b/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)
+    })
+  })
 })
diff --git a/site/src/util/workspace.ts b/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
+}