Merge pull request #3259 from Infisical/feat/automated-instance-bootstrapping

feat: automated bootstrapping

frontend/src/hooks/api/admin/index.ts

@@ -1,7 +1,9 @@
 export {
   useAdminDeleteUser,
   useAdminGrantServerAdminAccess,
+  useAdminRemoveIdentitySuperAdminAccess,
   useCreateAdminUser,
+  useRemoveUserServerAdminAccess,
   useUpdateAdminSlackConfig,
   useUpdateServerConfig,
   useUpdateServerEncryptionStrategy

frontend/src/hooks/api/admin/mutation.ts

@@ -70,6 +70,40 @@ export const useAdminDeleteUser = () => {
   });
 };
 
+export const useAdminRemoveIdentitySuperAdminAccess = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (identityId: string) => {
+      await apiRequest.delete(
+        `/api/v1/admin/identity-management/identities/${identityId}/super-admin-access`
+      );
+
+      return {};
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [adminStandaloneKeys.getIdentities]
+      });
+    }
+  });
+};
+
+export const useRemoveUserServerAdminAccess = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (userId: string) => {
+      await apiRequest.delete(`/api/v1/admin/user-management/users/${userId}/admin-access`);
+
+      return {};
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [adminStandaloneKeys.getUsers]
+      });
+    }
+  });
+};
+
 export const useAdminGrantServerAdminAccess = () => {
   const queryClient = useQueryClient();
   return useMutation({

frontend/src/hooks/api/identities/types.ts

@@ -15,6 +15,7 @@ export type Identity = {
   authMethods: IdentityAuthMethod[];
   createdAt: string;
   updatedAt: string;
+  isInstanceAdmin?: boolean;
 };
 
 export type IdentityAccessToken = {

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -59,8 +59,8 @@ const formSchema = z.object({
   trustLdapEmails: z.boolean(),
   trustOidcEmails: z.boolean(),
   defaultAuthOrgId: z.string(),
-  authConsentContent: z.string().optional(),
-  pageFrameContent: z.string().optional()
+  authConsentContent: z.string().optional().default(""),
+  pageFrameContent: z.string().optional().default("")
 });
 
 type TDashboardForm = z.infer<typeof formSchema>;
@@ -86,8 +86,8 @@ export const OverviewPage = () => {
       trustLdapEmails: config.trustLdapEmails,
       trustOidcEmails: config.trustOidcEmails,
       defaultAuthOrgId: config.defaultAuthOrgId ?? "",
-      authConsentContent: config.authConsentContent,
-      pageFrameContent: config.pageFrameContent
+      authConsentContent: config.authConsentContent ?? "",
+      pageFrameContent: config.pageFrameContent ?? ""
     }
   });
 
@@ -165,8 +165,8 @@ export const OverviewPage = () => {
                     <Tab value={TabSections.Auth}>Authentication</Tab>
                     <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
                     <Tab value={TabSections.Integrations}>Integrations</Tab>
-                    <Tab value={TabSections.Users}>Users</Tab>
-                    <Tab value={TabSections.Identities}>Identities</Tab>
+                    <Tab value={TabSections.Users}>User Identities</Tab>
+                    <Tab value={TabSections.Identities}>Machine Identities</Tab>
                   </div>
                 </TabList>
                 <TabPanel value={TabSections.Settings}>

frontend/src/pages/admin/OverviewPage/components/IdentityPanel.tsx

@@ -1,9 +1,16 @@
 import { useState } from "react";
-import { faMagnifyingGlass, faServer } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faMagnifyingGlass, faServer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { createNotification } from "@app/components/notifications";
 import {
+  Badge,
   Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
   Input,
   Table,
@@ -15,10 +22,22 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useDebounce } from "@app/hooks";
+import { useDebounce, usePopUp } from "@app/hooks";
+import { useAdminRemoveIdentitySuperAdminAccess } from "@app/hooks/api/admin";
 import { useAdminGetIdentities } from "@app/hooks/api/admin/queries";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
-const IdentityPanelTable = () => {
+const IdentityPanelTable = ({
+  handlePopUpOpen
+}: {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeServerAdmin"]>,
+    data?: {
+      name: string;
+      id: string;
+    }
+  ) => void;
+}) => {
   const [searchIdentityFilter, setSearchIdentityFilter] = useState("");
   const [debouncedSearchTerm] = useDebounce(searchIdentityFilter, 500);
 
@@ -48,15 +67,48 @@ const IdentityPanelTable = () => {
             <THead>
               <Tr>
                 <Th>Name</Th>
+                <Th className="w-5" />
               </Tr>
             </THead>
             <TBody>
               {isPending && <TableSkeleton columns={2} innerKey="identities" />}
               {!isPending &&
                 data?.pages?.map((identities) =>
-                  identities.map(({ name, id }) => (
+                  identities.map(({ name, id, isInstanceAdmin }) => (
                     <Tr key={`identity-${id}`} className="w-full">
-                      <Td>{name}</Td>
+                      <Td>
+                        {name}
+                        {isInstanceAdmin && (
+                          <Badge variant="primary" className="ml-2">
+                            Server Admin
+                          </Badge>
+                        )}
+                      </Td>
+                      <Td>
+                        {isInstanceAdmin && (
+                          <div className="flex justify-end">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild className="rounded-lg">
+                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                                </div>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="p-1">
+                                {isInstanceAdmin && (
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handlePopUpOpen("removeServerAdmin", { name, id });
+                                    }}
+                                  >
+                                    Remove Server Admin
+                                  </DropdownMenuItem>
+                                )}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        )}
+                      </Td>
                     </Tr>
                   ))
                 )}
@@ -81,11 +133,49 @@ const IdentityPanelTable = () => {
   );
 };
 
-export const IdentityPanel = () => (
-  <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-    <div className="mb-4">
-      <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
+export const IdentityPanel = () => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeServerAdmin"
+  ] as const);
+
+  const { mutate: deleteIdentitySuperAdminAccess } = useAdminRemoveIdentitySuperAdminAccess();
+
+  const handleRemoveServerAdmin = async () => {
+    const { id } = popUp?.removeServerAdmin?.data as { id: string; name: string };
+
+    try {
+      await deleteIdentitySuperAdminAccess(id);
+      createNotification({
+        type: "success",
+        text: "Successfully removed server admin permissions"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Error removing server admin permissions"
+      });
+    }
+
+    handlePopUpClose("removeServerAdmin");
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4">
+        <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
+      </div>
+      <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
+      <DeleteActionModal
+        isOpen={popUp.removeServerAdmin.isOpen}
+        title={`Are you sure want to remove Server Admin permissions from ${
+          (popUp?.removeServerAdmin?.data as { name: string })?.name || ""
+        }?`}
+        subTitle=""
+        onChange={(isOpen) => handlePopUpToggle("removeServerAdmin", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleRemoveServerAdmin}
+        buttonText="Remove Access"
+      />
     </div>
-    <IdentityPanelTable />
-  </div>
-);
+  );
+};

frontend/src/pages/admin/OverviewPage/components/UserPanel.tsx

@@ -33,22 +33,26 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useSubscription, useUser } from "@app/context";
+import { useSubscription } from "@app/context";
 import { useDebounce, usePopUp } from "@app/hooks";
 import {
   useAdminDeleteUser,
   useAdminGetUsers,
-  useAdminGrantServerAdminAccess
+  useAdminGrantServerAdminAccess,
+  useRemoveUserServerAdminAccess
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const addServerAdminUpgradePlanMessage = "Granting another user Server Admin permissions";
+const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions from user";
 
 const UserPanelTable = ({
   handlePopUpOpen
 }: {
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["removeUser", "upgradePlan", "upgradeToServerAdmin"]>,
+    popUpName: keyof UsePopUpState<
+      ["removeUser", "upgradePlan", "upgradeToServerAdmin", "removeServerAdmin"]
+    >,
     data?: {
       username: string;
       id: string;
@@ -58,8 +62,6 @@ const UserPanelTable = ({
 }) => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const [adminsOnly, setAdminsOnly] = useState(false);
-  const { user } = useUser();
-  const userId = user?.id || "";
   const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
   const { subscription } = useSubscription();
 
@@ -143,45 +145,61 @@ const UserPanelTable = ({
                         </Td>
                         <Td className="w-5/12">{email}</Td>
                         <Td>
-                          {userId !== id && (
-                            <div className="flex justify-end">
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild className="rounded-lg">
-                                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                                  </div>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="start" className="p-1">
+                          <div className="flex justify-end">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild className="rounded-lg">
+                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                                </div>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="p-1">
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("removeUser", { username, id });
+                                  }}
+                                >
+                                  Remove User
+                                </DropdownMenuItem>
+                                {!superAdmin && (
                                   <DropdownMenuItem
                                     onClick={(e) => {
                                       e.stopPropagation();
-                                      handlePopUpOpen("removeUser", { username, id });
+                                      if (!subscription?.instanceUserManagement) {
+                                        handlePopUpOpen("upgradePlan", {
+                                          username,
+                                          id,
+                                          message: addServerAdminUpgradePlanMessage
+                                        });
+                                        return;
+                                      }
+                                      handlePopUpOpen("upgradeToServerAdmin", { username, id });
                                     }}
                                   >
-                                    Remove User
+                                    Make User Server Admin
                                   </DropdownMenuItem>
-                                  {!superAdmin && (
-                                    <DropdownMenuItem
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        if (!subscription?.instanceUserManagement) {
-                                          handlePopUpOpen("upgradePlan", {
-                                            username,
-                                            id,
-                                            message: addServerAdminUpgradePlanMessage
-                                          });
-                                          return;
-                                        }
-                                        handlePopUpOpen("upgradeToServerAdmin", { username, id });
-                                      }}
-                                    >
-                                      Make User Server Admin
-                                    </DropdownMenuItem>
-                                  )}
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </div>
-                          )}
+                                )}
+                                {superAdmin && (
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      if (!subscription?.instanceUserManagement) {
+                                        handlePopUpOpen("upgradePlan", {
+                                          username,
+                                          id,
+                                          message: removeServerAdminUpgradePlanMessage
+                                        });
+                                        return;
+                                      }
+                                      handlePopUpOpen("removeServerAdmin", { username, id });
+                                    }}
+                                  >
+                                    Remove Server Admin
+                                  </DropdownMenuItem>
+                                )}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
                         </Td>
                       </Tr>
                     );
@@ -212,11 +230,13 @@ export const UserPanel = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeUser",
     "upgradePlan",
-    "upgradeToServerAdmin"
+    "upgradeToServerAdmin",
+    "removeServerAdmin"
   ] as const);
 
   const { mutateAsync: deleteUser } = useAdminDeleteUser();
   const { mutateAsync: grantAdminAccess } = useAdminGrantServerAdminAccess();
+  const { mutateAsync: removeAdminAccess } = useRemoveUserServerAdminAccess();
 
   const handleRemoveUser = async () => {
     const { id } = popUp?.removeUser?.data as { id: string; username: string };
@@ -256,6 +276,25 @@ export const UserPanel = () => {
     handlePopUpClose("upgradeToServerAdmin");
   };
 
+  const handleRemoveServerAdminAccess = async () => {
+    const { id } = popUp?.removeServerAdmin?.data as { id: string; username: string };
+
+    try {
+      await removeAdminAccess(id);
+      createNotification({
+        type: "success",
+        text: "Successfully removed server admin access from user"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Error removing server admin access from user"
+      });
+    }
+
+    handlePopUpClose("removeServerAdmin");
+  };
+
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4">
@@ -282,6 +321,17 @@ export const UserPanel = () => {
         onDeleteApproved={handleGrantServerAdminAccess}
         buttonText="Grant Access"
       />
+      <DeleteActionModal
+        isOpen={popUp.removeServerAdmin.isOpen}
+        title={`Are you sure want to remove Server Admin permissions from ${
+          (popUp?.removeServerAdmin?.data as { id: string; username: string })?.username || ""
+        }?`}
+        subTitle=""
+        onChange={(isOpen) => handlePopUpToggle("removeServerAdmin", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleRemoveServerAdminAccess}
+        buttonText="Remove Access"
+      />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}