Feb 24, 2025 · Feb 23, 2025
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx
 import { server } from "testHelpers/server";
 import CreateTemplateGalleryPage from "./CreateTemplateGalleryPage";

 test("does not display the scratch template", async () => {
 test("displays the scratch template", async () => {
 server.use(
 http.get("api/v2/templates/examples", () => {
 return HttpResponse.json([

 await screen.findByText(MockTemplateExample.name);
 screen.getByText(MockTemplateExample2.name);
 expect(screen.queryByText("Scratch")).not.toBeInTheDocument();
 expect(screen.queryByText("Scratch")).toBeInTheDocument();
 });
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx
 import { templateExamples } from "api/queries/templates";
 import type { TemplateExample } from "api/typesGenerated";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 const CreateTemplatesGalleryPage: FC = () => {
 const templateExamplesQuery = useQuery(templateExamples());
 const starterTemplatesByTag = templateExamplesQuery.data
 ? // Currently, the scratch template should not be displayed on the starter templates page.
 getTemplatesByTag(removeScratchExample(templateExamplesQuery.data))
 ? getTemplatesByTag(templateExamplesQuery.data)
 : undefined;

 return (
 );
 };

 const removeScratchExample = (data: TemplateExample[]) => {
 return data.filter((example) => example.id !== "scratch");
 };

 export default CreateTemplatesGalleryPage;
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
 height: "max-content",
 }}
 >
 <Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
 <CardActionArea
 component={RouterLink}
 to="/templates/new?exampleId=scratch"
 sx={{ height: 115, padding: 1 }}
 >
 <CardContent>
 <Stack
 direction="row"
 spacing={3}
 css={{ alignItems: "center" }}
 >
 <div css={styles.icon}>
 <ExternalImage
 src="/emojis/1f4c4.png"
 css={{ width: "100%", height: "100%" }}
 />
 </div>
 <div>
 <h4 css={styles.cardTitle}>Scratch Template</h4>
 <span css={styles.cardDescription}>
 Create a minimal starter template that you can customize
 </span>
 </div>
 </Stack>
 </CardContent>
 </CardActionArea>
 </Card>
 <Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
 <CardActionArea
 component={RouterLink}
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
 importtype{Interpolation,Theme}from"@emotion/react";
 importtype{TemplateExample}from"api/typesGenerated";
 import{Stack}from"components/Stack/Stack";
 import{TemplateExampleCard}from"modules/templates/TemplateExampleCard/TemplateExampleCard";
 importtype{FC}from"react";
 :undefined;
 };

 constsortVisibleTemplates=(templates:TemplateExample[])=>{
 // The docker template should be the first template in the list,
 // as it's the easiest way to get started with Coder.
 constdockerTemplateId="docker";
 returntemplates.sort((a,b)=>{
 if(a.id===dockerTemplateId){
 return-1;
 }
 if(b.id===dockerTemplateId){
 return1;
 }
 returna.name.localeCompare(b.name);
 });
 };

 exportinterfaceStarterTemplatesProps{
 starterTemplatesByTag?:StarterTemplatesByTag;
 }
 :undefined;
 constactiveTag=urlParams.get("tag")??"all";
 constvisibleTemplates=starterTemplatesByTag
 ?starterTemplatesByTag[activeTag]
 ?sortVisibleTemplates(starterTemplatesByTag[activeTag])
 :undefined;

 return(
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx
 </Button>
 </MoreMenuTrigger>
 <MoreMenuContent>
 <MoreMenuItem
 onClick={() => {
 onNavigate("/templates/new?exampleId=scratch");
 }}
 >
 <NoteAddOutlined />
 From scratch
 </MoreMenuItem>
 <MoreMenuItem
 onClick={() => {
 onNavigate("/templates/new");
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ import {
		import { server } from "testHelpers/server";
		import CreateTemplateGalleryPage from "./CreateTemplateGalleryPage";

		test("does not display the scratch template", async () => {
		test("displays the scratch template", async () => {
		server.use(
		http.get("api/v2/templates/examples", () => {
		return HttpResponse.json([
Expand DownExpand Up		@@ -49,5 +49,5 @@ test("does not display the scratch template", async () => {

		await screen.findByText(MockTemplateExample.name);
		screen.getByText(MockTemplateExample2.name);
		expect(screen.queryByText("Scratch")).not.toBeInTheDocument();
		expect(screen.queryByText("Scratch")).toBeInTheDocument();
		});
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import { templateExamples } from "api/queries/templates";
		import type { TemplateExample } from "api/typesGenerated";
		import type { FC } from "react";
		import { Helmet } from "react-helmet-async";
		import { useQuery } from "react-query";
Expand All		@@ -10,8 +9,7 @@ import { CreateTemplateGalleryPageView } from "./CreateTemplateGalleryPageView";
		const CreateTemplatesGalleryPage: FC = () => {
		const templateExamplesQuery = useQuery(templateExamples());
		const starterTemplatesByTag = templateExamplesQuery.data
		? // Currently, the scratch template should not be displayed on the starter templates page.
		getTemplatesByTag(removeScratchExample(templateExamplesQuery.data))
		? getTemplatesByTag(templateExamplesQuery.data)
		: undefined;

		return (
Expand All		@@ -27,8 +25,4 @@ const CreateTemplatesGalleryPage: FC = () => {
		);
		};

		const removeScratchExample = (data: TemplateExample[]) => {
		return data.filter((example) => example.id !== "scratch");
		};

		export default CreateTemplatesGalleryPage;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,34 +41,6 @@ export const CreateTemplateGalleryPageView: FC<
		height: "max-content",
		}}
		>
		<Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
		<CardActionArea
		component={RouterLink}
		to="/templates/new?exampleId=scratch"
		sx={{ height: 115, padding: 1 }}
		>
		<CardContent>
		<Stack
		direction="row"
		spacing={3}
		css={{ alignItems: "center" }}
		>
		<div css={styles.icon}>
		<ExternalImage
		src="/emojis/1f4c4.png"
		css={{ width: "100%", height: "100%" }}
		/>
		</div>
		<div>
		<h4 css={styles.cardTitle}>Scratch Template</h4>
		<span css={styles.cardDescription}>
		Create a minimal starter template that you can customize
		</span>
		</div>
		</Stack>
		</CardContent>
		</CardActionArea>
		</Card>
		<Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
		<CardActionArea
		component={RouterLink}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		importtype{Interpolation,Theme}from"@emotion/react";
		importtype{TemplateExample}from"api/typesGenerated";
		import{Stack}from"components/Stack/Stack";
		import{TemplateExampleCard}from"modules/templates/TemplateExampleCard/TemplateExampleCard";
		importtype{FC}from"react";
Expand All		@@ -21,6 +22,21 @@ const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
		:undefined;
		};

		constsortVisibleTemplates=(templates:TemplateExample[])=>{
		// The docker template should be the first template in the list,
		// as it's the easiest way to get started with Coder.
		constdockerTemplateId="docker";
		returntemplates.sort((a,b)=>{
		if(a.id===dockerTemplateId){
		return-1;
		}
		if(b.id===dockerTemplateId){
		return1;
		}
		returna.name.localeCompare(b.name);
		});
		};

		exportinterfaceStarterTemplatesProps{
		starterTemplatesByTag?:StarterTemplatesByTag;
		}
Expand All		@@ -34,7 +50,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
		:undefined;
		constactiveTag=urlParams.get("tag")??"all";
		constvisibleTemplates=starterTemplatesByTag
		?starterTemplatesByTag[activeTag]
		?sortVisibleTemplates(starterTemplatesByTag[activeTag])
		:undefined;

		return(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,14 +26,6 @@ export const CreateTemplateButton: FC<CreateTemplateButtonProps> = ({
		</Button>
		</MoreMenuTrigger>
		<MoreMenuContent>
		<MoreMenuItem
		onClick={() => {
		onNavigate("/templates/new?exampleId=scratch");
		}}
		>
		<NoteAddOutlined />
		From scratch
		</MoreMenuItem>
		<MoreMenuItem
		onClick={() => {
		onNavigate("/templates/new");
Expand Down