fix: ensure that mock query cache key and component key are properly synced for storybook

Parkreiner · Parkreiner · commit 775486f31f89 · 2024-09-13T15:53:30.000Z
diff --git a/site/src/api/queries/workspaceQuota.ts b/site/src/api/queries/workspaceQuota.ts
@@ -4,7 +4,7 @@ export const getWorkspaceQuotaQueryKey = (
 	organizationName: string,
 	username: string,
 ) => {
-	return [organizationName, username, "workspaceQuota"];
+	return ["workspaceQuota", organizationName, username];
 };
 
 export const workspaceQuota = (organizationName: string, username: string) => {
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
 import { getWorkspaceQuotaQueryKey } from "api/queries/workspaceQuota";
+import type { Workspace, WorkspaceQuota } from "api/typesGenerated";
 import { addHours, addMinutes } from "date-fns";
 import {
 	MockOrganization,
@@ -12,9 +13,12 @@ import {
 import { withDashboardProvider } from "testHelpers/storybook";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";
 
-// We want a workspace without a deadline to not pollute the screenshot
-const baseWorkspace = {
+// We want a workspace without a deadline to not pollute the screenshot. Also
+// want to make sure that the workspace is synced to our other mock values
+const baseWorkspace: Workspace = {
 	...MockWorkspace,
+	organization_name: MockOrganization.name,
+	organization_id: MockOrganization.id,
 	latest_build: {
 		...MockWorkspace.latest_build,
 		deadline: undefined,
@@ -263,8 +267,9 @@ export const WithFarAwayDeadlineRequiredByTemplate: Story = {
 	},
 };
 
-export const WithQuota: Story = {
+export const WithQuotaNoOrgs: Story = {
 	parameters: {
+		showOrganizations: false,
 		queries: [
 			{
 				key: getWorkspaceQuotaQueryKey(
@@ -274,7 +279,25 @@ export const WithQuota: Story = {
 				data: {
 					credits_consumed: 2,
 					budget: 40,
-				},
+				} satisfies WorkspaceQuota,
+			},
+		],
+	},
+};
+
+export const WithQuotaWithOrgs: Story = {
+	parameters: {
+		showOrganizations: true,
+		queries: [
+			{
+				key: getWorkspaceQuotaQueryKey(
+					MockOrganization.name,
+					MockUser.username,
+				),
+				data: {
+					credits_consumed: 2,
+					budget: 40,
+				} satisfies WorkspaceQuota,
 			},
 		],
 	},
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -116,7 +116,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 		(org) => org.id === workspace.organization_id,
 	);
 
-	const orgDisplayName = activeOrg?.display_name ?? workspace.organization_name;
+	const orgDisplayName = activeOrg?.display_name || workspace.organization_name;
 
 	const isImmutable =
 		workspace.latest_build.status === "deleted" ||
