Change default template page tabs - Docs first, rename Summary to Resources

site/src/pages/TemplatePage/TemplateLayout.tsx

@@ -92,7 +92,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
 
 	const location = useLocation();
 	const paths = location.pathname.split("/");
-	const activeTab = paths.at(-1) === templateName ? "summary" : paths.at(-1)!;
+	const activeTab = paths.at(-1) === templateName ? "docs" : paths.at(-1)!;
 	// Auditors should also be able to view insights, but do not automatically
 	// have permission to update templates. Need both checks.
 	const shouldShowInsights =
@@ -127,12 +127,12 @@ 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">
+						<TabLink to="" value="docs">
 							Docs
 						</TabLink>
+						<TabLink to="resources" value="resources">
+							Resources
+						</TabLink>
 						{data.permissions.canUpdateTemplate && (
 							<TabLink to="files" value="files">
 								Source Code

site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPage.tsx

@@ -0,0 +1,30 @@
+import { API } from "api/api";
+import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
+import type { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { useQuery } from "react-query";
+import { getTemplatePageTitle } from "../utils";
+import { TemplateResourcesPageView } from "./TemplateResourcesPageView";
+
+export const TemplateResourcesPage: FC = () => {
+	const { template, activeVersion } = useTemplateLayoutContext();
+	const { data: resources } = useQuery({
+		queryKey: ["templates", template.id, "resources"],
+		queryFn: () => API.getTemplateVersionResources(activeVersion.id),
+	});
+
+	return (
+		<>
+			<Helmet>
+				<title>{getTemplatePageTitle("Resources", template)}</title>
+			</Helmet>
+			<TemplateResourcesPageView
+				resources={resources}
+				template={template}
+				activeVersion={activeVersion}
+			/>
+		</>
+	);
+};
+
+export default TemplateResourcesPage;

site/src/pages/TemplatePage/TemplateResourcesPage/TemplateResourcesPageView.tsx

@@ -0,0 +1,52 @@
+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 "../TemplateSummaryPage/TemplateStats";
+
+export interface TemplateResourcesPageViewProps {
+	resources?: WorkspaceResource[];
+	template: Template;
+	activeVersion: TemplateVersion;
+}
+
+export const TemplateResourcesPageView: FC<TemplateResourcesPageViewProps> = ({
+	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>
+	);
+};

site/src/router.tsx

@@ -92,8 +92,8 @@ 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,8 +329,8 @@ const templateRouter = () => {
 		<Route path=":template">
 			<Route element={<TemplateRedirectController />}>
 				<Route element={<TemplateLayout />}>
-					<Route index element={<TemplateSummaryPage />} />
-					<Route path="docs" element={<TemplateDocsPage />} />
+					<Route index element={<TemplateDocsPage />} />
+					<Route path="resources" element={<TemplateResourcesPage />} />
 					<Route path="files" element={<TemplateFilesPage />} />
 					<Route path="versions" element={<TemplateVersionsPage />} />
 					<Route path="embed" element={<TemplateEmbedPage />} />