Merge branch 'main' into feat/pg-dynamic-secret

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -21,13 +21,13 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
   if (!isVisible) return replaceContentWithDot(content);
 
   let skipNext = false;
-  const formatedContent = content.split(REGEX).flatMap((el, i) => {
+  const formattedContent = content.split(REGEX).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;<span className="ph-no-capture text-yello-200/80">{el.slice(2, -1)}</span>
+          &#36;&#123;<span className="ph-no-capture text-yellow-200/80">{el.slice(2, -1)}</span>
           &#125;
         </span>
       );
@@ -41,7 +41,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
 
   // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
   // when break is added a line break works properly
-  return formatedContent.concat(<br />);
+  return formattedContent.concat(<br />);
 };
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {

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

@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           ref={ref}
           className={twMerge(
             `inline-flex items-center justify-between rounded-md
-            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200`,
+            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200 focus:bg-mineshaft-700/80`,
             className
           )}
         >
@@ -106,7 +106,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         className={twMerge(
           `relative mb-0.5 flex
           cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
-          outline-none transition-all hover:bg-mineshaft-500`,
+          outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
           isDisabled &&
             "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -9,16 +9,22 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { useProjectPermission } from "@app/context";
 import { useGetUpgradeProjectStatus, useUpgradeProject } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/types";
+import { workspaceKeys } from "@app/hooks/api/workspace/queries";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { queryClient } from "@app/reactQuery";
 
 import { Button } from "../Button";
 import { Tooltip } from "../Tooltip";
 
 export type UpgradeProjectAlertProps = {
   project: Workspace;
+  transparent?: boolean;
 };
 
-export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.Element | null => {
+export const UpgradeProjectAlert = ({
+  project,
+  transparent
+}: UpgradeProjectAlertProps): JSX.Element | null => {
   const { createNotification } = useNotificationContext();
   const router = useRouter();
   const { membership } = useProjectPermission();
@@ -48,6 +54,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       }
 
       if (currentStatus !== null && data?.status === null) {
+        queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
         router.reload();
       }
     }
@@ -87,10 +94,25 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
 
   if (project.version !== ProjectVersion.V1) return null;
 
+  if (transparent) {
+    return (
+      <Button
+        colorSchema="primary"
+        variant="solid"
+        size="md"
+        isLoading={isLoading}
+        isDisabled={isLoading || membership.role !== "admin"}
+        onClick={onUpgradeProject}
+      >
+        Upgrade
+      </Button>
+    );
+  }
+
   return (
     <div
       className={twMerge(
-        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70  bg-primary/[.07] p-4 text-base text-white",
         membership.role !== "admin" && "opacity-80"
       )}
     >

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -1,10 +1,19 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import axios from "axios";
 import queryString from "query-string";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
-import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
@@ -18,8 +27,10 @@ const cloudflareEnvironments = [
 export default function CloudflarePagesIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
+  const { createNotification } = useNotificationContext();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+  const [secretPath, setSecretPath] = useState("/");
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
   const { data: integrationAuthApps } = useGetIntegrationAuthApps({
@@ -65,7 +76,7 @@ export default function CloudflarePagesIntegrationPage() {
         appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
         targetEnvironment,
-        secretPath: "/"
+        secretPath
       });
 
       setIsLoading(false);
@@ -73,6 +84,18 @@ export default function CloudflarePagesIntegrationPage() {
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+
+      let errorMessage: string = "Something went wrong!";
+      if (axios.isAxiosError(err)) {
+        const { message } = err?.response?.data as { message: string };
+        errorMessage = message;
+      }
+
+      createNotification({
+        text: errorMessage,
+        type: "error"
+      });
+      setIsLoading(false);
     }
   };
 
@@ -106,6 +129,13 @@ export default function CloudflarePagesIntegrationPage() {
             ))}
           </Select>
         </FormControl>
+        <FormControl label="Infisical Secret Path" className="mt-2 px-6">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
         <FormControl label="Cloudflare Pages Project" className="mt-4 px-6">
           <Select
             value={targetApp}

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -15,7 +15,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityAuthMethod, useAddIdentityUniversalAuth } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
@@ -40,7 +40,7 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+export const IdentityModal = ({ popUp, /* handlePopUpOpen, */ handlePopUpToggle }: Props) => {
   const { createNotification } = useNotificationContext();
 
   const { currentOrg } = useOrganization();
@@ -50,6 +50,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
 
   const { mutateAsync: createMutateAsync } = useCreateIdentity();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
 
   const {
     control,
@@ -112,21 +113,31 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
         // create
 
         const {
-          id: createdId,
-          name: createdName,
-          authMethod
+          id: createdId
+          // name: createdName,
+          // authMethod
         } = await createMutateAsync({
           name,
           role: role || undefined,
           organizationId: orgId
         });
 
-        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
+        await addMutateAsync({
+          organizationId: orgId,
           identityId: createdId,
-          name: createdName,
-          authMethod
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
         });
+
+        handlePopUpToggle("identity", false);
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
       }
 
       createNotification({

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -1,121 +1,36 @@
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  decryptAssymmetric,
-  encryptAssymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import { Alert, AlertDescription, Checkbox } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
+import Link from "next/link";
+
+import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
+import { useWorkspace } from "@app/context";
+import { useGetWorkspaceBot } from "@app/hooks/api";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 export const E2EESection = () => {
   const { currentWorkspace } = useWorkspace();
   const { data: bot } = useGetWorkspaceBot(currentWorkspace?.id ?? "");
-  const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
-  const { data: wsKey } = useGetUserWsKey(currentWorkspace?.id ?? "");
-
-  /**
-   * Activate bot for project by performing the following steps:
-   * 1. Get the (encrypted) project key
-   * 2. Decrypt project key with user's private key
-   * 3. Encrypt project key with bot's public key
-   * 4. Send encrypted project key to backend and set bot status to active
-   */
-
-  const toggleBotActivate = async () => {
-    let botKey;
-    try {
-      if (!currentWorkspace?.id) return;
-
-      if (bot && wsKey) {
-        // case: there is a bot
-
-        if (!bot.isActive) {
-          // bot is not active -> activate bot
-
-          const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-          if (!PRIVATE_KEY) {
-            throw new Error("Private Key missing");
-          }
-
-          const WORKSPACE_KEY = decryptAssymmetric({
-            ciphertext: wsKey.encryptedKey,
-            nonce: wsKey.nonce,
-            publicKey: wsKey.sender.publicKey,
-            privateKey: PRIVATE_KEY
-          });
-
-          const { ciphertext, nonce } = encryptAssymmetric({
-            plaintext: WORKSPACE_KEY,
-            publicKey: bot.publicKey,
-            privateKey: PRIVATE_KEY
-          });
-
-          botKey = {
-            encryptedKey: ciphertext,
-            nonce
-          };
-
-          await updateBotActiveStatus({
-            workspaceId: currentWorkspace.id,
-            botKey,
-            isActive: true,
-            botId: bot.id
-          });
-        } else {
-          // bot is active -> deactivate bot
-          await updateBotActiveStatus({
-            isActive: false,
-            botId: bot.id,
-            workspaceId: currentWorkspace.id
-          });
-        }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
 
   if (!currentWorkspace) return null;
 
   return bot && currentWorkspace.version === ProjectVersion.V1 ? (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
-      <p className="mb-8 text-gray-400">
-        Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to
-        cloud providers as well as HTTP calls to get secrets back raw but enables the server to
-        read/decrypt your secret values.
+      <div className="flex w-full items-center justify-between">
+        <p className="text-xl font-semibold">End-to-End Encryption</p>
+        <UpgradeProjectAlert transparent project={currentWorkspace} />
+      </div>
+
+      <p className="mt-5 max-w-2xl text-sm text-gray-400">
+        We are updating our encryption logic to make sure that Infisical can be the most versatile
+        secret management platform. <br />
+        <br />
+        Upgrading the project version is required to continue receiving the latest improvements and
+        patches.
       </p>
-      <p className="mb-8 text-gray-400">
-        Note that, even with E2EE disabled, your secrets are always encrypted at rest.
-      </p>
-      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
-        {(isAllowed) => (
-          <div className="flex w-full flex-col gap-y-3">
-            <div className="w-max">
-              <Checkbox
-                className="data-[state=checked]:bg-primary"
-                id="end-to-end-encryption"
-                isChecked={!bot.isActive}
-                isDisabled={!isAllowed}
-                onCheckedChange={async () => {
-                  await toggleBotActivate();
-                }}
-              >
-                End-to-end encryption enabled
-              </Checkbox>
-            </div>
-            <div>
-              <Alert variant="warning">
-                <AlertDescription>
-                  Enabling End-to-end encryption disables all the integrations
-                </AlertDescription>
-              </Alert>
-            </div>
-          </div>
-        )}
-      </ProjectPermissionCan>
+
+      <Link href="https://infisical.com/docs/documentation/platform/project-upgrade">
+        <a target="_blank" className="text-sm text-primary-400">
+          Learn more about project upgrades
+        </a>
+      </Link>
     </div>
   ) : (
     <div />

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -104,7 +104,7 @@ export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle
               Create
             </Button>
 
-            <Button colorSchema="secondary" variant="plain">
+            <Button onClick={() => handlePopUpClose("createEnv")} colorSchema="secondary" variant="plain">
               Cancel
             </Button>
           </div>

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx

@@ -108,7 +108,7 @@ export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpTog
               Update
             </Button>
 
-            <Button colorSchema="secondary" variant="plain">
+            <Button onClick={() => handlePopUpClose("updateEnv")} colorSchema="secondary" variant="plain">
               Cancel
             </Button>
           </div>