coder · Parkreiner · Jul 16, 2025 · Jul 16, 2025 · Jul 16, 2025 · Jul 16, 2025
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -101,6 +101,13 @@ function withHelmet(Story) {
 	);
 }
 
+/**
+ * This JSX file isn't part of the main project, so it doesn't get to use the
+ * ambient types defined in `storybook.d.ts` to provide extra type-safety.
+ * Extracting main key to avoid typos.
+ */
+const queryParametersKey = "queries";
+
 /** @type {Decorator} */
 function withQuery(Story, { parameters }) {
 	const queryClient = new QueryClient({
@@ -112,8 +119,8 @@ function withQuery(Story, { parameters }) {
 		},
 	});
 
-	if (parameters.queries) {
-		for (const query of parameters.queries) {
+	if (parameters[queryParametersKey]) {
+		for (const query of parameters[queryParametersKey]) {
 			queryClient.setQueryData(query.key, query.data);
 		}
 	}

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -48,21 +48,6 @@ export const templates = (
 	};
 };
 
-const getTemplatesByOrganizationQueryKey = (
-	organization: string,
-	options?: GetTemplatesOptions,
-) => [organization, "templates", options?.deprecated];
-
-const templatesByOrganization = (
-	organization: string,
-	options: GetTemplatesOptions = {},
-) => {
-	return {
-		queryKey: getTemplatesByOrganizationQueryKey(organization, options),
-		queryFn: () => API.getTemplatesByOrganization(organization, options),
-	};
-};
-
 export const templateACL = (templateId: string) => {
 	return {
 		queryKey: ["templateAcl", templateId],
@@ -121,9 +106,11 @@ export const templateExamples = () => {
 	};
 };
 
+export const templateVersionRoot: string = "templateVersion";
+
 export const templateVersion = (versionId: string) => {
 	return {
-		queryKey: ["templateVersion", versionId],
+		queryKey: [templateVersionRoot, versionId],
 		queryFn: () => API.getTemplateVersion(versionId),
 	};
 };
@@ -134,7 +121,7 @@ export const templateVersionByName = (
 	versionName: string,
 ) => {
 	return {
-		queryKey: ["templateVersion", organizationId, templateName, versionName],
+		queryKey: [templateVersionRoot, organizationId, templateName, versionName],
 		queryFn: () =>
 			API.getTemplateVersionByName(organizationId, templateName, versionName),
 	};
@@ -153,7 +140,7 @@ export const templateVersions = (templateId: string) => {
 };
 
 export const templateVersionVariablesKey = (versionId: string) => [
-	"templateVersion",
+	templateVersionRoot,
 	versionId,
 	"variables",
 ];
@@ -216,7 +203,7 @@ export const templaceACLAvailable = (
 };
 
 const templateVersionExternalAuthKey = (versionId: string) => [
-	"templateVersion",
+	templateVersionRoot,
 	versionId,
 	"externalAuth",
 ];
@@ -257,21 +244,21 @@ const createTemplateFn = async (options: CreateTemplateOptions) => {
 
 export const templateVersionLogs = (versionId: string) => {
 	return {
-		queryKey: ["templateVersion", versionId, "logs"],
+		queryKey: [templateVersionRoot, versionId, "logs"],
 		queryFn: () => API.getTemplateVersionLogs(versionId),
 	};
 };
 
 export const richParameters = (versionId: string) => {
 	return {
-		queryKey: ["templateVersion", versionId, "richParameters"],
+		queryKey: [templateVersionRoot, versionId, "richParameters"],
 		queryFn: () => API.getTemplateVersionRichParameters(versionId),
 	};
 };
 
 export const resources = (versionId: string) => {
 	return {
-		queryKey: ["templateVersion", versionId, "resources"],
+		queryKey: [templateVersionRoot, versionId, "resources"],
 		queryFn: () => API.getTemplateVersionResources(versionId),
 	};
 };
@@ -293,7 +280,7 @@ export const previousTemplateVersion = (
 ) => {
 	return {
 		queryKey: [
-			"templateVersion",
+			templateVersionRoot,
 			organizationId,
 			templateName,
 			versionName,
@@ -313,7 +300,7 @@ export const previousTemplateVersion = (
 
 export const templateVersionPresets = (versionId: string) => {
 	return {
-		queryKey: ["templateVersion", versionId, "presets"],
+		queryKey: [templateVersionRoot, versionId, "presets"],
 		queryFn: () => API.getTemplateVersionPresets(versionId),
 	};
 };

diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
@@ -16,7 +16,6 @@ import { useDebouncedFunction } from "hooks/debounce";
 import { ExternalLinkIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
-import type { useSearchParams } from "react-router-dom";
 
 type PresetFilter = {
 	name: string;
@@ -27,35 +26,55 @@ type FilterValues = Record<string, string | undefined>;
 
 type UseFilterConfig = {
 	/**
-	 * The fallback value to use in the event that no filter params can be parsed
-	 * from the search params object. This value is allowed to change on
-	 * re-renders.
+	 * The fallback value to use in the event that no filter params can be
+	 * parsed from the search params object.
 	 */
 	fallbackFilter?: string;
-	searchParamsResult: ReturnType<typeof useSearchParams>;
+	searchParams: URLSearchParams;
+	onSearchParamsChange: (newParams: URLSearchParams) => void;
 	onUpdate?: (newValue: string) => void;
 };
 
+export type UseFilterResult = Readonly<{
+	query: string;
+	values: FilterValues;
+	used: boolean;
+	update: (newValues: string | FilterValues) => void;
+	debounceUpdate: (newValues: string | FilterValues) => void;
+	cancelDebounce: () => void;
+}>;
+
 export const useFilterParamsKey = "filter";
 
 export const useFilter = ({
 	fallbackFilter = "",
-	searchParamsResult,
+	searchParams,
+	onSearchParamsChange,
 	onUpdate,
-}: UseFilterConfig) => {
-	const [searchParams, setSearchParams] = searchParamsResult;
+}: UseFilterConfig): UseFilterResult => {
 	const query = searchParams.get(useFilterParamsKey) ?? fallbackFilter;
 
 	const update = (newValues: string | FilterValues) => {
 		const serialized =
 			typeof newValues === "string" ? newValues : stringifyFilter(newValues);
+		const noUpdateNeeded = query === serialized;
+		if (noUpdateNeeded) {
+			return;
+		}
 
+		/**
+		 * @todo 2025-07-15 - We have a slightly nasty bug here, where trying to
+		 * update state the "React way" causes our code to break.
+		 *
+		 * In theory, it would be better to make a copy of the search params. We
+		 * can then mutate and dispatch the copy instead of the original. Doing
+		 * that causes other parts of our existing logic to break, though.
+		 * That's a sign that our other code is slightly broken, and only just
+		 * happens to work by chance right now.
+		 */
 		searchParams.set(useFilterParamsKey, serialized);
-		setSearchParams(searchParams);
-
-		if (onUpdate !== undefined) {
-			onUpdate(serialized);
-		}
+		onSearchParamsChange(searchParams);
+		onUpdate?.(serialized);
 	};
 
 	const { debounced: debounceUpdate, cancelDebounce } = useDebouncedFunction(
@@ -73,8 +92,6 @@ export const useFilter = ({
 	};
 };
 
-export type UseFilterResult = ReturnType<typeof useFilter>;
-
 const parseFilterQuery = (filterQuery: string): FilterValues => {
 	if (filterQuery === "") {
 		return {};

diff --git a/site/src/hooks/usePagination.ts b/site/src/hooks/usePagination.ts
@@ -1,25 +1,41 @@
 import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
-import type { useSearchParams } from "react-router-dom";
 
-export const usePagination = ({
-	searchParamsResult,
-}: {
-	searchParamsResult: ReturnType<typeof useSearchParams>;
-}) => {
-	const [searchParams, setSearchParams] = searchParamsResult;
-	const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
-	const limit = DEFAULT_RECORDS_PER_PAGE;
-	const offset = page <= 0 ? 0 : (page - 1) * limit;
+const paginationKey = "page";
 
-	const goToPage = (page: number) => {
-		searchParams.set("page", page.toString());
-		setSearchParams(searchParams);
-	};
+type UsePaginationOptions = Readonly<{
+	searchParams: URLSearchParams;
+	onSearchParamsChange: (newParams: URLSearchParams) => void;
+}>;
+
+type UsePaginationResult = Readonly<{
+	page: number;
+	limit: number;
+	offset: number;
+	goToPage: (page: number) => void;
+}>;
+
+export function usePagination(
+	options: UsePaginationOptions,
+): UsePaginationResult {
+	const { searchParams, onSearchParamsChange } = options;
+	const limit = DEFAULT_RECORDS_PER_PAGE;
+	const rawPage = Number.parseInt(searchParams.get(paginationKey) || "1", 10);
+	const page = Number.isNaN(rawPage) || rawPage <= 0 ? 1 : rawPage;
 
 	return {
 		page,
 		limit,
-		goToPage,
-		offset,
+		offset: Math.max(0, (page - 1) * limit),
+		goToPage: (newPage) => {
+			const abortNavigation =
+				page === newPage || !Number.isFinite(page) || !Number.isInteger(page);
+			if (abortNavigation) {
+				return;
+			}
+
+			const copy = new URLSearchParams(searchParams);
+			copy.set("page", page.toString());
+			onSearchParamsChange(copy);
+		},
 	};
-};
+}
diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx
@@ -1,6 +1,7 @@
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { API } from "api/api";
+import type { AuditLogsRequest } from "api/typesGenerated";
 import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
 import { http, HttpResponse } from "msw";
 import {
@@ -106,7 +107,7 @@ describe("AuditPage", () => {
 			await userEvent.type(filterField, query);
 
 			await waitFor(() =>
-				expect(getAuditLogsSpy).toBeCalledWith({
+				expect(getAuditLogsSpy).toHaveBeenCalledWith<[AuditLogsRequest]>({
 					limit: DEFAULT_RECORDS_PER_PAGE,
 					offset: 0,
 					q: query,

diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -33,7 +33,8 @@ const AuditPage: FC = () => {
 	const [searchParams, setSearchParams] = useSearchParams();
 	const auditsQuery = usePaginatedQuery(paginatedAudits(searchParams));
 	const filter = useFilter({
-		searchParamsResult: [searchParams, setSearchParams],
+		searchParams,
+		onSearchParamsChange: setSearchParams,
 		onUpdate: auditsQuery.goToFirstPage,
 	});
 

diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPage.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPage.tsx
@@ -29,7 +29,8 @@ const ConnectionLogPage: FC = () => {
 		paginatedConnectionLogs(searchParams),
 	);
 	const filter = useFilter({
-		searchParamsResult: [searchParams, setSearchParams],
+		searchParams,
+		onSearchParamsChange: setSearchParams,
 		onUpdate: connectionlogsQuery.goToFirstPage,
 	});
 

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -108,9 +108,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 	owner,
 	setOwner,
 }) => {
-	const [suggestedName, setSuggestedName] = useState(() =>
-		generateWorkspaceName(),
-	);
+	const [suggestedName, setSuggestedName] = useState(generateWorkspaceName);
 	const [showPresetParameters, setShowPresetParameters] = useState(false);
 	const id = useId();
 	const workspaceNameInputRef = useRef<HTMLInputElement>(null);
@@ -124,14 +122,14 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 	// Only touched fields are sent to the websocket
 	// Autofilled parameters are marked as touched since they have been modified
-	const initialTouched = parameters.reduce(
+	const initialTouched = parameters.reduce<Record<string, boolean>>(
 		(touched, parameter) => {
 			if (autofillByName[parameter.name] !== undefined) {
 				touched[parameter.name] = true;
 			}
 			return touched;
 		},
-		{} as Record<string, boolean>,
+		{},
 	);
 
 	// The form parameters values hold the working state of the parameters that will be submitted when creating a workspace

diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -14,10 +14,11 @@ const TemplatesPage: FC = () => {
 	const { permissions, user: me } = useAuthenticated();
 	const { showOrganizations } = useDashboard();
 
-	const searchParamsResult = useSearchParams();
+	const [searchParams, setSearchParams] = useSearchParams();
 	const filter = useFilter({
 		fallbackFilter: "deprecated:false",
-		searchParamsResult,
+		searchParams,
+		onSearchParamsChange: setSearchParams,
 		onUpdate: () => {}, // reset pagination
 	});
 

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -39,9 +39,8 @@ type UserPageProps = {
 const UsersPage: FC<UserPageProps> = ({ defaultNewPassword }) => {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
-	const searchParamsResult = useSearchParams();
+	const [searchParams, setSearchParams] = useSearchParams();
 	const { entitlements } = useDashboard();
-	const [searchParams] = searchParamsResult;
 
 	const groupsByUserIdQuery = useQuery(groupsByUserId());
 	const authMethodsQuery = useQuery(authMethods());
@@ -58,9 +57,10 @@ const UsersPage: FC<UserPageProps> = ({ defaultNewPassword }) => {
 		enabled: viewDeploymentConfig,
 	});
 
-	const usersQuery = usePaginatedQuery(paginatedUsers(searchParamsResult[0]));
+	const usersQuery = usePaginatedQuery(paginatedUsers(searchParams));
 	const useFilterResult = useFilter({
-		searchParamsResult,
+		searchParams,
+		onSearchParamsChange: setSearchParams,
 		onUpdate: usersQuery.goToFirstPage,
 	});