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

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -205,7 +205,7 @@ export const SecretMainPage = () => {
 
   return (
     <StoreProvider>
-      <div className="container flex flex-col mx-auto h-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+      <div className="container mx-auto flex h-full flex-col px-6 text-mineshaft-50 dark:[color-scheme:dark]">
         <div className="relative right-6 -top-2 mb-2 ml-6">
           <NavHeader
             pageName={t("dashboard.title")}
@@ -238,13 +238,13 @@ export const SecretMainPage = () => {
               isSnapshotCountLoading={isSnapshotCountLoading}
               onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
             />
-            <div className="mt-3 overflow-y-auto overflow-x-hidden thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm">
+            <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
               <div className="flex flex-col" id="dashboard">
                 {isNotEmtpy && (
-                  <div className="flex font-medium border-b border-mineshaft-600">
-                    <div style={{ width: "2.8rem" }} className="px-4 py-3 flex-shrink-0" />
+                  <div className="flex border-b border-mineshaft-600 font-medium">
+                    <div style={{ width: "2.8rem" }} className="flex-shrink-0 px-4 py-3" />
                     <div
-                      className="w-80 flex-shrink-0 border-r flex items-center border-mineshaft-600 px-4 py-2"
+                      className="flex w-80 flex-shrink-0 items-center border-r border-mineshaft-600 px-4 py-2"
                       role="button"
                       tabIndex={0}
                       onClick={handleSortToggle}

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -188,7 +188,7 @@ export const ActionBar = ({
 
   return (
     <>
-      <div className="flex items-center space-x-2 mt-4">
+      <div className="mt-4 flex items-center space-x-2">
         <div className="w-2/5">
           <Input
             className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -206,7 +206,7 @@ export const ActionBar = ({
                 ariaLabel="Download"
                 className={twMerge(
                   "transition-all",
-                  Object.keys(filter.tags).length && "text-primary border-primary/50"
+                  Object.keys(filter.tags).length && "border-primary/50 text-primary"
                 )}
               >
                 <FontAwesomeIcon icon={faFilter} />
@@ -245,7 +245,7 @@ export const ActionBar = ({
                     >
                       <div className="flex items-center">
                         <div
-                          className="w-2 h-2 rounded-full mr-2"
+                          className="mr-2 h-2 w-2 rounded-full"
                           style={{ background: tagColor || "#bec2c8" }}
                         />
                         {name}
@@ -304,7 +304,7 @@ export const ActionBar = ({
                 variant="outline_bg"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
-                className="rounded-r-none h-10"
+                className="h-10 rounded-r-none"
                 isDisabled={!isAllowed}
               >
                 Add Secret
@@ -326,7 +326,7 @@ export const ActionBar = ({
               </IconButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <div className="p-1.5 flex flex-col space-y-1">
+              <div className="flex flex-col space-y-1 p-1.5">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Create}
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
@@ -374,17 +374,17 @@ export const ActionBar = ({
       </div>
       <div
         className={twMerge(
-          "overflow-hidden transition-all h-0 flex-shrink-0",
+          "h-0 flex-shrink-0 overflow-hidden transition-all",
           isMultiSelectActive && "h-16"
         )}
       >
-        <div className="text-bunker-300 flex items-center bg-mineshaft-800 mt-3.5 py-2 px-4 rounded-md border border-mineshaft-600">
+        <div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-bunker-300">
           <Tooltip content="Clear">
             <IconButton variant="plain" ariaLabel="clear-selection" onClick={resetSelectedSecret}>
               <FontAwesomeIcon icon={faMinusSquare} size="lg" />
             </IconButton>
           </Tooltip>
-          <div className="text-sm ml-4 px-2 flex-grow">
+          <div className="ml-4 flex-grow px-2 text-sm">
             {Object.keys(selectedSecrets).length} Selected
           </div>
           <ProjectPermissionCan

frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx

@@ -199,7 +199,7 @@ export const CopySecretsFromBoard = ({
           <div className="border-t border-mineshaft-600 pt-4">
             <div className="mb-4 flex items-center justify-between">
               <div>Secrets</div>
-              <div className="w-1/2 flex items-center space-x-2">
+              <div className="flex w-1/2 items-center space-x-2">
                 <Input
                   placeholder="Search for secret"
                   value={searchFilter}
@@ -232,7 +232,7 @@ export const CopySecretsFromBoard = ({
             {!isSecretsLoading && !secrets?.length && (
               <EmptyState title="No secrets found" icon={faKey} />
             )}
-            <div className="grid grid-cols-2 gap-4 max-h-64 overflow-auto thin-scrollbar ">
+            <div className="thin-scrollbar grid max-h-64 grid-cols-2 gap-4 overflow-auto ">
               {isSecretsLoading &&
                 Array.apply(0, Array(2)).map((_x, i) => (
                   <Skeleton key={`secret-pull-loading-${i + 1}`} className="bg-mineshaft-700" />

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx

@@ -165,7 +165,7 @@ export const SecretDetailSidebar = ({
     >
       <DrawerContent title="Secret">
         <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
-          <div className="flex flex-col h-full">
+          <div className="flex h-full flex-col">
             <FormControl label="Key">
               <Input isDisabled {...register("key")} />
             </FormControl>
@@ -226,22 +226,22 @@ export const SecretDetailSidebar = ({
               />
             )}
             <FormControl label="Tags" className="">
-              <div className="overflow-hidden grid gap-2 grid-flow-col auto-cols-min pt-2">
+              <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
                 {fields.map(({ tagColor, id: formId, name, id }) => (
                   <Tag
-                    className="flex items-center space-x-2 w-min"
+                    className="flex w-min items-center space-x-2"
                     key={formId}
                     onClose={() => {
                       if (cannotEditSecret) {
                         createNotification({ type: "error", text: "Access denied" });
                         return;
                       }
-                      const tag = tags?.find(({ id: id }) => id === id);
+                      const tag = tags?.find(({ id: tagId }) => id === tagId);
                       if (tag) handleTagSelect(tag);
                     }}
                   >
                     <div
-                      className="w-3 h-3 rounded-full"
+                      className="h-3 w-3 rounded-full"
                       style={{ backgroundColor: tagColor || "#bec2c8" }}
                     />
                     <div className="text-sm">{name}</div>
@@ -281,7 +281,7 @@ export const SecretDetailSidebar = ({
                         >
                           <div className="flex items-center">
                             <div
-                              className="w-2 h-2 rounded-full mr-2"
+                              className="mr-2 h-2 w-2 rounded-full"
                               style={{ background: tagColor || "#bec2c8" }}
                             />
                             {name}
@@ -352,7 +352,7 @@ export const SecretDetailSidebar = ({
                 )}
               />
             </div>
-            <div className="dark mb-4 text-sm text-bunker-300 flex-grow">
+            <div className="dark mb-4 flex-grow text-sm text-bunker-300">
               <div className="mb-2">Version History</div>
               <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
                 {secretVersion?.map(({ createdAt, value, id }, i) => (
@@ -372,7 +372,7 @@ export const SecretDetailSidebar = ({
               </div>
             </div>
             <div className="flex flex-col space-y-4">
-              <div className="flex space-x-4 items-center">
+              <div className="flex items-center space-x-4">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Edit}
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -72,7 +72,7 @@ export const filterSecrets = (secrets: DecryptedSecret[], filter: Filter) =>
     const isTagFilterActive = Boolean(Object.keys(filter.tags).length);
     const searchTerm = filter.searchFilter.toLowerCase();
     return (
-      (!isTagFilterActive || tags.some(({ _id }) => filter.tags?.[_id])) &&
+      (!isTagFilterActive || tags.some(({ id }) => filter.tags?.[id])) &&
       (key.toLowerCase().includes(searchTerm) || value.toLowerCase().includes(searchTerm))
     );
   });
@@ -191,7 +191,7 @@ export const SecretListView = ({
   const handleSaveSecret = useCallback(
     async (
       orgSecret: DecryptedSecret,
-      modSecret: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
+      modSecret: Omit<DecryptedSecret, "tags"> & { tags: { id: string }[] },
       cb?: () => void
     ) => {
       const { key: oldKey } = orgSecret;
@@ -208,8 +208,8 @@ export const SecretListView = ({
       } = modSecret;
       const hasKeyChanged = oldKey !== key;
 
-      const tagIds = tags.map(({ _id }) => _id);
-      const oldTagIds = orgSecret.tags.map(({ _id }) => _id);
+      const tagIds = tags.map(({ id }) => id);
+      const oldTagIds = orgSecret.tags.map(({ id }) => id);
       const isSameTags = JSON.stringify(tagIds) === JSON.stringify(oldTagIds);
       const isSharedSecUnchanged =
         (
@@ -248,7 +248,7 @@ export const SecretListView = ({
             comment,
             reminderRepeatDays,
             reminderNote,
-            secretId: orgSecret._id,
+            secretId: orgSecret.id,
             newKey: hasKeyChanged ? key : undefined,
             skipMultilineEncoding: modSecret.skipMultilineEncoding
           });
@@ -283,7 +283,7 @@ export const SecretListView = ({
   );
 
   const handleSecretDelete = useCallback(async () => {
-    const { key, _id: secretId } = popUp.deleteSecret?.data as DecryptedSecret;
+    const { key, id: secretId } = popUp.deleteSecret?.data as DecryptedSecret;
     try {
       await handleSecretOperation("delete", "shared", key, { secretId });
       // wrap this in another function and then reuse
@@ -346,11 +346,11 @@ export const SecretListView = ({
                   environment={environment}
                   secretPath={secretPath}
                   tags={wsTags}
-                  isSelected={selectedSecrets?.[secret._id]}
+                  isSelected={selectedSecrets?.[secret.id]}
                   onToggleSecretSelect={toggleSelectedSecret}
                   isVisible={isVisible}
                   secret={secret}
-                  key={secret._id}
+                  key={secret.id}
                   onSaveSecret={handleSaveSecret}
                   onDeleteSecret={onDeleteSecret}
                   onDetailViewSecret={onDetailViewSecret}

frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx

@@ -60,7 +60,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
   return (
     <>
       <div
-        className="flex group border-b border-mineshaft-600 hover:bg-mineshaft-700 cursor-pointer"
+        className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
         role="button"
         tabIndex={0}
         onClick={setIsExpanded.toggle}
@@ -74,17 +74,17 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
         <div className="w-12 flex-shrink-0 px-4 py-3">
           <FontAwesomeIcon icon={faKey} />
         </div>
-        <div className="flex-grow px-4 py-3 flex items-center space-x-4">
+        <div className="flex flex-grow items-center space-x-4 px-4 py-3">
           {mode === "modified" ? (
             <>
               <div>{preSecret?.key}</div>
-              <div className="bg-primary text-black rounded-lg font-bold px-1 py-0.5 text-xs">
+              <div className="rounded-lg bg-primary px-1 py-0.5 text-xs font-bold text-black">
                 v{preSecret?.version}
               </div>
               <div>
                 <FontAwesomeIcon icon={faChevronRight} size="sm" className="text-orange-700" />
               </div>
-              <div className="bg-primary text-black rounded-lg font-bold px-1 py-0.5 text-xs">
+              <div className="rounded-lg bg-primary px-1 py-0.5 text-xs font-bold text-black">
                 v{postSecret?.version}
               </div>
             </>
@@ -94,7 +94,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
         </div>
       </div>
       {isExpanded && (
-        <div className="flex bg-bunker-600 cursor-pointer p-4">
+        <div className="flex cursor-pointer bg-bunker-600 p-4">
           <TableContainer>
             <Table>
               <THead>
@@ -153,11 +153,11 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                     <Td className="border-r border-mineshaft-600">
                       {preSecret?.tags?.map(({ name, id: tagId, tagColor }) => (
                         <Tag
-                          className="flex items-center space-x-2 w-min"
+                          className="flex w-min items-center space-x-2"
                           key={`${preSecret.id}-${tagId}`}
                         >
                           <div
-                            className="w-3 h-3 rounded-full"
+                            className="h-3 w-3 rounded-full"
                             style={{ backgroundColor: tagColor || "#bec2c8" }}
                           />
                           <div className="text-sm">{name}</div>
@@ -168,11 +168,11 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   <Td>
                     {postSecret?.tags?.map(({ name, id: tagId, tagColor }) => (
                       <Tag
-                        className="flex items-center space-x-2 w-min"
+                        className="flex w-min items-center space-x-2"
                         key={`${postSecret.id}-${tagId}`}
                       >
                         <div
-                          className="w-3 h-3 rounded-full"
+                          className="h-3 w-3 rounded-full"
                           style={{ backgroundColor: tagColor || "#bec2c8" }}
                         />
                         <div className="text-sm">{name}</div>

frontend/src/views/SecretMainPage/components/SnapshotView/SnapshotView.tsx

@@ -98,7 +98,7 @@ export const SnapshotView = ({
     );
     const diffView: Array<TDiffView<DecryptedSecret>> = [];
     rollingSecrets.forEach((rollSecret) => {
-      const { id: id } = rollSecret;
+      const { id } = rollSecret;
       const doesExist = Boolean(secretGroupById?.[id]);
       if (doesExist) {
         diffView.push({
@@ -154,11 +154,11 @@ export const SnapshotView = ({
 
   return (
     <>
-      <div className="flex space-x-4 items-center">
+      <div className="flex items-center space-x-4">
         <h6 className="text-2xl">Snapshot</h6>
         <Tag colorSchema="green">{new Date(snapshotData?.createdAt || "").toLocaleString()}</Tag>
       </div>
-      <div className="flex items-center space-x-2 mt-4">
+      <div className="mt-4 flex items-center space-x-2">
         <div className="w-2/5">
           <Input
             className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -210,19 +210,19 @@ export const SnapshotView = ({
           </ProjectPermissionCan>
         </div>
       </div>
-      <div className="mt-4 bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm">
+      <div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
         <div className="flex flex-col ">
-          <div className="flex font-medium border-b border-mineshaft-600">
+          <div className="flex border-b border-mineshaft-600 font-medium">
             <div className="w-12 flex-shrink-0" />
             <div className="w-12 flex-shrink-0" />
-            <div className="flex-grow px-4 py-2 flex items-center">Changes</div>
+            <div className="flex flex-grow items-center px-4 py-2">Changes</div>
           </div>
           {folderDiffView
             .sort((a, b) => a.post.name.toLowerCase().localeCompare(b.post.name.toLowerCase()))
             .filter((a) => a.post.name.toLowerCase().includes(search.toLowerCase()))
             .map(({ mode, pre, post }, index) => (
               <div
-                className="flex group border-b border-mineshaft-600 hover:bg-mineshaft-700 cursor-pointer"
+                className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
                 key={`folder-${mode}-${index + 1}`}
               >
                 <div className="w-12 flex-shrink-0 px-4 py-3">
@@ -231,7 +231,7 @@ export const SnapshotView = ({
                 <div className="w-12 flex-shrink-0 px-4 py-3">
                   <FontAwesomeIcon icon={faFolder} />
                 </div>
-                <div className="flex-grow px-4 py-3 flex items-center space-x-4">
+                <div className="flex flex-grow items-center space-x-4 px-4 py-3">
                   {mode === "modified" ? (
                     <>
                       <div>{pre?.name}</div>