From c473a28cd3dad169cadea1a79572c36eff610992 Mon Sep 17 00:00:00 2001
From: Dustin Deus <deusdustin@gmail.com>
Date: Tue, 9 Apr 2024 01:46:32 +0200
Subject: [PATCH] fix: everyone with write access can create api keys (#711)

---
 .../src/pages/[organizationSlug]/apikeys.tsx  | 131 +++++++++---------
 1 file changed, 64 insertions(+), 67 deletions(-)

diff --git a/studio/src/pages/[organizationSlug]/apikeys.tsx b/studio/src/pages/[organizationSlug]/apikeys.tsx
index c8afbe9e20..af5e0422e1 100644
--- a/studio/src/pages/[organizationSlug]/apikeys.tsx
+++ b/studio/src/pages/[organizationSlug]/apikeys.tsx
@@ -90,7 +90,9 @@ const CreateAPIKeyDialog = ({
   const { mutate, isPending } = useMutation(createAPIKey.useMutation());
 
   const { data } = useQuery(getUserAccessibleResources.useQuery());
-  const { data: permissionsData } = useQuery(getUserAccessiblePermissions.useQuery());
+  const { data: permissionsData } = useQuery(
+    getUserAccessiblePermissions.useQuery(),
+  );
   const federatedGraphs = data?.federatedGraphs || [];
   const subgraphs = data?.subgraphs || [];
   const isAdmin = user?.currentOrganization.roles.includes("admin");
@@ -209,21 +211,6 @@ const CreateAPIKeyDialog = ({
     return result;
   }, {});
 
-  // check if the user has access to create api keys only when rbac is enabled
-  if (
-    rbac &&
-    !(isAdmin || federatedGraphs.length > 0 || subgraphs.length > 0)
-  ) {
-    return (
-      <Button disabled>
-        <div className="flex items-center gap-x-2">
-          <PlusIcon />
-          <span>New API key</span>
-        </div>
-      </Button>
-    );
-  }
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
@@ -271,52 +258,55 @@ const CreateAPIKeyDialog = ({
               </SelectContent>
             </Select>
           </div>
-          {isAdmin && permissionsData && permissionsData.permissions.length > 0 && (
-            <div className="mt-2 flex flex-col gap-y-3">
-              <div className="flex flex-col gap-y-1">
-                <span className="text-base font-semibold">Permissions</span>
-                <span className="text-sm text-muted-foreground">
-                  {
-                    "Select permissions for the API key."
-                  }
-                </span>
-              </div>
-              {permissionsData.permissions.map((permission) => {
-                return (
-                  <div
-                    className="flex items-center gap-x-2"
-                    key={permission.value}
-                  >
-                    <Checkbox
-                      id="scim"
-                      checked={selectedPermissions.includes(permission.value)}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedPermissions([
-                            ...Array.from(
-                              new Set([...selectedPermissions, permission.value]),
-                            ),
-                          ]);
-                        } else {
-                          setSelectedPermissions([
-                            ...selectedPermissions.filter(
-                              (p) => p !== permission.value,
-                            ),
-                          ]);
-                        }
-                      }}
-                    />
-                    <label
-                      htmlFor="scim"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 capitalize"
+          {isAdmin &&
+            permissionsData &&
+            permissionsData.permissions.length > 0 && (
+              <div className="mt-2 flex flex-col gap-y-3">
+                <div className="flex flex-col gap-y-1">
+                  <span className="text-base font-semibold">Permissions</span>
+                  <span className="text-sm text-muted-foreground">
+                    {"Select permissions for the API key."}
+                  </span>
+                </div>
+                {permissionsData.permissions.map((permission) => {
+                  return (
+                    <div
+                      className="flex items-center gap-x-2"
+                      key={permission.value}
                     >
-                      {permission.displayName}
-                    </label>
-                  </div>
-                );
-              })}
-            </div>
-          )}
+                      <Checkbox
+                        id="scim"
+                        checked={selectedPermissions.includes(permission.value)}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            setSelectedPermissions([
+                              ...Array.from(
+                                new Set([
+                                  ...selectedPermissions,
+                                  permission.value,
+                                ]),
+                              ),
+                            ]);
+                          } else {
+                            setSelectedPermissions([
+                              ...selectedPermissions.filter(
+                                (p) => p !== permission.value,
+                              ),
+                            ]);
+                          }
+                        }}
+                      />
+                      <label
+                        htmlFor="scim"
+                        className="text-sm font-medium capitalize leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {permission.displayName}
+                      </label>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           {rbac && (
             <div className="mt-3 flex flex-col gap-y-3">
               <div className="flex flex-col gap-y-1">
@@ -679,6 +669,8 @@ export const Empty = ({
   open: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const user = useContext(UserContext);
+
   return (
     <EmptyState
       icon={<KeyIcon />}
@@ -698,12 +690,17 @@ export const Empty = ({
       }
       actions={
         <div className="mt-2">
-          <CreateAPIKey
-            apiKey={apiKey}
-            setApiKey={setApiKey}
-            open={open}
-            setOpen={setOpen}
-          />
+          {checkUserAccess({
+            rolesToBe: ["admin", "developer"],
+            userRoles: user?.currentOrganization.roles || [],
+          }) && (
+            <CreateAPIKey
+              apiKey={apiKey}
+              setApiKey={setApiKey}
+              open={open}
+              setOpen={setOpen}
+            />
+          )}
         </div>
       }
     />