Fix merge conflicts

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

@@ -38,7 +38,6 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
   const router = useRouter();
   const [myRole, setMyRole] = useState('member');
   const [userProjectMemberships, setUserProjectMemberships] = useState<any[]>([]);
-  console.log(123, userData)
 
   const workspaceId = router.query.id as string;
   // Delete the row in the table (e.g. a user)
@@ -198,15 +197,15 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
                     </div>
                   </td>
                   <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
-                  <td className="flex items-center max-h-16 overflow-x-auto w-full max-w-xl">
-                    {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>}
-                  </td>
+                    <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 &&

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/v2/Button/Button.stories.tsx

@@ -38,6 +38,13 @@ export const Secondary: Story = {
   }
 };
 
+export const Star: Story = {
+  args: {
+    children: 'Hello Infisical',
+    variant: 'star'
+  }
+};
+
 export const Danger: Story = {
   args: {
     children: 'Hello Infisical',

frontend/src/components/v2/Button/Button.tsx

@@ -31,7 +31,9 @@ const buttonVariants = cva(
       variant: {
         solid: '',
         outline: ['bg-transparent', 'border-2', 'border-solid'],
-        plain: ''
+        plain: '',
+        // a constant color not in use on hover or click goes colorSchema color
+        star: 'text-bunker-200 bg-mineshaft-500'
       },
       isDisabled: {
         true: 'bg-mineshaft opacity-40 cursor-not-allowed',
@@ -53,6 +55,16 @@ const buttonVariants = cva(
       }
     },
     compoundVariants: [
+      {
+        colorSchema: 'primary',
+        variant: 'star',
+        className: 'hover:bg-primary hover:text-black'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'star',
+        className: 'hover:bg-red hover:text-white'
+      },
       {
         colorSchema: 'primary',
         variant: 'outline',

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

@@ -46,7 +46,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 border border-mineshaft-500 drop-shadow-xl font-inter text-bunker-100 shadow-md z-[100]',
+              'relative top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
               dropdownContainerClassName
             )}
             position={position}