Oct 3, 2024 · Sep 30, 2024 · Oct 1, 2024 · Oct 2, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
 // This would fail unit testing, or at least make it very slow with
 // actual network requests. So just globally mock this hook.
 jest.mock("contexts/useProxyLatency", () => ({
 useProxyLatency: (proxies?: Region[]) => {
 // Must use `useMemo` here to avoid infinite loop.
 // Mocking the hook with a hook.
 const proxyLatencies = useMemo(() => {
 if (!proxies) {
 return {} as Record<string, ProxyLatencyReport>;
 }
 return proxies.reduce(
 (acc, proxy) => {
 acc[proxy.id] = {
 accurate: true,
 // Return a constant latency of 8ms.
 // If you make this random it could break stories.
 latencyMS: 8,
 at: new Date(),
 };
 return acc;
 },
 {} as Record<string, ProxyLatencyReport>,
 );
 }, [proxies]);
 useProxyLatency: (proxies?: Region[]) => {
 // Must use `useMemo` here to avoid infinite loop.
 // Mocking the hook with a hook.
 const proxyLatencies = useMemo(() => {
 if (!proxies) {
 return {} as Record<string, ProxyLatencyReport>;
 }
 return proxies.reduce(
 (acc, proxy) => {
 acc[proxy.id] = {
 accurate: true,
 // Return a constant latency of 8ms.
 // If you make this random it could break stories.
 latencyMS: 8,
 at: new Date(),
 };
 return acc;
 },
 {} as Record<string, ProxyLatencyReport>,
 );
 }, [proxies]);

 return { proxyLatencies, refetch: jest.fn() };
 },
 return { proxyLatencies, refetch: jest.fn() };
 },
 }));

 global.scrollTo = jest.fn();
 window.open = jest.fn();
 navigator.sendBeacon = jest.fn();

 global.ResizeObserver = require("resize-observer-polyfill");

 // Polyfill the getRandomValues that is used on utils/random.ts
 Object.defineProperty(global.self, "crypto", {
 value: {
 getRandomValues: function (buffer: Buffer) {
 return crypto.randomFillSync(buffer);
 },
 },
 value: {
 getRandomValues: function (buffer: Buffer) {
 return crypto.randomFillSync(buffer);
 },
 },
 });

 // Establish API mocking before all tests through MSW.
 beforeAll(() =>
 server.listen({
 onUnhandledRequest: "warn",
 }),
 server.listen({
 onUnhandledRequest: "warn",
 }),
 );

 // Reset any request handlers that we may add during the tests,
 // so they don't affect other tests.
 afterEach(() => {
 cleanup();
 server.resetHandlers();
 jest.resetAllMocks();
 cleanup();
 server.resetHandlers();
 jest.resetAllMocks();
 });

 // Clean up after the tests are finished.
diff --git a/site/package.json b/site/package.json
 "react-virtualized-auto-sizer": "1.0.24",
 "react-window": "1.8.10",
 "remark-gfm": "4.0.0",
 "resize-observer-polyfill": "1.5.1",
 "rollup-plugin-visualizer": "5.12.0",
 "semver": "7.6.2",
 "tzdata": "1.0.40",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx

 test("shows selected agent logs", async () => {
 const server = new WS(
 `ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/logs?follow&after=0`,
 `ws://localhost/api/v2/workspaceagents/${
 MockWorkspaceAgent.id
 }/logs?follow&after=0`,
 );
 renderWithAuth(<WorkspaceBuildPage />, {
 route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}/builds/${MockWorkspace.latest_build.build_number}?${LOGS_TAB_KEY}=${MockWorkspaceAgent.id}`,
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
 WorkspaceBuildDataSkeleton,
 } from "modules/workspaces/WorkspaceBuildData/WorkspaceBuildData";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import type { FC } from "react";
 import {
 type CSSProperties,
 type FC,
 type HTMLProps,
 useLayoutEffect,
 useRef,
 useState,
 } from "react";
 import { Link } from "react-router-dom";
 import { displayWorkspaceBuildDuration } from "utils/workspace";
 import { Sidebar, SidebarCaption, SidebarItem } from "./Sidebar";
 ))}
 </Sidebar>

 <div css={{ height: "100%", overflowY: "auto", width: "100%" }}>
 <ScrollArea>
 <Tabs active={tabState.value}>
 <TabsList>
 <TabLink to={`?${LOGS_TAB_KEY}=build`} value="build">
 agent={selectedAgent!}
 />
 )}
 </div>
 </ScrollArea>
 </div>
 </DashboardFullPage>
 );
 };

 const ScrollArea: FC<HTMLProps<HTMLDivElement>> = (props) => {
 // TODO: Use only CSS to set the height of the content.
 // Note: On Safari, when content is rendered inside a flex container and needs
 // to scroll, the parent container must have a height set. Achieving this may
 // require significant refactoring of the layout components where we currently
 // use height and min-height set to 100%.
 // Issue: https://github.com/coder/coder/issues/9687
 // Reference: https://stackoverflow.com/questions/43381836/height100-works-in-chrome-but-not-in-safari
 const contentRef = useRef<HTMLDivElement>(null);
 const [height, setHeight] = useState<CSSProperties["height"]>("100%");
 useLayoutEffect(() => {
 const contentEl = contentRef.current;
 if (!contentEl) {
 return;
 }

 const resizeObserver = new ResizeObserver(() => {
 const parentEl = contentEl.parentElement;
 if (!parentEl) {
 return;
 }
 setHeight(parentEl.clientHeight);
 });
 resizeObserver.observe(document.body);

 return () => {
 resizeObserver.disconnect();
 };
 }, []);

 return (
 <div
 ref={contentRef}
 css={{ height, overflowY: "auto", width: "100%" }}
 {...props}
 />
 );
 };

 const BuildLogsContent: FC<{ logs?: ProvisionerJobLog[] }> = ({ logs }) => {
 if (!logs) {
 return <Loader />;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,30 +11,30 @@ import { server } from "testHelpers/server";
		// This would fail unit testing, or at least make it very slow with
		// actual network requests. So just globally mock this hook.
		jest.mock("contexts/useProxyLatency", () => ({
		useProxyLatency: (proxies?: Region[]) => {
		// Must use `useMemo` here to avoid infinite loop.
		// Mocking the hook with a hook.
		const proxyLatencies = useMemo(() => {
		if (!proxies) {
		return {} as Record<string, ProxyLatencyReport>;
		}
		return proxies.reduce(
		(acc, proxy) => {
		acc[proxy.id] = {
		accurate: true,
		// Return a constant latency of 8ms.
		// If you make this random it could break stories.
		latencyMS: 8,
		at: new Date(),
		};
		return acc;
		},
		{} as Record<string, ProxyLatencyReport>,
		);
		}, [proxies]);
		useProxyLatency: (proxies?: Region[]) => {
		// Must use `useMemo` here to avoid infinite loop.
		// Mocking the hook with a hook.
		const proxyLatencies = useMemo(() => {
		if (!proxies) {
		return {} as Record<string, ProxyLatencyReport>;
		}
		return proxies.reduce(
		(acc, proxy) => {
		acc[proxy.id] = {
		accurate: true,
		// Return a constant latency of 8ms.
		// If you make this random it could break stories.
		latencyMS: 8,
		at: new Date(),
		};
		return acc;
		},
		{} as Record<string, ProxyLatencyReport>,
		);
		}, [proxies]);

		return { proxyLatencies, refetch: jest.fn() };
		},
		return { proxyLatencies, refetch: jest.fn() };
		},
		}));

		global.scrollTo = jest.fn();
Expand All		@@ -43,28 +43,30 @@ window.HTMLElement.prototype.scrollIntoView = jest.fn();
		window.open = jest.fn();
		navigator.sendBeacon = jest.fn();

		global.ResizeObserver = require("resize-observer-polyfill");

		// Polyfill the getRandomValues that is used on utils/random.ts
		Object.defineProperty(global.self, "crypto", {
		value: {
		getRandomValues: function (buffer: Buffer) {
		return crypto.randomFillSync(buffer);
		},
		},
		value: {
		getRandomValues: function (buffer: Buffer) {
		return crypto.randomFillSync(buffer);
		},
		},
		});

		// Establish API mocking before all tests through MSW.
		beforeAll(() =>
		server.listen({
		onUnhandledRequest: "warn",
		}),
		server.listen({
		onUnhandledRequest: "warn",
		}),
		);

		// Reset any request handlers that we may add during the tests,
		// so they don't affect other tests.
		afterEach(() => {
		cleanup();
		server.resetHandlers();
		jest.resetAllMocks();
		cleanup();
		server.resetHandlers();
		jest.resetAllMocks();
		});

		// Clean up after the tests are finished.
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -90,6 +90,7 @@
		"react-virtualized-auto-sizer": "1.0.24",
		"react-window": "1.8.10",
		"remark-gfm": "4.0.0",
		"resize-observer-polyfill": "1.5.1",
		"rollup-plugin-visualizer": "5.12.0",
		"semver": "7.6.2",
		"tzdata": "1.0.40",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -65,7 +65,9 @@ describe("WorkspaceBuildPage", () => {

		test("shows selected agent logs", async () => {
		const server = new WS(
		`ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/logs?follow&after=0`,
		`ws://localhost/api/v2/workspaceagents/${
		MockWorkspaceAgent.id
		}/logs?follow&after=0`,
		);
		renderWithAuth(<WorkspaceBuildPage />, {
		route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}/builds/${MockWorkspace.latest_build.build_number}?${LOGS_TAB_KEY}=${MockWorkspaceAgent.id}`,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,7 +24,14 @@ import {
		WorkspaceBuildDataSkeleton,
		} from "modules/workspaces/WorkspaceBuildData/WorkspaceBuildData";
		import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
		import type { FC } from "react";
		import {
		type CSSProperties,
		type FC,
		type HTMLProps,
		useLayoutEffect,
		useRef,
		useState,
		} from "react";
		import { Link } from "react-router-dom";
		import { displayWorkspaceBuildDuration } from "utils/workspace";
		import { Sidebar, SidebarCaption, SidebarItem } from "./Sidebar";
Expand DownExpand Up		@@ -144,7 +151,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
		))}
		</Sidebar>

		<div css={{ height: "100%", overflowY: "auto", width: "100%" }}>
		<ScrollArea>
		<Tabs active={tabState.value}>
		<TabsList>
		<TabLink to={`?${LOGS_TAB_KEY}=build`} value="build">
Expand DownExpand Up		@@ -197,12 +204,51 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
		agent={selectedAgent!}
		/>
		)}
		</div>
		</ScrollArea>
		</div>
		</DashboardFullPage>
		);
		};

		const ScrollArea: FC<HTMLProps<HTMLDivElement>> = (props) => {
		// TODO: Use only CSS to set the height of the content.
		// Note: On Safari, when content is rendered inside a flex container and needs
		// to scroll, the parent container must have a height set. Achieving this may
		// require significant refactoring of the layout components where we currently
		// use height and min-height set to 100%.
		// Issue: https://github.com/coder/coder/issues/9687
		// Reference: https://stackoverflow.com/questions/43381836/height100-works-in-chrome-but-not-in-safari
		const contentRef = useRef<HTMLDivElement>(null);
		const [height, setHeight] = useState<CSSProperties["height"]>("100%");
		useLayoutEffect(() => {
		const contentEl = contentRef.current;
		if (!contentEl) {
		return;
		}

		const resizeObserver = new ResizeObserver(() => {
		const parentEl = contentEl.parentElement;
		if (!parentEl) {
		return;
		}
		setHeight(parentEl.clientHeight);
		});
		resizeObserver.observe(document.body);

		return () => {
		resizeObserver.disconnect();
		};
		}, []);

		return (
		<div
		ref={contentRef}
		css={{ height, overflowY: "auto", width: "100%" }}
		{...props}
		/>
		);
		};

		const BuildLogsContent: FC<{ logs?: ProvisionerJobLog[] }> = ({ logs }) => {
		if (!logs) {
		return <Loader />;
Expand Down