feat: Add template version page (#5071)

coderd/coderd.go

@@ -340,7 +340,10 @@ func New(options *Options) *API {
 					httpmw.ExtractOrganizationParam(options.Database),
 				)
 				r.Get("/", api.organization)
-				r.Post("/templateversions", api.postTemplateVersionsByOrganization)
+				r.Route("/templateversions", func(r chi.Router) {
+					r.Post("/", api.postTemplateVersionsByOrganization)
+					r.Get("/{templateversionname}", api.templateVersionByOrganizationAndName)
+				})
 				r.Route("/templates", func(r chi.Router) {
 					r.Post("/", api.postTemplateByOrganization)
 					r.Get("/", api.templatesByOrganization)

coderd/coderdtest/authorize.go

@@ -238,10 +238,11 @@ func AGPLRoutes(a *AuthTester) (map[string]string, map[string]RouteCheck) {
 		"GET:/api/v2/applications/auth-redirect": {AssertAction: rbac.ActionCreate, AssertObject: rbac.ResourceAPIKey},
 
 		// These endpoints need payloads to get to the auth part. Payloads will be required
-		"PUT:/api/v2/users/{user}/roles":                                {StatusCode: http.StatusBadRequest, NoAuthorize: true},
-		"PUT:/api/v2/organizations/{organization}/members/{user}/roles": {NoAuthorize: true},
-		"POST:/api/v2/workspaces/{workspace}/builds":                    {StatusCode: http.StatusBadRequest, NoAuthorize: true},
-		"POST:/api/v2/organizations/{organization}/templateversions":    {StatusCode: http.StatusBadRequest, NoAuthorize: true},
+		"PUT:/api/v2/users/{user}/roles":                                                  {StatusCode: http.StatusBadRequest, NoAuthorize: true},
+		"PUT:/api/v2/organizations/{organization}/members/{user}/roles":                   {NoAuthorize: true},
+		"POST:/api/v2/workspaces/{workspace}/builds":                                      {StatusCode: http.StatusBadRequest, NoAuthorize: true},
+		"POST:/api/v2/organizations/{organization}/templateversions":                      {StatusCode: http.StatusBadRequest, NoAuthorize: true},
+		"GET:/api/v2/organizations/{organization}/templateversions/{templateversionname}": {StatusCode: http.StatusBadRequest, NoAuthorize: true},
 
 		// Endpoints that use the SQLQuery filter.
 		"GET:/api/v2/workspaces/": {StatusCode: http.StatusOK, NoAuthorize: true},

coderd/database/databasefake/databasefake.go

@@ -1471,6 +1471,22 @@ func (q *fakeQuerier) GetTemplateVersionByTemplateIDAndName(_ context.Context, a
 	return database.TemplateVersion{}, sql.ErrNoRows
 }
 
+func (q *fakeQuerier) GetTemplateVersionByOrganizationAndName(_ context.Context, arg database.GetTemplateVersionByOrganizationAndNameParams) (database.TemplateVersion, error) {
+	q.mutex.RLock()
+	defer q.mutex.RUnlock()
+
+	for _, templateVersion := range q.templateVersions {
+		if templateVersion.OrganizationID != arg.OrganizationID {
+			continue
+		}
+		if !strings.EqualFold(templateVersion.Name, arg.Name) {
+			continue
+		}
+		return templateVersion, nil
+	}
+	return database.TemplateVersion{}, sql.ErrNoRows
+}
+
 func (q *fakeQuerier) GetTemplateVersionByID(_ context.Context, templateVersionID uuid.UUID) (database.TemplateVersion, error) {
 	q.mutex.RLock()
 	defer q.mutex.RUnlock()

coderd/database/queries/templateversions.sql

@@ -52,6 +52,15 @@ WHERE
 	template_id = $1
 	AND "name" = $2;
 
+-- name: GetTemplateVersionByOrganizationAndName :one
+SELECT
+	*
+FROM
+	template_versions
+WHERE
+	organization_id = $1
+	AND "name" = $2;
+
 -- name: GetTemplateVersionByID :one
 SELECT
 	*

coderd/templateversions.go

@@ -596,6 +596,48 @@ func (api *API) templateVersionByName(rw http.ResponseWriter, r *http.Request) {
 	httpapi.Write(ctx, rw, http.StatusOK, convertTemplateVersion(templateVersion, convertProvisionerJob(job), user))
 }
 
+func (api *API) templateVersionByOrganizationAndName(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	organization := httpmw.OrganizationParam(r)
+	templateVersionName := chi.URLParam(r, "templateversionname")
+	templateVersion, err := api.Database.GetTemplateVersionByOrganizationAndName(ctx, database.GetTemplateVersionByOrganizationAndNameParams{
+		OrganizationID: organization.ID,
+		Name:           templateVersionName,
+	})
+	if errors.Is(err, sql.ErrNoRows) {
+		httpapi.Write(ctx, rw, http.StatusNotFound, codersdk.Response{
+			Message: fmt.Sprintf("No template version found by name %q.", templateVersionName),
+		})
+		return
+	}
+	if err != nil {
+		httpapi.Write(ctx, rw, http.StatusInternalServerError, codersdk.Response{
+			Message: "Internal error fetching template version.",
+			Detail:  err.Error(),
+		})
+		return
+	}
+	job, err := api.Database.GetProvisionerJobByID(ctx, templateVersion.JobID)
+	if err != nil {
+		httpapi.Write(ctx, rw, http.StatusInternalServerError, codersdk.Response{
+			Message: "Internal error fetching provisioner job.",
+			Detail:  err.Error(),
+		})
+		return
+	}
+
+	user, err := api.Database.GetUserByID(ctx, templateVersion.CreatedBy)
+	if err != nil {
+		httpapi.Write(ctx, rw, http.StatusInternalServerError, codersdk.Response{
+			Message: "Internal error on fetching user.",
+			Detail:  err.Error(),
+		})
+		return
+	}
+
+	httpapi.Write(ctx, rw, http.StatusOK, convertTemplateVersion(templateVersion, convertProvisionerJob(job), user))
+}
+
 func (api *API) patchActiveTemplateVersion(rw http.ResponseWriter, r *http.Request) {
 	var (
 		ctx               = r.Context()

coderd/templateversions_test.go

@@ -928,3 +928,36 @@ func TestPaginatedTemplateVersions(t *testing.T) {
 		})
 	}
 }
+
+func TestTemplateVersionByOrganizationAndName(t *testing.T) {
+	t.Parallel()
+	t.Run("NotFound", func(t *testing.T) {
+		t.Parallel()
+		client := coderdtest.New(t, nil)
+		user := coderdtest.CreateFirstUser(t, client)
+		version := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
+		coderdtest.CreateTemplate(t, client, user.OrganizationID, version.ID)
+
+		ctx, cancel := context.WithTimeout(context.Background(), testutil.WaitLong)
+		defer cancel()
+
+		_, err := client.TemplateVersionByOrganizationAndName(ctx, user.OrganizationID, "nothing")
+		var apiErr *codersdk.Error
+		require.ErrorAs(t, err, &apiErr)
+		require.Equal(t, http.StatusNotFound, apiErr.StatusCode())
+	})
+
+	t.Run("Found", func(t *testing.T) {
+		t.Parallel()
+		client := coderdtest.New(t, nil)
+		user := coderdtest.CreateFirstUser(t, client)
+		version := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
+		coderdtest.CreateTemplate(t, client, user.OrganizationID, version.ID)
+
+		ctx, cancel := context.WithTimeout(context.Background(), testutil.WaitLong)
+		defer cancel()
+
+		_, err := client.TemplateVersionByOrganizationAndName(ctx, user.OrganizationID, version.Name)
+		require.NoError(t, err)
+	})
+}

codersdk/organizations.go

@@ -138,6 +138,25 @@ func (c *Client) CreateTemplateVersion(ctx context.Context, organizationID uuid.
 	return templateVersion, json.NewDecoder(res.Body).Decode(&templateVersion)
 }
 
+func (c *Client) TemplateVersionByOrganizationAndName(ctx context.Context, organizationID uuid.UUID, name string) (TemplateVersion, error) {
+	res, err := c.Request(ctx, http.MethodGet,
+		fmt.Sprintf("/api/v2/organizations/%s/templateversions/%s", organizationID.String(), name),
+		nil,
+	)
+
+	if err != nil {
+		return TemplateVersion{}, xerrors.Errorf("execute request: %w", err)
+	}
+	defer res.Body.Close()
+
+	if res.StatusCode != http.StatusOK {
+		return TemplateVersion{}, readBodyAsError(res)
+	}
+
+	var templateVersion TemplateVersion
+	return templateVersion, json.NewDecoder(res.Body).Decode(&templateVersion)
+}
+
 // CreateTemplate creates a new template inside an organization.
 func (c *Client) CreateTemplate(ctx context.Context, organizationID uuid.UUID, request CreateTemplateRequest) (Template, error) {
 	res, err := c.Request(ctx, http.MethodPost,

site/js-untar.d.ts

@@ -0,0 +1,16 @@
+declare module "js-untar" {
+  interface File {
+    name: string
+    readAsString: () => string
+  }
+
+  const Untar: (buffer: ArrayBuffer) => {
+    then: (
+      resolve?: () => Promise<void>,
+      reject?: () => Promise<void>,
+      progress: (file: File) => Promise<void>,
+    ) => Promise<void>
+  }
+
+  export default Untar
+}

site/package.json

@@ -50,6 +50,7 @@
     "front-matter": "4.0.2",
     "history": "5.3.0",
     "i18next": "21.9.1",
+    "js-untar": "2.0.0",
     "just-debounce-it": "3.1.1",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",

site/src/AppRouter.tsx

@@ -83,6 +83,9 @@ const NetworkSettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
 )
 const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
+const TemplateVersionPage = lazy(
+  () => import("./pages/TemplateVersionPage/TemplateVersionPage"),
+)
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -123,16 +126,14 @@ export const AppRouter: FC = () => {
           }
         />
 
-        <Route path="workspaces">
-          <Route
-            index
-            element={
-              <AuthAndFrame>
-                <WorkspacesPage />
-              </AuthAndFrame>
-            }
-          />
-        </Route>
+        <Route
+          path="workspaces"
+          element={
+            <AuthAndFrame>
+              <WorkspacesPage />
+            </AuthAndFrame>
+          }
+        />
 
         <Route path="templates">
           <Route
@@ -181,6 +182,16 @@ export const AppRouter: FC = () => {
                 </RequireAuth>
               }
             />
+            <Route path="versions">
+              <Route
+                path=":version"
+                element={
+                  <AuthAndFrame>
+                    <TemplateVersionPage />
+                  </AuthAndFrame>
+                }
+              />
+            </Route>
           </Route>
         </Route>
 

site/src/__mocks__/js-untar.ts

@@ -0,0 +1 @@
+export default jest.fn()

site/src/api/api.ts

@@ -219,6 +219,16 @@ export const getTemplateVersions = async (
   return response.data
 }
 
+export const getTemplateVersionByName = async (
+  organizationId: string,
+  versionName: string,
+): Promise<TypesGen.TemplateVersion> => {
+  const response = await axios.get<TypesGen.TemplateVersion>(
+    `/api/v2/organizations/${organizationId}/templateversions/${versionName}`,
+  )
+  return response.data
+}
+
 export const updateTemplateMeta = async (
   templateId: string,
   data: TypesGen.UpdateTemplateMeta,
@@ -646,3 +656,10 @@ export const getReplicas = async (): Promise<TypesGen.Replica[]> => {
   const response = await axios.get(`/api/v2/replicas`)
   return response.data
 }
+
+export const getFile = async (fileId: string): Promise<ArrayBuffer> => {
+  const response = await axios.get<ArrayBuffer>(`/api/v2/files/${fileId}`, {
+    responseType: "arraybuffer",
+  })
+  return response.data
+}

site/src/components/Icons/MarkdownIcon.tsx

@@ -0,0 +1,21 @@
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+
+export const MarkdownIcon = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 32 32">
+    <rect
+      x="2.5"
+      y="7.955"
+      width="27"
+      height="16.091"
+      style={{ fill: "none", stroke: "#755838" }}
+    />
+    <polygon
+      points="5.909 20.636 5.909 11.364 8.636 11.364 11.364 14.773 14.091 11.364 16.818 11.364 16.818 20.636 14.091 20.636 14.091 15.318 11.364 18.727 8.636 15.318 8.636 20.636 5.909 20.636"
+      style={{ stroke: "#755838" }}
+    />
+    <polygon
+      points="22.955 20.636 18.864 16.136 21.591 16.136 21.591 11.364 24.318 11.364 24.318 16.136 27.045 16.136 22.955 20.636"
+      style={{ stroke: "#755838" }}
+    />
+  </SvgIcon>
+)

site/src/components/Icons/TerraformIcon.tsx

@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+
+export const TerraformIcon = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 32 32">
+    <polygon
+      points="12.042 6.858 20.071 11.448 20.071 20.462 12.042 15.868 12.042 6.858 12.042 6.858"
+      style={{ fill: "#813cf3" }}
+    />
+    <polygon
+      points="20.5 20.415 28.459 15.84 28.459 6.887 20.5 11.429 20.5 20.415 20.5 20.415"
+      style={{ fill: "#813cf3" }}
+    />
+    <polygon
+      points="3.541 11.01 11.571 15.599 11.571 6.59 3.541 2 3.541 11.01 3.541 11.01"
+      style={{ fill: "#813cf3" }}
+    />
+    <polygon
+      points="12.042 25.41 20.071 30 20.071 20.957 12.042 16.368 12.042 25.41 12.042 25.41"
+      style={{ fill: "#813cf3" }}
+    />
+  </SvgIcon>
+)