fix: show template name on workspace page when template display name is unset (coder#15262)

aslilac · web-flow · commit bbd2dd80e22e · 2024-10-29T12:30:13.000-06:00
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
@@ -320,3 +320,39 @@ export const TemplateDoesNotAllowAutostop: Story = {
 		},
 	},
 };
+
+export const TemplateInfoPopover: Story = {
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("activate hover trigger", async () => {
+			await userEvent.hover(canvas.getByText(baseWorkspace.name));
+			await waitFor(() =>
+				expect(
+					canvas.getByRole("presentation", { hidden: true }),
+				).toHaveTextContent(MockTemplate.display_name),
+			);
+		});
+	},
+};
+
+export const TemplateInfoPopoverWithoutDisplayName: Story = {
+	args: {
+		workspace: {
+			...baseWorkspace,
+			template_display_name: "",
+		},
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("activate hover trigger", async () => {
+			await userEvent.hover(canvas.getByText(baseWorkspace.name));
+			await waitFor(() =>
+				expect(
+					canvas.getByRole("presentation", { hidden: true }),
+				).toHaveTextContent(MockTemplate.name),
+			);
+		});
+	},
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -160,7 +160,9 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 						templateIconUrl={workspace.template_icon}
 						rootTemplateUrl={templateLink}
 						templateVersionName={workspace.latest_build.template_version_name}
-						templateVersionDisplayName={workspace.template_display_name}
+						templateDisplayName={
+							workspace.template_display_name || workspace.template_name
+						}
 						latestBuildVersionName={
 							workspace.latest_build.template_version_name
 						}
@@ -366,7 +368,7 @@ type WorkspaceBreadcrumbProps = Readonly<{
 	rootTemplateUrl: string;
 	templateVersionName: string;
 	latestBuildVersionName: string;
-	templateVersionDisplayName?: string;
+	templateDisplayName: string;
 }>;
 
 const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
@@ -375,7 +377,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 	rootTemplateUrl,
 	templateVersionName,
 	latestBuildVersionName,
-	templateVersionDisplayName = templateVersionName,
+	templateDisplayName,
 }) => {
 	return (
 		<Popover mode="hover">
@@ -399,7 +401,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 							to={rootTemplateUrl}
 							css={{ color: "inherit" }}
 						>
-							{templateVersionDisplayName}
+							{templateDisplayName}
 						</Link>
 					}
 					subtitle={
@@ -419,7 +421,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 							fitImage
 						/>
 					}
-					imgFallbackText={templateVersionDisplayName}
+					imgFallbackText={templateDisplayName}
 				/>
 			</HelpTooltipContent>
 		</Popover>
