- - - - - - {workspace.owner_name} - - - - - - - + {showOrganizations && ( <> - - - - - {activeOrg && ( - - )} - - {workspace.organization_name} - - - - - - {workspace.organization_name} - - ) : ( - workspace.organization_name - ) - } - subtitle="Organization" - avatar={ - activeOrg !== undefined && ( - - ) - } - /> - - + )} - - - - - {workspace.name} - - - - - - {workspace.template_display_name.length > 0 - ? workspace.template_display_name - : workspace.template_name} - - } - subtitle={ - - Version: {workspace.latest_build.template_version_name} - - } - avatar={ - workspace.template_icon !== "" && ( - - ) - } - /> - - + {quota && quota.budget > 0 && ( @@ -406,3 +269,178 @@ export const WorkspaceTopbar: FC = ({ ); }; + +type OwnerBreadcrumbProps = Readonly<{ + ownerName: string; + ownerAvatarUrl: string; +}>; + +const OwnerBreadcrumb: FC = ({ + ownerName, + ownerAvatarUrl, +}) => { + return ( + + + + + + {ownerName} + + + + + + + + ); +}; + +type OrganizationBreadcrumbProps = Readonly<{ + orgName: string; + orgPageUrl?: string; + orgIconUrl?: string; +}>; + +const OrganizationBreadcrumb: FC = ({ + orgName, + orgPageUrl, + orgIconUrl, +}) => { + return ( + + + + + {orgName} + + + + + + {orgName} + + ) : ( + orgName + ) + } + subtitle="Organization" + avatar={ + orgIconUrl && ( + + ) + } + /> + + + ); +}; + +type WorkspaceBreadcrumbProps = Readonly<{ + workspaceName: string; + templateIconUrl: string; + rootTemplateUrl: string; + templateVersionName: string; + templateVersionDisplayName?: string; +}>; + +const WorkspaceBreadcrumb: FC = ({ + workspaceName, + templateIconUrl, + rootTemplateUrl, + templateVersionName, + templateVersionDisplayName = templateVersionName, +}) => { + return ( + + + + + {workspaceName} + + + + + + {templateVersionDisplayName} + + } + subtitle={ + + Version: {templateVersionDisplayName} + + } + avatar={ + + } + /> + + + ); +}; + +const styles = { + topbarLeft: { + display: "flex", + alignItems: "center", + columnGap: 24, + rowGap: 8, + flexWrap: "wrap", + // 12px - It is needed to keep vertical spacing when the content is wrapped + padding: "12px", + marginRight: "auto", + }, + + breadcrumbSegment: { + display: "flex", + flexFlow: "row nowrap", + gap: "8px", + maxWidth: "160px", + textOverflow: "ellipsis", + overflowX: "hidden", + whiteSpace: "nowrap", + cursor: "default", + }, +} satisfies Record>; From c8f9226cbbac1bc178e01e3ad9c67589a41c9442 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 6 Sep 2024 22:47:51 +0000 Subject: [PATCH 19/27] fix: display correct template version name in dropdown --- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 8b97f0f4136e4..991b522a0b213 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -162,6 +162,9 @@ export const WorkspaceTopbar: FC = ({ rootTemplateUrl={templateLink} templateVersionName={workspace.template_name} templateVersionDisplayName={workspace.template_display_name} + latestBuildVersionName={ + workspace.latest_build.template_version_name + } /> @@ -362,6 +365,7 @@ type WorkspaceBreadcrumbProps = Readonly<{ templateIconUrl: string; rootTemplateUrl: string; templateVersionName: string; + latestBuildVersionName: string; templateVersionDisplayName?: string; }>; @@ -370,6 +374,7 @@ const WorkspaceBreadcrumb: FC = ({ templateIconUrl, rootTemplateUrl, templateVersionName, + latestBuildVersionName, templateVersionDisplayName = templateVersionName, }) => { return ( @@ -409,7 +414,7 @@ const WorkspaceBreadcrumb: FC = ({ to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`} css={{ color: "inherit" }} > - Version: {templateVersionDisplayName} + Version: {latestBuildVersionName} } avatar={ From 36eba4746ae7148c4ca7e82a97c9f697f4237836 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 9 Sep 2024 16:44:21 +0000 Subject: [PATCH 20/27] fix: update overflow styling for breadcrumb segments --- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 991b522a0b213..6b872de31645d 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -291,8 +291,7 @@ const OwnerBreadcrumb: FC = ({ username={ownerName} avatarURL={ownerAvatarUrl} /> - - {ownerName} + {ownerName} @@ -326,7 +325,7 @@ const OrganizationBreadcrumb: FC = ({ - {orgName} + {orgName} @@ -380,17 +379,11 @@ const WorkspaceBreadcrumb: FC = ({ return ( - + - {workspaceName} + + {workspaceName} + @@ -443,9 +436,12 @@ const styles = { flexFlow: "row nowrap", gap: "8px", maxWidth: "160px", - textOverflow: "ellipsis", - overflowX: "hidden", whiteSpace: "nowrap", cursor: "default", }, + + breadcrumbText: { + overflowX: "hidden", + textOverflow: "ellipsis", + }, } satisfies Record>; From 5e0689d34a4ac74bf37d34be8bad662bf2cc63dd Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 9 Sep 2024 16:48:44 +0000 Subject: [PATCH 21/27] fix: favor org display name --- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 6b872de31645d..b8d2d3f5514ff 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -143,7 +143,7 @@ export const WorkspaceTopbar: FC = ({ <> Date: Mon, 9 Sep 2024 16:56:11 +0000 Subject: [PATCH 22/27] fix: centralize org display name logic --- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index b8d2d3f5514ff..264a5bf7fda04 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -116,6 +116,8 @@ export const WorkspaceTopbar: FC = ({ (org) => org.id === workspace.organization_id, ); + const orgDisplayName = activeOrg?.display_name ?? workspace.organization_name; + const isImmutable = workspace.latest_build.status === "deleted" || workspace.latest_build.status === "deleting"; @@ -143,7 +145,7 @@ export const WorkspaceTopbar: FC = ({ <> = ({ } title={ showOrganizations - ? `See affected workspaces for ${workspace.organization_name}` + ? `See affected workspaces for ${orgDisplayName}` : "See affected workspaces" } > From ba8515d7ad9e7c48a59cfef93e394d86c2f66a5d Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 12 Sep 2024 15:32:35 +0000 Subject: [PATCH 23/27] fix: make sure skeletons stay synced with org feature toggles --- site/src/pages/AuditPage/AuditFilter.tsx | 2 +- site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx index 2a256d3f05317..448a59e88dc8d 100644 --- a/site/src/pages/AuditPage/AuditFilter.tsx +++ b/site/src/pages/AuditPage/AuditFilter.tsx @@ -71,7 +71,7 @@ export const AuditFilter: FC = ({ filter, error, menus }) => { - + {menus.organization && } } /> diff --git a/site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx b/site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx index ed0d28fd1e110..c695f92647699 100644 --- a/site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx +++ b/site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx @@ -106,6 +106,7 @@ export const WorkspacesFilter: FC = ({ {menus.user && } + {showOrganizations && } } /> From 775486f31f89112756c73ee7dd9c7777c3e88bb3 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 13 Sep 2024 15:53:30 +0000 Subject: [PATCH 24/27] fix: ensure that mock query cache key and component key are properly synced for storybook --- site/src/api/queries/workspaceQuota.ts | 2 +- .../WorkspacePage/WorkspaceTopbar.stories.tsx | 31 ++++++++++++++++--- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/site/src/api/queries/workspaceQuota.ts b/site/src/api/queries/workspaceQuota.ts index e7de47d6398bc..17b39463d6247 100644 --- 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 index dc9e096f7cc3d..ef7c72895552b 100644 --- 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 index 264a5bf7fda04..c4a8ae30c0239 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -116,7 +116,7 @@ export const WorkspaceTopbar: FC = ({ (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" || From d40167f7d47ed6991b3f08703d38d23ce5a728fd Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Fri, 13 Sep 2024 15:56:04 +0000 Subject: [PATCH 25/27] docs: clean up wording on SearchField comment --- site/src/components/SearchField/SearchField.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx index e63820d44c8dc..15a164e00bb08 100644 --- a/site/src/components/SearchField/SearchField.tsx +++ b/site/src/components/SearchField/SearchField.tsx @@ -21,9 +21,8 @@ export const SearchField: FC = ({ const theme = useTheme(); return ( Date: Mon, 16 Sep 2024 20:20:47 +0000 Subject: [PATCH 26/27] fix: shrink mix width threshold for search field --- site/src/components/SearchField/SearchField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx index 15a164e00bb08..16e0c064d8386 100644 --- a/site/src/components/SearchField/SearchField.tsx +++ b/site/src/components/SearchField/SearchField.tsx @@ -23,7 +23,7 @@ export const SearchField: FC = ({ onChange(e.target.value)} From 6dbfe067d7bbf63f872e80051483221710f7c534 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Mon, 16 Sep 2024 15:35:54 -0500 Subject: [PATCH 27/27] chore: add navigation test for workspace details page (#14629) * chore: add tests for WorkspacePage cross-page navigation * fix: update story to use mock organizations menu --- site/src/contexts/auth/RequireAuth.tsx | 22 ++++- .../WorkspacePage/WorkspacePage.test.tsx | 87 ++++++++++++++++++- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 6 +- .../WorkspacesPageView.stories.tsx | 1 + site/src/testHelpers/renderHelpers.tsx | 12 ++- 5 files changed, 116 insertions(+), 12 deletions(-) diff --git a/site/src/contexts/auth/RequireAuth.tsx b/site/src/contexts/auth/RequireAuth.tsx index 6d66045b9756a..e558b66c802de 100644 --- a/site/src/contexts/auth/RequireAuth.tsx +++ b/site/src/contexts/auth/RequireAuth.tsx @@ -1,14 +1,30 @@ import { API } from "api/api"; import { isApiError } from "api/errors"; import { Loader } from "components/Loader/Loader"; -import { ProxyProvider } from "contexts/ProxyContext"; -import { DashboardProvider } from "modules/dashboard/DashboardProvider"; +import { ProxyProvider as ProductionProxyProvider } from "contexts/ProxyContext"; +import { DashboardProvider as ProductionDashboardProvider } from "modules/dashboard/DashboardProvider"; import { type FC, useEffect } from "react"; import { Navigate, Outlet, useLocation } from "react-router-dom"; import { embedRedirect } from "utils/redirect"; import { type AuthContextValue, useAuthContext } from "./AuthProvider"; -export const RequireAuth: FC = () => { +type RequireAuthProps = Readonly<{ + ProxyProvider?: typeof ProductionProxyProvider; + DashboardProvider?: typeof ProductionDashboardProvider; +}>; + +/** + * Wraps any component and ensures that the user has been authenticated before + * they can access the component's contents. + * + * In production, it is assumed that this component will not be called with any + * props at all. But to make testing easier, you can call this component with + * specific providers to mock them out. + */ +export const RequireAuth: FC = ({ + DashboardProvider = ProductionDashboardProvider, + ProxyProvider = ProductionProxyProvider, +}) => { const location = useLocation(); const { signOut, isSigningOut, isSignedOut, isSignedIn, isLoading } = useAuthContext(); diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx index c6b69348e1a8d..2c113b933483e 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx @@ -3,10 +3,19 @@ import userEvent from "@testing-library/user-event"; import * as apiModule from "api/api"; import type { TemplateVersionParameter, Workspace } from "api/typesGenerated"; import EventSourceMock from "eventsourcemock"; +import { + DashboardContext, + type DashboardProvider, +} from "modules/dashboard/DashboardProvider"; import { http, HttpResponse } from "msw"; +import type { FC } from "react"; +import { type Location, useLocation } from "react-router-dom"; import { + MockAppearanceConfig, MockDeploymentConfig, + MockEntitlements, MockFailedWorkspace, + MockOrganization, MockOutdatedWorkspace, MockStartingWorkspace, MockStoppedWorkspace, @@ -18,14 +27,22 @@ import { MockWorkspaceBuild, MockWorkspaceBuildDelete, } from "testHelpers/entities"; -import { renderWithAuth } from "testHelpers/renderHelpers"; +import { + type RenderWithAuthOptions, + renderWithAuth, +} from "testHelpers/renderHelpers"; import { server } from "testHelpers/server"; import { WorkspacePage } from "./WorkspacePage"; const { API, MissingBuildParameters } = apiModule; +type RenderWorkspacePageOptions = Omit; + // Renders the workspace page and waits for it be loaded -const renderWorkspacePage = async (workspace: Workspace) => { +const renderWorkspacePage = async ( + workspace: Workspace, + options: RenderWorkspacePageOptions = {}, +) => { jest.spyOn(API, "getWorkspaceByOwnerAndName").mockResolvedValue(workspace); jest.spyOn(API, "getTemplate").mockResolvedValueOnce(MockTemplate); jest.spyOn(API, "getTemplateVersionRichParameters").mockResolvedValueOnce([]); @@ -40,6 +57,7 @@ const renderWorkspacePage = async (workspace: Workspace) => { }); renderWithAuth(, { + ...options, route: `/@${workspace.owner_name}/${workspace.name}`, path: "/:username/:workspace", }); @@ -527,4 +545,69 @@ describe("WorkspacePage", () => { ); }); }); + + describe("Navigation to other pages", () => { + it("Shows a quota link when quota budget is greater than 0. Link navigates user to /workspaces route with the URL params populated with the corresponding organization", async () => { + jest.spyOn(API, "getWorkspaceQuota").mockResolvedValueOnce({ + budget: 25, + credits_consumed: 2, + }); + + const MockDashboardProvider: typeof DashboardProvider = ({ + children, + }) => ( + + {children} + + ); + + let destinationLocation!: Location; + const MockWorkspacesPage: FC = () => { + destinationLocation = useLocation(); + return null; + }; + + const workspace: Workspace = { + ...MockWorkspace, + organization_name: MockOrganization.name, + }; + + await renderWorkspacePage(workspace, { + mockAuthProviders: { + DashboardProvider: MockDashboardProvider, + }, + extraRoutes: [ + { + path: "/workspaces", + element: , + }, + ], + }); + + const quotaLink = await screen.findByRole("link", { + name: /\d+ credits of \d+/i, + }); + + const orgName = encodeURIComponent(MockOrganization.name); + expect( + quotaLink.href.endsWith(`/workspaces?filter=organization:${orgName}`), + ).toBe(true); + + const user = userEvent.setup(); + await user.click(quotaLink); + + expect(destinationLocation.pathname).toBe("/workspaces"); + expect(destinationLocation.search).toBe( + `?filter=organization:${orgName}`, + ); + }); + }); }); diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index c4a8ae30c0239..7ab39b6df0cba 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -147,11 +147,7 @@ export const WorkspaceTopbar: FC = ({ )} diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx index 02f34d0189691..ef639d087fb5a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx @@ -98,6 +98,7 @@ const defaultFilterProps = getDefaultFilterProps({ user: MockMenu, template: MockMenu, status: MockMenu, + organizations: MockMenu, }, values: { owner: MockUser.username, diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx index a6a41fd2a26ee..30aa6b7e89e10 100644 --- a/site/src/testHelpers/renderHelpers.tsx +++ b/site/src/testHelpers/renderHelpers.tsx @@ -4,9 +4,11 @@ import { waitFor, } from "@testing-library/react"; import { AppProviders } from "App"; +import type { ProxyProvider } from "contexts/ProxyContext"; import { ThemeProvider } from "contexts/ThemeProvider"; import { RequireAuth } from "contexts/auth/RequireAuth"; import { DashboardLayout } from "modules/dashboard/DashboardLayout"; +import type { DashboardProvider } from "modules/dashboard/DashboardProvider"; import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout"; import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"; import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"; @@ -83,6 +85,11 @@ export type RenderWithAuthOptions = { nonAuthenticatedRoutes?: RouteObject[]; // In case you want to render a layout inside of it children?: RouteObject["children"]; + + mockAuthProviders?: Readonly<{ + DashboardProvider?: typeof DashboardProvider; + ProxyProvider?: typeof ProxyProvider; + }>; }; export function renderWithAuth( @@ -92,12 +99,13 @@ export function renderWithAuth( route = "/", extraRoutes = [], nonAuthenticatedRoutes = [], + mockAuthProviders = {}, children, }: RenderWithAuthOptions = {}, ) { const routes: RouteObject[] = [ { - element: , + element: , children: [{ path, element, children }, ...extraRoutes], }, ...nonAuthenticatedRoutes, @@ -108,8 +116,8 @@ export function renderWithAuth( ); return { - user: MockUser, ...renderResult, + user: MockUser, }; }