feat: default org membership role

frontend/src/hooks/api/organization/queries.tsx

@@ -82,12 +82,13 @@ export const useCreateOrg = (options: { invalidate: boolean } = { invalidate: tr
 export const useUpdateOrg = () => {
   const queryClient = useQueryClient();
   return useMutation<{}, {}, UpdateOrgDTO>({
-    mutationFn: ({ name, authEnforced, scimEnabled, slug, orgId }) => {
+    mutationFn: ({ name, authEnforced, scimEnabled, slug, orgId, defaultMembershipRoleSlug }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
         authEnforced,
         scimEnabled,
-        slug
+        slug,
+        defaultMembershipRoleSlug
       });
     },
     onSuccess: () => {

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

@@ -10,6 +10,7 @@ export type Organization = {
   orgAuthMethod: string;
   scimEnabled: boolean;
   slug: string;
+  defaultMembershipRole: string;
 };
 
 export type UpdateOrgDTO = {
@@ -18,6 +19,7 @@ export type UpdateOrgDTO = {
   authEnforced?: boolean;
   scimEnabled?: boolean;
   slug?: string;
+  defaultMembershipRoleSlug?: string;
 };
 
 export type BillingDetails = {

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -19,14 +20,30 @@ import {
   Td,
   Th,
   THead,
-  Tr
+  Tooltip,
+  Tr,
+  UpgradePlanModal
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteOrgRole, useGetOrgRoles } from "@app/hooks/api";
+import { useDeleteOrgRole, useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
 import { TOrgRole } from "@app/hooks/api/roles/types";
 import { RoleModal } from "@app/views/Org/RolePage/components";
 
+enum OrgMembershipRole {
+  Admin = "admin",
+  Member = "member",
+  NoAccess = "no-access"
+}
+
+export const isCustomOrgRole = (slug: string) =>
+  !Object.values(OrgMembershipRole).includes(slug as OrgMembershipRole);
+
 export const OrgRoleTable = () => {
   const router = useRouter();
   const { currentOrg } = useOrganization();
@@ -34,12 +51,14 @@ export const OrgRoleTable = () => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "role",
-    "deleteRole"
+    "deleteRole",
+    "upgradePlan"
   ] as const);
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
-
   const { mutateAsync: deleteRole } = useDeleteOrgRole();
+  const { mutateAsync: updateOrg } = useUpdateOrg();
+  const { subscription } = useSubscription();
 
   const handleRoleDelete = async () => {
     const { id } = popUp?.deleteRole?.data as TOrgRole;
@@ -56,6 +75,29 @@ export const OrgRoleTable = () => {
     }
   };
 
+  const handleSetRoleAsDefault = async (defaultMembershipRoleSlug: string) => {
+    const isCustomRole = isCustomOrgRole(defaultMembershipRoleSlug);
+
+    if (isCustomRole && subscription && !subscription?.rbac) {
+      handlePopUpOpen("upgradePlan", {
+        description: "You can assign custom roles to members if you upgrade your Infisical plan."
+      });
+      return;
+    }
+
+    try {
+      await updateOrg({
+        orgId,
+        defaultMembershipRoleSlug
+      });
+      createNotification({ type: "success", text: "Successfully updated default membership role" });
+      handlePopUpClose("deleteRole");
+    } catch (err) {
+      console.log(err);
+      createNotification({ type: "error", text: "Failed to update default membership role" });
+    }
+  };
+
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
@@ -90,14 +132,28 @@ export const OrgRoleTable = () => {
             {roles?.map((role) => {
               const { id, name, slug } = role;
               const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
+              const isDefaultOrgRole = isCustomOrgRole(slug)
+                ? id === currentOrg?.defaultMembershipRole
+                : slug === currentOrg?.defaultMembershipRole;
               return (
                 <Tr
                   key={`role-list-${id}`}
                   className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                   onClick={() => router.push(`/org/${orgId}/roles/${id}`)}
                 >
-                  <Td className="max-w-md overflow-hidden text-ellipsis whitespace-nowrap">
-                    {name}
+                  <Td className="max-w-md">
+                    <div className="flex">
+                      <p className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</p>
+                      {isDefaultOrgRole && (
+                        <Tooltip content="Members joining your organization will be assigned this role unless otherwise specified">
+                          <div>
+                            <Badge variant="success" className="ml-1">
+                              Default
+                            </Badge>
+                          </div>
+                        </Tooltip>
+                      )}
+                    </div>
                   </Td>
                   <Td className="max-w-md overflow-hidden text-ellipsis whitespace-nowrap">
                     {slug}
@@ -129,29 +185,61 @@ export const OrgRoleTable = () => {
                             </DropdownMenuItem>
                           )}
                         </OrgPermissionCan>
-                        {!isNonMutatable && (
+                        {!isDefaultOrgRole && (
                           <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Role}
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Settings}
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
                                 className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                                 )}
+                                disabled={!isAllowed}
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  handlePopUpOpen("deleteRole", role);
+                                  handleSetRoleAsDefault(slug);
                                 }}
-                                disabled={!isAllowed}
                               >
-                                Delete Role
+                                Set as Default Role
                               </DropdownMenuItem>
                             )}
                           </OrgPermissionCan>
                         )}
+                        {!isNonMutatable && (
+                          <Tooltip
+                            position="left"
+                            content={
+                              isDefaultOrgRole
+                                ? "Cannot delete default organization membership role. Re-assign default to allow deletion."
+                                : ""
+                            }
+                          >
+                            <div>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Role}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      isAllowed && !isDefaultOrgRole
+                                        ? "hover:!bg-red-500 hover:!text-white"
+                                        : "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handlePopUpOpen("deleteRole", role);
+                                    }}
+                                    disabled={!isAllowed || isDefaultOrgRole}
+                                  >
+                                    Delete Role
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                            </div>
+                          </Tooltip>
+                        )}
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </Td>
@@ -172,6 +260,11 @@ export const OrgRoleTable = () => {
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -1,13 +1,19 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useUpdateOrg } from "@app/hooks/api";
+import { Button, FormControl, Input, Select, SelectItem, Spinner } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+import { useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
+import { isCustomOrgRole } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable";
 
 const formSchema = yup.object({
   name: yup
@@ -19,36 +25,55 @@ const formSchema = yup.object({
     .string()
     .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
     .required()
-    .label("Organization Slug")
+    .label("Organization Slug"),
+  defaultMembershipRole: yup.string().required().label("Default Membership Role")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
 
 export const OrgNameChangeSection = (): JSX.Element => {
   const { currentOrg } = useOrganization();
-  
+  const { permission } = useOrgPermission();
+
   const { handleSubmit, control, reset } = useForm<FormData>({
     resolver: yupResolver(formSchema)
   });
   const { mutateAsync, isLoading } = useUpdateOrg();
 
+  const canReadOrgRoles = permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.Role);
+
+  const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(
+    currentOrg?.id!,
+    canReadOrgRoles
+  );
+  const [isFormInitialized, setIsFormInitialized] = useState(false);
+
   useEffect(() => {
     if (currentOrg) {
       reset({
         name: currentOrg.name,
-        slug: currentOrg.slug
+        slug: currentOrg.slug,
+        ...(canReadOrgRoles &&
+          roles?.length && {
+            // will always be present, can't remove role if default
+            defaultMembershipRole: isCustomOrgRole(currentOrg.defaultMembershipRole)
+              ? roles?.find((role) => currentOrg.defaultMembershipRole === role.id)?.slug!
+              : currentOrg.defaultMembershipRole
+          })
       });
+      setIsFormInitialized(true);
     }
-  }, [currentOrg]);
+  }, [currentOrg, roles]);
 
-  const onFormSubmit = async ({ name, slug }: FormData) => {
+  const onFormSubmit = async ({ name, slug, defaultMembershipRole }: FormData) => {
     try {
-      if (!currentOrg?.id) return;
+      if (!currentOrg?.id || !roles?.length) return;
 
       await mutateAsync({
         orgId: currentOrg?.id,
         name,
-        slug
+        slug,
+        defaultMembershipRoleSlug: defaultMembershipRole
       });
 
       createNotification({
@@ -64,6 +89,14 @@ export const OrgNameChangeSection = (): JSX.Element => {
     }
   };
 
+  if (!isFormInitialized) {
+    return (
+      <div className="flex h-[25.25rem] w-full items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
       <div className="">
@@ -92,6 +125,40 @@ export const OrgNameChangeSection = (): JSX.Element => {
           name="slug"
         />
       </div>
+      {canReadOrgRoles && (
+        <div className="pb-4">
+          <h2 className="text-md mb-2 text-mineshaft-100">Default Organization Member Role</h2>
+          <p className="text-mineshaft-400" />
+          <Controller
+            defaultValue=""
+            control={control}
+            name="defaultMembershipRole"
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                helperText="Users joining your org will be assigned this role unless otherwise specified"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                className="max-w-md"
+              >
+                <Select
+                  isDisabled={isRolesLoading}
+                  className="w-full capitalize"
+                  value={value}
+                  onValueChange={!roles?.length ? undefined : onChange}
+                >
+                  {roles?.map((role) => {
+                    return (
+                      <SelectItem key={role.id} value={role.slug}>
+                        {role.name}
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+            )}
+          />
+        </div>
+      )}
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (
           <Button