Merge pull request #3795 from Infisical/ENG-2928

feat(machine-identities): Delete protection

frontend/src/hooks/api/auditLogs/types.tsx

@@ -242,6 +242,7 @@ interface CreateIdentityEvent {
   metadata: {
     identityId: string;
     name: string;
+    hasDeleteProtection: boolean;
   };
 }
 
@@ -250,6 +251,7 @@ interface UpdateIdentityEvent {
   metadata: {
     identityId: string;
     name?: string;
+    hasDeleteProtection?: boolean;
   };
 }
 

frontend/src/hooks/api/identities/mutations.tsx

@@ -85,12 +85,13 @@ export const useCreateIdentity = () => {
 export const useUpdateIdentity = () => {
   const queryClient = useQueryClient();
   return useMutation<Identity, object, UpdateIdentityDTO>({
-    mutationFn: async ({ identityId, name, role, metadata }) => {
+    mutationFn: async ({ identityId, name, role, hasDeleteProtection, metadata }) => {
       const {
         data: { identity }
       } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
         name,
         role,
+        hasDeleteProtection,
         metadata
       });
 

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

@@ -14,6 +14,7 @@ export type IdentityTrustedIp = {
 export type Identity = {
   id: string;
   name: string;
+  hasDeleteProtection: boolean;
   authMethods: IdentityAuthMethod[];
   createdAt: string;
   updatedAt: string;
@@ -83,6 +84,7 @@ export type CreateIdentityDTO = {
   name: string;
   organizationId: string;
   role?: string;
+  hasDeleteProtection: boolean;
   metadata?: { key: string; value: string }[];
 };
 
@@ -90,6 +92,7 @@ export type UpdateIdentityDTO = {
   identityId: string;
   name?: string;
   role?: string;
+  hasDeleteProtection?: boolean;
   organizationId: string;
   metadata?: { key: string; value: string }[];
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -15,7 +15,8 @@ import {
   IconButton,
   Input,
   Modal,
-  ModalContent
+  ModalContent,
+  Switch
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { findOrgMembershipRole } from "@app/helpers/roles";
@@ -27,6 +28,7 @@ const schema = z
   .object({
     name: z.string().min(1, "Required"),
     role: z.object({ slug: z.string(), name: z.string() }),
+    hasDeleteProtection: z.boolean(),
     metadata: z
       .object({
         key: z.string().trim().min(1),
@@ -64,7 +66,8 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
-      name: ""
+      name: "",
+      hasDeleteProtection: false
     }
   });
 
@@ -78,6 +81,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       identityId: string;
       name: string;
       role: string;
+      hasDeleteProtection: boolean;
       metadata?: { key: string; value: string }[];
       customRole: {
         name: string;
@@ -91,22 +95,25 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       reset({
         name: identity.name,
         role: identity.customRole ?? findOrgMembershipRole(roles, identity.role),
+        hasDeleteProtection: identity.hasDeleteProtection,
         metadata: identity.metadata
       });
     } else {
       reset({
         name: "",
-        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole)
+        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole),
+        hasDeleteProtection: false
       });
     }
   }, [popUp?.identity?.data, roles]);
 
-  const onFormSubmit = async ({ name, role, metadata }: FormData) => {
+  const onFormSubmit = async ({ name, role, metadata, hasDeleteProtection }: FormData) => {
     try {
       const identity = popUp?.identity?.data as {
         identityId: string;
         name: string;
         role: string;
+        hasDeleteProtection: boolean;
       };
 
       if (identity) {
@@ -116,6 +123,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
           identityId: identity.identityId,
           name,
           role: role.slug || undefined,
+          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -127,6 +135,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         const { id: createdId } = await createMutateAsync({
           name,
           role: role.slug || undefined,
+          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -215,6 +224,24 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
+          <Controller
+            control={control}
+            name="hasDeleteProtection"
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <FormControl errorText={error?.message} isError={Boolean(error)}>
+                <Switch
+                  className="ml-0 mr-2 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                  containerClassName="flex-row-reverse w-fit"
+                  id="delete-protection-enabled"
+                  thumbClassName="bg-mineshaft-800"
+                  onCheckedChange={onChange}
+                  isChecked={value}
+                >
+                  <p>Delete Protection {value ? "Enabled" : "Disabled"}</p>
+                </Switch>
+              </FormControl>
+            )}
+          />
           <div>
             <FormLabel label="Metadata" />
           </div>

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -329,7 +329,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             <FontAwesomeIcon size="sm" icon={faEllipsis} />
                           </div>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
+                        <DropdownMenuContent align="start" className="mt-3 p-1">
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -47,13 +47,19 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <DropdownMenuTrigger asChild>
             <Button
               size="xs"
-              rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
+              rightIcon={
+                <FontAwesomeIcon
+                  className="ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180"
+                  icon={faChevronDown}
+                />
+              }
               colorSchema="secondary"
+              className="group select-none"
             >
               Options
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="min-w-[120px]" align="end">
+          <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
             <OrgPermissionCan
               I={OrgPermissionIdentityActions.Edit}
               a={OrgPermissionSubjects.Identity}
@@ -68,6 +74,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
                     handlePopUpOpen("identity", {
                       identityId,
                       name: data.identity.name,
+                      hasDeleteProtection: data.identity.hasDeleteProtection,
                       role: data.role,
                       customRole: data.customRole
                     });
@@ -131,6 +138,12 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
         </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Delete Protection</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.identity.hasDeleteProtection ? "On" : "Off"}
+          </p>
+        </div>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
           <p className="text-sm text-mineshaft-300">{data.role}</p>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx

@@ -35,7 +35,7 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
                   Options
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent className="min-w-[120px]" align="end">
+              <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
                 <OrgPermissionCan
                   I={OrgPermissionIdentityActions.Edit}
                   a={OrgPermissionSubjects.Identity}