fix: only show valid organizations in CreateTemplateForm

hide any organizations that the user might have view permissions for, but not permission to create a template
coder · aslilac · Aug 6, 2024 · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
commit 44869aba098b3a28776412502651626ee4ac184b
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -9,8 +9,9 @@ import {
   useState,
 } from "react";
 import { useQuery } from "react-query";
+import { checkAuthorization } from "api/queries/authCheck";
 import { organizations } from "api/queries/organizations";
-import type { Organization } from "api/typesGenerated";
+import type { AuthorizationCheck, Organization } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { useDebouncedFunction } from "hooks/debounce";
@@ -22,6 +23,7 @@ export type OrganizationAutocompleteProps = {
   className?: string;
   size?: ComponentProps<typeof TextField>["size"];
   required?: boolean;
+  check?: AuthorizationCheck;
 };
 
 export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
@@ -31,6 +33,7 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
   className,
   size = "small",
   required,
+  check,
 }) => {
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
@@ -41,6 +44,22 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
   });
   const organizationsQuery = useQuery(organizations());
 
+  const permissionsQuery = useQuery(
+    check && organizationsQuery.data
+      ? checkAuthorization({
+          checks: Object.fromEntries(
+            organizationsQuery.data.map((org) => [
+              org.id,
+              {
+                ...check,
+                object: { ...check.object, organization_id: org.id },
+              },
+            ]),
+          ),
+        })
+      : { enabled: false },
+  );
+
   const { debounced: debouncedInputOnChange } = useDebouncedFunction(
     (event: ChangeEvent<HTMLInputElement>) => {
       setAutoComplete((state) => ({
@@ -51,11 +70,18 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
     750,
   );
 
+  // If an authorization check was provided, filter the organizations based on
+  // the results of that check.
+  let options = organizationsQuery.data ?? [];
+  if (check && permissionsQuery.data) {
+    options = options.filter((org) => permissionsQuery.data[org.id]);
+  }
+
   return (
     <Autocomplete
       noOptionsText="No organizations found"
       className={className}
-      options={organizationsQuery.data ?? []}
+      options={options}
       loading={organizationsQuery.isLoading}
       value={value}
       data-testid="organization-autocomplete"

diff --git a/site/src/contexts/auth/permissions.tsx b/site/src/contexts/auth/permissions.tsx
@@ -36,6 +36,7 @@ export const permissionsToCheck = {
   [checks.createTemplates]: {
     object: {
       resource_type: "template",
+      any_org: true,
     },
     action: "update",
   },

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -267,6 +267,10 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                   void form.setFieldValue("organization", newValue?.name || "");
                 }}
                 size="medium"
+                check={{
+                  object: { resource_type: "template" },
+                  action: "create",
+                }}
               />
             </>
           )}