feat(infisical-pg): removed _id with id for new backend

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

@@ -2,14 +2,14 @@ import { TRole } from "../roles/types";
 import { IdentityAuthMethod } from "./enums";
 
 export type IdentityTrustedIp = {
-    _id: string;
+    id: string;
     ipAddress: string;
     type: "ipv4" | "ipv6";
     prefix?: number;
 }
 
 export type Identity = {
-    _id: string;
+    id: string;
     name: string;
     authMethod?: IdentityAuthMethod;
     createdAt: string;
@@ -17,7 +17,7 @@ export type Identity = {
 };
 
 export type IdentityMembershipOrg = {
-    _id: string;
+    id: string;
     identity: Identity;
     organization: string;
     role: "admin" | "member" | "viewer" | "no-access" | "custom";
@@ -27,7 +27,7 @@ export type IdentityMembershipOrg = {
 }
 
 export type IdentityMembership = {
-    _id: string;
+    id: string;
     identity: Identity;
     organization: string;
     role: "admin" | "member" | "viewer" | "no-access" | "custom";
@@ -100,7 +100,7 @@ export type CreateIdentityUniversalAuthClientSecretDTO = {
 }
 
 export type ClientSecretData = {
-    _id: string;
+    id: string;
     identityUniversalAuth: string;
     isClientSecretRevoked: boolean;
     description: string;

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -324,7 +324,7 @@ export const Navbar = () => {
 
               // direct user to start pro trial
               const url = await mutateAsync({
-                orgId: currentOrg._id,
+                orgId: currentOrg.id,
                 success_url: window.location.href
               });
 

frontend/src/pages/integrations/cloudflare-pages/authorize.tsx

@@ -36,7 +36,7 @@ export default function RenderCreateIntegrationPage() {
 
       setIsLoading(false);
 
-      router.push(`/integrations/render/create?integrationAuthId=${integrationAuth._id}`);
+      router.push(`/integrations/render/create?integrationAuthId=${integrationAuth.id}`);
     } catch (err) {
       console.error(err);
     }

frontend/src/pages/integrations/cloudflare-workers/create.tsx

@@ -46,12 +46,12 @@ export default function CloudflareWorkersIntegrationPage() {
 
   const handleButtonClick = async () => {
     try {
-      if (!integrationAuth?._id) return;
+      if (!integrationAuth?.id) return;
 
       setIsLoading(true);
 
       await mutateAsync({
-        integrationAuthId: integrationAuth?._id,
+        integrationAuthId: integrationAuth?.id,
         isActive: true,
         app: targetApp,
         appId: targetAppId,

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -1,31 +1,29 @@
 import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
-    Button,
+  Button,
-    FormControl,
+  FormControl,
-    Input,
+  Input,
-    Modal,
+  Modal,
-    ModalContent,
+  ModalContent,
-    Select,
+  Select,
-    SelectItem
+  SelectItem
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { 
+import { useCreateIdentity, useGetRoles, useUpdateIdentity } from "@app/hooks/api";
-    useCreateIdentity,
-    useGetRoles,
-    useUpdateIdentity
-} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     name: yup.string().required("MI name is required"),
-    role: yup.string(),
+    role: yup.string()
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -34,206 +32,191 @@ type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     data: {
-        identityId: string;
+      identityId: string;
-        name: string;
+      name: string;
-        authMethod?: IdentityAuthMethod;
+      authMethod?: IdentityAuthMethod;
     }
   ) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
-export const IdentityModal = ({
+export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
-    popUp,
+  const { createNotification } = useNotificationContext();
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
-    const { createNotification } = useNotificationContext();
 
-    const { currentOrg } = useOrganization();
+  const { currentOrg } = useOrganization();
-    const orgId = currentOrg?._id || "";
+  const orgId = currentOrg?.id || "";
 
-    const { data: roles } = useGetRoles({
+  const { data: roles } = useGetRoles({
-        orgId
+    orgId
-    });
+  });
-    
-    const { mutateAsync: createMutateAsync } = useCreateIdentity();
-    const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            name: ""
-        }
-    });
-    
-    useEffect(() => {
-        
-        const identity = popUp?.identity?.data as { 
-            identityId: string;
-            name: string;
-            role: string;
-            customRole: {
-                name: string;
-                slug: string;
-            };
-        };
 
-        if (!roles?.length) return;
+  const { mutateAsync: createMutateAsync } = useCreateIdentity();
-    
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-        if (identity) {
-            reset({
-                name: identity.name,
-                role: identity?.customRole?.slug ?? identity.role
-            });
-        } else {
-            reset({
-                name: "",
-                role: roles[0].slug
-            });
-        }
-    }, [popUp?.identity?.data, roles]);
-    
-    const onFormSubmit = async ({
-        name,
-        role,
-    }: FormData) => {
-        try {
-            
-            const identity = popUp?.identity?.data as { 
-                identityId: string;
-                name: string;
-                role: string;
-            };
-            
-            if (identity) {
-                // update
-                
-                await updateMutateAsync({
-                    identityId: identity.identityId,
-                    name,
-                    role: role || undefined,
-                    organizationId: orgId
-                });
-                
-                handlePopUpToggle("identity", false);
-            } else {
-                // create
-                
-                const { 
-                    _id: createdId,
-                    name: createdName,
-                    authMethod
-                } = await createMutateAsync({
-                    name,
-                    role: role || undefined,
-                    organizationId: orgId
-                });
-                
-                handlePopUpToggle("identity", false);
-                handlePopUpOpen("identityAuthMethod", {
-                    identityId: createdId,
-                    name: createdName,
-                    authMethod
-                });
-            }
-            
-            createNotification({
-                text: `Successfully ${popUp?.identity?.data ? "updated" : "created"} identity`,
-                type: "success"
-            });
 
-            reset();
+  const {
-        } catch (err) {
+    control,
-            console.error(err);
+    handleSubmit,
-            const error = err as any;
+    reset,
-            const text = error?.response?.data?.message
+    formState: { isSubmitting }
-                ?? `Failed to ${popUp?.identity?.data ? "updated" : "created"} identity`;
+  } = useForm<FormData>({
-            
+    resolver: yupResolver(schema),
-            createNotification({
+    defaultValues: {
-                text,
+      name: ""
-                type: "error"
-            });
-        }
     }
+  });
 
-    return (
+  useEffect(() => {
-        <Modal
+    const identity = popUp?.identity?.data as {
-            isOpen={popUp?.identity?.isOpen}
+      identityId: string;
-                onOpenChange={(isOpen) => {
+      name: string;
-                handlePopUpToggle("identity", isOpen);
+      role: string;
-                reset();
+      customRole: {
-            }}
+        name: string;
-        >
+        slug: string;
-            <ModalContent title={`${popUp?.identity?.data ? "Update" : "Create"} Identity`}>
+      };
-                <form onSubmit={handleSubmit(onFormSubmit)}>
+    };
-                    <Controller
+
-                        control={control}
+    if (!roles?.length) return;
-                        defaultValue=""
+
-                        name="name"
+    if (identity) {
-                        render={({ field, fieldState: { error } }) => (
+      reset({
-                            <FormControl
+        name: identity.name,
-                                label="Name"
+        role: identity?.customRole?.slug ?? identity.role
-                                isError={Boolean(error)}
+      });
-                                errorText={error?.message}
+    } else {
-                            >
+      reset({
-                            <Input 
+        name: "",
-                                {...field} 
+        role: roles[0].slug
-                                placeholder="Machine 1"
+      });
-                            />
+    }
-                            </FormControl>
+  }, [popUp?.identity?.data, roles]);
-                        )}
+
-                    />
+  const onFormSubmit = async ({ name, role }: FormData) => {
-                    <Controller
+    try {
-                        control={control}
+      const identity = popUp?.identity?.data as {
-                        name="role"
+        identityId: string;
-                        defaultValue=""
+        name: string;
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+        role: string;
-                            <FormControl
+      };
-                                label={`${popUp?.identity?.data ? "Update" : ""} Role`}
+
-                                errorText={error?.message}
+      if (identity) {
-                                isError={Boolean(error)}
+        // update
-                                className="mt-4"
+
-                            >
+        await updateMutateAsync({
-                                <Select
+          identityId: identity.identityId,
-                                    defaultValue={field.value}
+          name,
-                                    {...field}
+          role: role || undefined,
-                                    onValueChange={(e) => onChange(e)}
+          organizationId: orgId
-                                    className="w-full"
+        });
-                                >
+
-                                    {(roles || []).map(({ name, slug }) => (
+        handlePopUpToggle("identity", false);
-                                        <SelectItem value={slug} key={`st-role-${slug}`}>
+      } else {
-                                            {name}
+        // create
-                                        </SelectItem>
+
-                                    ))}
+        const {
-                                </Select>
+          id: createdId,
-                            </FormControl>
+          name: createdName,
-                        )}
+          authMethod
-                    />
+        } = await createMutateAsync({
-                    <div className="flex items-center">
+          name,
-                        <Button
+          role: role || undefined,
-                            className="mr-4"
+          organizationId: orgId
-                            size="sm"
+        });
-                            type="submit"
+
-                            isLoading={isSubmitting}
+        handlePopUpToggle("identity", false);
-                            isDisabled={isSubmitting}
+        handlePopUpOpen("identityAuthMethod", {
-                        >
+          identityId: createdId,
-                            {popUp?.identity?.data ? "Update" : "Create"}
+          name: createdName,
-                        </Button>
+          authMethod
-                        <Button 
+        });
-                            colorSchema="secondary" 
+      }
-                            variant="plain"
+
-                            onClick={() => handlePopUpToggle("identity", false)}
+      createNotification({
-                        >
+        text: `Successfully ${popUp?.identity?.data ? "updated" : "created"} identity`,
-                            Cancel
+        type: "success"
-                        </Button>
+      });
-                    </div>
+
-                </form>
+      reset();
-            </ModalContent>
+    } catch (err) {
-        </Modal>
+      console.error(err);
-    );
+      const error = err as any;
-}
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${popUp?.identity?.data ? "updated" : "created"} identity`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.identity?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("identity", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${popUp?.identity?.data ? "Update" : "Create"} Identity`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Machine 1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="role"
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label={`${popUp?.identity?.data ? "Update" : ""} Role`}
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(roles || []).map(({ name, slug }) => (
+                    <SelectItem value={slug} key={`st-role-${slug}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.identity?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("identity", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -4,14 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { 
+import { Button, DeleteActionModal } from "@app/components/v2";
-  Button,
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-  DeleteActionModal
-} from "@app/components/v2";
-import { 
-    OrgPermissionActions, 
-    OrgPermissionSubjects, 
-    useOrganization} from "@app/context";
 import { withPermission } from "@app/hoc";
 import { useDeleteIdentity } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -22,109 +16,110 @@ import { IdentityTable } from "./IdentityTable";
 import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";
 
 export const IdentitySection = withPermission(
-    () => {
+  () => {
-        const { currentOrg } = useOrganization();
+    const { currentOrg } = useOrganization();
-        const orgId = currentOrg?._id || "";
+    const orgId = currentOrg?.id || "";
-    
-        const { createNotification } = useNotificationContext();
-        const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
-        const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-            "identity",
-            "identityAuthMethod",
-            "deleteIdentity",
-            "universalAuthClientSecret",
-            "deleteUniversalAuthClientSecret",
-            "upgradePlan"
-        ] as const);
-        
-        const onDeleteIdentitySubmit = async (identityId: string) => {
-            try {
-                
-                await deleteMutateAsync({
-                    identityId,
-                    organizationId: orgId
-                });
-                
-                createNotification({
-                    text: "Successfully deleted identity",
-                    type: "success"
-                });
-                
-                handlePopUpClose("deleteIdentity");
-            } catch (err) {
-                console.error(err);
-                const error = err as any;
-                const text = error?.response?.data?.message
-                    ?? "Failed to delete identity"
 
-                createNotification({
+    const { createNotification } = useNotificationContext();
-                    text,
+    const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
-                    type: "error"
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-                });
+      "identity",
-            }
+      "identityAuthMethod",
-        }
+      "deleteIdentity",
-        
+      "universalAuthClientSecret",
-        return (
+      "deleteUniversalAuthClientSecret",
-            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      "upgradePlan"
-                <div className="flex justify-between mb-4">
+    ] as const);
-                    <p className="text-xl font-semibold text-mineshaft-100">
+
-                        Identities
+    const onDeleteIdentitySubmit = async (identityId: string) => {
-                    </p>
+      try {
-                    <div className="flex justify-end w-full pr-4">
+        await deleteMutateAsync({
-                        <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+          identityId,
-                            <a target="_blank" rel="noopener noreferrer" className="rounded-md px-4 py-2 w-max text-mineshaft-200 hover:text-white bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 duration-200 cursor-pointer">
+          organizationId: orgId
-                            Documentation <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs mb-[0.06rem] ml-1"/>
+        });
-                            </a>
+
-                        </Link> 
+        createNotification({
-                    </div>
+          text: "Successfully deleted identity",
-                    <OrgPermissionCan
+          type: "success"
-                        I={OrgPermissionActions.Create}
+        });
-                        a={OrgPermissionSubjects.Identity}
+
-                    >
+        handlePopUpClose("deleteIdentity");
-                        {(isAllowed) => (
+      } catch (err) {
-                        <Button
+        console.error(err);
-                            colorSchema="primary"
+        const error = err as any;
-                            type="submit"
+        const text = error?.response?.data?.message ?? "Failed to delete identity";
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+
-                            onClick={() => handlePopUpOpen("identity")}
+        createNotification({
-                            isDisabled={!isAllowed}
+          text,
-                        >
+          type: "error"
-                            Create identity
+        });
-                        </Button>
+      }
-                        )}
+    };
-                    </OrgPermissionCan>
+
-                </div>
+    return (
-                <IdentityTable handlePopUpOpen={handlePopUpOpen} />
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-                <IdentityModal
+        <div className="mb-4 flex justify-between">
-                    popUp={popUp}
+          <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-                    handlePopUpOpen={handlePopUpOpen}
+          <div className="flex w-full justify-end pr-4">
-                    handlePopUpToggle={handlePopUpToggle}
+            <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
-                />
+              <a
-                <IdentityAuthMethodModal 
+                target="_blank"
-                    popUp={popUp}
+                rel="noopener noreferrer"
-                    handlePopUpOpen={handlePopUpOpen}
+                className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white"
-                    handlePopUpToggle={handlePopUpToggle}
+              >
-                />
+                Documentation{" "}
-                <IdentityUniversalAuthClientSecretModal 
+                <FontAwesomeIcon
-                    popUp={popUp}
+                  icon={faArrowUpRightFromSquare}
-                    handlePopUpOpen={handlePopUpOpen}
+                  className="mb-[0.06rem] ml-1 text-xs"
-                    handlePopUpToggle={handlePopUpToggle}
-                />
-                <DeleteActionModal
-                    isOpen={popUp.deleteIdentity.isOpen}
-                    title={`Are you sure want to delete ${
-                        (popUp?.deleteIdentity?.data as { name: string })?.name || ""
-                    }?`}
-                    onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
-                    deleteKey="confirm"
-                    onDeleteApproved={() => 
-                        onDeleteIdentitySubmit(
-                            (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
-                        )
-                    }
                 />
+              </a>
+            </Link>
+          </div>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Identity}>
+            {(isAllowed) => (
+              <Button
+                colorSchema="primary"
+                type="submit"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("identity")}
+                isDisabled={!isAllowed}
+              >
+                Create identity
+              </Button>
+            )}
+          </OrgPermissionCan>
         </div>
-        );
+        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
-    },
+        <IdentityModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <IdentityAuthMethodModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <IdentityUniversalAuthClientSecretModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteIdentity.isOpen}
+          title={`Are you sure want to delete ${
+            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeleteIdentitySubmit(
+              (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+            )
+          }
+        />
+      </div>
+    );
+  },
   { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Identity }
 );

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,269 +1,248 @@
-import { faKey, faLock,faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-    EmptyState,
+  EmptyState,
-    IconButton,
+  IconButton,
-    Select,
+  Select,
-    SelectItem,
+  SelectItem,
-    Table,
+  Table,
-    TableContainer,
+  TableContainer,
-    TableSkeleton,
+  TableSkeleton,
-    TBody,
+  TBody,
-    Td,
+  Td,
-    Th,
+  Th,
-    THead,
+  THead,
-    Tooltip,
+  Tooltip,
-    Tr
+  Tr
 } from "@app/components/v2";
-import { 
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-    OrgPermissionActions,
+import { useGetIdentityMembershipOrgs, useGetRoles, useUpdateIdentity } from "@app/hooks/api";
-    OrgPermissionSubjects,
-    useOrganization} from "@app/context";
-import {
-    useGetIdentityMembershipOrgs,
-    useGetRoles,
-    useUpdateIdentity} from "@app/hooks/api";
 import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 // TODO: some kind of map
 
 type Props = {
-    handlePopUpOpen: (
+  handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteIdentity", "identity", "universalAuthClientSecret", "identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<
-      data?: {
+      ["deleteIdentity", "identity", "universalAuthClientSecret", "identityAuthMethod"]
-        identityId?: string;
+    >,
-        name?: string;
+    data?: {
-        authMethod?: string;
+      identityId?: string;
-        role?: string;
+      name?: string;
-        customRole?: {
+      authMethod?: string;
-            name: string;
+      role?: string;
-            slug: string;
+      customRole?: {
-        };
+        name: string;
-      }
+        slug: string;
-    ) => void;
+      };
+    }
+  ) => void;
+};
+
+export const IdentityTable = ({ handlePopUpOpen }: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+  const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);
+
+  const { data: roles } = useGetRoles({
+    orgId
+  });
+
+  const handleChangeRole = async ({ identityId, role }: { identityId: string; role: string }) => {
+    try {
+      await updateMutateAsync({
+        identityId,
+        role,
+        organizationId: orgId
+      });
+
+      createNotification({
+        text: "Successfully updated identity role",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to update identity role";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
   };
 
-export const IdentityTable = ({
+  return (
-    handlePopUpOpen
+    <TableContainer>
-}: Props) => {
+      <Table>
-    const { createNotification } = useNotificationContext();
+        <THead>
-    const { currentOrg } = useOrganization();
+          <Tr>
-    const orgId = currentOrg?._id || "";
+            <Th>Name</Th>
-
+            <Th>ID</Th>
-    const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+            <Th>Role</Th>
-    const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);
+            <Th>Auth Method</Th>
-    
+            <Th className="w-5" />
-    const { data: roles } = useGetRoles({
+          </Tr>
-        orgId
+        </THead>
-    });
+        <TBody>
-    
+          {isLoading && <TableSkeleton columns={4} innerKey="org-identities" />}
-    const handleChangeRole = async ({
+          {!isLoading &&
-        identityId,
+            data &&
-        role
+            data.length > 0 &&
-    }: {
+            data.map(({ identity: { id, name, authMethod }, role, customRole }) => {
-        identityId: string;
+              return (
-        role: string;
+                <Tr className="h-10" key={`identity-${id}`}>
-    }) => {
+                  <Td>{name}</Td>
-        try {
+                  <Td>{id}</Td>
-            
+                  <Td>
-            await updateMutateAsync({
+                    <OrgPermissionCan
-                identityId,
+                      I={OrgPermissionActions.Edit}
-                role,
+                      a={OrgPermissionSubjects.Identity}
-                organizationId: orgId
+                    >
-            });
+                      {(isAllowed) => {
-            
-            createNotification({
-                text: "Successfully updated identity role",
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            const error = err as any;
-            const text = error?.response?.data?.message ?? "Failed to update identity role"
-            
-            createNotification({
-                text,
-                type: "error"
-              });
-        }
-    }
-      
-    return (
-        <TableContainer>
-            <Table>
-                <THead>
-                    <Tr>
-                        <Th>Name</Th>
-                        <Th>ID</Th>
-                        <Th>Role</Th>
-                        <Th>Auth Method</Th>
-                        <Th className="w-5" />
-                    </Tr>
-                </THead>
-                <TBody>
-                    {isLoading && <TableSkeleton columns={4} innerKey="org-identities" />}
-                    {!isLoading &&
-                    data &&
-                    data.length > 0 &&
-                    data.map(({
-                        identity: {
-                            _id,
-                            name,
-                            authMethod
-                        },
-                        role,
-                        customRole
-                    }) => {
                         return (
-                            <Tr className="h-10" key={`identity-${_id}`}>
+                          <Select
-                                <Td>{name}</Td>
+                            value={role === "custom" ? (customRole?.slug as string) : role}
-                                <Td>{_id}</Td>
+                            isDisabled={!isAllowed}
-                                <Td>
+                            className="w-40 bg-mineshaft-600"
-                                    <OrgPermissionCan
+                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                        I={OrgPermissionActions.Edit}
+                            onValueChange={(selectedRole) =>
-                                        a={OrgPermissionSubjects.Identity}
+                              handleChangeRole({
-                                    >
+                                identityId: id,
-                                        {(isAllowed) => {
+                                role: selectedRole
-                                            return (
+                              })
-                                                <Select
+                            }
-                                                    value={
+                          >
-                                                        role === "custom" ? (customRole?.slug as string) : role
+                            {(roles || []).map(({ slug, name: roleName }) => (
-                                                    }
+                              <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                                    isDisabled={!isAllowed}
+                                {roleName}
-                                                    className="w-40 bg-mineshaft-600"
+                              </SelectItem>
-                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                            ))}
-                                                    onValueChange={(selectedRole) => 
+                          </Select>
-                                                        handleChangeRole({
-                                                            identityId: _id,
-                                                            role: selectedRole
-                                                        })
-                                                    }
-                                                >
-                                                    {(roles || [])
-                                                        .map(({ slug, name: roleName }) => (
-                                                            <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                                            {roleName}
-                                                            </SelectItem>
-                                                        ))}
-                                                </Select>
-                                            );
-                                        }}
-                                    </OrgPermissionCan>
-                                </Td> 
-                                <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
-                                <Td>
-                                    <div className="flex justify-end items-center">
-                                        {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-                                            <Tooltip content="Manage client ID/secrets">
-                                                <IconButton
-                                                    onClick={async () => {
-                                                        handlePopUpOpen("universalAuthClientSecret", {
-                                                            identityId: _id,
-                                                            name
-                                                        });
-                                                    }}
-                                                    size="lg"
-                                                    colorSchema="primary"
-                                                    variant="plain"
-                                                    ariaLabel="update"
-                                                    // isDisabled={!isAllowed}
-                                                >
-                                                    <FontAwesomeIcon icon={faKey} />
-                                                </IconButton>
-                                            </Tooltip>
-                                        )}
-                                        <OrgPermissionCan
-                                            I={OrgPermissionActions.Edit}
-                                            a={OrgPermissionSubjects.Identity}
-                                        >
-                                            {(isAllowed) => (
-                                                <Tooltip content="Manage auth method">
-                                                    <IconButton
-                                                        onClick={async () => {
-                                                            handlePopUpOpen("identityAuthMethod", {
-                                                                identityId: _id,
-                                                                name,
-                                                                authMethod
-                                                            });
-                                                        }}
-                                                        size="lg"
-                                                        colorSchema="primary"
-                                                        variant="plain"
-                                                        ariaLabel="update"
-                                                        className="ml-4"
-                                                        isDisabled={!isAllowed}
-                                                    >
-                                                        <FontAwesomeIcon icon={faLock} />
-                                                    </IconButton>
-                                                </Tooltip>
-                                            )}
-                                        </OrgPermissionCan>
-                                        <OrgPermissionCan
-                                            I={OrgPermissionActions.Edit}
-                                            a={OrgPermissionSubjects.Identity}
-                                        >
-                                            {(isAllowed) => (
-                                                <IconButton
-                                                    onClick={async () => {
-                                                        handlePopUpOpen("identity", {
-                                                            identityId: _id,
-                                                            name,
-                                                            role,
-                                                            customRole
-                                                        });
-                                                    }}
-                                                    size="lg"
-                                                    colorSchema="primary"
-                                                    variant="plain"
-                                                    ariaLabel="update"
-                                                    className="ml-4"
-                                                    isDisabled={!isAllowed}
-                                                >
-                                                    <FontAwesomeIcon icon={faPencil} />
-                                                </IconButton>
-                                            )}
-                                        </OrgPermissionCan>
-                                        <OrgPermissionCan
-                                            I={OrgPermissionActions.Delete}
-                                            a={OrgPermissionSubjects.Identity}
-                                        >
-                                            {(isAllowed) => (
-                                                <IconButton
-                                                    onClick={() => {
-                                                        handlePopUpOpen("deleteIdentity", {
-                                                            identityId: _id,
-                                                            name
-                                                        });
-                                                    }}
-                                                    size="lg"
-                                                    colorSchema="danger"
-                                                    variant="plain"
-                                                    ariaLabel="update"
-                                                    className="ml-4"
-                                                    isDisabled={!isAllowed}
-                                                >
-                                                    <FontAwesomeIcon icon={faXmark} />
-                                                </IconButton>
-                                            )}
-                                        </OrgPermissionCan>
-                                    </div>
-                                </Td>
-                            </Tr>
                         );
-                    })}
+                      }}
-                    {!isLoading && data && data?.length === 0 && (
+                    </OrgPermissionCan>
-                        <Tr>
+                  </Td>
-                            <Td colSpan={4}>
+                  <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
-                                <EmptyState title="No identities have been created in this organization" icon={faServer} />
+                  <Td>
-                            </Td>
+                    <div className="flex items-center justify-end">
-                        </Tr>
+                      {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-                    )}
+                        <Tooltip content="Manage client ID/secrets">
-                </TBody>
+                          <IconButton
-            </Table>
+                            onClick={async () => {
-        </TableContainer>
+                              handlePopUpOpen("universalAuthClientSecret", {
-    );
+                                identityId: id,
-}
+                                name
+                              });
+                            }}
+                            size="lg"
+                            colorSchema="primary"
+                            variant="plain"
+                            ariaLabel="update"
+                            // isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faKey} />
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Identity}
+                      >
+                        {(isAllowed) => (
+                          <Tooltip content="Manage auth method">
+                            <IconButton
+                              onClick={async () => {
+                                handlePopUpOpen("identityAuthMethod", {
+                                  identityId: id,
+                                  name,
+                                  authMethod
+                                });
+                              }}
+                              size="lg"
+                              colorSchema="primary"
+                              variant="plain"
+                              ariaLabel="update"
+                              className="ml-4"
+                              isDisabled={!isAllowed}
+                            >
+                              <FontAwesomeIcon icon={faLock} />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </OrgPermissionCan>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Identity}
+                      >
+                        {(isAllowed) => (
+                          <IconButton
+                            onClick={async () => {
+                              handlePopUpOpen("identity", {
+                                identityId: id,
+                                name,
+                                role,
+                                customRole
+                              });
+                            }}
+                            size="lg"
+                            colorSchema="primary"
+                            variant="plain"
+                            ariaLabel="update"
+                            className="ml-4"
+                            isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faPencil} />
+                          </IconButton>
+                        )}
+                      </OrgPermissionCan>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Delete}
+                        a={OrgPermissionSubjects.Identity}
+                      >
+                        {(isAllowed) => (
+                          <IconButton
+                            onClick={() => {
+                              handlePopUpOpen("deleteIdentity", {
+                                identityId: id,
+                                name
+                              });
+                            }}
+                            size="lg"
+                            colorSchema="danger"
+                            variant="plain"
+                            ariaLabel="update"
+                            className="ml-4"
+                            isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faXmark} />
+                          </IconButton>
+                        )}
+                      </OrgPermissionCan>
+                    </div>
+                  </Td>
+                </Tr>
+              );
+            })}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={4}>
+                <EmptyState
+                  title="No identities have been created in this organization"
+                  icon={faServer}
+                />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { faCheck, faCopy, faKey,faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { format } from "date-fns";
@@ -9,403 +9,394 @@ import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
-    Button,
+  Button,
-    DeleteActionModal,
+  DeleteActionModal,
-    EmptyState,
+  EmptyState,
-    FormControl,
+  FormControl,
-    IconButton,
+  IconButton,
-    Input,
+  Input,
-    Modal,
+  Modal,
-    ModalContent,
+  ModalContent,
-    Table,
+  Table,
-    TableContainer,
+  TableContainer,
-    TableSkeleton,
+  TableSkeleton,
-    TBody,
+  TBody,
-    Td,
+  Td,
-    Th,
+  Th,
-    THead,
+  THead,
-    Tr,
+  Tr
 } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
-import { 
+import {
-    useCreateIdentityUniversalAuthClientSecret,
+  useCreateIdentityUniversalAuthClientSecret,
-    useGetIdentityUniversalAuth,
+  useGetIdentityUniversalAuth,
-    useGetIdentityUniversalAuthClientSecrets,    useRevokeIdentityUniversalAuthClientSecret} from "@app/hooks/api";
+  useGetIdentityUniversalAuthClientSecrets,
+  useRevokeIdentityUniversalAuthClientSecret
+} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup.object({
-    description: yup.string(),
+  description: yup.string(),
-    ttl: yup.string(),
+  ttl: yup.string(),
-    numUsesLimit: yup.string()
+  numUsesLimit: yup.string()
 });
 
 export type FormData = yup.InferType<typeof schema>;
 
 type Props = {
-    popUp: UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>;
+  popUp: UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>;
-    handlePopUpOpen: (
+  handlePopUpOpen: (
-        popUpName: keyof UsePopUpState<["deleteUniversalAuthClientSecret"]>,
+    popUpName: keyof UsePopUpState<["deleteUniversalAuthClientSecret"]>,
-        data?: {
+    data?: {
-            clientSecretPrefix: string;
+      clientSecretPrefix: string;
-            clientSecretId: string;
+      clientSecretId: string;
-        }
+    }
-    ) => void;
+  ) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>, state?: boolean) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<
+      ["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]
+    >,
+    state?: boolean
+  ) => void;
 };
 
 export const IdentityUniversalAuthClientSecretModal = ({
-    popUp,
+  popUp,
-    handlePopUpOpen,
+  handlePopUpOpen,
-    handlePopUpToggle
+  handlePopUpToggle
 }: Props) => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const [token, setToken] = useState("");
+  const [token, setToken] = useState("");
-    const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
+  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
-    const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
+  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
 
-    const popUpData = (popUp?.universalAuthClientSecret?.data as {
+  const popUpData = popUp?.universalAuthClientSecret?.data as {
-        identityId?: string;
+    identityId?: string;
-        name?: string;
+    name?: string;
-    });
+  };
-    
-    const { data, isLoading } = useGetIdentityUniversalAuthClientSecrets(popUpData?.identityId ?? "");
-    const { data: identityUniversalAuth } = useGetIdentityUniversalAuth(popUpData?.identityId ?? "");
 
-    const { mutateAsync: createClientSecretMutateAsync } = useCreateIdentityUniversalAuthClientSecret();
+  const { data, isLoading } = useGetIdentityUniversalAuthClientSecrets(popUpData?.identityId ?? "");
-    const { mutateAsync: revokeClientSecretMutateAsync } = useRevokeIdentityUniversalAuthClientSecret();
+  const { data: identityUniversalAuth } = useGetIdentityUniversalAuth(popUpData?.identityId ?? "");
 
-    const {
+  const { mutateAsync: createClientSecretMutateAsync } =
-        control,
+    useCreateIdentityUniversalAuthClientSecret();
-        handleSubmit,
+  const { mutateAsync: revokeClientSecretMutateAsync } =
-        reset,
+    useRevokeIdentityUniversalAuthClientSecret();
-        formState: { isSubmitting }
+
-    } = useForm<FormData>({
+  const {
-        resolver: yupResolver(schema),
+    control,
-        defaultValues: {
+    handleSubmit,
-            description: "",
+    reset,
-            ttl: "",
+    formState: { isSubmitting }
-            numUsesLimit: ""
+  } = useForm<FormData>({
-        }
+    resolver: yupResolver(schema),
-    });
+    defaultValues: {
-    
+      description: "",
-    useEffect(() => {
+      ttl: "",
-        let timer: NodeJS.Timeout;
+      numUsesLimit: ""
-        if (isClientSecretCopied) {
+    }
-            timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
+  });
-        }
+
-    
+  useEffect(() => {
-        return () => clearTimeout(timer);
+    let timer: NodeJS.Timeout;
-    }, [isClientSecretCopied]);
+    if (isClientSecretCopied) {
-    
+      timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
-    useEffect(() => {
+    }
-        let timer: NodeJS.Timeout;
+
-        if (isClientIdCopied) {
+    return () => clearTimeout(timer);
-            timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
+  }, [isClientSecretCopied]);
-        }
+
-    
+  useEffect(() => {
-        return () => clearTimeout(timer);
+    let timer: NodeJS.Timeout;
-    }, [isClientIdCopied]);
+    if (isClientIdCopied) {
-    
+      timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
-    const onFormSubmit = async ({
+    }
+
+    return () => clearTimeout(timer);
+  }, [isClientIdCopied]);
+
+  const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
+    try {
+      if (!popUpData?.identityId) return;
+
+      const { clientSecret } = await createClientSecretMutateAsync({
+        identityId: popUpData.identityId,
         description,
-        ttl,
+        ttl: Number(ttl),
-        numUsesLimit
+        numUsesLimit: Number(numUsesLimit)
-    }: FormData) => {
+      });
-        try {
-            
-            if (!popUpData?.identityId) return;
 
-            const { clientSecret } = await createClientSecretMutateAsync({
+      setToken(clientSecret);
-                identityId: popUpData.identityId,
-                description,
-                ttl: Number(ttl),
-                numUsesLimit: Number(numUsesLimit)
-            });
 
-            setToken(clientSecret);
+      createNotification({
-
+        text: "Successfully created client secret",
-            createNotification({
+        type: "success"
-                text: "Successfully created client secret",
+      });
-                type: "success"
+    } catch (err) {
-            });
+      console.error(err);
-        } catch (err) {
+      createNotification({
-            console.error(err);
+        text: "Failed to create client secret",
-            createNotification({
+        type: "error"
-                text: "Failed to create client secret",
+      });
-                type: "error"
-            });
-        }
     }
-    
+  };
-    const onDeleteClientSecretSubmit = async ({
-        clientSecretId,
-        clientSecretPrefix
-    }: {
-        clientSecretId: string;
-        clientSecretPrefix: string;
-    }) => {
-        try {
-            
-            if (!popUpData?.identityId) return;
 
-            await revokeClientSecretMutateAsync({
+  const onDeleteClientSecretSubmit = async ({
-                identityId: popUpData.identityId,
+    clientSecretId,
-                clientSecretId
+    clientSecretPrefix
-            });
+  }: {
-            
+    clientSecretId: string;
-            if (token.startsWith(clientSecretPrefix)) {
+    clientSecretPrefix: string;
-                reset();
+  }) => {
-                setToken("");
+    try {
-            }
+      if (!popUpData?.identityId) return;
-            
+
-            handlePopUpToggle("deleteUniversalAuthClientSecret", false);
+      await revokeClientSecretMutateAsync({
-        
+        identityId: popUpData.identityId,
-            createNotification({
+        clientSecretId
-                text: "Successfully deleted client secret",
+      });
-                type: "success"
+
-            });
+      if (token.startsWith(clientSecretPrefix)) {
-        } catch (err) {
+        reset();
-            console.error(err);
+        setToken("");
-            createNotification({
+      }
-                text: "Failed to delete client secret",
+
-                type: "error"
+      handlePopUpToggle("deleteUniversalAuthClientSecret", false);
-            });
+
-            
+      createNotification({
-        }
+        text: "Successfully deleted client secret",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete client secret",
+        type: "error"
+      });
     }
+  };
 
-    const hasToken = Boolean(token);
+  const hasToken = Boolean(token);
 
-    return (
+  return (
-        <Modal
+    <Modal
-            isOpen={popUp?.universalAuthClientSecret?.isOpen}
+      isOpen={popUp?.universalAuthClientSecret?.isOpen}
-                onOpenChange={(isOpen) => {
+      onOpenChange={(isOpen) => {
-                handlePopUpToggle("universalAuthClientSecret", isOpen);
+        handlePopUpToggle("universalAuthClientSecret", isOpen);
-                reset();
+        reset();
-                setToken("");
+        setToken("");
+      }}
+    >
+      <ModalContent title={`Manage Client ID/Secrets for ${popUpData?.name ?? ""}`}>
+        <h2 className="mb-4">Client ID</h2>
+        <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <p className="mr-4 break-all">{identityUniversalAuth?.clientId ?? ""}</p>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+              navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "");
+              setIsClientIdCopied.on();
             }}
-        >
+          >
-            <ModalContent title={`Manage Client ID/Secrets for ${popUpData?.name ?? ""}`}>
+            <FontAwesomeIcon icon={isClientIdCopied ? faCheck : faCopy} />
-                <h2 className="mb-4">Client ID</h2>
+            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+              {t("common.click-to-copy")}
-                    <p className="mr-4 break-all">{identityUniversalAuth?.clientId ?? ""}</p>
+            </span>
-                    <IconButton
+          </IconButton>
-                        ariaLabel="copy icon"
+        </div>
-                        colorSchema="secondary"
+        <h2 className="mb-4">New Client Secret</h2>
-                        className="group relative"
+        {hasToken ? (
-                        onClick={() => {
+          <div>
-                            navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "")
+            <div className="mb-4 flex items-center justify-between">
-                            setIsClientIdCopied.on();
+              <p>We will only show this secret once</p>
-                        }}
+              <Button
-                    >
+                colorSchema="secondary"
-                        <FontAwesomeIcon icon={isClientIdCopied ? faCheck : faCopy} />
+                type="submit"
-                        <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                onClick={() => {
-                            {t("common.click-to-copy")}
+                  reset();
-                        </span>
+                  setToken("");
-                    </IconButton>
+                }}
-                </div>
+              >
-                <h2 className="mb-4">New Client Secret</h2>
+                Got it
-                {hasToken ? (
+              </Button>
-                    <div>
+            </div>
-                        <div className="mb-4 flex items-center justify-between">
+            <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                            <p>We will only show this secret once</p>
+              <p className="mr-4 break-all">{token}</p>
-                            <Button
+              <IconButton
-                                colorSchema="secondary"
+                ariaLabel="copy icon"
-                                type="submit"
+                colorSchema="secondary"
-                                onClick={() => {
+                className="group relative"
-                                    reset();
+                onClick={() => {
-                                    setToken("");
+                  navigator.clipboard.writeText(token);
-                                }}
+                  setIsClientSecretCopied.on();
-                            >
+                }}
-                                Got it
+              >
-                            </Button>
+                <FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
-                        </div>
+                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                        <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                  {t("common.click-to-copy")}
-                            <p className="mr-4 break-all">{token}</p>
+                </span>
-                            <IconButton
+              </IconButton>
-                                ariaLabel="copy icon"
+            </div>
-                                colorSchema="secondary"
+          </div>
-                                className="group relative"
+        ) : (
-                                onClick={() => {
+          <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
-                                    navigator.clipboard.writeText(token);
+            <Controller
-                                    setIsClientSecretCopied.on();
+              control={control}
-                                }}
+              defaultValue=""
-                            >
+              name="description"
-                                <FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
+              render={({ field, fieldState: { error } }) => (
-                                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                <FormControl
-                                    {t("common.click-to-copy")}
+                  label="Description (optional)"
-                                </span>
+                  isError={Boolean(error)}
-                            </IconButton>
+                  errorText={error?.message}
-                        </div>
+                >
+                  <Input {...field} placeholder="Description" />
+                </FormControl>
+              )}
+            />
+            <div className="flex">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="ttl"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="TTL (seconds - optional)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <div className="flex">
+                      <Input {...field} placeholder="0" type="number" min="0" step="1" />
                     </div>
-                ) : (
+                  </FormControl>
-                    <form 
-                        onSubmit={handleSubmit(onFormSubmit)}
-                        className="mb-8"
-                    >
-                        <Controller
-                            control={control}
-                            defaultValue=""
-                            name="description"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Description (optional)"
-                                    isError={Boolean(error)}
-                                    errorText={error?.message}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="Description"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <div className="flex">
-                            <Controller
-                                control={control}
-                                defaultValue=""
-                                name="ttl"
-                                render={({ field, fieldState: { error } }) => (
-                                    <FormControl
-                                        label="TTL (seconds - optional)"
-                                        isError={Boolean(error)}
-                                        errorText={error?.message}
-                                    >
-                                        <div className="flex">
-                                            <Input 
-                                                {...field} 
-                                                placeholder="0"
-                                                type="number"
-                                                min="0"
-                                                step="1"
-                                            />
-                                            
-                                        </div>
-                                    </FormControl>
-                                )}
-                            />
-                            <Controller
-                                control={control}
-                                defaultValue="0"
-                                name="numUsesLimit"
-                                render={({ field, fieldState: { error } }) => (
-                                    <FormControl
-                                        label="Max Number of Uses"
-                                        isError={Boolean(error)}
-                                        errorText={error?.message}
-                                        className="ml-4"
-                                    >
-                                        <div className="flex">
-                                            <Input 
-                                                {...field} 
-                                                placeholder="0"
-                                                type="number"
-                                                min="0"
-                                                step="1"
-                                            />
-                                            <Button
-                                                className="ml-4"
-                                                size="sm"
-                                                type="submit"
-                                                isLoading={isSubmitting}
-                                                isDisabled={isSubmitting}
-                                            >
-                                                Create
-                                            </Button>
-                                        </div>
-                                    </FormControl>
-                                )}
-                            />
-                        </div>
-                    </form>
                 )}
-                <h2 className="mb-4">Client Secrets</h2>
+              />
-                <TableContainer>
+              <Controller
-                    <Table>
+                control={control}
-                        <THead>
+                defaultValue="0"
-                            <Tr>
+                name="numUsesLimit"
-                                <Th>Description</Th>
+                render={({ field, fieldState: { error } }) => (
-                                <Th>Num Uses</Th>
+                  <FormControl
-                                <Th>Expires At</Th>
+                    label="Max Number of Uses"
-                                <Th>Client Secret</Th>
+                    isError={Boolean(error)}
-                                <Th className="w-5" />
+                    errorText={error?.message}
-                            </Tr>
+                    className="ml-4"
-                        </THead>
+                  >
-                        <TBody>
+                    <div className="flex">
-                            {isLoading && <TableSkeleton columns={5} innerKey="org-identities-client-secrets" />}
+                      <Input {...field} placeholder="0" type="number" min="0" step="1" />
-                            {!isLoading &&
+                      <Button
-                            data &&
+                        className="ml-4"
-                            data.length > 0 && 
+                        size="sm"
-                            data.map(({
+                        type="submit"
-                                _id,
+                        isLoading={isSubmitting}
-                                description,
+                        isDisabled={isSubmitting}
-                                clientSecretTTL,
+                      >
+                        Create
+                      </Button>
+                    </div>
+                  </FormControl>
+                )}
+              />
+            </div>
+          </form>
+        )}
+        <h2 className="mb-4">Client Secrets</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Description</Th>
+                <Th>Num Uses</Th>
+                <Th>Expires At</Th>
+                <Th>Client Secret</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={5} innerKey="org-identities-client-secrets" />}
+              {!isLoading &&
+                data &&
+                data.length > 0 &&
+                data.map(
+                  ({
+                    id,
+                    description,
+                    clientSecretTTL,
+                    clientSecretPrefix,
+                    clientSecretNumUses,
+                    clientSecretNumUsesLimit,
+                    createdAt
+                  }) => {
+                    let expiresAt;
+                    if (clientSecretTTL > 0) {
+                      expiresAt = new Date(new Date(createdAt).getTime() + clientSecretTTL * 1000);
+                    }
+
+                    return (
+                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                        <Td>{description === "" ? "-" : description}</Td>
+                        <Td>{`${clientSecretNumUses}${
+                          clientSecretNumUsesLimit ? `/${clientSecretNumUsesLimit}` : ""
+                        }`}</Td>
+                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd") : "-"}</Td>
+                        <Td>{`${clientSecretPrefix}****`}</Td>
+                        <Td>
+                          <IconButton
+                            onClick={() => {
+                              handlePopUpOpen("deleteUniversalAuthClientSecret", {
                                 clientSecretPrefix,
-                                clientSecretNumUses,
+                                clientSecretId: id
-                                clientSecretNumUsesLimit,
+                              });
-                                createdAt
+                            }}
-                            }) => {
+                            size="lg"
-                                let expiresAt;
+                            colorSchema="primary"
-                                if (clientSecretTTL > 0) {
+                            variant="plain"
-                                    expiresAt = new Date(new Date(createdAt).getTime() + clientSecretTTL * 1000);
+                            ariaLabel="update"
-                                }
+                          >
-                                
+                            <FontAwesomeIcon icon={faXmark} />
-                                return (
+                          </IconButton>
-                                    <Tr className="h-10 items-center" key={`mi-client-secret-${_id}`}>
+                        </Td>
-                                        <Td>{description === "" ? "-" : description}</Td>
+                      </Tr>
-                                        <Td>{`${clientSecretNumUses}${clientSecretNumUsesLimit ? `/${clientSecretNumUsesLimit}` : ""}`}</Td>
+                    );
-                                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd") : "-"}</Td>
+                  }
-                                        <Td>{`${clientSecretPrefix}****`}</Td>
+                )}
-                                        <Td>
+              {!isLoading && data && data?.length === 0 && (
-                                            <IconButton
+                <Tr>
-                                                onClick={() => {
+                  <Td colSpan={5}>
-                                                    handlePopUpOpen("deleteUniversalAuthClientSecret", {
+                    <EmptyState
-                                                        clientSecretPrefix,
+                      title="No client secrets have been created for this identity yet"
-                                                        clientSecretId: _id
+                      icon={faKey}
-                                                    });
+                    />
-                                                }}
+                  </Td>
-                                                size="lg"
+                </Tr>
-                                                colorSchema="primary"
+              )}
-                                                variant="plain"
+            </TBody>
-                                                ariaLabel="update"
+          </Table>
-                                            >
+        </TableContainer>
-                                                <FontAwesomeIcon icon={faXmark} />
+        <DeleteActionModal
-                                            </IconButton>
+          isOpen={popUp.deleteUniversalAuthClientSecret.isOpen}
-                                        </Td>
+          title={`Are you sure want to delete the client secret ${
-                                    </Tr>
+            (popUp?.deleteUniversalAuthClientSecret?.data as { clientSecretPrefix: string })
-                                );
+              ?.clientSecretPrefix || ""
-                            })}
+          }************?`}
-                            {!isLoading && data && data?.length === 0 && (
+          onChange={(isOpen) => handlePopUpToggle("deleteUniversalAuthClientSecret", isOpen)}
-                                <Tr>
+          deleteKey="confirm"
-                                    <Td colSpan={5}>
+          onDeleteApproved={() => {
-                                        <EmptyState title="No client secrets have been created for this identity yet" icon={faKey} />
+            const deleteClientSecretData = popUp?.deleteUniversalAuthClientSecret?.data as {
-                                    </Td>
+              clientSecretId: string;
-                                </Tr>
+              clientSecretPrefix: string;
-                            )}
+            };
-                        </TBody>
+
-                    </Table>
+            return onDeleteClientSecretSubmit({
-                </TableContainer>
+              clientSecretId: deleteClientSecretData.clientSecretId,
-                <DeleteActionModal
+              clientSecretPrefix: deleteClientSecretData.clientSecretPrefix
-                    isOpen={popUp.deleteUniversalAuthClientSecret.isOpen}
+            });
-                    title={`Are you sure want to delete the client secret ${
+          }}
-                        (popUp?.deleteUniversalAuthClientSecret?.data as { clientSecretPrefix: string })?.clientSecretPrefix || ""
+        />
-                    }************?`}
+      </ModalContent>
-                    onChange={(isOpen) => handlePopUpToggle("deleteUniversalAuthClientSecret", isOpen)}
+    </Modal>
-                    deleteKey="confirm"
+  );
-                    onDeleteApproved={() => {
+};
-                        const deleteClientSecretData = (popUp?.deleteUniversalAuthClientSecret?.data as {
-                            clientSecretId: string;
-                            clientSecretPrefix: string;
-                        });
-                        
-                        return onDeleteClientSecretSubmit({
-                            clientSecretId: deleteClientSecretData.clientSecretId,
-                            clientSecretPrefix: deleteClientSecretData.clientSecretPrefix
-                        });
-                    }}
-                />
-            </ModalContent>
-        </Modal>
-    );
-}

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -1,432 +1,392 @@
 import { useEffect } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form"; 
+import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
 import {
-    Button,
+  useAddIdentityUniversalAuth,
-    FormControl,
+  useGetIdentityUniversalAuth,
-    IconButton,
+  useUpdateIdentityUniversalAuth
-    Input,
-} from "@app/components/v2";
-import {
-    useOrganization,
-    useSubscription
-} from "@app/context";
-import { 
-    useAddIdentityUniversalAuth,
-    useGetIdentityUniversalAuth,
-    useUpdateIdentityUniversalAuth
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-const schema = yup.object({
+const schema = yup
-    accessTokenTTL: yup
+  .object({
-        .string()
+    accessTokenTTL: yup.string().required("Access Token TTL is required"),
-        .required("Access Token TTL is required"),
+    accessTokenMaxTTL: yup.string().required("Access Max Token TTL is required"),
-    accessTokenMaxTTL: yup
+    accessTokenNumUsesLimit: yup.string().required("Access Token Max Number of Uses is required"),
-        .string()
-        .required("Access Max Token TTL is required"),
-    accessTokenNumUsesLimit: yup
-        .string()
-        .required("Access Token Max Number of Uses is required"),
     clientSecretTrustedIps: yup
-        .array(
+      .array(
         yup.object({
-            ipAddress: yup.string().max(50).required().label("IP Address")
+          ipAddress: yup.string().max(50).required().label("IP Address")
         })
-        )
+      )
-        .min(1)
+      .min(1)
-        .required()
+      .required()
-        .label("Client Secret Trusted IP"),
+      .label("Client Secret Trusted IP"),
     accessTokenTrustedIps: yup
-        .array(
+      .array(
         yup.object({
-            ipAddress: yup.string().max(50).required().label("IP Address")
+          ipAddress: yup.string().max(50).required().label("IP Address")
         })
-        )
+      )
-        .min(1)
+      .min(1)
-        .required()
+      .required()
-        .label("Access Token Trusted IP")
+      .label("Access Token Trusted IP")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 type Props = {
-    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod"]>, state?: boolean) => void;
+  handlePopUpToggle: (
-    identityAuthMethodData: {
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-        identityId: string;
+    state?: boolean
-        name: string;
+  ) => void;
-        authMethod?: IdentityAuthMethod;
+  identityAuthMethodData: {
-    }
+    identityId: string;
-}
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
+};
 
 export const IdentityUniversalAuthForm = ({
-    handlePopUpOpen,
+  handlePopUpOpen,
-    handlePopUpToggle,
+  handlePopUpToggle,
-    identityAuthMethodData
+  identityAuthMethodData
 }: Props) => {
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
+  const { currentOrg } = useOrganization();
-    const orgId = currentOrg?._id || "";
+  const orgId = currentOrg?.id || "";
-    const { subscription } = useSubscription();
+  const { subscription } = useSubscription();
-    const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
-    const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
-    const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");
+  const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");
 
-    const {
+  const {
-        control,
+    control,
-        handleSubmit,
+    handleSubmit,
-        reset,
+    reset,
-        formState: { isSubmitting }
+    formState: { isSubmitting }
-    } = useForm<FormData>({
+  } = useForm<FormData>({
-        resolver: yupResolver(schema),
+    resolver: yupResolver(schema),
-        defaultValues: {
+    defaultValues: {
-            accessTokenTTL: "2592000",
+      accessTokenTTL: "2592000",
-            accessTokenMaxTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
-            accessTokenNumUsesLimit: "0",
+      accessTokenNumUsesLimit: "0",
-            clientSecretTrustedIps: [
+      clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-                { ipAddress: "0.0.0.0/0" },
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
-                { ipAddress: "::/0" }
-            ],
-            accessTokenTrustedIps: [
-                { ipAddress: "0.0.0.0/0" },
-                { ipAddress: "::/0" }
-            ],
-        }
-    });
-
-    const {
-        fields: clientSecretTrustedIpsFields, 
-        append: appendClientSecretTrustedIp, 
-        remove: removeClientSecretTrustedIp 
-    } = useFieldArray({ control, name: "clientSecretTrustedIps" });
-    const { 
-        fields: accessTokenTrustedIpsFields, 
-        append: appendAccessTokenTrustedIp, 
-        remove: removeAccessTokenTrustedIp 
-    } = useFieldArray({ control, name: "accessTokenTrustedIps" });
-    
-    useEffect(() => {
-        if (data) {
-            reset({
-                accessTokenTTL: String(data.accessTokenTTL),
-                accessTokenMaxTTL: String(data.accessTokenMaxTTL),
-                accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
-                clientSecretTrustedIps: data.clientSecretTrustedIps.map(({ 
-                    ipAddress, 
-                    prefix 
-                }: IdentityTrustedIp) => {
-                    return ({
-                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
-                    });
-                }),
-                accessTokenTrustedIps: data.accessTokenTrustedIps.map(({ 
-                    ipAddress, 
-                    prefix 
-                }: IdentityTrustedIp) => {
-                    return ({
-                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
-                    });
-                })
-            });
-        } else {
-            reset({
-                accessTokenTTL: "2592000",
-                accessTokenMaxTTL: "2592000",
-                accessTokenNumUsesLimit: "0",
-                clientSecretTrustedIps: [
-                    { ipAddress: "0.0.0.0/0" },
-                    { ipAddress: "::/0" }
-                ],
-                accessTokenTrustedIps: [
-                    { ipAddress: "0.0.0.0/0" },
-                    { ipAddress: "::/0" }
-                ]
-            });
-        }
-    }, [data]);
-
-    const onFormSubmit = async ({
-        accessTokenTTL,
-        accessTokenMaxTTL,
-        accessTokenNumUsesLimit,
-        clientSecretTrustedIps,
-        accessTokenTrustedIps
-    }: FormData) => {
-        try {
-            
-            if (!identityAuthMethodData) return;
-            
-            if (data) {
-                // update universal auth configuration
-                await updateMutateAsync({
-                    organizationId: orgId,
-                    identityId: identityAuthMethodData.identityId,
-                    clientSecretTrustedIps,
-                    accessTokenTTL: Number(accessTokenTTL),
-                    accessTokenMaxTTL: Number(accessTokenMaxTTL),
-                    accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
-                    accessTokenTrustedIps,
-                });
-
-            } else {
-                // create new universal auth configuration
-
-                await addMutateAsync({
-                    organizationId: orgId,
-                    identityId: identityAuthMethodData.identityId,
-                    clientSecretTrustedIps,
-                    accessTokenTTL: Number(accessTokenTTL),
-                    accessTokenMaxTTL: Number(accessTokenMaxTTL),
-                    accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
-                    accessTokenTrustedIps,
-                });
-            }
-            
-            handlePopUpToggle("identityAuthMethod", false);
-            
-            createNotification({
-                text: `Successfully ${identityAuthMethodData?.authMethod ? "updated" : "configured"} auth method`,
-                type: "success"
-            });
-
-            reset();
-        } catch (err) {
-            console.error(err);
-            const error = err as any;
-            const text = error?.response?.data?.message
-                ?? `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`;
-            
-            createNotification({
-                text,
-                type: "error"
-            });
-        }
     }
-    
+  });
-    return (
-        <form onSubmit={handleSubmit(onFormSubmit)}>
-            <Controller
-                control={control}
-                defaultValue="2592000"
-                name="accessTokenTTL"
-                render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                        label="Access Token TTL (seconds)"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                    >
-                    <Input 
-                        {...field} 
-                        placeholder="2592000"
-                        type="number"
-                        min="1"
-                        step="1"
-                    />
-                    </FormControl>
-                )}
-            />
-            <Controller
-                control={control}
-                defaultValue="2592000"
-                name="accessTokenMaxTTL"
-                render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                        label="Access Token Max TTL (seconds)"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                    >
-                    <Input 
-                        {...field} 
-                        placeholder="2592000"
-                        type="number"
-                        min="1"
-                        step="1"
-                    />
-                    </FormControl>
-                )}
-            />
-            <Controller
-                control={control}
-                defaultValue="0"
-                name="accessTokenNumUsesLimit"
-                render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                        label="Access Token Max Number of Uses"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                    >
-                    <Input 
-                        {...field} 
-                        placeholder="0"
-                        type="number"
-                        min="0"
-                        step="1"
-                    />
-                    </FormControl>
-                )}
-            />
-            {clientSecretTrustedIpsFields.map(({ id }, index) => (
-                <div className="flex items-end space-x-2 mb-3" key={id}>
-                    <Controller
-                        control={control}
-                        name={`clientSecretTrustedIps.${index}.ipAddress`}
-                        defaultValue="0.0.0.0/0"
-                        render={({ field, fieldState: { error } }) => {
-                            return (
-                                <FormControl
-                                    className="mb-0 flex-grow"
-                                    label={index === 0 ? "Client Secret Trusted IPs" : undefined}
-                                    isError={Boolean(error)}
-                                    errorText={error?.message}
-                                >
-                                <Input 
-                                    value={field.value}
-                                    onChange={(e) => {
-                                        if (subscription?.ipAllowlisting) {
-                                            field.onChange(e);
-                                            return;
-                                        }
-                                        
-                                        handlePopUpOpen("upgradePlan");
-                                    }}
-                                    placeholder="123.456.789.0" 
-                                />
-                                </FormControl>
-                            );
-                        }}
-                    />
-                    <IconButton
-                        onClick={() => {
-                            if (subscription?.ipAllowlisting) {
-                                removeClientSecretTrustedIp(index);
-                                return;
-                            }
-                            
-                            handlePopUpOpen("upgradePlan");
-                        }}
-                        size="lg"
-                        colorSchema="danger"
-                        variant="plain"
-                        ariaLabel="update"
-                        className="p-3"
-                    >
-                        <FontAwesomeIcon icon={faXmark} />
-                    </IconButton>
-                </div>
-            ))}
-            <div className="my-4 ml-1">
-                <Button
-                    variant="outline_bg"
-                    onClick={() => {
-                        if (subscription?.ipAllowlisting) {
-                            appendClientSecretTrustedIp({
-                                ipAddress: "0.0.0.0/0"
-                            })
-                            return;
-                        }
 
-                        handlePopUpOpen("upgradePlan");
+  const {
-                    }}
+    fields: clientSecretTrustedIpsFields,
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+    append: appendClientSecretTrustedIp,
-                    size="xs"
+    remove: removeClientSecretTrustedIp
-                >
+  } = useFieldArray({ control, name: "clientSecretTrustedIps" });
-                    Add IP Address
+  const {
-                </Button>
+    fields: accessTokenTrustedIpsFields,
-            </div>
+    append: appendAccessTokenTrustedIp,
-            {accessTokenTrustedIpsFields.map(({ id }, index) => (
+    remove: removeAccessTokenTrustedIp
-                <div className="flex items-end space-x-2 mb-3" key={id}>
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
-                    <Controller
-                        control={control}
-                        name={`accessTokenTrustedIps.${index}.ipAddress`}
-                        defaultValue="0.0.0.0/0"
-                        render={({ field, fieldState: { error } }) => {
-                            return (
-                                <FormControl
-                                    className="mb-0 flex-grow"
-                                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                                    isError={Boolean(error)}
-                                    errorText={error?.message}
-                                >
-                                <Input 
-                                    value={field.value}
-                                    onChange={(e) => {
-                                        if (subscription?.ipAllowlisting) {
-                                            field.onChange(e);
-                                            return;
-                                        }
-                                        
-                                        handlePopUpOpen("upgradePlan");
-                                    }}
-                                    placeholder="123.456.789.0" 
-                                />
-                                </FormControl>
-                            );
-                        }}
-                    />
-                    <IconButton
-                        onClick={() => {
-                            if (subscription?.ipAllowlisting) {
-                                removeAccessTokenTrustedIp(index);
-                                return;
-                            }
-                            
-                            handlePopUpOpen("upgradePlan");
-                        }}
-                        size="lg"
-                        colorSchema="danger"
-                        variant="plain"
-                        ariaLabel="update"
-                        className="p-3"
-                    >
-                        <FontAwesomeIcon icon={faXmark} />
-                    </IconButton>
-                </div>
-            ))}
-            <div className="my-4 ml-1">
-                <Button
-                    variant="outline_bg"
-                    onClick={() => {
-                        if (subscription?.ipAllowlisting) {
-                            appendAccessTokenTrustedIp({
-                                ipAddress: "0.0.0.0/0"
-                            })
-                            return;
-                        }
 
-                        handlePopUpOpen("upgradePlan");
+  useEffect(() => {
+    if (data) {
+      reset({
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        clientSecretTrustedIps: data.clientSecretTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        ),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    clientSecretTrustedIps,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityAuthMethodData) return;
+
+      if (data) {
+        // update universal auth configuration
+        await updateMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          clientSecretTrustedIps,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        // create new universal auth configuration
+
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          clientSecretTrustedIps,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${
+          identityAuthMethodData?.authMethod ? "updated" : "configured"
+        } auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {clientSecretTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`clientSecretTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Client Secret Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
                     }}
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    placeholder="123.456.789.0"
-                    size="xs"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeClientSecretTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendClientSecretTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
                 >
-                    Add IP Address
+                  <Input
-                </Button>
+                    value={field.value}
-            </div>
+                    onChange={(e) => {
-            <div className="flex items-center">
+                      if (subscription?.ipAllowlisting) {
-                <Button
+                        field.onChange(e);
-                    className="mr-4"
+                        return;
-                    size="sm"
+                      }
-                    type="submit"
+
-                    isLoading={isSubmitting}
+                      handlePopUpOpen("upgradePlan");
-                    isDisabled={isSubmitting}
+                    }}
-                >
+                    placeholder="123.456.789.0"
-                    {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+                  />
-                </Button>
+                </FormControl>
-                <Button 
+              );
-                    colorSchema="secondary" 
+            }}
-                    variant="plain"
+          />
-                    onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          <IconButton
-                >
+            onClick={() => {
-                    Cancel
+              if (subscription?.ipAllowlisting) {
-                </Button>
+                removeAccessTokenTrustedIp(index);
-            </div>
+                return;
-        </form>
+              }
-    );
+
-}
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -1,176 +1,163 @@
 import { Controller, useForm } from "react-hook-form";
-import {
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-  faCheck,
-  faCopy,
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
+import { Button, FormControl, IconButton, Input, Modal, ModalContent } from "@app/components/v2";
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
-import {
+import { useAddUserToOrg, useFetchServerStatus } from "@app/hooks/api";
-  useAddUserToOrg,
-  useFetchServerStatus
-} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const addMemberFormSchema = yup.object({
-    email: yup.string().email().required().label("Email").trim().lowercase()
+  email: yup.string().email().required().label("Email").trim().lowercase()
 });
 
 type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
 
 type Props = {
-    popUp: UsePopUpState<["addMember"]>;
+  popUp: UsePopUpState<["addMember"]>;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["addMember"]>, state?: boolean) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addMember"]>, state?: boolean) => void;
-    completeInviteLink: string;
+  completeInviteLink: string;
-    setCompleteInviteLink: (link: string) => void;
+  setCompleteInviteLink: (link: string) => void;
 };
 
 export const AddOrgMemberModal = ({
-    popUp,
+  popUp,
-    handlePopUpToggle,
+  handlePopUpToggle,
-    completeInviteLink,
+  completeInviteLink,
-    setCompleteInviteLink
+  setCompleteInviteLink
 }: Props) => {
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
+  const { currentOrg } = useOrganization();
 
-    const { data: serverDetails } = useFetchServerStatus();
+  const { data: serverDetails } = useFetchServerStatus();
-    const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
+  const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
 
-    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-      } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
 
-    const onAddMember = async ({ email }: TAddMemberForm) => {
+  const {
-        if (!currentOrg?._id) return;
+    control,
-    
+    handleSubmit,
-        try {
+    reset,
-            const { data } = await addUserMutateAsync({
+    formState: { isSubmitting }
-                organizationId: currentOrg?._id,
+  } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
-                inviteeEmail: email
-            });
 
-            setCompleteInviteLink(data?.completeInviteLink ??"");
+  const onAddMember = async ({ email }: TAddMemberForm) => {
+    if (!currentOrg?.id) return;
 
-            // only show this notification when email is configured.
+    try {
-            // A [completeInviteLink] will not be sent if smtp is configured
+      const { data } = await addUserMutateAsync({
+        organizationId: currentOrg?.id,
+        inviteeEmail: email
+      });
 
-            if (!data.completeInviteLink) {
+      setCompleteInviteLink(data?.completeInviteLink ?? "");
-                createNotification({
+
-                    text: "Successfully invited user to the organization.",
+      // only show this notification when email is configured.
-                    type: "success"
+      // A [completeInviteLink] will not be sent if smtp is configured
-                });
+
-            }
+      if (!data.completeInviteLink) {
-        } catch (error) {
+        createNotification({
-          console.error(error);
+          text: "Successfully invited user to the organization.",
-          createNotification({
+          type: "success"
-            text: "Failed to invite user to org",
+        });
-            type: "error"
+      }
-          });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to invite user to org",
+        type: "error"
+      });
+    }
+
+    if (serverDetails?.emailConfigured) {
+      handlePopUpToggle("addMember", false);
+    }
+
+    reset();
+  };
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(completeInviteLink as string);
+    setInviteLinkCopied.on();
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addMember?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addMember", isOpen);
+        setCompleteInviteLink("");
+      }}
+    >
+      <ModalContent
+        title={`Invite others to ${currentOrg?.name}`}
+        subTitle={
+          <div>
+            {!completeInviteLink && (
+              <div>
+                An invite is specific to an email address and expires after 1 day.
+                <br />
+                For security reasons, you will need to separately add members to projects.
+              </div>
+            )}
+            {completeInviteLink &&
+              "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
+          </div>
         }
-
+      >
-        if (serverDetails?.emailConfigured) {
+        {!completeInviteLink && (
-            handlePopUpToggle("addMember", false);
+          <form onSubmit={handleSubmit(onAddMember)}>
-        }
+            <Controller
-        
+              control={control}
-        reset();
+              defaultValue=""
-    };
+              name="email"
-
+              render={({ field, fieldState: { error } }) => (
-    const copyTokenToClipboard = () => {
+                <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
-        navigator.clipboard.writeText(completeInviteLink as string);
+                  <Input {...field} />
-        setInviteLinkCopied.on();
+                </FormControl>
-    };
+              )}
-    
+            />
-    return (
+            <div className="mt-8 flex items-center">
-        <Modal
+              <Button
-            isOpen={popUp?.addMember?.isOpen}
+                className="mr-4"
-            onOpenChange={(isOpen) => {
+                size="sm"
-                handlePopUpToggle("addMember", isOpen);
+                type="submit"
-                setCompleteInviteLink("");
+                isLoading={isSubmitting}
-            }}
+                isDisabled={isSubmitting}
-        >
+              >
-        <ModalContent
+                Add Member
-            title={`Invite others to ${currentOrg?.name}`}
+              </Button>
-            subTitle={
+              <Button
-                <div>
+                colorSchema="secondary"
-                {!completeInviteLink && (
+                variant="plain"
-                    <div>
+                onClick={() => handlePopUpToggle("addMember", false)}
-                    An invite is specific to an email address and expires after 1 day.
+              >
-                    <br />
+                Cancel
-                    For security reasons, you will need to separately add members to projects.
+              </Button>
-                    </div>
+            </div>
-                )}
+          </form>
-                {completeInviteLink &&
+        )}
-                    "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
+        {completeInviteLink && (
-                </div>
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            }
+            <p className="mr-4 break-all">{completeInviteLink}</p>
-        >
+            <IconButton
-                {!completeInviteLink && (
+              ariaLabel="copy icon"
-                    <form onSubmit={handleSubmit(onAddMember)}>
+              colorSchema="secondary"
-                    <Controller
+              className="group relative"
-                        control={control}
+              onClick={copyTokenToClipboard}
-                        defaultValue=""
+            >
-                        name="email"
+              <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
-                        render={({ field, fieldState: { error } }) => (
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                        <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                click to copy
-                            <Input {...field} />
+              </span>
-                        </FormControl>
+            </IconButton>
-                        )}
+          </div>
-                    />
+        )}
-                    <div className="mt-8 flex items-center">
+      </ModalContent>
-                        <Button
+    </Modal>
-                        className="mr-4"
+  );
-                        size="sm"
+};
-                        type="submit"
-                        isLoading={isSubmitting}
-                        isDisabled={isSubmitting}
-                        >
-                        Add Member
-                        </Button>
-                        <Button
-                        colorSchema="secondary"
-                        variant="plain"
-                        onClick={() => handlePopUpToggle("addMember", false)}
-                        >
-                        Cancel
-                        </Button>
-                    </div>
-                    </form>
-                )}
-                {completeInviteLink && (
-                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                    <p className="mr-4 break-all">{completeInviteLink}</p>
-                    <IconButton
-                        ariaLabel="copy icon"
-                        colorSchema="secondary"
-                        className="group relative"
-                        onClick={copyTokenToClipboard}
-                    >
-                        <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
-                        <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                        click to copy
-                        </span>
-                    </IconButton>
-                    </div>
-                )}
-            </ModalContent>
-        </Modal>
-    );
-}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -14,134 +14,126 @@ import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
-  useSubscription,
+  useSubscription
 } from "@app/context";
-import {
+import { useDeleteOrgMembership, useGetSSOConfig } from "@app/hooks/api";
-  useDeleteOrgMembership,
-  useGetSSOConfig,
-} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddOrgMemberModal } from "./AddOrgMemberModal";
 import { OrgMembersTable } from "./OrgMembersTable";
 
 export const OrgMembersSection = () => {
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const { subscription } = useSubscription();
+  const { subscription } = useSubscription();
-    const { currentOrg } = useOrganization();
+  const { currentOrg } = useOrganization();
-    const orgId = currentOrg?._id ?? "";
+  const orgId = currentOrg?.id ?? "";
-    
-    const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
 
-    const { data: ssoConfig, isLoading: isLoadingSSOConfig } = useGetSSOConfig(orgId);
+  const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "addMember",
-        "removeMember",
-        "upgradePlan",
-        "setUpEmail"
-    ] as const);
 
-    const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
+  const { data: ssoConfig, isLoading: isLoadingSSOConfig } = useGetSSOConfig(orgId);
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "addMember",
+    "removeMember",
+    "upgradePlan",
+    "setUpEmail"
+  ] as const);
 
-    const isMoreUsersNotAllowed = subscription?.memberLimit
+  const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
-        ? subscription.membersUsed >= subscription.memberLimit
-        : false;
 
-    const handleAddMemberModal = () => {
+  const isMoreUsersNotAllowed = subscription?.memberLimit
-        if (!isLoadingSSOConfig && ssoConfig && ssoConfig.isActive) {
+    ? subscription.membersUsed >= subscription.memberLimit
-            createNotification({
+    : false;
-                text: "You cannot invite users when SAML SSO is configured for your organization",
-                type: "error"
-            });
-            return;
-        }
 
-        if (isMoreUsersNotAllowed) {
+  const handleAddMemberModal = () => {
-            handlePopUpOpen("upgradePlan", {
+    if (!isLoadingSSOConfig && ssoConfig && ssoConfig.isActive) {
-                description: "You can add more members if you upgrade your Infisical plan."
+      createNotification({
-            });
+        text: "You cannot invite users when SAML SSO is configured for your organization",
-        } else {
+        type: "error"
-            handlePopUpOpen("addMember");
+      });
-        }
+      return;
     }
 
-    const onRemoveMemberSubmit = async (orgMembershipId: string) => {
+    if (isMoreUsersNotAllowed) {
-        try {
+      handlePopUpOpen("upgradePlan", {
-            await deleteMutateAsync({
+        description: "You can add more members if you upgrade your Infisical plan."
-                orgId,
+      });
-                membershipId: orgMembershipId
+    } else {
-            });
+      handlePopUpOpen("addMember");
-            
+    }
-            createNotification({
+  };
-                text: "Successfully removed user from org",
+
-                type: "success"
+  const onRemoveMemberSubmit = async (orgMembershipId: string) => {
-            });
+    try {
-        } catch (err) {
+      await deleteMutateAsync({
-            console.error(err);
+        orgId,
-            createNotification({
+        membershipId: orgMembershipId
-                text: "Failed to remove user from the organization",
+      });
-                type: "error"
+
-            });
+      createNotification({
-        }
+        text: "Successfully removed user from org",
-        
+        type: "success"
-        handlePopUpClose("removeMember");
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to remove user from the organization",
+        type: "error"
+      });
     }
 
-    return (
+    handlePopUpClose("removeMember");
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+  };
-            <div className="flex justify-between mb-4">
+
-                <p className="text-xl font-semibold text-mineshaft-100">
+  return (
-                    Members
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-                </p>
+      <div className="mb-4 flex justify-between">
-                <OrgPermissionCan
+        <p className="text-xl font-semibold text-mineshaft-100">Members</p>
-                    I={OrgPermissionActions.Create}
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
-                    a={OrgPermissionSubjects.Member}
+          {(isAllowed) => (
-                >
+            <Button
-                    {(isAllowed) => (
+              colorSchema="primary"
-                        <Button
+              type="submit"
-                        colorSchema="primary"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        type="submit"
+              onClick={() => handleAddMemberModal()}
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              isDisabled={!isAllowed}
-                        onClick={() => handleAddMemberModal()}
+            >
-                        isDisabled={!isAllowed}
+              Add Member
-                        >
+            </Button>
-                            Add Member
+          )}
-                        </Button>
+        </OrgPermissionCan>
-                    )}
+      </div>
-                </OrgPermissionCan>
+      <OrgMembersTable
-            </div>
+        handlePopUpOpen={handlePopUpOpen}
-            <OrgMembersTable 
+        setCompleteInviteLink={setCompleteInviteLink}
-                handlePopUpOpen={handlePopUpOpen} 
+      />
-                setCompleteInviteLink={setCompleteInviteLink}
+      <AddOrgMemberModal
-            />
+        popUp={popUp}
-            <AddOrgMemberModal 
+        handlePopUpToggle={handlePopUpToggle}
-                popUp={popUp}
+        completeInviteLink={completeInviteLink}
-                handlePopUpToggle={handlePopUpToggle}
+        setCompleteInviteLink={setCompleteInviteLink}
-                completeInviteLink={completeInviteLink}
+      />
-                setCompleteInviteLink={setCompleteInviteLink} 
+      <DeleteActionModal
-            />
+        isOpen={popUp.removeMember.isOpen}
-            <DeleteActionModal
+        title={`Are you sure want to remove member with email ${
-                isOpen={popUp.removeMember.isOpen}
+          (popUp?.removeMember?.data as { email: string })?.email || ""
-                title={`Are you sure want to remove member with email ${
+        }?`}
-                    (popUp?.removeMember?.data as { email: string })?.email || ""
+        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
-                }?`}
+        deleteKey="confirm"
-                onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+        onDeleteApproved={() =>
-                deleteKey="confirm"
+          onRemoveMemberSubmit(
-                onDeleteApproved={() => 
+            (popUp?.removeMember?.data as { orgMembershipId: string })?.orgMembershipId
-                    onRemoveMemberSubmit(
+          )
-                        (popUp?.removeMember?.data as { orgMembershipId: string })?.orgMembershipId
+        }
-                    )
+      />
-                }
+      <UpgradePlanModal
-            />
+        isOpen={popUp.upgradePlan.isOpen}
-          <UpgradePlanModal
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            isOpen={popUp.upgradePlan.isOpen}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
-            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+      />
-            text={(popUp.upgradePlan?.data as { description: string })?.description}
+      <EmailServiceSetupModal
-        />
+        isOpen={popUp.setUpEmail?.isOpen}
-        <EmailServiceSetupModal
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
-            isOpen={popUp.setUpEmail?.isOpen}
+      />
-            onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
+    </div>
-        />
+  );
-        </div>
+};
-    );
-}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -1,272 +1,265 @@
-import { useCallback,useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
-import {
+import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
-  faMagnifyingGlass,
-  faUsers,
-  faXmark
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-    Button,
+  Button,
-    EmptyState,
+  EmptyState,
-    IconButton,
+  IconButton,
-    Input,
+  Input,
-    Select,
+  Select,
-    SelectItem,
+  SelectItem,
-    Table,
+  Table,
-    TableContainer,
+  TableContainer,
-    TableSkeleton,
+  TableSkeleton,
-    TBody,
+  TBody,
-    Td,
+  Td,
-    Th,
+  Th,
-    THead,
+  THead,
-    Tr,
+  Tr
 } from "@app/components/v2";
-import { 
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useOrganization,
-    useSubscription,
-    useUser} from "@app/context";
 import {
-    useAddUserToOrg,
+  OrgPermissionActions,
-    useFetchServerStatus,
+  OrgPermissionSubjects,
-    useGetOrgUsers,
+  useOrganization,
-    useGetRoles,
+  useSubscription,
-    useUpdateOrgUserRole
+  useUser
+} from "@app/context";
+import {
+  useAddUserToOrg,
+  useFetchServerStatus,
+  useGetOrgUsers,
+  useGetRoles,
+  useUpdateOrgUserRole
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
+  handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
-      data?: {
+    data?: {
-        orgMembershipId?: string;
+      orgMembershipId?: string;
-        email?: string;
+      email?: string;
-        description?: string;
+      description?: string;
-      }
+    }
-    ) => void;
+  ) => void;
-    setCompleteInviteLink: (link: string) => void;
+  setCompleteInviteLink: (link: string) => void;
 };
 
-export const OrgMembersTable = ({
+export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
-    handlePopUpOpen,
+  const { createNotification } = useNotificationContext();
-    setCompleteInviteLink
+  const { subscription } = useSubscription();
-}: Props) => {
+  const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
+  const { user } = useUser();
-    const { subscription } = useSubscription();
+  const userId = user?.id || "";
-    const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
-    const { user } = useUser();
-    const userId = user?._id || "";
-    const orgId = currentOrg?._id || "";
 
-    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
-        orgId
+    orgId
-    });
+  });
-    
-    const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
-    const { data: serverDetails } = useFetchServerStatus();
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
-    const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
 
-    const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
+  const { data: serverDetails } = useFetchServerStatus();
-    const { mutateAsync: updateUserOrgRole } = useUpdateOrgUserRole();
+  const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
 
-    const onRoleChange = async (membershipId: string, role: string) => {
+  const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
-        if (!currentOrg?._id) return;
+  const { mutateAsync: updateUserOrgRole } = useUpdateOrgUserRole();
-    
-        try {
-          // TODO: replace hardcoding default role
-          const isCustomRole = !["admin", "member"].includes(role);
-          
-          if (isCustomRole && subscription && !subscription?.rbac) {
-            handlePopUpOpen("upgradePlan", {
-              description: "You can assign custom roles to members if you upgrade your Infisical plan."
-            });
-            return;
-          }
-        
-          await updateUserOrgRole({ 
-            organizationId: currentOrg?._id, 
-            membershipId, role 
-          });
 
-          createNotification({
+  const onRoleChange = async (membershipId: string, role: string) => {
-            text: "Successfully updated user role",
+    if (!currentOrg?.id) return;
-            type: "success"
-          });
-        } catch (error) {
-          console.error(error);
-          createNotification({
-            text: "Failed to update user role",
-            type: "error"
-          });
-        }
-    };
-    
-    const onResendInvite = async (email: string) => {
-        try {
-            
-            const { data } = await addUserMutateAsync({
-                organizationId: orgId,
-                inviteeEmail: email
-            });
 
-            setCompleteInviteLink(data?.completeInviteLink || "");
+    try {
-            
+      // TODO: replace hardcoding default role
-            if (!data.completeInviteLink) {
+      const isCustomRole = !["admin", "member"].includes(role);
-                createNotification({
+
-                  text: `Successfully resent invite to ${email}`,
+      if (isCustomRole && subscription && !subscription?.rbac) {
-                  type: "success"
+        handlePopUpOpen("upgradePlan", {
-                });
+          description: "You can assign custom roles to members if you upgrade your Infisical plan."
-            }
+        });
-        } catch (err) {
+        return;
-            console.error(err);
+      }
-            createNotification({
+
-                text: `Failed to resend invite to ${email}`,
+      await updateUserOrgRole({
-                type: "error"
+        organizationId: currentOrg?.id,
-            });
+        membershipId,
-        }
+        role
+      });
+
+      createNotification({
+        text: "Successfully updated user role",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to update user role",
+        type: "error"
+      });
     }
+  };
 
-    const isLoading = isMembersLoading || isRolesLoading;
+  const onResendInvite = async (email: string) => {
+    try {
+      const { data } = await addUserMutateAsync({
+        organizationId: orgId,
+        inviteeEmail: email
+      });
 
-    const isIamOwner = useMemo(
+      setCompleteInviteLink(data?.completeInviteLink || "");
-        () => members?.find(({ user: u }) => userId === u?._id)?.role === "owner",
-        [userId, members]
-      );
-    
-      const findRoleFromId = useCallback(
-        (roleId: string) => {
-          return (roles || []).find(({ _id: id }) => id === roleId);
-        },
-        [roles]
-      );
 
-    const filterdUser = useMemo(
+      if (!data.completeInviteLink) {
-        () =>
+        createNotification({
-          members?.filter(
+          text: `Successfully resent invite to ${email}`,
-            ({ user: u, inviteEmail }) =>
+          type: "success"
-              u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
+        });
-              u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
+      }
-              u?.email?.toLowerCase().includes(searchMemberFilter) ||
+    } catch (err) {
-              inviteEmail?.includes(searchMemberFilter)
+      console.error(err);
-          ),
+      createNotification({
-        [members, searchMemberFilter]
+        text: `Failed to resend invite to ${email}`,
-      );
+        type: "error"
-    
+      });
-    return (
+    }
-        <div>
+  };
-        <Input
+
-            value={searchMemberFilter}
+  const isLoading = isMembersLoading || isRolesLoading;
-            onChange={(e) => setSearchMemberFilter(e.target.value)}
+
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+  const isIamOwner = useMemo(
-            placeholder="Search members..."
+    () => members?.find(({ user: u }) => userId === u?.id)?.role === "owner",
-        />
+    [userId, members]
-        <TableContainer className="mt-4">
+  );
-          <Table>
+
-            <THead>
+  const findRoleFromId = useCallback(
-              <Tr>
+    (roleId: string) => {
-                <Th>Name</Th>
+      return (roles || []).find(({ id }) => id === roleId);
-                <Th>Email</Th>
+    },
-                <Th>Role</Th>
+    [roles]
-                <Th className="w-5" />
+  );
-              </Tr>
+
-            </THead>
+  const filterdUser = useMemo(
-            <TBody>
+    () =>
-              {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
+      members?.filter(
-              {!isLoading &&
+        ({ user: u, inviteEmail }) =>
-                filterdUser?.map(
+          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-                  ({ user: u, inviteEmail, role, customRole, _id: orgMembershipId, status }) => {
+          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-                    const name = u ? `${u.firstName} ${u.lastName}` : "-";
+          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-                    const email = u?.email || inviteEmail;
+          inviteEmail?.includes(searchMemberFilter)
-                    return (
+      ),
-                      <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+    [members, searchMemberFilter]
-                        <Td>{name}</Td>
+  );
-                        <Td>{email}</Td>
+
-                        <Td>
+  return (
+    <div>
+      <Input
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Email</Th>
+              <Th>Role</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
+            {!isLoading &&
+              filterdUser?.map(
+                ({ user: u, inviteEmail, role, customRole, id: orgMembershipId, status }) => {
+                  const name = u ? `${u.firstName} ${u.lastName}` : "-";
+                  const email = u?.email || inviteEmail;
+                  return (
+                    <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                      <Td>{name}</Td>
+                      <Td>{email}</Td>
+                      <Td>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          a={OrgPermissionSubjects.Member}
+                        >
+                          {(isAllowed) => (
+                            <>
+                              {status === "accepted" && (
+                                <Select
+                                  value={
+                                    role === "custom" ? findRoleFromId(customRole)?.slug : role
+                                  }
+                                  isDisabled={userId === u?.id || !isAllowed}
+                                  className="w-40 bg-mineshaft-600"
+                                  dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                  onValueChange={(selectedRole) =>
+                                    onRoleChange(orgMembershipId, selectedRole)
+                                  }
+                                >
+                                  {(roles || [])
+                                    .filter(({ slug }) =>
+                                      slug === "owner" ? isIamOwner || role === "owner" : true
+                                    )
+                                    .map(({ slug, name: roleName }) => (
+                                      <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                        {roleName}
+                                      </SelectItem>
+                                    ))}
+                                </Select>
+                              )}
+                              {(status === "invited" || status === "verified") &&
+                                serverDetails?.emailConfigured && (
+                                  <Button
+                                    isDisabled={!isAllowed}
+                                    className="w-40"
+                                    colorSchema="primary"
+                                    variant="outline_bg"
+                                    onClick={() => onResendInvite(email)}
+                                  >
+                                    Resend Invite
+                                  </Button>
+                                )}
+                            </>
+                          )}
+                        </OrgPermissionCan>
+                      </Td>
+                      <Td>
+                        {userId !== u?.id && (
                           <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
+                            I={OrgPermissionActions.Delete}
                             a={OrgPermissionSubjects.Member}
                           >
                             {(isAllowed) => (
-                              <>
+                              <IconButton
-                                {status === "accepted" && (
+                                onClick={() => {
-                                  <Select
+                                  handlePopUpOpen("removeMember", { orgMembershipId, email });
-                                    value={
+                                }}
-                                      role === "custom" ? findRoleFromId(customRole)?.slug : role
+                                size="lg"
-                                    }
+                                colorSchema="danger"
-                                    isDisabled={userId === u?._id || !isAllowed}
+                                variant="plain"
-                                    className="w-40 bg-mineshaft-600"
+                                ariaLabel="update"
-                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                className="ml-4"
-                                    onValueChange={(selectedRole) =>
+                                isDisabled={!isAllowed}
-                                      onRoleChange(orgMembershipId, selectedRole)
+                              >
-                                    }
+                                <FontAwesomeIcon icon={faXmark} />
-                                  >
+                              </IconButton>
-                                    {(roles || [])
-                                      .filter(({ slug }) =>
-                                        slug === "owner" ? isIamOwner || role === "owner" : true
-                                      )
-                                      .map(({ slug, name: roleName }) => (
-                                        <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                          {roleName}
-                                        </SelectItem>
-                                      ))}
-                                  </Select>
-                                )}
-                                {(status === "invited" || status === "verified") &&
-                                  serverDetails?.emailConfigured && (
-                                    <Button
-                                      isDisabled={!isAllowed}
-                                      className="w-40"
-                                      colorSchema="primary"
-                                      variant="outline_bg"
-                                      onClick={() => onResendInvite(email)}
-                                    >
-                                      Resend Invite
-                                    </Button>
-                                  )}
-                              </>
                             )}
                           </OrgPermissionCan>
-                        </Td>
+                        )}
-                        <Td>
+                      </Td>
-                          {userId !== u?._id && (
+                    </Tr>
-                            <OrgPermissionCan
+                  );
-                              I={OrgPermissionActions.Delete}
+                }
-                              a={OrgPermissionSubjects.Member}
+              )}
-                            >
+          </TBody>
-                              {(isAllowed) => (
+        </Table>
-                                <IconButton
+        {!isLoading && filterdUser?.length === 0 && (
-                                    onClick={() => {
+          <EmptyState title="No project members found" icon={faUsers} />
-                                        handlePopUpOpen("removeMember", { orgMembershipId, email })
+        )}
-                                    }}
+      </TableContainer>
-                                    size="lg"
+    </div>
-                                    colorSchema="danger"
+  );
-                                    variant="plain"
+};
-                                    ariaLabel="update"
-                                    className="ml-4"
-                                    isDisabled={!isAllowed}
-                                >
-                                    <FontAwesomeIcon icon={faXmark} />
-                                </IconButton>
-                              )}
-                            </OrgPermissionCan>
-                          )}
-                        </Td>
-                      </Tr>
-                    );
-                  }
-                )}
-            </TBody>
-          </Table>
-          {!isLoading && filterdUser?.length === 0 && (
-            <EmptyState title="No project members found" icon={faUsers} />
-          )}
-        </TableContainer>
-
-        </div>
-    );
-}

frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx

@@ -158,21 +158,21 @@ export const LogsTableRow = ({ auditLog }: Props) => {
             <p>{`Name: ${event.metadata.name}`}</p>
           </Td>
         );
-      case EventType.CREATE_IDENTITY:
+      case EventType.CREATEidENTITY:
         return (
           <Td>
             <p>{`ID: ${event.metadata.identityId}`}</p>
             <p>{`Name: ${event.metadata.name}`}</p>
           </Td>
         );
-      case EventType.UPDATE_IDENTITY:
+      case EventType.UPDATEidENTITY:
         return (
           <Td>
             <p>{`ID: ${event.metadata.identityId}`}</p>
             <p>{`Name: ${event.metadata.name}`}</p>
           </Td>
         );
-      case EventType.DELETE_IDENTITY:
+      case EventType.DELETEidENTITY:
         return (
           <Td>
             <p>{`ID: ${event.metadata.identityId}`}</p>

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -1,34 +1,26 @@
 import { useMemo } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import Link from "next/link";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
 import {
-    Button,
+  useAddIdentityToWorkspace,
-    FormControl,
+  useGetIdentityMembershipOrgs,
-    Modal,
+  useGetRoles,
-    ModalContent,
+  useGetWorkspaceIdentityMemberships
-    Select,
-    SelectItem,
-} from "@app/components/v2";
-import {
-    useOrganization,
-    useWorkspace
-} from "@app/context";
-import { 
-    useAddIdentityToWorkspace,
-    useGetIdentityMembershipOrgs,
-    useGetRoles,
-    useGetWorkspaceIdentityMemberships
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     identityId: yup.string().required("Identity id is required"),
     role: yup.string()
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -37,167 +29,154 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
-export const IdentityModal = ({
+export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
-    popUp,
+  const { createNotification } = useNotificationContext();
-    handlePopUpToggle
+  const { currentOrg } = useOrganization();
-}: Props) => {
+  const { currentWorkspace } = useWorkspace();
-    
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { currentWorkspace } = useWorkspace();
 
-    const orgId = currentOrg?._id || "";
+  const orgId = currentOrg?.id || "";
-    const workspaceId = currentWorkspace?._id || "";
+  const workspaceId = currentWorkspace?.id || "";
-    
-    const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
-    const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
 
-    const { data: roles } = useGetRoles({
+  const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
-        orgId,
+  const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
-        workspaceId
+
+  const { data: roles } = useGetRoles({
+    orgId,
+    workspaceId
+  });
+
+  const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
+
+  const filteredIdentityMembershipOrgs = useMemo(() => {
+    const wsIdentityIds = new Map();
+
+    identityMemberships?.forEach((identityMembership) => {
+      wsIdentityIds.set(identityMembership.identity.id, true);
     });
 
-    const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
+    return (identityMembershipOrgs || []).filter(({ identity: i }) => !wsIdentityIds.has(i.id));
-    
+  }, [identityMembershipOrgs, identityMemberships]);
-    const filteredIdentityMembershipOrgs = useMemo(() => {
+
-        const wsIdentityIds = new Map();
+  const {
-        
+    control,
-        identityMemberships?.forEach((identityMembership) => {
+    handleSubmit,
-            wsIdentityIds.set(identityMembership.identity._id, true);
+    reset,
-        });
+    formState: { isSubmitting }
-        
+  } = useForm<FormData>({
-        return (identityMembershipOrgs || []).filter(
+    resolver: yupResolver(schema)
-          ({ identity: i }) => !wsIdentityIds.has(i._id)
+  });
-        );
+
-    }, [identityMembershipOrgs, identityMemberships]);
+  const onFormSubmit = async ({ identityId, role }: FormData) => {
-    
+    try {
-    const {
+      await addIdentityToWorkspaceMutateAsync({
-        control,
+        workspaceId,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
-    
-    const onFormSubmit = async ({
         identityId,
-        role
+        role: role || undefined
-    }: FormData) => {
+      });
-        try {
 
-            await addIdentityToWorkspaceMutateAsync({
+      createNotification({
-                workspaceId,
+        text: "Successfully added identity to project",
-                identityId,
+        type: "success"
-                role: role || undefined
+      });
-            });
-            
-            createNotification({
-                text: "Successfully added identity to project",
-                type: "success"
-            });
 
-            reset();
+      reset();
-            handlePopUpToggle("identity", false);
+      handlePopUpToggle("identity", false);
-        } catch (err) {
+    } catch (err) {
-            console.error(err);
+      console.error(err);
-            const error = err as any;
+      const error = err as any;
-            const text = error?.response?.data?.message
+      const text = error?.response?.data?.message ?? "Failed to add identity to project";
-                ?? "Failed to add identity to project";
+
-            
+      createNotification({
-            createNotification({
+        text,
-                text,
+        type: "error"
-                type: "error"
+      });
-            });
-        }
     }
-    
+  };
-    return (
+
-        <Modal
+  return (
-            isOpen={popUp?.identity?.isOpen}
+    <Modal
-                onOpenChange={(isOpen) => {
+      isOpen={popUp?.identity?.isOpen}
-                handlePopUpToggle("identity", isOpen);
+      onOpenChange={(isOpen) => {
-                reset();
+        handlePopUpToggle("identity", isOpen);
-            }}
+        reset();
-        >
+      }}
-            <ModalContent title="Add Identity to Project">
+    >
-                {filteredIdentityMembershipOrgs.length ? (
+      <ModalContent title="Add Identity to Project">
-                    <form onSubmit={handleSubmit(onFormSubmit)}>
+        {filteredIdentityMembershipOrgs.length ? (
-                        <Controller
+          <form onSubmit={handleSubmit(onFormSubmit)}>
-                            control={control}
+            <Controller
-                            name="identityId"
+              control={control}
-                            defaultValue={filteredIdentityMembershipOrgs?.[0]?._id}
+              name="identityId"
-                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              defaultValue={filteredIdentityMembershipOrgs?.[0]?.id}
-                                <FormControl
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                    label="Identity"
+                <FormControl label="Identity" errorText={error?.message} isError={Boolean(error)}>
-                                    errorText={error?.message}
+                  <Select
-                                    isError={Boolean(error)}
+                    defaultValue={field.value}
-                                >
+                    {...field}
-                                    <Select
+                    onValueChange={(e) => onChange(e)}
-                                        defaultValue={field.value}
+                    className="w-full"
-                                        {...field}
+                  >
-                                        onValueChange={(e) => onChange(e)}
+                    {filteredIdentityMembershipOrgs.map(({ identity }) => (
-                                        className="w-full"
+                      <SelectItem value={identity.id} key={`org-identity-${identity.id}`}>
-                                    >
+                        {identity.name}
-                                        {filteredIdentityMembershipOrgs.map(({ identity }) => (
+                      </SelectItem>
-                                            <SelectItem value={identity._id} key={`org-identity-${identity._id}`}>
+                    ))}
-                                                {identity.name}
+                  </Select>
-                                            </SelectItem>
+                </FormControl>
-                                        ))}
+              )}
-                                    </Select>
+            />
-                                </FormControl>
+            <Controller
-                            )}
+              control={control}
-                        />
+              name="role"
-                        <Controller
+              defaultValue=""
-                            control={control}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            name="role"
+                <FormControl
-                            defaultValue=""
+                  label="Role"
-                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  errorText={error?.message}
-                                <FormControl
+                  isError={Boolean(error)}
-                                    label="Role"
+                  className="mt-4"
-                                    errorText={error?.message}
+                >
-                                    isError={Boolean(error)}
+                  <Select
-                                    className="mt-4"
+                    defaultValue={field.value}
-                                >
+                    {...field}
-                                    <Select
+                    onValueChange={(e) => onChange(e)}
-                                        defaultValue={field.value}
+                    className="w-full"
-                                        {...field}
+                  >
-                                        onValueChange={(e) => onChange(e)}
+                    {(roles || []).map(({ name, slug }) => (
-                                        className="w-full"
+                      <SelectItem value={slug} key={`st-role-${slug}`}>
-                                    >
+                        {name}
-                                        {(roles || []).map(({ name, slug }) => (
+                      </SelectItem>
-                                            <SelectItem value={slug} key={`st-role-${slug}`}>
+                    ))}
-                                                {name}
+                  </Select>
-                                            </SelectItem>
+                </FormControl>
-                                        ))}
+              )}
-                                    </Select>
+            />
-                                </FormControl>
+            <div className="flex items-center">
-                            )}
+              <Button
-                        />
+                className="mr-4"
-                        <div className="flex items-center">
+                size="sm"
-                            <Button
+                type="submit"
-                                className="mr-4"
+                isLoading={isSubmitting}
-                                size="sm"
+                isDisabled={isSubmitting}
-                                type="submit"
+              >
-                                isLoading={isSubmitting}
+                {popUp?.identity?.data ? "Update" : "Create"}
-                                isDisabled={isSubmitting}
+              </Button>
-                            >
+              <Button colorSchema="secondary" variant="plain">
-                                {popUp?.identity?.data ? "Update" : "Create"}
+                Cancel
-                            </Button>
+              </Button>
-                            <Button colorSchema="secondary" variant="plain">
+            </div>
-                                Cancel
+          </form>
-                            </Button>
+        ) : (
-                        </div>
+          <div className="flex flex-col space-y-4">
-                    </form>
+            <div className="text-sm">
-                ) : (
+              All identities in your organization have already been added to this project.
-                    <div className="flex flex-col space-y-4">
+            </div>
-                        <div className="text-sm">All identities in your organization have already been added to this project.</div>
+            <Link href={`/org/${currentWorkspace?.organization}/members`}>
-                        <Link href={`/org/${currentWorkspace?.organization}/members`}>
+              <Button variant="outline_bg">Create a new identity</Button>
-                            <Button variant="outline_bg">Create a new identity</Button>
+            </Link>
-                        </Link>
+          </div>
-                    </div>
+        )}
-                )}
+      </ModalContent>
-            </ModalContent>
+    </Modal>
-        </Modal>
+  );
-    );
+};
-}

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -4,14 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { 
+import { Button, DeleteActionModal } from "@app/components/v2";
-  Button,
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-  DeleteActionModal
-} from "@app/components/v2";
-import { 
-  ProjectPermissionActions, 
-  ProjectPermissionSub, 
-  useWorkspace} from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 import { useDeleteIdentityFromWorkspace } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -24,94 +18,90 @@ export const IdentitySection = withProjectPermission(
     const { createNotification } = useNotificationContext();
     const { currentWorkspace } = useWorkspace();
 
-    const workspaceId = currentWorkspace?._id ?? "";
+    const workspaceId = currentWorkspace?.id ?? "";
 
     const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
-    
+
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "identity",
       "deleteIdentity",
       "upgradePlan"
     ] as const);
-    
+
     const onRemoveIdentitySubmit = async (identityId: string) => {
       try {
-
         await deleteMutateAsync({
-            identityId,
+          identityId,
-            workspaceId
+          workspaceId
         });
 
         createNotification({
-            text: "Successfully removed identity from project",
+          text: "Successfully removed identity from project",
-            type: "success"
+          type: "success"
         });
-        
+
         handlePopUpClose("deleteIdentity");
       } catch (err) {
         console.error(err);
         const error = err as any;
-        const text = error?.response?.data?.message ?? "Failed to remove identity from project"
+        const text = error?.response?.data?.message ?? "Failed to remove identity from project";
-        
+
         createNotification({
-            text,
+          text,
-            type: "error"
+          type: "error"
         });
       }
-    }
+    };
 
     return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="flex justify-between items-center mb-4">
+        <div className="mb-4 flex items-center justify-between">
-            <p className="text-xl font-semibold text-mineshaft-100">
+          <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-                Identities
+          <div className="flex w-full justify-end pr-4">
-            </p>
+            <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
-            <div className="flex justify-end w-full pr-4">
+              <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-                <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+                Documentation{" "}
-                    <span className="rounded-md px-4 py-2 w-max text-mineshaft-200 hover:text-white bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 duration-200 cursor-pointer">
+                <FontAwesomeIcon
-                    Documentation <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs mb-[0.06rem] ml-1"/>
+                  icon={faArrowUpRightFromSquare}
-                    </span>
+                  className="mb-[0.06rem] ml-1 text-xs"
-                </Link> 
+                />
-            </div>
+              </span>
-            <ProjectPermissionCan
+            </Link>
-              I={ProjectPermissionActions.Create}
-              a={ProjectPermissionSub.Identity}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="primary"
-                  type="submit"
-                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                  onClick={() => handlePopUpOpen("identity")}
-                  isDisabled={!isAllowed}
-                >
-                  Add identity
-                </Button>
-              )}
-            </ProjectPermissionCan>
           </div>
-            <IdentityTable 
+          <ProjectPermissionCan
-                handlePopUpOpen={handlePopUpOpen}
+            I={ProjectPermissionActions.Create}
-            />
+            a={ProjectPermissionSub.Identity}
-            <IdentityModal 
+          >
-                popUp={popUp}
+            {(isAllowed) => (
-                handlePopUpToggle={handlePopUpToggle}
+              <Button
-            />
+                colorSchema="primary"
-          <DeleteActionModal
+                type="submit"
-            isOpen={popUp.deleteIdentity.isOpen}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            title={`Are you sure want to remove ${
+                onClick={() => handlePopUpOpen("identity")}
-              (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+                isDisabled={!isAllowed}
-            } from the project?`}
+              >
-            onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+                Add identity
-            deleteKey="confirm"
+              </Button>
-            onDeleteApproved={() => 
+            )}
-              onRemoveIdentitySubmit(
+          </ProjectPermissionCan>
-                (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
-              )
-            }
-          />
         </div>
+        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <DeleteActionModal
+          isOpen={popUp.deleteIdentity.isOpen}
+          title={`Are you sure want to remove ${
+            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+          } from the project?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onRemoveIdentitySubmit(
+              (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+            )
+          }
+        />
+      </div>
     );
   },
   { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Identity }
-);
+);

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -5,187 +5,168 @@ import { format } from "date-fns";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-    EmptyState,
+  EmptyState,
-    IconButton,
+  IconButton,
-    Select,
+  Select,
-    SelectItem,
+  SelectItem,
-    Table,
+  Table,
-    TableContainer,
+  TableContainer,
-    TableSkeleton,
+  TableSkeleton,
-    TBody,
+  TBody,
-    Td,
+  Td,
-    Th,
+  Th,
-    THead,
+  THead,
-    Tr
+  Tr
 } from "@app/components/v2";
 import {
-    ProjectPermissionActions, 
+  ProjectPermissionActions,
-    ProjectPermissionSub, 
+  ProjectPermissionSub,
-    useOrganization,
+  useOrganization,
-    useWorkspace,
+  useWorkspace
 } from "@app/context";
 import {
-    useGetRoles,
+  useGetRoles,
-    useGetWorkspaceIdentityMemberships,
+  useGetWorkspaceIdentityMemberships,
-    useUpdateIdentityWorkspaceRole} from "@app/hooks/api";
+  useUpdateIdentityWorkspaceRole
+} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
+  handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteIdentity", "identity"]>,
+    popUpName: keyof UsePopUpState<["deleteIdentity", "identity"]>,
-      data?: {
+    data?: {
-        identityId?: string;
+      identityId?: string;
-        name?: string;
+      name?: string;
-      }
+    }
-    ) => void;
+  ) => void;
 };
 
-export const IdentityTable = ({
+export const IdentityTable = ({ handlePopUpOpen }: Props) => {
-    handlePopUpOpen
+  const { createNotification } = useNotificationContext();
-}: Props) => {
+  const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
-    const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
-    const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
-    const orgId = currentOrg?._id || "";
+  const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?.id || "");
-    const workspaceId = currentWorkspace?._id || "";
-    const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?._id || "");
-    
-    const { data: roles } = useGetRoles({
-        orgId,
-        workspaceId
-    });
 
-    const { mutateAsync: updateMutateAsync } = useUpdateIdentityWorkspaceRole();
+  const { data: roles } = useGetRoles({
+    orgId,
+    workspaceId
+  });
 
-    const handleChangeRole = async ({
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityWorkspaceRole();
+
+  const handleChangeRole = async ({ identityId, role }: { identityId: string; role: string }) => {
+    try {
+      await updateMutateAsync({
         identityId,
+        workspaceId,
         role
-    }: {
+      });
-        identityId: string;
-        role: string;
-    }) => {
-        try {
 
-            await updateMutateAsync({
+      createNotification({
-                identityId,
+        text: "Successfully updated identity role",
-                workspaceId,
+        type: "success"
-                role
+      });
-            });
+    } catch (err) {
-            
+      console.error(err);
-            createNotification({
+      const error = err as any;
-                text: "Successfully updated identity role",
+      const text = error?.response?.data?.message ?? "Failed to update identity role";
-                type: "success"
+
-            });
+      createNotification({
-        } catch (err) {
+        text,
-            console.error(err);
+        type: "error"
-            const error = err as any;
+      });
-            const text = error?.response?.data?.message ?? "Failed to update identity role"
-            
-            createNotification({
-                text,
-                type: "error"
-              });
-        }
     }
-      
+  };
-    return (
+
-        <TableContainer>
+  return (
-            <Table>
+    <TableContainer>
-                <THead>
+      <Table>
-                    <Tr>
+        <THead>
-                        <Th>Name</Th>
+          <Tr>
-                        <Th>Role</Th>
+            <Th>Name</Th>
-                        <Th>Added on</Th>
+            <Th>Role</Th>
-                        <Th className="w-5" />
+            <Th>Added on</Th>
-                    </Tr>
+            <Th className="w-5" />
-                </THead>
+          </Tr>
-                <TBody>
+        </THead>
-                    {isLoading && <TableSkeleton columns={7} innerKey="project-identities" />}
+        <TBody>
-                    {!isLoading &&
+          {isLoading && <TableSkeleton columns={7} innerKey="project-identities" />}
-                    data &&
+          {!isLoading &&
-                    data.length > 0 &&
+            data &&
-                    data.map(({
+            data.length > 0 &&
-                        identity: {
+            data.map(({ identity: { id, name }, role, customRole, createdAt }) => {
-                            _id,
+              return (
-                            name
+                <Tr className="h-10" key={`st-v3-${id}`}>
-                        },
+                  <Td>{name}</Td>
-                        role,
+                  <Td>
-                        customRole,
+                    <ProjectPermissionCan
-                        createdAt
+                      I={ProjectPermissionActions.Edit}
-                    }) => {
+                      a={ProjectPermissionSub.Identity}
+                    >
+                      {(isAllowed) => {
                         return (
-                            <Tr className="h-10" key={`st-v3-${_id}`}>
+                          <Select
-                                <Td>{name}</Td>
+                            value={role === "custom" ? (customRole?.slug as string) : role}
-                                <Td>
+                            isDisabled={!isAllowed}
-                                    <ProjectPermissionCan
+                            className="w-40 bg-mineshaft-600"
-                                        I={ProjectPermissionActions.Edit}
+                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                        a={ProjectPermissionSub.Identity}
+                            onValueChange={(selectedRole) =>
-                                    >
+                              handleChangeRole({
-                                        {(isAllowed) => {
+                                identityId: id,
-                                            return (
+                                role: selectedRole
-                                                <Select
+                              })
-                                                    value={
+                            }
-                                                        role === "custom" ? (customRole?.slug as string) : role
+                          >
-                                                    }
+                            {(roles || []).map(({ slug, name: roleName }) => (
-                                                    isDisabled={!isAllowed}
+                              <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                                    className="w-40 bg-mineshaft-600"
+                                {roleName}
-                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                              </SelectItem>
-                                                    onValueChange={(selectedRole) => 
+                            ))}
-                                                        handleChangeRole({
+                          </Select>
-                                                            identityId: _id,
-                                                            role: selectedRole
-                                                        })
-                                                    }
-                                                >
-                                                    {(roles || [])
-                                                        .map(({ slug, name: roleName }) => (
-                                                            <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                                                {roleName}
-                                                            </SelectItem>
-                                                        ))}
-                                                </Select>
-                                            );
-                                        }}
-                                    </ProjectPermissionCan>
-                                </Td> 
-                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                <Td className="flex justify-end">
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Delete}
-                                        a={ProjectPermissionSub.Identity}
-                                    >
-                                        {(isAllowed) => (
-                                            <IconButton
-                                                onClick={() => {
-                                                    handlePopUpOpen("deleteIdentity", {
-                                                        identityId: _id,
-                                                        name
-                                                    });
-                                                }}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="ml-4"
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        )}
-                                    </ProjectPermissionCan>
-                                </Td>
-                            </Tr>
                         );
-                    })}
+                      }}
-                    {!isLoading && data && data?.length === 0 && (
+                    </ProjectPermissionCan>
-                        <Tr>
+                  </Td>
-                            <Td colSpan={7}>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                <EmptyState title="No identities have been added to this project" icon={faServer} />
+                  <Td className="flex justify-end">
-                            </Td>
+                    <ProjectPermissionCan
-                        </Tr>
+                      I={ProjectPermissionActions.Delete}
-                    )}
+                      a={ProjectPermissionSub.Identity}
-                </TBody>
+                    >
-            </Table>
+                      {(isAllowed) => (
-        </TableContainer>
+                        <IconButton
-    );
+                          onClick={() => {
-}
+                            handlePopUpOpen("deleteIdentity", {
+                              identityId: id,
+                              name
+                            });
+                          }}
+                          size="lg"
+                          colorSchema="danger"
+                          variant="plain"
+                          ariaLabel="update"
+                          className="ml-4"
+                          isDisabled={!isAllowed}
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                        </IconButton>
+                      )}
+                    </ProjectPermissionCan>
+                  </Td>
+                </Tr>
+              );
+            })}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={7}>
+                <EmptyState title="No identities have been added to this project" icon={faServer} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -190,7 +190,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
             <>
               <div className="mb-4">
                 <h3 className="text-sm text-mineshaft-400">{renderLabels(authProvider).acsUrl}</h3>
-                <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data._id}`}</p>
+                <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
               </div>
               <div className="mb-4">
                 <h3 className="text-sm text-mineshaft-400">