feat: show a warning when an organization has no provisioners

coder · aslilac · Aug 5, 2024 · Aug 2, 2024 · Aug 2, 2024 · Aug 2, 2024
commit b9e5c6818b1e9eab58e8ce9a0e81c0e65441059e
diff --git a/docs/admin/provisioners.md b/docs/admin/provisioners.md
@@ -67,6 +67,13 @@ There are two exceptions:
 **Organization-scoped Provisioners** can pick up build jobs created by any user.
 These provisioners always have the implicit tags `scope=organization owner=""`.
 
+```shell
+coder provisionerd start --org <organization_name>
+```
+
+If you omit the `--org` argument, the provisioner will be assigned to the
+default organization.
+
 ```shell
 coder provisionerd start
 ```

@@ -617,6 +617,18 @@ class ApiMethods {
     return response.data;
   };
 
+  /**
+   * @param organization Can be the organization's ID or name
+   */
+  getProvisionerDaemonsByOrganization = async (
+    organization: string,
+  ): Promise<TypesGen.ProvisionerDaemon[]> => {
+    const response = await this.axios.get<TypesGen.ProvisionerDaemon[]>(
+      `/api/v2/organizations/${organization}/provisionerdaemons`,
+    );
+    return response.data;
+  };
+
   getTemplate = async (templateId: string): Promise<TypesGen.Template> => {
     const response = await this.axios.get<TypesGen.Template>(
       `/api/v2/templates/${templateId}`,

@@ -1,10 +1,14 @@
+import Alert from "@mui/material/Alert";
+import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import camelCase from "lodash/camelCase";
 import capitalize from "lodash/capitalize";
 import { useState, type FC } from "react";
+import { useQuery } from "react-query";
 import { useSearchParams } from "react-router-dom";
 import * as Yup from "yup";
+import { API } from "api/api";
 import type {
   Organization,
   ProvisionerJobLog,
@@ -23,6 +27,7 @@
 import { IconField } from "components/IconField/IconField";
 import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
 import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
+import { docs } from "utils/docs";
 import {
   nameValidator,
   getFormHelpers,
@@ -210,6 +215,18 @@
   });
   const getFieldHelpers = getFormHelpers<CreateTemplateFormData>(form, error);
 
+  const warnAboutProvisionersQuery = useQuery({
+    enabled: showOrganizationPicker && Boolean(selectedOrg),
+    queryKey: ["warnAboutProvisioners", selectedOrg?.id],
+    queryFn: async () => {
+      const provisioners = await API.getProvisionerDaemonsByOrganization(
+        selectedOrg!.id,
+      );
+
+      return provisioners.length === 0;
+    },
+  });
+
   return (
     <HorizontalForm onSubmit={form.handleSubmit}>
       {/* General info */}
@@ -232,17 +249,20 @@
           )}
 
           {showOrganizationPicker && (
-            <OrganizationAutocomplete
-              {...getFieldHelpers("organization_id")}
-              required
-              label="Belongs to"
-              value={selectedOrg}
-              onChange={(newValue) => {
-                setSelectedOrg(newValue);
-                void form.setFieldValue("organization", newValue?.id || "");
-              }}
-              size="medium"
-            />
+            <>
+              {warnAboutProvisionersQuery.data && <ProvisionerWarning />}
+              <OrganizationAutocomplete
+                {...getFieldHelpers("organization_id")}
+                required
+                label="Belongs to"
+                value={selectedOrg}
+                onChange={(newValue) => {
+                  setSelectedOrg(newValue);
+                  void form.setFieldValue("organization", newValue?.id || "");
+                }}
+                size="medium"
+              />
+            </>
           )}
 
           {"copiedTemplate" in props && (
@@ -369,3 +389,15 @@
     form.setFieldValue("display_name", capitalize(name)),
   ]);
 };
+
+const ProvisionerWarning: FC = () => {
+  return (
+    <Alert severity="warning" css={{ marginBottom: 16 }}>
+      This organization does not have any provisioners. Before you create a
+      template, you'll need to configure a provisioner.{" "}
+      <Link href={docs("/admin/provisioners#organization-scoped-provisioners")}>
+        See our documentation.
+      </Link>
+    </Alert>
+  );
+};