From 70ea6788db7ab1459bd9524be979726194a93720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= <mckayla@hey.com>
Date: Tue, 29 Apr 2025 15:12:39 -0700
Subject: [PATCH] chore: make the template docs view the default (#17606)

---
 .../src/pages/TemplatePage/TemplateLayout.tsx |  7 +--
 .../pages/TemplatePage/TemplatePageHeader.tsx |  4 ++
 .../TemplateResourcesPage.tsx}                | 12 ++---
 .../TemplateResourcesPageView.stories.tsx}    | 13 ++---
 .../TemplateResourcesPageView.tsx             | 32 ++++++++++++
 .../TemplateStats.stories.tsx                 |  0
 .../TemplateStats.tsx                         |  0
 .../TemplateSummaryPageView.tsx               | 52 -------------------
 site/src/router.tsx                           |  8 +--
 9 files changed, 54 insertions(+), 74 deletions(-)
 rename site/src/pages/TemplatePage/{TemplateSummaryPage/TemplateSummaryPage.tsx => TemplateResourcesPage/TemplateResourcesPage.tsx} (69%)
 rename site/src/pages/TemplatePage/{TemplateSummaryPage/TemplateSummaryPageView.stories.tsx => TemplateResourcesPage/TemplateResourcesPageView.stories.tsx} (57%)
 create mode 100644 site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx
 rename site/src/pages/TemplatePage/{TemplateSummaryPage => }/TemplateStats.stories.tsx (100%)
 rename site/src/pages/TemplatePage/{TemplateSummaryPage => }/TemplateStats.tsx (100%)
 delete mode 100644 site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx

diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx
index d81c215697..c36a5bca18 100644
--- a/site/src/pages/TemplatePage/TemplateLayout.tsx
+++ b/site/src/pages/TemplatePage/TemplateLayout.tsx
@@ -20,6 +20,7 @@ import {
 import { useQuery } from "react-query";
 import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
 import { TemplatePageHeader } from "./TemplatePageHeader";
+import { TemplateStats } from "./TemplateStats";
 
 const templatePermissions = (
 	templateId: string,
@@ -132,9 +133,6 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
 			<Tabs active={activeTab} className="mb-10 -mt-3">
 				<Margins>
 					<TabsList>
-						<TabLink to="" value="summary">
-							Summary
-						</TabLink>
 						<TabLink to="docs" value="docs">
 							Docs
 						</TabLink>
@@ -143,6 +141,9 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
 								Source Code
 							</TabLink>
 						)}
+						<TabLink to="resources" value="resources">
+							Resources
+						</TabLink>
 						<TabLink to="versions" value="versions">
 							Versions
 						</TabLink>
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 98e9fc6df3..e9970df30c 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -35,6 +35,7 @@ import type { WorkspacePermissions } from "modules/permissions/workspaces";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { TemplateStats } from "./TemplateStats";
 import { useDeletionDialogState } from "./useDeletionDialogState";
 
 type TemplateMenuProps = {
@@ -238,6 +239,9 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 					</div>
 				</Stack>
 			</PageHeader>
+			<div className="pb-8">
+				<TemplateStats template={template} activeVersion={activeVersion} />
+			</div>
 		</Margins>
 	);
 };
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx
similarity index 69%
rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
rename to site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx
index d118ce0a3e..d75c884b52 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx
@@ -4,9 +4,9 @@ import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { getTemplatePageTitle } from "../utils";
-import { TemplateSummaryPageView } from "./TemplateSummaryPageView";
+import { TemplateResourcesPageView } from "./TemplateResourcesPageView";
 
-export const TemplateSummaryPage: FC = () => {
+export const TemplateResourcesPage: FC = () => {
 	const { template, activeVersion } = useTemplateLayoutContext();
 	const { data: resources } = useQuery({
 		queryKey: ["templates", template.id, "resources"],
@@ -18,13 +18,9 @@ export const TemplateSummaryPage: FC = () => {
 			<Helmet>
 				<title>{getTemplatePageTitle("Template", template)}</title>
 			</Helmet>
-			<TemplateSummaryPageView
-				resources={resources}
-				template={template}
-				activeVersion={activeVersion}
-			/>
+			<TemplateResourcesPageView resources={resources} template={template} />
 		</>
 	);
 };
 
-export default TemplateSummaryPage;
+export default TemplateResourcesPage;
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx
similarity index 57%
rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
rename to site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx
index 1cc281334f..2ad817348b 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
+++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.stories.tsx
@@ -1,24 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
 	MockTemplate,
-	MockTemplateVersion,
 	MockWorkspaceResource,
 	MockWorkspaceVolumeResource,
 } from "testHelpers/entities";
-import { TemplateSummaryPageView } from "./TemplateSummaryPageView";
+import { TemplateResourcesPageView } from "./TemplateResourcesPageView";
 
-const meta: Meta<typeof TemplateSummaryPageView> = {
-	title: "pages/TemplatePage/TemplateSummaryPageView",
-	component: TemplateSummaryPageView,
+const meta: Meta<typeof TemplateResourcesPageView> = {
+	title: "pages/TemplatePage/TemplateResourcesPageView",
+	component: TemplateResourcesPageView,
 };
 
 export default meta;
-type Story = StoryObj<typeof TemplateSummaryPageView>;
+type Story = StoryObj<typeof TemplateResourcesPageView>;
 
 export const Example: Story = {
 	args: {
 		template: MockTemplate,
-		activeVersion: MockTemplateVersion,
 		resources: [MockWorkspaceResource, MockWorkspaceVolumeResource],
 	},
 };
@@ -26,7 +24,6 @@ export const Example: Story = {
 export const NoIcon: Story = {
 	args: {
 		template: { ...MockTemplate, icon: "" },
-		activeVersion: MockTemplateVersion,
 		resources: [MockWorkspaceResource, MockWorkspaceVolumeResource],
 	},
 };
diff --git a/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx
new file mode 100644
index 0000000000..d17796b41d
--- /dev/null
+++ b/site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx
@@ -0,0 +1,32 @@
+import type { Template, WorkspaceResource } from "api/typesGenerated";
+import { Loader } from "components/Loader/Loader";
+import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable";
+import type { FC } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+export interface TemplateResourcesPageViewProps {
+	resources?: WorkspaceResource[];
+	template: Template;
+}
+
+export const TemplateResourcesPageView: FC<TemplateResourcesPageViewProps> = ({
+	resources,
+}) => {
+	const location = useLocation();
+
+	if (location.hash === "#readme") {
+		return <Navigate to="docs" replace />;
+	}
+
+	if (!resources) {
+		return <Loader />;
+	}
+
+	const getStartedResources = (resources: WorkspaceResource[]) => {
+		return resources.filter(
+			(resource) => resource.workspace_transition === "start",
+		);
+	};
+
+	return <TemplateResourcesTable resources={getStartedResources(resources)} />;
+};
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx b/site/src/pages/TemplatePage/TemplateStats.stories.tsx
similarity index 100%
rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx
rename to site/src/pages/TemplatePage/TemplateStats.stories.tsx
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx b/site/src/pages/TemplatePage/TemplateStats.tsx
similarity index 100%
rename from site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx
rename to site/src/pages/TemplatePage/TemplateStats.tsx
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
deleted file mode 100644
index c113302770..0000000000
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type {
-	Template,
-	TemplateVersion,
-	WorkspaceResource,
-} from "api/typesGenerated";
-import { Loader } from "components/Loader/Loader";
-import { Stack } from "components/Stack/Stack";
-import { TemplateResourcesTable } from "modules/templates/TemplateResourcesTable/TemplateResourcesTable";
-import { type FC, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { TemplateStats } from "./TemplateStats";
-
-export interface TemplateSummaryPageViewProps {
-	resources?: WorkspaceResource[];
-	template: Template;
-	activeVersion: TemplateVersion;
-}
-
-export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
-	resources,
-	template,
-	activeVersion,
-}) => {
-	const navigate = useNavigate();
-	const location = useLocation();
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: consider refactoring
-	useEffect(() => {
-		if (location.hash === "#readme") {
-			// We moved the readme to the docs page, but we known that some users
-			// have bookmarked the readme or linked it elsewhere. Redirect them to the docs page.
-			navigate("docs", { replace: true });
-		}
-	}, [template, navigate, location]);
-
-	if (!resources) {
-		return <Loader />;
-	}
-
-	const getStartedResources = (resources: WorkspaceResource[]) => {
-		return resources.filter(
-			(resource) => resource.workspace_transition === "start",
-		);
-	};
-
-	return (
-		<Stack spacing={4}>
-			<TemplateStats template={template} activeVersion={activeVersion} />
-			<TemplateResourcesTable resources={getStartedResources(resources)} />
-		</Stack>
-	);
-};
diff --git a/site/src/router.tsx b/site/src/router.tsx
index cd7cd56b69..76e9adfd00 100644
--- a/site/src/router.tsx
+++ b/site/src/router.tsx
@@ -92,8 +92,9 @@ const TemplatePermissionsPage = lazy(
 			"./pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage"
 		),
 );
-const TemplateSummaryPage = lazy(
-	() => import("./pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage"),
+const TemplateResourcesPage = lazy(
+	() =>
+		import("./pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage"),
 );
 const CreateWorkspaceExperimentRouter = lazy(
 	() => import("./pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter"),
@@ -329,9 +330,10 @@ const templateRouter = () => {
 		<Route path=":template">
 			<Route element={<TemplateRedirectController />}>
 				<Route element={<TemplateLayout />}>
-					<Route index element={<TemplateSummaryPage />} />
+					<Route index element={<Navigate to="docs" replace />} />
 					<Route path="docs" element={<TemplateDocsPage />} />
 					<Route path="files" element={<TemplateFilesPage />} />
+					<Route path="resources" element={<TemplateResourcesPage />} />
 					<Route path="versions" element={<TemplateVersionsPage />} />
 					<Route path="embed" element={<TemplateEmbedPage />} />
 					<Route path="insights" element={<TemplateInsightsPage />} />