chore: reduce prominence of Scratch starter and emphasize Docker in UI (#16665)

hugodutka · web-flow · commit c8abf58e29a5 · 2025-02-24T20:59:21.000+01:00
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx
@@ -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([
@@ -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();
 });
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx
@@ -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";
@@ -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 (
@@ -27,8 +25,4 @@ const CreateTemplatesGalleryPage: FC = () => {
 	);
 };
 
-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
@@ -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}
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -1,4 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import type { TemplateExample } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
 import type { FC } from "react";
@@ -21,6 +22,21 @@ const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
 		: undefined;
 };
 
+const sortVisibleTemplates = (templates: TemplateExample[]) => {
+	// The docker template should be the first template in the list,
+	// as it's the easiest way to get started with Coder.
+	const dockerTemplateId = "docker";
+	return templates.sort((a, b) => {
+		if (a.id === dockerTemplateId) {
+			return -1;
+		}
+		if (b.id === dockerTemplateId) {
+			return 1;
+		}
+		return a.name.localeCompare(b.name);
+	});
+};
+
 export interface StarterTemplatesProps {
 	starterTemplatesByTag?: StarterTemplatesByTag;
 }
@@ -34,7 +50,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 		: undefined;
 	const activeTag = urlParams.get("tag") ?? "all";
 	const visibleTemplates = starterTemplatesByTag
-		? starterTemplatesByTag[activeTag]
+		? sortVisibleTemplates(starterTemplatesByTag[activeTag])
 		: undefined;
 
 	return (
diff --git a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx
@@ -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");
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
