Merge remote-tracking branch 'refs/remotes/origin/main' into circleci-integration-branch

frontend/src/components/basic/Layout.tsx

@@ -246,9 +246,9 @@ const Layout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="flex h-screen w-full flex-col overflow-x-hidden">
+      <div className="h-screen w-full flex-col overflow-x-hidden hidden md:flex">
         <NavBarDashboard />
-        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row dark">
           <aside className="w-full border-r border-mineshaft-500 bg-bunker-600 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between">
               {/* <div className="py-6"></div> */}
@@ -368,10 +368,10 @@ const Layout = ({ children }: LayoutProps) => {
             error={error}
             loading={loading}
           />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800">{children}</main>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">{children}</main>
         </div>
       </div>
-      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 z-[200] md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t('common:no-mobile')} `}

frontend/src/components/basic/popups/BottomRightPopup.tsx

@@ -34,7 +34,7 @@ const BottonRightPopup = ({
 }: PopupProps): JSX.Element => {
   return (
     <div
-      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-[100] drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
       role="alert"
     >
       <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">

frontend/src/components/dashboard/CommentField.tsx

@@ -18,7 +18,7 @@ const CommentField = ({
     <div className="relative mt-4 px-4 pt-6">
       <p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
       <textarea
-        className="placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+        className="placeholder:text-bunker-400 dark:[color-scheme:dark] h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
         value={comment}
         onChange={(e) => modifyComment(e.target.value, position)}
         placeholder="Leave any comments here..."

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -125,7 +125,7 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div className={`relative flex-col w-full h-10 ${
+      <div title={value} className={`relative flex-col w-full h-10 ${
         isSideBarOpen && 'bg-mineshaft-700 duration-200'
       }`}>
         <div
@@ -137,7 +137,7 @@ const DashboardInputField = ({
             onChange={(e) => onChangeHandler(e.target.value, position)}
             type={type}
             value={value}
-            className='z-10 peer font-mono 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'
+            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='–'
           />
@@ -209,7 +209,7 @@ const DashboardInputField = ({
                 {value?.split('').map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
-                    className="text-xxs mx-0.5"
+                    className="text-xxs mr-0.5"
                     icon={faCircle}
                   />
                 ))}

frontend/src/components/dashboard/KeyPair.tsx

@@ -34,7 +34,10 @@ const colors = [
   'bg-[#cb1c8d]/40',
   'bg-[#badc58]/40',
   'bg-[#ff5400]/40',
-  'bg-[#00bbf9]/40'
+  'bg-[#3AB0FF]/40',
+  'bg-[#6F1AB6]/40',
+  'bg-[#C40B13]/40',
+  'bg-[#332FD0]/40'
 ]
 
 
@@ -43,7 +46,10 @@ const colorsText = [
   'text-[#f2c6e3]/70',
   'text-[#eef6d5]/70',
   'text-[#ffddcc]/70',
-  'text-[#f0fffd]/70'
+  'text-[#f0fffd]/70',
+  'text-[#FFE5F1]/70',
+  'text-[#FFDEDE]/70',
+  'text-[#DFF6FF]/70'
 ]
 
 /**
@@ -95,9 +101,9 @@ const KeyPair = ({
     }`}
   >
     <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
         <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
-        <div className="flex items-center max-h-16">
+        <div className="flex items-center max-h-16 w-full">
           <DashboardInputField
             isCapitalized = {isCapitalized}
             onChangeHandler={modifyKey}

frontend/src/components/integrations/Integration.tsx

@@ -18,6 +18,8 @@ interface Integration {
   isActive: boolean;
   app: string | null;
   appId: string | null;
+  path: string | null;
+  region: string | null;
   createdAt: string;
   updatedAt: string;
   environment: string;
@@ -75,6 +77,8 @@ const IntegrationTile = ({
       
       if (integration?.app) {
         setIntegrationApp(integration.app);
+      } else if (integration?.path && integration?.region) {
+        setIntegrationApp(`${integration.path} (${integration.region})`);
       } else if (tempApps.length > 0) {
           setIntegrationApp(tempApps[0].name)
         } else {

frontend/src/components/integrations/IntegrationSection.tsx

@@ -14,6 +14,8 @@ interface Integration {
   isActive: boolean;
   app: string | null;
   appId: string | null;
+  path: string | null;
+  region: string | null;
   createdAt: string;
   updatedAt: string;
   environment: string;

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -93,7 +93,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-[61]">
       <div className="m-auto flex justify-start items-center mx-4">
         <div className="flex flex-row items-center">
           <div className="flex justify-center py-4">
@@ -166,8 +166,8 @@ export default function Navbar() {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
-              <div className="px-1 py-1 ">
+            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-[65] ring-opacity-5 focus:outline-none">
+              <div className="px-1 py-1 z-[100]">
                 <div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
                   {t('nav:user.signed-in-as')}
                 </div>

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,7 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { useWorkspace } from '@app/context';
-import getOrganization from '@app/pages/api/organization/GetOrg';
+import { useOrganization, useWorkspace } from '@app/context';
 
 /**
  * This is the component at the top of almost every page.
@@ -22,28 +19,15 @@ export default function NavHeader({
   pageName: string;
   isProjectRelated?: boolean;
 }): JSX.Element {
-  const [orgName, setOrgName] = useState('');
-  const router = useRouter();
-  const projectId = String(router.query.id);
   const { currentWorkspace } = useWorkspace();
-
-  useEffect(() => {
-    (async () => {
-      const orgId = localStorage.getItem('orgData.id');
-      const org = await getOrganization({
-        orgId: orgId || ''
-      });
-      setOrgName(org.name);
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
+  const { currentOrg } = useOrganization();
 
   return (
     <div className="ml-6 flex flex-row items-center pt-8">
       <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
-        {orgName?.charAt(0)}
+        {currentOrg?.name?.charAt(0)}
       </div>
-      <div className="text-sm font-semibold text-primary">{orgName}</div>
+      <div className="text-sm font-semibold text-primary">{currentOrg?.name}</div>
       {isProjectRelated && (
         <>
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />

frontend/src/components/utilities/config/index.ts

@@ -4,7 +4,7 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const {SITE_URL} = process.env
+const SITE_URL = "https://app.infisical.com";
 
 export {
   ENV,
@@ -12,4 +12,5 @@ export {
   POSTHOG_HOST,
   SITE_URL,
   STRIPE_PRODUCT_PRO,
-  STRIPE_PRODUCT_STARTER};
+  STRIPE_PRODUCT_STARTER
+};

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

@@ -24,7 +24,7 @@ const buttonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
+        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
         danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
       },

frontend/src/components/v2/Card/Card.tsx

@@ -8,9 +8,9 @@ export type CardTitleProps = {
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('px-6 py-4 font-sans text-xl font-medium', className)}>
+  <div className={twMerge('px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600', className)}>
     {children}
-    {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
+    {subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
 );
 

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -28,8 +28,9 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
+          'flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600',
           isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+          isChecked && 'bg-primary hover:bg-primary',
           className
         )}
         required={isRequired}

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -24,7 +24,7 @@ export const HoverObject = ({
       </a>
     </HoverCard.Trigger>
     <HoverCard.Portal>
-      <HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
+      <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
         <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
             <div>

frontend/src/components/v2/Menu/Menu.tsx

@@ -31,18 +31,20 @@ export const MenuItem = <T extends ElementType = 'button'>({
   as: Item = 'button',
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
-  inputRef
+  inputRef,
+  ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
   <li
     className={twMerge(
-      'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
-      isSelected && 'text-primary',
-      isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
+      'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
+      isSelected && 'bg-mineshaft-500',
+      isDisabled && 'hover:bg-transparent cursor-not-allowed',
       className
     )}
   >
-    <Item type="button" role="menuitem" class="flex items-center" ref={inputRef}>
-      {icon && <span className="mr-2">{icon}</span>}
+    <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+      <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
+      {icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
     </Item>
     {description && <span className="mt-2 text-xs">{description}</span>}

frontend/src/components/v2/Modal/Modal.tsx

@@ -25,7 +25,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
+            'fixed top-1/2 left-1/2 max-w-lg border border-mineshaft-600 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
             className
           )}
         >
@@ -36,7 +36,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-3 right-3 rounded text-white hover:bg-gray-600"
+              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>

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

@@ -12,13 +12,14 @@ type Props = {
   className?: string;
   dropdownContainerClassName?: string;
   isLoading?: boolean;
+  position?: 'item-aligned' | 'popper';
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   (
-    { children, placeholder, className, isLoading, dropdownContainerClassName, ...props },
+    { children, placeholder, className, isLoading, dropdownContainerClassName, position, ...props },
     ref
   ): JSX.Element => {
     return (
@@ -44,11 +45,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
               'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
               dropdownContainerClassName
             )}
+            position={position}
+            style={{ width: 'var(--radix-select-trigger-width)' }}
           >
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-1.5">
+            <SelectPrimitive.Viewport className="p-1">
               {isLoading ? (
                 <div className="flex items-center justify-center">
                   <Spinner size="xs" />
@@ -82,7 +85,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         {...props}
         className={twMerge(
           `relative flex cursor-pointer
-          select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
+          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',
@@ -90,8 +93,8 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="absolute left-3.5">
-          <FontAwesomeIcon icon={faCheck} size="sm" />
+        <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
+          <FontAwesomeIcon icon={faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
       </SelectPrimitive.Item>