Merge branch 'main' into feat/ui-improvements

frontend/src/components/basic/table/ProjectUsersTable.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faEye, faEyeSlash, faPenToSquare, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
 import { plans } from 'public/data/frequentConstants';
 
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
@@ -106,6 +106,11 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
         ability: "read",
         environmentSlug: slug
       }];
+    } else if (val === "Add Only") {
+      denials = [{
+        ability: "read",
+        environmentSlug: slug
+      }];
     } else {
       denials = [];
     }
@@ -185,21 +190,21 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
 
   return (
     <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1 min-w-max">
-      <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5" />
+      <div className="absolute rounded-t-md w-full h-[3.1rem] bg-white/5" />
       <UpgradePlanModal
         isOpen={isUpgradeModalOpen}
         onClose={closeUpgradeModal}
         text="You can change user permissions if you switch to Infisical's Professional plan."
       />
       <table className="w-full my-0.5">
-        <thead className="text-gray-400 text-sm font-light">
+        <thead className="text-gray-400 text-xs font-light">
           <tr>
             <th className="text-left pl-4 py-3.5">NAME</th>
             <th className="text-left pl-4 py-3.5">EMAIL</th>
             <th className="text-left pl-6 pr-10 py-3.5">ROLE</th>
             {workspaceEnvs.map(env => (
-              <th key={guidGenerator()} className="text-left pl-8 py-1 max-w-min break-normal">
-                <span>{env.name.toUpperCase()}<br/></span> 
+              <th key={guidGenerator()} className="text-left pl-2 py-1 max-w-min break-normal">
+                <span>{env.slug.toUpperCase()}<br/></span> 
                 {/* <span>PERMISSION</span> */}
               </th>
             ))}
@@ -221,7 +226,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                   user.email?.toLowerCase().includes(filter)
               )
               .map((row, index) => (
-                <tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-700">
+                <tr key={guidGenerator()} className="bg-bunker-600 text-sm hover:bg-bunker-500">
                   <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
                     {row.firstName} {row.lastName}
                   </td>
@@ -231,7 +236,8 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                   <td className="pl-6 pr-10 py-2 border-mineshaft-700 border-t text-gray-300">
                     <div className="justify-start h-full flex flex-row items-center">
                       <Select 
-                        className="w-36"
+                        className="w-36 bg-mineshaft-700"
+                        dropdownContainerClassName="bg-mineshaft-700"
                         // open={isOpen}
                         onValueChange={(e) => handleRoleUpdate(index, e)}
                         value={row.role}
@@ -253,23 +259,36 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                       )}
                     </div>
                   </td>
-                  {workspaceEnvs.map((env) => <td key={guidGenerator()} className="pl-8 py-2 border-mineshaft-700 border-t text-gray-300">
+                  {workspaceEnvs.map((env) => <td key={guidGenerator()} className="pl-2 py-2 border-mineshaft-700 border-t text-gray-300">
                     <Select 
-                      className="w-36"
+                      className="w-16 bg-mineshaft-700"
+                      dropdownContainerClassName="bg-mineshaft-700"
+                      position="item-aligned"
                       // open={isOpen}
                       onValueChange={(val) => handlePermissionUpdate(index, val, row.membershipId, env.slug)}
                       value={
                         // eslint-disable-next-line no-nested-ternary
                         (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read"))
                         ? "No Access"
-                        : (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") ? "Read Only" : "Read & Write")
+                        // eslint-disable-next-line no-nested-ternary
+                        : (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && !row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read") ? "Read Only" 
+                        : !row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read") ? "Add Only" : "Read & Write")
+                      }
+                      icon={
+                        // eslint-disable-next-line no-nested-ternary
+                        (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read"))
+                        ? faEyeSlash
+                        // eslint-disable-next-line no-nested-ternary
+                        : (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && !row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read") ? faEye 
+                        : !row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read") ? faPlus : faPenToSquare)
                       }
                       disabled={myRole !== 'admin'}
                       // onOpenChange={(open) => setIsOpen(open)}
                     >
-                      <SelectItem value="No Access">No Access</SelectItem>
-                      <SelectItem value="Read Only">Read Only</SelectItem>
-                      <SelectItem value="Read & Write">Read & Write</SelectItem>
+                      <SelectItem value="No Access" customIcon={faEyeSlash}>No Access</SelectItem>
+                      <SelectItem value="Read Only" customIcon={faEye}>Read Only</SelectItem>
+                      <SelectItem value="Add Only"  customIcon={faPlus}>Add Only</SelectItem>
+                      <SelectItem value="Read & Write" customIcon={faPenToSquare}>Read & Write</SelectItem>
                     </Select>
                   </td>)}
                   <td className="flex flex-row justify-end pl-8 pr-8 py-2 border-t border-0.5 border-mineshaft-700">

frontend/src/components/basic/table/UserTable.tsx

@@ -4,6 +4,7 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
 
 import changeUserRoleInOrganization from '@app/pages/api/organization/changeUserRoleInOrganization';
 import deleteUserFromOrganization from '@app/pages/api/organization/deleteUserFromOrganization';
+import getOrganizationProjectMemberships from '@app/pages/api/organization/GetOrgProjectMemberships';
 import deleteUserFromWorkspace from '@app/pages/api/workspace/deleteUserFromWorkspace';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
@@ -36,6 +37,7 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
   );
   const router = useRouter();
   const [myRole, setMyRole] = useState('member');
+  const [userProjectMemberships, setUserProjectMemberships] = useState<any[]>([]);
 
   const workspaceId = router.query.id as string;
   // Delete the row in the table (e.g. a user)
@@ -79,6 +81,10 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
 
   useEffect(() => {
     setMyRole(userData.filter((user) => user.email === myUser)[0]?.role);
+    (async () => {
+      const result = await getOrganizationProjectMemberships({ orgId: String(localStorage.getItem("orgData.id"))})
+      setUserProjectMemberships(result);
+    })();
   }, [userData, myUser]);
 
   const grantAccess = async (id: string, publicKey: string) => {
@@ -110,7 +116,7 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
   };
 
   return (
-    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1 min-w-max">
+    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1 min-w-max w-full">
       <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5" />
       <table className="w-full my-0.5">
         <thead className="text-gray-400 text-sm font-light">
@@ -118,6 +124,7 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
             <th className="text-left pl-4 py-3.5">NAME</th>
             <th className="text-left pl-4 py-3.5">EMAIL</th>
             <th className="text-left pl-6 pr-10 py-3.5">ROLE</th>
+            <th className="text-left pl-6 pr-10 py-3.5">PROJECTS</th>
             <th aria-label="buttons" />
           </tr>
         </thead>
@@ -189,6 +196,17 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
                       )}
                     </div>
                   </td>
+                  <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
+                    <div className="flex items-center max-h-16 overflow-x-auto w-full max-w-xl break-all">
+                      {userProjectMemberships[row.userId] 
+                      ? userProjectMemberships[row.userId]?.map((project: any) => (
+                        <div key={project._id} className='mx-1 min-w-max px-1.5 bg-mineshaft-500 rounded-sm text-sm text-bunker-200 flex items-center'>
+                          <span className='mb-0.5 cursor-default'>{project.name}</span>
+                        </div>
+                      ))
+                      : <span className='ml-1 text-bunker-100 rounded-sm px-1 py-0.5 text-sm bg-red/80'>This user isn&apos;t part of any projects yet.</span>}
+                    </div>
+                  </td>
                   <td className="flex flex-row justify-end pl-8 pr-8 py-2 border-t border-0.5 border-mineshaft-700">
                     {myUser !== row.email &&
                     // row.role !== "admin" &&

frontend/src/components/context/Notifications/Notification.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type NotificationType = 'success' | 'error' | 'info';
@@ -36,7 +36,7 @@ const Notification = ({ notification, clearNotification }: NotificationProps) =>
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-4 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
+      className="relative w-full flex items-center justify-between px-6 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-mineshaft-700 mb-3 right-3"
       role="alert"
     >
       {notification.type === 'error' && (
@@ -48,13 +48,13 @@ const Notification = ({ notification, clearNotification }: NotificationProps) =>
       {notification.type === 'info' && (
         <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md" />
       )}
-      <p className="text-bunker-200 text-sm font-semibold mt-0.5">{notification.text}</p>
+      <p className="text-bunker-200 text-md font-base mt-0.5">{notification.text}</p>
       <button
         type="button"
         className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon className="text-white pl-2 w-4 h-3 hover:text-red" icon={faX} />
+        <FontAwesomeIcon className="absolute right-2 top-3 text-bunker-300 pl-2 w-4 h-4 hover:text-white" icon={faXmark} />
       </button>
     </div>
   );

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -1,9 +1,10 @@
 import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faCodeBranch, faExclamationCircle, faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import guidGenerator from '../utilities/randomId';
 import { HoverObject } from '../v2/HoverCard';
+import { PopoverObject } from '../v2/Popover/Popover';
 
 const REGEX = /([$]{.*?})/g;
 
@@ -112,7 +113,7 @@ const DashboardInputField = ({
           }}>
             <HoverObject 
               text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
-              icon={faLayerGroup}
+              icon={faCodeBranch}
               color={overrideEnabled ? 'primary' : 'bunker-400'}
             />
           </button>
@@ -125,24 +126,24 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div title={value} className={`relative flex-col w-full h-10 ${
-        isSideBarOpen && 'bg-mineshaft-700 duration-200'
-      }`}>
-        <div
-          className={`group relative flex flex-col justify-center items-center ${
-            error ? 'w-max' : 'w-full'
-          }`}
-        >
-          <input
-            onChange={(e) => onChangeHandler(e.target.value, position)}
-            type={type}
-            value={value}
-            className='z-10 peer ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
-            spellCheck="false"
-            placeholder='–'
-          />
+      <PopoverObject text={value || ''} onChangeHandler={onChangeHandler} position={position}>
+        <div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
+          isSideBarOpen && 'bg-mineshaft-700 duration-200'
+        }`}>
+          <div
+            className={`group relative flex flex-col justify-center items-center h-full ${
+              error ? 'w-max' : 'w-full'
+            }`}
+          >
+            {value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+              {value?.split("\n")[0]}
+            </span> : <span className='text-bunker-400'>-</span> }
+            {value?.split("\n")[1] && <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+              {value?.split("\n")[1]}
+            </span>}
+          </div>
         </div>
-      </div>
+      </PopoverObject>
     );
   }
   if (type === 'value') {
@@ -215,7 +216,7 @@ const DashboardInputField = ({
                 ))}
                 {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
               </div>
-              <div className='invisible group-hover:visible cursor-pointer'><FontAwesomeIcon icon={faEye} /></div>
+              <div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>

frontend/src/components/dashboard/KeyPair.tsx

@@ -132,7 +132,7 @@ const KeyPair = ({
           />
         </div>
       </div>
-      <div className="w-2/12 border-r border-mineshaft-600">
+      <div className="w-[calc(10%)] border-r border-mineshaft-600">
         <div className="flex items-center max-h-16">
           <DashboardInputField
             onChangeHandler={modifyComment}
@@ -171,12 +171,26 @@ const KeyPair = ({
         <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
       </div>
       <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
-        <DeleteActionButton
+        {keyPair.key || keyPair.value 
+        ? <DeleteActionButton
           onSubmit={() => { if (deleteRow) {
             deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
           }}}
           isPlain
         />
+      :  <div className='cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'>
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={() => { if (deleteRow) {
+            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
+          }}}
+          className="invisible group-hover:visible"
+        >
+          <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+        </div>
+      </div>}
       </div>
     </div>
   </div>

frontend/src/components/dashboard/SideBar.tsx

@@ -18,7 +18,7 @@ import GenerateSecretMenu from './GenerateSecretMenu';
 
 interface SecretProps {
   key: string;
-  value: string;
+  value: string | undefined;
   valueOverride: string | undefined;
   pos: number;
   id: string;
@@ -80,9 +80,9 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-full min-w-sm max-w-sm sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
       {isLoading ? (
-        <div className="flex items-center justify-center h-full">
+        <div className="flex items-center justify-center h-full w-full">
           <Image
             src="/images/loading/loading.gif"
             height={60}
@@ -91,7 +91,7 @@ const SideBar = ({
           />
         </div>
       ) : (
-        <div className="h-min overflow-y-auto">
+        <div className="h-min overflow-y-auto w-full">
           <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
             <p className="font-semibold text-lg text-bunker-200">{t('dashboard:sidebar.secret')}</p>
             <div
@@ -186,7 +186,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
+      <div className="mt-full w-96 mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
         <div>
           <Button
             text="Compare secret across environments"
@@ -197,7 +197,7 @@ const SideBar = ({
           <CompareSecretsModal
             compareModal={compareModal}
             setCompareModal={setCompareModal}
-            currentSecret={{ key: data[0]?.key, value: data[0]?.value }}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value ?? '' }}
             workspaceEnvs={workspaceEnvs}
             selectedEnv={selectedEnv}
             workspaceId={workspaceId}

frontend/src/components/integrations/CloudIntegration.tsx

@@ -44,9 +44,9 @@ const CloudIntegration = ({
       tabIndex={0}
       className={`relative ${
         cloudIntegrationOption.isAvailable
-          ? 'hover:bg-white/10 duration-200 cursor-pointer'
+          ? 'cursor-pointer duration-200 hover:bg-white/10'
           : 'opacity-50'
-      } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
+      } flex h-32 flex-row items-center rounded-md bg-white/5 p-4`}
       onClick={() => {
         if (!cloudIntegrationOption.isAvailable) return;
         setSelectedIntegrationOption(cloudIntegrationOption);
@@ -61,22 +61,22 @@ const CloudIntegration = ({
         alt="integration logo"
       />
       {cloudIntegrationOption.name.split(' ').length > 2 ? (
-        <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
+        <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
           <div>{cloudIntegrationOption.name.split(' ')[0]}</div>
           <div className="text-base">
             {cloudIntegrationOption.name.split(' ')[1]} {cloudIntegrationOption.name.split(' ')[2]}
           </div>
         </div>
       ) : (
-        <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
+        <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
           {cloudIntegrationOption.name}
         </div>
       )}
       {cloudIntegrationOption.isAvailable &&
         integrationAuths
-          .map((authorization) => authorization.integration)
+          .map((authorization) => authorization?.integration)
           .includes(cloudIntegrationOption.slug) && (
-          <div className="absolute group z-40 top-0 right-0 flex flex-row">
+          <div className="group absolute top-0 right-0 z-40 flex flex-row">
             <div
               onKeyDown={() => null}
               role="button"
@@ -86,8 +86,7 @@ const CloudIntegration = ({
                 const deletedIntegrationAuth = await deleteIntegrationAuth({
                   integrationAuthId: integrationAuths
                     .filter(
-                      (authorization) =>
-                        authorization.integration === cloudIntegrationOption.slug
+                      (authorization) => authorization.integration === cloudIntegrationOption.slug
                     )
                     .map((authorization) => authorization._id)[0]
                 });
@@ -96,20 +95,20 @@ const CloudIntegration = ({
                   integrationAuth: deletedIntegrationAuth
                 });
               }}
-              className="cursor-pointer w-max bg-red py-0.5 px-2 rounded-b-md text-xs flex flex-row items-center opacity-0 group-hover:opacity-100 duration-200"
+              className="flex w-max cursor-pointer flex-row items-center rounded-b-md bg-red py-0.5 px-2 text-xs opacity-0 duration-200 group-hover:opacity-100"
             >
-              <FontAwesomeIcon icon={faX} className="text-xs mr-2 py-px" />
+              <FontAwesomeIcon icon={faX} className="mr-2 py-px text-xs" />
               Revoke
             </div>
-            <div className="w-max bg-primary py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90 group-hover:opacity-100 duration-200">
-              <FontAwesomeIcon icon={faCheck} className="text-xs mr-2" />
+            <div className="flex w-max flex-row items-center rounded-bl-md rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-90 duration-200 group-hover:opacity-100">
+              <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
               Authorized
             </div>
           </div>
         )}
       {!cloudIntegrationOption.isAvailable && (
-        <div className="absolute group z-50 top-0 right-0 flex flex-row">
-          <div className="w-max bg-yellow py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90">
+        <div className="group absolute top-0 right-0 z-50 flex flex-row">
+          <div className="flex w-max flex-row items-center rounded-bl-md rounded-tr-md bg-yellow py-0.5 px-2 text-xs text-black opacity-90">
             Coming Soon
           </div>
         </div>

frontend/src/components/integrations/Integration.tsx

@@ -45,8 +45,8 @@ type Props = {
   handleDeleteIntegration: (args: { integration: Integration }) => void;
 };
 
-const IntegrationTile = ({ 
-  integration, 
+const IntegrationTile = ({
+  integration,
   integrations,
   bot,
   setBot,
@@ -57,7 +57,7 @@ const IntegrationTile = ({
 
   // set initial environment. This find will only execute when component is mounting
   const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
-    environments.find(({ slug }) => slug === integration.environment) || {
+    environments.find(({ slug }) => slug === integration?.environment) || {
       name: '',
       slug: ''
     }
@@ -69,11 +69,10 @@ const IntegrationTile = ({
 
   useEffect(() => {
     const loadIntegration = async () => {
-
       const tempApps: [IntegrationApp] = await getIntegrationApps({
-        integrationAuthId: integration.integrationAuth
+        integrationAuthId: integration?.integrationAuth
       });
-      
+
       setApps(tempApps);
       
       if (integration?.app) {
@@ -90,15 +89,16 @@ const IntegrationTile = ({
         case 'vercel':
           setIntegrationTargetEnvironment(
             integration?.targetEnvironment
-            ? integration.targetEnvironment.charAt(0).toUpperCase() + integration.targetEnvironment.substring(1)
-            : 'Development'
+              ? integration.targetEnvironment.charAt(0).toUpperCase() +
+                  integration.targetEnvironment.substring(1)
+              : 'Development'
           );
           break;
         case 'netlify':
           setIntegrationTargetEnvironment(
-            integration?.targetEnvironment 
-            ? contextNetlifyMapping[integration.targetEnvironment] 
-            : 'Local development'
+            integration?.targetEnvironment
+              ? contextNetlifyMapping[integration.targetEnvironment]
+              : 'Local development'
           );
           break;
         default:
@@ -108,7 +108,7 @@ const IntegrationTile = ({
 
     loadIntegration();
   }, []);
-  
+
   const handleStartIntegration = async () => {
     const reformatTargetEnvironment = (targetEnvironment: string) => {
       switch (integration.integration) {
@@ -119,13 +119,13 @@ const IntegrationTile = ({
         default:
           return null;
       }
-    }
+    };
 
     try {
       const siteApp = apps.find((app) => app.name === integrationApp); // obj or undefined
       const appId = siteApp?.appId ?? null;
       const owner = siteApp?.owner ?? null;
-      
+
       // return updated integration
       const updatedIntegration = await updateIntegration({
         integrationId: integration._id,
@@ -136,15 +136,15 @@ const IntegrationTile = ({
         targetEnvironment: reformatTargetEnvironment(integrationTargetEnvironment),
         owner
       });
-      
+
       setIntegrations(
-        integrations.map((i) => i._id === updatedIntegration._id ? updatedIntegration : i)
+        integrations.map((i) => (i._id === updatedIntegration._id ? updatedIntegration : i))
       );
     } catch (err) {
       console.error(err);
     }
-  }
-  
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const renderIntegrationSpecificParams = (integration: Integration) => {
     try {
@@ -152,7 +152,7 @@ const IntegrationTile = ({
         case 'vercel':
           return (
             <div>
-              <div className="text-gray-400 text-xs font-semibold mb-2 w-60">ENVIRONMENT</div>
+              <div className="mb-2 w-60 text-xs font-semibold text-gray-400">ENVIRONMENT</div>
               <ListBox
                 data={!integration.isActive ? ['Development', 'Preview', 'Production'] : null}
                 isSelected={integrationTargetEnvironment}
@@ -164,7 +164,7 @@ const IntegrationTile = ({
         case 'netlify':
           return (
             <div>
-              <div className="text-gray-400 text-xs font-semibold mb-2">CONTEXT</div>
+              <div className="mb-2 text-xs font-semibold text-gray-400">CONTEXT</div>
               <ListBox
                 data={
                   !integration.isActive
@@ -189,10 +189,10 @@ const IntegrationTile = ({
   if (!integrationApp) return <div />;
 
   return (
-    <div className="max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between">
+    <div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-white/5 p-6">
       <div className="flex">
         <div>
-          <p className="text-gray-400 text-xs font-semibold mb-2">ENVIRONMENT</p>
+          <p className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</p>
           <ListBox
             data={!integration.isActive ? environments.map(({ name }) => name) : null}
             isSelected={integrationEnvironment.name}
@@ -208,7 +208,7 @@ const IntegrationTile = ({
           />
         </div>
         <div className="pt-2">
-          <FontAwesomeIcon icon={faArrowRight} className="mx-4 text-gray-400 mt-8" />
+          <FontAwesomeIcon icon={faArrowRight} className="mx-4 mt-8 text-gray-400" />
         </div>
         <div className="mr-2">
           <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
@@ -218,7 +218,7 @@ const IntegrationTile = ({
           </div>
         </div>
         <div className="mr-2">
-          <div className="text-gray-400 text-xs font-semibold mb-2">APP</div>
+          <div className="mb-2 text-xs font-semibold text-gray-400">APP</div>
           <ListBox
             data={!integration.isActive ? apps.map((app) => app.name) : null}
             isSelected={integrationApp}
@@ -231,9 +231,9 @@ const IntegrationTile = ({
       </div>
       <div className="flex items-end">
         {integration.isActive ? (
-          <div className="max-w-5xl flex flex-row items-center bg-white/5 p-2 rounded-md px-4">
-            <FontAwesomeIcon icon={faRotate} className="text-lg mr-2.5 text-primary animate-spin" />
-            <div className="text-gray-300 font-semibold">In Sync</div>
+          <div className="flex max-w-5xl flex-row items-center rounded-md bg-white/5 p-2 px-4">
+            <FontAwesomeIcon icon={faRotate} className="mr-2.5 animate-spin text-lg text-primary" />
+            <div className="font-semibold text-gray-300">In Sync</div>
           </div>
         ) : (
           <Button
@@ -243,11 +243,13 @@ const IntegrationTile = ({
             size="md"
           />
         )}
-        <div className="opacity-50 hover:opacity-100 duration-200 ml-2">
+        <div className="ml-2 opacity-50 duration-200 hover:opacity-100">
           <Button
-            onButtonPressed={() => handleDeleteIntegration({
-              integration
-            })}
+            onButtonPressed={() =>
+              handleDeleteIntegration({
+                integration
+              })
+            }
             color="red"
             size="icon-md"
             icon={faX}

frontend/src/components/integrations/IntegrationSection.tsx

@@ -26,7 +26,7 @@ interface Integration {
 }
 
 const ProjectIntegrationSection = ({
-  integrations, 
+  integrations,
   setIntegrations,
   bot,
   setBot,
@@ -35,22 +35,20 @@ const ProjectIntegrationSection = ({
 }: Props) => {
   return integrations.length > 0 ? (
     <div className="mb-12">
-      <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
-        <h1 className="font-semibold text-3xl">Current Integrations</h1>
-        <p className="text-base text-gray-400">
-          Manage integrations with third-party services.
-        </p>
+      <div className="mx-4 mb-4 mt-6 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
+        <h1 className="text-3xl font-semibold">Current Integrations</h1>
+        <p className="text-base text-gray-400">Manage integrations with third-party services.</p>
       </div>
       {integrations.map((integration: Integration) => {
         return (
           <IntegrationTile
-            key={`integration-${integration._id.toString()}`} 
-            integration={integration} 
+            key={`integration-${integration?._id.toString()}`}
+            integration={integration}
             integrations={integrations}
             bot={bot}
             setBot={setBot}
             setIntegrations={setIntegrations}
-            environments={environments} 
+            environments={environments}
             handleDeleteIntegration={handleDeleteIntegration}
           />
         );
@@ -59,6 +57,6 @@ const ProjectIntegrationSection = ({
   ) : (
     <div />
   );
-}
-  
-export default ProjectIntegrationSection;
+};
+
+export default ProjectIntegrationSection;

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -76,7 +76,7 @@ const encryptSecrets = async ({
         iv: secretValueIV,
         tag: secretValueTag
       } = encryptSymmetric({
-        plaintext: secret.value,
+        plaintext: secret.value ?? '',
         key: randomBytes
       });
 

frontend/src/components/utilities/secrets/getSecretsForProject.ts

@@ -24,7 +24,7 @@ interface EncryptedSecretProps {
 
 interface SecretProps {
   key: string;
-  value: string;
+  value: string | undefined;
   type: 'personal' | 'shared';
   comment: string;
   id: string;
@@ -87,12 +87,17 @@ const getSecretsForProject = async ({
           key
         });
 
-        const plainTextValue = decryptSymmetric({
-          ciphertext: secret.secretValueCiphertext,
-          iv: secret.secretValueIV,
-          tag: secret.secretValueTag,
-          key
-        });
+        let plainTextValue;
+        if (secret.secretValueCiphertext !== undefined) {
+          plainTextValue = decryptSymmetric({
+            ciphertext: secret.secretValueCiphertext,
+            iv: secret.secretValueIV,
+            tag: secret.secretValueTag,
+            key
+          });
+        } else {
+          plainTextValue = undefined;
+        }
 
         let plainTextComment;
         if (secret.secretCommentCiphertext) {

frontend/src/components/v2/Popover/Popover.tsx

@@ -0,0 +1,49 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as Popover from '@radix-ui/react-popover';
+
+type Props = {
+  children: any; 
+  text: string; 
+  onChangeHandler: (value: string, position: number) => void; 
+  position: number;
+};
+
+export type PopoverProps = Props;
+
+export const PopoverObject = ({children, text, onChangeHandler, position}: Props) => (
+  <Popover.Root>
+    <Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
+      {children}
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        sideOffset={5}
+        hideWhenDetached
+        side="left"
+      >
+        <div className="flex flex-col pt-2 dark">
+          <p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
+          <textarea
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            // type={type}
+            value={text}
+            className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            spellCheck="false"
+            placeholder='–'
+          />
+        </div>
+        <Popover.Close
+          className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          aria-label="Close"
+        >
+          <FontAwesomeIcon icon={faXmark} />
+        </Popover.Close>
+        <Popover.Arrow className="fill-chicago-700" />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+);
+
+PopoverObject.displayName = 'Popover';

frontend/src/components/v2/Popover/index.tsx

@@ -0,0 +1,2 @@
+export type { PopoverProps } from './Popover';
+export { PopoverObject } from './Popover';

frontend/src/components/v2/Select/Select.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, ReactNode } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -13,6 +14,7 @@ type Props = {
   dropdownContainerClassName?: string;
   isLoading?: boolean;
   position?: 'item-aligned' | 'popper';
+  icon?: IconProp;
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
@@ -32,7 +34,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             className
           )}
         >
-          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Value placeholder={placeholder}> 
+            {props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder}
+          </SelectPrimitive.Value>
           {!props.disabled && (
             <SelectPrimitive.Icon className="ml-3">
               <FontAwesomeIcon icon={faChevronDown} size="sm" />
@@ -43,7 +47,6 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Content
             className={twMerge(
               'relative top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
-
               dropdownContainerClassName
             )}
             position={position}
@@ -77,6 +80,7 @@ Select.displayName = 'Select';
 export type SelectItemProps = Omit<SelectPrimitive.SelectItemProps, 'disabled'> & {
   isDisabled?: boolean;
   isSelected?: boolean;
+  customIcon?: IconProp;
 };
 
 export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
@@ -89,13 +93,13 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
           select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
           outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
-          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
+          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
           className
         )}
         ref={forwardedRef}
       >
         <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
-          <FontAwesomeIcon icon={faCheck} />
+          <FontAwesomeIcon icon={props.customIcon ? props.customIcon : faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
       </SelectPrimitive.Item>