Display starter templates

BrunoQuaresma · BrunoQuaresma · commit 86350be74cbf · 2022-12-08T15:01:59.000Z
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -92,6 +92,9 @@ const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
 const TemplateVersionPage = lazy(
   () => import("./pages/TemplateVersionPage/TemplateVersionPage"),
 )
+const StarterTemplatesPage = lazy(
+  () => import("./pages/StarterTemplatesPage/StarterTemplatesPage"),
+)
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -141,6 +144,17 @@ export const AppRouter: FC = () => {
           }
         />
 
+        <Route path="starter-templates">
+          <Route
+            index
+            element={
+              <AuthAndFrame>
+                <StarterTemplatesPage />
+              </AuthAndFrame>
+            }
+          />
+        </Route>
+
         <Route path="templates">
           <Route
             index
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -675,3 +675,12 @@ export const setServiceBanner = async (
   const response = await axios.put(`/api/v2/service-banner`, b)
   return response.data
 }
+
+export const getTemplateExamples = async (
+  organizationId: string,
+): Promise<TypesGen.TemplateExample[]> => {
+  const response = await axios.get(
+    `/api/v2/organizations/${organizationId}/templates/examples`,
+  )
+  return response.data
+}
diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts
@@ -12,6 +12,7 @@ import templateVersionPage from "./templateVersionPage.json"
 import loginPage from "./loginPage.json"
 import workspaceChangeVersionPage from "./workspaceChangeVersionPage.json"
 import serviceBannerSettings from "./serviceBannerSettings.json"
+import starterTemplatesPage from "./starterTemplatesPage.json"
 
 export const en = {
   common,
@@ -28,4 +29,5 @@ export const en = {
   loginPage,
   workspaceChangeVersionPage,
   serviceBannerSettings,
+  starterTemplatesPage,
 }
diff --git a/site/src/i18n/en/starterTemplatesPage.json b/site/src/i18n/en/starterTemplatesPage.json
@@ -0,0 +1,4 @@
+{
+  "title": "Starter Templates",
+  "subtitle": "Pick one of the built-in templates to start using Coder"
+}
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx
@@ -0,0 +1,28 @@
+import { useMachine } from "@xstate/react"
+import { useOrganizationId } from "hooks/useOrganizationId"
+import { FC } from "react"
+import { Helmet } from "react-helmet-async"
+import { useTranslation } from "react-i18next"
+import { pageTitle } from "util/page"
+import { starterTemplatesMachine } from "xServices/starterTemplates/starterTemplatesXService"
+import { StarterTemplatesPageView } from "./StarterTemplatesPageView"
+
+const StarterTemplatesPage: FC = () => {
+  const { t } = useTranslation("starterTemplatesPage")
+  const organizationId = useOrganizationId()
+  const [state] = useMachine(starterTemplatesMachine, {
+    context: { organizationId },
+  })
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle(t("title"))}</title>
+      </Helmet>
+
+      <StarterTemplatesPageView context={state.context} />
+    </>
+  )
+}
+
+export default StarterTemplatesPage
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
@@ -0,0 +1,39 @@
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { Maybe } from "components/Conditionals/Maybe"
+import { Margins } from "components/Margins/Margins"
+import {
+  PageHeader,
+  PageHeaderSubtitle,
+  PageHeaderTitle,
+} from "components/PageHeader/PageHeader"
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { StarterTemplatesContext } from "xServices/starterTemplates/starterTemplatesXService"
+
+export interface StarterTemplatesPageViewProps {
+  context: StarterTemplatesContext
+}
+
+export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
+  context,
+}) => {
+  const { t } = useTranslation("starterTemplatesPage")
+
+  return (
+    <Margins>
+      <PageHeader>
+        <PageHeaderTitle>{t("title")}</PageHeaderTitle>
+        <PageHeaderSubtitle>{t("subtitle")}</PageHeaderSubtitle>
+      </PageHeader>
+
+      <Maybe condition={Boolean(context.error)}>
+        <AlertBanner error={context.error} severity="error" />
+      </Maybe>
+
+      {context.starterTemplates &&
+        context.starterTemplates.map((example) => (
+          <div key={example.id}>{example.name}</div>
+        ))}
+    </Margins>
+  )
+}
diff --git a/site/src/xServices/starterTemplates/starterTemplatesXService.ts b/site/src/xServices/starterTemplates/starterTemplatesXService.ts
@@ -0,0 +1,62 @@
+import { getTemplateExamples } from "api/api"
+import { TemplateExample } from "api/typesGenerated"
+import { assign, createMachine } from "xstate"
+
+export interface StarterTemplatesContext {
+  organizationId: string
+  starterTemplates?: TemplateExample[]
+  error?: unknown
+}
+
+export const starterTemplatesMachine = createMachine(
+  {
+    id: "starterTemplates",
+    predictableActionArguments: true,
+    schema: {
+      context: {} as StarterTemplatesContext,
+      services: {} as {
+        loadStarterTemplates: {
+          data: TemplateExample[]
+        }
+      },
+    },
+    tsTypes: {} as import("./starterTemplatesXService.typegen").Typegen0,
+    initial: "loading",
+    states: {
+      loading: {
+        invoke: {
+          src: "loadStarterTemplates",
+          onDone: {
+            actions: ["assignStarterTemplates"],
+            target: "idle.ok",
+          },
+          onError: {
+            actions: ["assignError"],
+            target: "idle.error",
+          },
+        },
+      },
+      idle: {
+        initial: "ok",
+        states: {
+          ok: { type: "final" },
+          error: { type: "final" },
+        },
+      },
+    },
+  },
+  {
+    services: {
+      loadStarterTemplates: ({ organizationId }) =>
+        getTemplateExamples(organizationId),
+    },
+    actions: {
+      assignError: assign({
+        error: (_, { data }) => data,
+      }),
+      assignStarterTemplates: assign({
+        starterTemplates: (_, { data }) => data,
+      }),
+    },
+  },
+)

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "title": "Starter Templates",
 +  "subtitle": "Pick one of the built-in templates to start using Coder"
 +}