Merge branch 'main' into fix/update-pt-br-copies

frontend/src/components/basic/Layout.tsx

@@ -162,7 +162,7 @@ const Layout = ({ children }: LayoutProps) => {
       },
       {
         href: `/activity/${workspaceMapping[workspaceSelected as any]}`,
-        title: 'Activity Logs',
+        title: 'Audit Logs',
         emoji: <FontAwesomeIcon icon={faFileLines} />
       },
       {

frontend/src/components/dashboard/DropZone.tsx

@@ -71,6 +71,19 @@ const DropZone = ({
         }));
         break;
       }
+      case 'json': {
+        const keyPairs = JSON.parse(String(file));
+        secrets = Object.keys(keyPairs).map((key, index) => ({
+          id: guidGenerator(),
+          pos: numCurrentRows + index,
+          key,
+          value: keyPairs[key as keyof typeof keyPairs],
+          comment: '',
+          type: 'shared',
+          tags: []
+        }));
+        break;
+      }
       case 'yml': {
         const parsedFile = parseDocument(file.toString());
         const keyPairs = parsedFile.contents!.toJSON();
@@ -97,6 +110,10 @@ const DropZone = ({
       }
       default:
         secrets = '';
+        createNotification({
+          text: `The file you are dropping should have one of the following extensions: .env, .yml, .json.`,
+          type: 'error'
+        });
         break;
     }
     return secrets;
@@ -126,9 +143,13 @@ const DropZone = ({
     reader.onload = (event) => {
       if (event.target === null || event.target.result === null) return;
       // parse function's argument looks like to be ArrayBuffer
-      const newData = getSecrets(event.target.result as ArrayBuffer, fileType);
-      setData(newData);
-      setButtonReady(true);
+      try {
+        const newData = getSecrets(event.target.result as ArrayBuffer, fileType);
+        setData(newData);
+        setButtonReady(true);
+      } catch (error) {
+        console.log("Error while dropping the file: ", error)
+      }
     };
 
     // If something is wrong show an error

frontend/src/components/integrations/FrameworkIntegration.tsx

@@ -10,7 +10,8 @@ interface Framework {
 const FrameworkIntegration = ({ framework }: { framework: Framework }) => (
   <a
     href={framework.docsLink}
-    rel="noopener"
+    rel="noopener noreferrer"
+    target="_blank"
     className="relative flex flex-row justify-center bg-bunker-500 hover:bg-gradient-to-tr  duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer"
   >
     <div

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const EmptyState = ({ title, className, children, icon = faCubesStacked }: Props) => (
-  <div className={twMerge('flex w-full flex-col items-center px-2 pt-6 text-bunker-300', className)}>
+  <div className={twMerge('flex w-full bg-bunker-700 flex-col items-center px-2 pt-6 text-bunker-300', className)}>
     <FontAwesomeIcon icon={icon} size="2x" className='mr-4' />
     <div className='flex flex-row items-center py-4'>
       <div className="text-bunker-300 text-sm">{title}</div>

frontend/src/components/v2/Tag/Tag.tsx

@@ -14,7 +14,7 @@ const tagVariants = cva('inline-flex whitespace-nowrap text-sm rounded-sm mr-1.5
       red: 'bg-red/80 text-bunker-100'
     },
     size: {
-      sm: 'px-1 py-0.5'
+      sm: 'px-1.5 py-0.5'
     }
   }
 });

frontend/src/helpers/key.ts

@@ -75,7 +75,6 @@ let privateKey;
             throw new Error('Insufficient details to decrypt private key');
         }
     } catch (err) {
-        console.error(err);
         throw new Error('Failed to decrypt private key');
     }
 

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -308,7 +308,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           isSelected={router.asPath === `/activity/${currentWorkspace?._id}`}
                           icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
                         >
-                          Activity Logs
+                          Audit Logs
                         </MenuItem>
                       </a>
                     </Link>

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -26,7 +26,7 @@ const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faSlack} />,
     t('nav:support.slack'),
-    'https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA'
+    'https://infisical.com/slack'
   ],
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faBook} />,

frontend/src/pages/activity/[id].tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
@@ -125,7 +126,12 @@ export default function Activity() {
 
   return (
     <div className="mx-6 lg:mx-0 w-full h-screen">
-      <NavHeader pageName="Project Activity" isProjectRelated />
+      <Head>
+        <title>Audit Logs</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <NavHeader pageName="Audit Logs" isProjectRelated />
       {currentSidebarAction && (
         <ActivitySideBar toggleSidebar={toggleSidebar} currentAction={currentSidebarAction} />
       )}

frontend/src/pages/integrations/[id].tsx

@@ -172,7 +172,7 @@ export default function Integrations() {
       let link = '';
       switch (integrationOption.slug) {
         case 'azure-key-vault':
-          link = `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
+          link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
           break;
         case 'aws-parameter-store':
           link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
@@ -192,6 +192,9 @@ export default function Integrations() {
         case 'github':
           link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
           break;
+        case 'gitlab':
+          link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+          break;
         case 'render':
           link = `${window.location.origin}/integrations/render/authorize`
           break;
@@ -241,6 +244,9 @@ export default function Integrations() {
         case 'github':
           link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
           break;
+        case 'gitlab':
+          link = `${window.location.origin}/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`;
+          break;
         case 'render':
           link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
           break;

frontend/src/pages/integrations/gitlab/create.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function GitLabCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [owner, setOwner] = useState<string | null>(null);
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+        
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setOwner(integrationAuthApps[0]?.owner ?? null);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+            if (!integrationAuth?._id) return;
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner,
+                path: null,
+                region: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>GitLab Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="GitLab Repo"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`gitlab-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+GitLabCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/gitlab/oauth2/callback.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function GitLabOAuth2CallbackPage() {
+    const router = useRouter();
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'gitlab'
+                });
+
+                router.push(
+                    `/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+GitLabOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/settings/billing/[id].tsx

@@ -77,13 +77,13 @@ export default function SettingsBilling() {
   }, []);
 
   return (
-    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
+    <div className="bg-bunker-800 pb-4 flex flex-col justify-between text-white">
       <Head>
         <title>{t('common:head-title', { title: t('billing:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <div className="flex flex-row">
-        <div className="w-full max-h-screen pb-2 overflow-y-auto">
+        <div className="w-full pb-2">
           <NavHeader pageName={t('billing:title')} />
           <div className="flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl">
             <div className="flex flex-col justify-start items-start text-3xl">
@@ -93,7 +93,6 @@ export default function SettingsBilling() {
           </div>
           <div className="flex flex-col ml-6 text-mineshaft-50 w-max">
             <p className="text-xl font-semibold">{t('billing:subscription')}</p>
-            <div className="mt-4 text-bunker-200 h-14 flex justify-center items-center rounded-md bg-bunker-600 mr-4"> If you are looking to get an annual plan, please reach out to <a className="ml-1.5 underline text-primary underline-offset-2" href="mailto:[email protected]">team@infisical.com</a></div>
             <div className="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 mt-4 overflow-x-auto">
               {plans.map((plan) => (
                 <Plan key={plan.name} plan={plan} />

frontend/src/pages/settings/personal/[id].tsx

@@ -96,7 +96,7 @@ export default function PersonalSettings() {
                 <ListBox
                   isSelected={lang}
                   onChange={setLanguage}
-                  data={['en', 'ko', 'fr']}
+                  data={['en', 'ko', 'fr', 'es']}
                   text={`${t('common:language')}: `}
                 />
               </div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { useRouter } from 'next/router';
 import { faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -61,6 +62,7 @@ export const OrgMembersTable = ({
   userId,
   isLoading
 }: Props) => {
+  const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addMember',
@@ -159,7 +161,7 @@ export const OrgMembersTable = ({
                           <Select
                             defaultValue={role}
                             isDisabled={userId === user?._id}
-                            className="w-full bg-mineshaft-600"
+                            className="w-40 bg-mineshaft-600"
                             onValueChange={(selectedRole) =>
                               onRoleChange(orgMembershipId, selectedRole)
                             }
@@ -172,8 +174,8 @@ export const OrgMembersTable = ({
                           </Select>
                         )}
                         {(status === 'invited' || status === 'verified') && (
-                          <Button colorSchema="secondary" onClick={() => onInviteMember(email)}>
-                            Resent Invite
+                          <Button className='w-40' colorSchema="secondary" onClick={() => onInviteMember(email)}>
+                            Resend Invite
                           </Button>
                         )}
                         {status === 'completed' && (
@@ -193,7 +195,17 @@ export const OrgMembersTable = ({
                             </Tag>
                           ))
                         ) : (
-                          <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>
+                          <div className='flex flex-row'>
+                            <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>
+                            <button 
+                              type="button"
+                              onClick={() => router.push(`/users/${router.query.id}`)}
+                              className='text-sm bg-mineshaft w-max px-1.5 py-0.5 hover:bg-primary duration-200 hover:text-black cursor-pointer rounded-sm'
+                            >
+                              <FontAwesomeIcon icon={faPlus} className="mr-1" />
+                              Add to projects
+                            </button>
+                          </div>
                         )}
                       </Td>
                       <Td>