coder · aslilac · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
@@ -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>

@@ -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>
 	);
 };
@@ -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;
@@ -1,32 +1,29 @@
 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],
 	},
 };
 
 export const NoIcon: Story = {
 	args: {
 		template: { ...MockTemplate, icon: "" },
-		activeVersion: MockTemplateVersion,
 		resources: [MockWorkspaceResource, MockWorkspaceVolumeResource],
 	},
 };
@@ -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)} />;
+};
@@ -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 />} />