refactor: extract TemplateInsightsControls component

aqandrew · aqandrew · commit 244792ab446a · 2025-09-04T00:55:10.000Z
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsControls.stories.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsControls.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ComponentProps } from "react";
+import { TemplateInsightsControls } from "./TemplateInsightsPage";
+
+const meta: Meta<typeof TemplateInsightsControls> = {
+	title: "pages/TemplatePage/TemplateInsightsControls",
+	component: TemplateInsightsControls,
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateInsightsControls>;
+
+const defaultArgs: Partial<ComponentProps<typeof TemplateInsightsControls>> = {
+	dateRange: { startDate: new Date(), endDate: new Date() },
+	setDateRange: () => {},
+	searchParams: new URLSearchParams(),
+	setSearchParams: () => {},
+};
+
+export const Day: Story = {
+	args: {
+		...defaultArgs,
+		interval: "day",
+	},
+};
+
+export const Week: Story = {
+	args: {
+		...defaultArgs,
+		interval: "week",
+	},
+};
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -47,7 +47,7 @@ import {
 } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
-import { useSearchParams } from "react-router";
+import { type SetURLSearchParams, useSearchParams } from "react-router";
 import { getLatencyColor } from "utils/latency";
 import {
 	addTime,
@@ -105,24 +105,13 @@ export default function TemplateInsightsPage() {
 			</Helmet>
 			<TemplateInsightsPageView
 				controls={
-					<>
-						<IntervalMenu
-							value={interval}
-							onChange={(interval) => {
-								// When going from daily to week we need to set a safe week range
-								if (interval === "week") {
-									setDateRange(lastWeeks(DEFAULT_NUMBER_OF_WEEKS));
-								}
-								searchParams.set("interval", interval);
-								setSearchParams(searchParams);
-							}}
-						/>
-						{interval === "day" ? (
-							<DailyPicker value={dateRange} onChange={setDateRange} />
-						) : (
-							<WeekPicker value={dateRange} onChange={setDateRange} />
-						)}
-					</>
+					<TemplateInsightsControls
+						interval={interval}
+						dateRange={dateRange}
+						setDateRange={setDateRange}
+						searchParams={searchParams}
+						setSearchParams={setSearchParams}
+					/>
 				}
 				templateInsights={templateInsights}
 				userLatency={userLatency}
@@ -134,6 +123,43 @@ export default function TemplateInsightsPage() {
 	);
 }
 
+interface TemplateInsightsControlsProps {
+	interval: "day" | "week";
+	dateRange: DateRangeValue;
+	setDateRange: (value: DateRangeValue) => void;
+	searchParams: URLSearchParams;
+	setSearchParams: SetURLSearchParams;
+}
+
+export const TemplateInsightsControls: FC<TemplateInsightsControlsProps> = ({
+	interval,
+	dateRange,
+	setDateRange,
+	searchParams,
+	setSearchParams,
+}) => {
+	return (
+		<>
+			<IntervalMenu
+				value={interval}
+				onChange={(interval) => {
+					// When going from daily to week we need to set a safe week range
+					if (interval === "week") {
+						setDateRange(lastWeeks(DEFAULT_NUMBER_OF_WEEKS));
+					}
+					searchParams.set("interval", interval);
+					setSearchParams(searchParams);
+				}}
+			/>
+			{interval === "day" ? (
+				<DailyPicker value={dateRange} onChange={setDateRange} />
+			) : (
+				<WeekPicker value={dateRange} onChange={setDateRange} />
+			)}
+		</>
+	);
+};
+
 const getDefaultInterval = (template: Template) => {
 	const now = new Date();
 	const templateCreateDate = new Date(template.created_at);
