fix(site): fix build logs scrolling on safari (#14884)

BrunoQuaresma · web-flow · commit 52f03dbdf2b1 · 2024-10-03T13:27:35.000-03:00
Fix #9687
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -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();
@@ -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.
diff --git a/site/package.json b/site/package.json
@@ -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",
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
@@ -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}`,
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -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";
@@ -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">
@@ -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 />;
