fix(site/src): gate TemplateExampleCard Use template link on builder state (#28035)

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,
+	},
+};

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>

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}
 			/>
 		</>
 	);

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;

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>
 	);

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"
 					/>
 				))}

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">