feat(infisical-pg): changed frontend api types _id to normal id

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeyTable.tsx

@@ -55,9 +55,9 @@ export const APIKeyTable = () => {
           {!isLoading &&
             data &&
             data.length > 0 &&
-            data.map(({ _id, name, createdAt, expiresAt, lastUsed }) => {
+            data.map(({ id, name, createdAt, expiresAt, lastUsed }) => {
               return (
-                <Tr className="h-10" key={`api-key-${_id}`}>
+                <Tr className="h-10" key={`api-key-${id}`}>
                   <Td>{name}</Td>
                   <Td>{format(new Date(lastUsed), "yyyy-MM-dd")}</Td>
                   <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
@@ -65,7 +65,7 @@ export const APIKeyTable = () => {
                   <Td>
                     <IconButton
                       onClick={async () => {
-                        await handleDeleteAPIKeyDataClick(_id);
+                        await handleDeleteAPIKeyDataClick(id);
                       }}
                       size="lg"
                       colorSchema="danger"

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx

@@ -3,105 +3,96 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import {
-    EmptyState,
-    IconButton,
-    Table,
-    TableContainer,
-    TableSkeleton,
-    TBody,
-    Td,
-    Th,
-    THead,
-    Tr
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
 } from "@app/components/v2";
-import {
-    useGetMyAPIKeysV2
-} from "@app/hooks/api";
+import { useGetMyAPIKeysV2 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
-      data?: {
-        apiKeyDataId?: string;
-        name?: string;
-      }
-    ) => void;
-  };
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
+    data?: {
+      apiKeyDataId?: string;
+      name?: string;
+    }
+  ) => void;
+};
 
-export const APIKeyV2Table = ({
-    handlePopUpOpen
-}: Props) => {
-    const { data, isLoading } = useGetMyAPIKeysV2();
-    return (
-        <TableContainer>
-            <Table>
-                <THead>
-                    <Tr>
-                        <Th className="">Name</Th>
-                        <Th className="">Last Used</Th>
-                        <Th className="">Created At</Th>
-                        <Th className="w-5" />
-                    </Tr>
-                </THead>
-                <TBody>
-                    {isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
-                    {!isLoading && 
-                    data && 
-                    data.length > 0 && 
-                    data.map(({
-                        id,
-                        name,
-                        lastUsed,
-                        createdAt
-                    }) => {
-                        return (
-                            <Tr className="h-10" key={`api-key-v2-${id}`}>
-                                <Td>{name}</Td>
-                                <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
-                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                <Td className="flex justify-end">
-                                    <IconButton
-                                        onClick={async () => {
-                                            handlePopUpOpen("apiKeyV2", {
-                                                apiKeyDataId: id,
-                                                name
-                                            });
-                                        }}
-                                        size="lg"
-                                        colorSchema="primary"
-                                        variant="plain"
-                                        ariaLabel="update"
-                                    >
-                                        <FontAwesomeIcon icon={faPencil} />
-                                    </IconButton>
-                                    <IconButton
-                                        onClick={() => {
-                                            handlePopUpOpen("deleteAPIKeyV2", {
-                                                apiKeyDataId: id
-                                            });
-                                        }}
-                                        size="lg"
-                                        colorSchema="danger"
-                                        variant="plain"
-                                        ariaLabel="update"
-                                        className="ml-4"
-                                    >
-                                        <FontAwesomeIcon icon={faXmark} />
-                                    </IconButton>
-                                </Td>
-                            </Tr>
-                        );
-                    })}
-                    {!isLoading && data && data?.length === 0 && (
-                        <Tr>
-                            <Td colSpan={4}>
-                                <EmptyState title="No API key v2 on file" icon={faKey} />
-                            </Td>
-                        </Tr>
-                    )}
-                </TBody>
-            </Table>
-        </TableContainer>
-    );
-}
+export const APIKeyV2Table = ({ handlePopUpOpen }: Props) => {
+  const { data, isLoading } = useGetMyAPIKeysV2();
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th className="">Name</Th>
+            <Th className="">Last Used</Th>
+            <Th className="">Created At</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
+          {!isLoading &&
+            data &&
+            data.length > 0 &&
+            data.map(({ id, name, lastUsed, createdAt }) => {
+              return (
+                <Tr className="h-10" key={`api-key-v2-${id}`}>
+                  <Td>{name}</Td>
+                  <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td className="flex justify-end">
+                    <IconButton
+                      onClick={async () => {
+                        handlePopUpOpen("apiKeyV2", {
+                          apiKeyDataId: id,
+                          name
+                        });
+                      }}
+                      size="lg"
+                      colorSchema="primary"
+                      variant="plain"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faPencil} />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => {
+                        handlePopUpOpen("deleteAPIKeyV2", {
+                          apiKeyDataId: id
+                        });
+                      }}
+                      size="lg"
+                      colorSchema="danger"
+                      variant="plain"
+                      ariaLabel="update"
+                      className="ml-4"
+                    >
+                      <FontAwesomeIcon icon={faXmark} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              );
+            })}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={4}>
+                <EmptyState title="No API key v2 on file" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsTable.tsx

@@ -43,9 +43,9 @@ export const SessionsTable = () => {
           {!isLoading &&
             data &&
             data.length > 0 &&
-            data.map(({ _id, createdAt, lastUsed, ip, userAgent }) => {
+            data.map(({ id, createdAt, lastUsed, ip, userAgent }) => {
               return (
-                <Tr className="h-10" key={`session-${_id}`}>
+                <Tr className="h-10" key={`session-${id}`}>
                   <Td>{formatDate(createdAt)}</Td>
                   <Td>{formatDate(lastUsed)}</Td>
                   <Td>{ip}</Td>

frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/UserNameSection.tsx

@@ -9,7 +9,7 @@ import { useUser } from "@app/context";
 import { useRenameUser } from "@app/hooks/api/users/queries";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("User Name"),
+  name: yup.string().required().label("User Name")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -17,11 +17,7 @@ type FormData = yup.InferType<typeof formSchema>;
 export const UserNameSection = (): JSX.Element => {
   const { user } = useUser();
   const { createNotification } = useNotificationContext();
-  const {
-    handleSubmit,
-    control,
-    reset
-  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
   const { mutateAsync, isLoading } = useRenameUser();
 
   useEffect(() => {
@@ -32,10 +28,10 @@ export const UserNameSection = (): JSX.Element => {
 
   const onFormSubmit = async ({ name }: FormData) => {
     try {
-      if (!user?._id) return;
+      if (!user?.id) return;
       if (name === "") return;
 
-      await mutateAsync({ newName: name});
+      await mutateAsync({ newName: name });
       createNotification({
         text: "Successfully renamed user",
         type: "success"
@@ -50,33 +46,26 @@ export const UserNameSection = (): JSX.Element => {
   };
 
   return (
-    <form 
+    <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-          Name
-        </p>
-        <div className="mb-2 max-w-md">
-          <Controller
-            defaultValue=""
-            render={({ field, fieldState: { error } }) => (
-              <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input placeholder={`${user?.firstName} ${user?.lastName}`} {...field} />
-              </FormControl>
-            )}
-            control={control}
-            name="name"
-          />
-        </div>
-        <Button
-          isLoading={isLoading}
-          colorSchema="primary"
-          variant="outline_bg"
-          type="submit"
-        >
-          Save
-        </Button>
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Name</p>
+      <div className="mb-2 max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input placeholder={`${user?.firstName} ${user?.lastName}`} {...field} />
+            </FormControl>
+          )}
+          control={control}
+          name="name"
+        />
+      </div>
+      <Button isLoading={isLoading} colorSchema="primary" variant="outline_bg" type="submit">
+        Save
+      </Button>
     </form>
   );
 };