diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.test.tsx index 49c007724aecf..61cf4d353e053 100644 --- 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 index 695dd3bfdfc75..e3f1de37a3a3e 100644 --- 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 index d34054e9be764..bfa482ac55b94 100644 --- 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", }} > - - - - -
- -
-
-

Scratch Template

- - Create a minimal starter template that you can customize - -
-
-
-
-
{ : 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 = ({ : 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 index c0ba5e2734643..069fe2abb7b74 100644 --- a/site/src/pages/TemplatesPage/CreateTemplateButton.tsx +++ b/site/src/pages/TemplatesPage/CreateTemplateButton.tsx @@ -26,14 +26,6 @@ export const CreateTemplateButton: FC = ({ - { - onNavigate("/templates/new?exampleId=scratch"); - }} - > - - From scratch - { onNavigate("/templates/new"); diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx deleted file mode 100644 index a2da34e127fa9..0000000000000 --- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { AppProviders } from "App"; -import { RequireAuth } from "contexts/auth/RequireAuth"; -import { RouterProvider, createMemoryRouter } from "react-router-dom"; -import TemplatesPage from "./TemplatesPage"; - -test("create template from scratch", async () => { - const user = userEvent.setup(); - const router = createMemoryRouter( - [ - { - element: , - children: [ - { - path: "/templates", - element: , - }, - { - path: "/templates/new", - element:
, - }, - ], - }, - ], - { initialEntries: ["/templates"] }, - ); - render( - - - , - ); - const createTemplateButton = await screen.findByRole("button", { - name: "Create Template", - }); - await user.click(createTemplateButton); - const fromScratchMenuItem = await screen.findByText("From scratch"); - await user.click(fromScratchMenuItem); - await screen.findByTestId("new-template-page"); - expect(router.state.location.pathname).toBe("/templates/new"); - expect(router.state.location.search).toBe("?exampleId=scratch"); -});