From e9ee83af69bb3bd9b26589072b288a9d3ed7dee8 Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Date: Tue, 11 Aug 2026 14:30:37 -0400
Subject: [PATCH] fix(site/src): gate TemplateExampleCard Use template link on
 builder state (#28035)

---
 .../TemplateExampleCard.stories.tsx                    |  7 +++++++
 .../TemplateExampleCard/TemplateExampleCard.tsx        | 10 +++++++---
 .../CreateTemplateGalleryPage.tsx                      |  6 ++++++
 .../CreateTemplateGalleryPageView.stories.tsx          |  3 +++
 .../CreateTemplateGalleryPageView.tsx                  |  8 ++++++--
 .../CreateTemplateGalleryPage/StarterTemplates.tsx     |  3 +++
 site/src/pages/TemplatesPage/EmptyTemplates.tsx        |  6 +++++-
 7 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx
index 39b9dcb7f3..0a8fd9bb9d 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx
@@ -10,6 +10,7 @@ const meta: Meta<typeof TemplateExampleCard> = {
 	component: TemplateExampleCard,
 	args: {
 		example: MockTemplateExample,
+		templateBuilderEnabled: true,
 	},
 };
 
@@ -32,3 +33,9 @@ export const LotsOfTags: Story = {
 		},
 	},
 };
+
+export const TemplateBuilderDisabled: Story = {
+	args: {
+		templateBuilderEnabled: false,
+	},
+};
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 51d40e2cba..52f40f0480 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -10,14 +10,20 @@ import { cn } from "#/utils/cn";
 type TemplateExampleCardProps = HTMLAttributes<HTMLDivElement> & {
 	example: TemplateExample;
 	activeTag?: string;
+	templateBuilderEnabled?: boolean;
 };
 
 export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	example,
 	activeTag,
+	templateBuilderEnabled,
 	className,
 	...divProps
 }) => {
+	const useTemplateLink = templateBuilderEnabled
+		? `/templates/new/builder?base=${example.id}`
+		: `/templates/new?exampleId=${example.id}`;
+
 	return (
 		<div
 			className={cn(
@@ -66,9 +72,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 
 			<div className="mt-auto flex flex-col items-center gap-3 pt-6">
 				<Button asChild className="w-full">
-					<RouterLink to={`/templates/new/builder?base=${example.id}`}>
-						Use template
-					</RouterLink>
+					<RouterLink to={useTemplateLink}>Use template</RouterLink>
 				</Button>
 			</div>
 		</div>
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx
index 57d389c527..41c4302041 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx
@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import { useQuery } from "react-query";
+import { deploymentConfig } from "#/api/queries/deployment";
 import { templateExamples } from "#/api/queries/templates";
 import { pageTitle } from "#/utils/page";
 import { getTemplatesByTag } from "#/utils/starterTemplates";
@@ -11,6 +12,10 @@ const CreateTemplatesGalleryPage: FC = () => {
 		? getTemplatesByTag(templateExamplesQuery.data)
 		: undefined;
 
+	const { data: deploymentConfigData } = useQuery(deploymentConfig());
+	const builderDisabled =
+		deploymentConfigData?.config?.template_builder?.disabled ?? false;
+
 	return (
 		<>
 			<title>{pageTitle("Create a Template")}</title>
@@ -18,6 +23,7 @@ const CreateTemplatesGalleryPage: FC = () => {
 			<CreateTemplateGalleryPageView
 				error={templateExamplesQuery.error}
 				starterTemplatesByTag={starterTemplatesByTag}
+				templateBuilderEnabled={!builderDisabled}
 			/>
 		</>
 	);
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx
index 90d99f4b77..c18ff29d69 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx
@@ -10,6 +10,9 @@ import { CreateTemplateGalleryPageView } from "./CreateTemplateGalleryPageView";
 const meta: Meta<typeof CreateTemplateGalleryPageView> = {
 	title: "pages/CreateTemplateGalleryPage",
 	component: CreateTemplateGalleryPageView,
+	args: {
+		templateBuilderEnabled: true,
+	},
 };
 
 export default meta;
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
index d65f915cdf..33e61c7042 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -15,12 +15,13 @@ import { StarterTemplates } from "./StarterTemplates";
 
 interface CreateTemplateGalleryPageViewProps {
 	starterTemplatesByTag?: StarterTemplatesByTag;
+	templateBuilderEnabled: boolean;
 	error?: unknown;
 }
 
 export const CreateTemplateGalleryPageView: FC<
 	CreateTemplateGalleryPageViewProps
-> = ({ starterTemplatesByTag, error }) => {
+> = ({ starterTemplatesByTag, templateBuilderEnabled, error }) => {
 	return (
 		<Margins className="pb-12">
 			<PageHeader
@@ -87,7 +88,10 @@ export const CreateTemplateGalleryPageView: FC<
 
 				{Boolean(!starterTemplatesByTag) && <Loader />}
 
-				<StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
+				<StarterTemplates
+					starterTemplatesByTag={starterTemplatesByTag}
+					templateBuilderEnabled={templateBuilderEnabled}
+				/>
 			</div>
 		</Margins>
 	);
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
index 0bca816c47..b8d7c1500d 100644
--- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -48,10 +48,12 @@ const sortVisibleTemplates = (templates: TemplateExample[]) => {
 
 interface StarterTemplatesProps {
 	starterTemplatesByTag?: StarterTemplatesByTag;
+	templateBuilderEnabled: boolean;
 }
 
 export const StarterTemplates: FC<StarterTemplatesProps> = ({
 	starterTemplatesByTag,
+	templateBuilderEnabled,
 }) => {
 	const [urlParams] = useSearchParams();
 	const tags = starterTemplatesByTag
@@ -95,6 +97,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 						example={example}
 						key={example.id}
 						activeTag={activeTag}
+						templateBuilderEnabled={templateBuilderEnabled}
 						className="bg-surface-primary"
 					/>
 				))}
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index c8680ad404..ed44696279 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -76,7 +76,11 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 					<div className="flex flex-col gap-8 items-center">
 						<div className="flex flex-wrap justify-center gap-4">
 							{featuredExamples.map((example) => (
-								<TemplateExampleCard example={example} key={example.id} />
+								<TemplateExampleCard
+									example={example}
+									key={example.id}
+									templateBuilderEnabled={templateBuilderEnabled}
+								/>
 							))}
 						</div>
 						<Button size="sm" asChild className="rounded-full">