Merge remote-tracking branch 'origin/main' into feat-secret-input-autocomplete

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

@@ -13,8 +13,8 @@ const tabs = [
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex justify-center w-full h-full bg-bunker-800 text-white">
-      <div className="max-w-7xl px-6 w-full">
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
         <div className="my-6">
           <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
         </div>
@@ -25,7 +25,7 @@ export const ProjectSettingsPage = () => {
                 {({ selected }) => (
                   <button
                     type="button"
-                    className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                    className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                       selected ? "border-b border-white text-white" : "text-mineshaft-400"
                     }`}
                   >

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

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Checkbox } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -8,7 +8,7 @@ import { useToggleAutoCapitalization } from "@app/hooks/api";
 
 export const AutoCapitalizationSection = () => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync } = useToggleAutoCapitalization();
 

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx

@@ -1 +1 @@
-export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";

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

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import {
@@ -15,7 +15,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteProjectSection = () => {
   const router = useRouter();
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteWorkspace"
   ] as const);

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx

@@ -1 +1 @@
-export { DeleteProjectSection } from "./DeleteProjectSection";
+export { DeleteProjectSection } from "./DeleteProjectSection";

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/E2EESection/index.tsx

@@ -1,3 +1 @@
-export {
-    E2EESection
-} from "./E2EESection";
+export { E2EESection } from "./E2EESection";

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

@@ -3,7 +3,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import slugify from "@sindresorhus/slugify";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useCreateWsEnvironment } from "@app/hooks/api";
@@ -30,7 +30,7 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;
 
 export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useCreateWsEnvironment();
   const { control, handleSubmit, reset } = useForm<FormData>({
@@ -112,7 +112,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/EnvironmentSection.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner, ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
 import {
@@ -19,7 +19,7 @@ import { EnvironmentTable } from "./EnvironmentTable";
 import { UpdateEnvironmentModal } from "./UpdateEnvironmentModal";
 
 export const EnvironmentSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
   const { permission } = useProjectPermission();

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

@@ -1,7 +1,7 @@
 import { faArrowDown, faArrowUp, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
@@ -36,7 +36,7 @@ type Props = {
 
 export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace, isLoading } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
   const updateEnvironment = useUpdateWsEnvironment();
 
   const handleReorderEnv = async (id: string, position: number) => {

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

@@ -2,7 +2,7 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useUpdateWsEnvironment } from "@app/hooks/api";
@@ -22,7 +22,7 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;
 
 export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useUpdateWsEnvironment();
   const { control, handleSubmit, reset } = useForm<FormData>({
@@ -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>

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx

@@ -1 +1 @@
-export { ProjectGeneralTab } from "./ProjectGeneralTab";
+export { ProjectGeneralTab } from "./ProjectGeneralTab";

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 
@@ -15,7 +15,7 @@ type Props = {
 
 export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
   const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
-  const { createNotification } = useNotificationContext();
+  
 
   const copyToClipboard = useCallback(() => {
     if (isProjectIdCopied) {

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

@@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -12,13 +12,17 @@ import { useRenameWorkspace } from "@app/hooks/api";
 import { CopyButton } from "./CopyButton";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Project Name")
+    .max(64, "Too long, maximum length is 64 characters")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
 
 export const ProjectNameChangeSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useRenameWorkspace();
 

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx

@@ -2,7 +2,7 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useCreateWsTag } from "@app/hooks/api";
@@ -26,7 +26,7 @@ type Props = {
 };
 
 export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const createWsTag = useCreateWsTag();
   const {

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

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner, ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import {
@@ -19,7 +19,7 @@ import { SecretTagsTable } from "./SecretTagsTable";
 type DeleteModalData = { name: string; id: string };
 
 export const SecretTagsSection = (): JSX.Element => {
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
     "CreateSecretTag",
     "deleteTagConfirmation"

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx

@@ -1 +1 @@
-export {SecretTagsSection} from "./SecretTagsSection"
+export { SecretTagsSection } from "./SecretTagsSection";

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

@@ -3,7 +3,7 @@ import { faInfoCircle, faPlug, faPlus } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -34,7 +34,7 @@ import { AddWebhookForm, TFormSchema } from "./AddWebhookForm";
 export const WebhooksTab = withProjectPermission(
   () => {
     const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+    
     const { currentWorkspace } = useWorkspace();
     const workspaceId = currentWorkspace?.id || "";
     const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([

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

@@ -3,4 +3,4 @@ export { DeleteProjectSection } from "./DeleteProjectSection";
 export { E2EESection } from "./E2EESection";
 export { EnvironmentSection } from "./EnvironmentSection";
 export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
-export { SecretTagsSection } from "./SecretTagsSection";
+export { SecretTagsSection } from "./SecretTagsSection";