feat: made encryption tab hidden for project v2 and v1

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

@@ -2,18 +2,26 @@ import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { Tab } from "@headlessui/react";
 
+import { useWorkspace } from "@app/context";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+
 import { EncryptionTab } from "./components/EncryptionTab";
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
 import { WebhooksTab } from "./components/WebhooksTab";
 
-const tabs = [
-  { name: "General", key: "tab-project-general" },
-  { name: "Encryption", key: "tab-project-encryption" },
-  { name: "Webhooks", key: "tab-project-webhooks" }
-];
-
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
+  const { currentWorkspace } = useWorkspace();
+  const tabs = [
+    { name: "General", key: "tab-project-general" },
+    {
+      name: "Encryption",
+      key: "tab-project-encryption",
+      isHidden: currentWorkspace?.version !== ProjectVersion.V3
+    },
+    { name: "Webhooks", key: "tab-project-webhooks" }
+  ];
+
   return (
     <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
       <div className="w-full max-w-7xl px-6">
@@ -22,7 +30,9 @@ export const ProjectSettingsPage = () => {
         </div>
         <Tab.Group>
           <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
-            {tabs.map((tab) => (
+            {tabs
+              .filter((el) => !el.isHidden)
+              .map((tab) => (
                 <Tab as={Fragment} key={tab.key}>
                   {({ selected }) => (
                     <button
@@ -41,9 +51,11 @@ export const ProjectSettingsPage = () => {
             <Tab.Panel>
               <ProjectGeneralTab />
             </Tab.Panel>
+            {currentWorkspace?.version === ProjectVersion.V3 && (
               <Tab.Panel>
                 <EncryptionTab />
               </Tab.Panel>
+            )}
             <Tab.Panel>
               <WebhooksTab />
             </Tab.Panel>

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -234,31 +234,19 @@ export const EncryptionTab = () => {
     "createBackupConfirmation",
     "loadBackup"
   ] as const);
-  const [kmsKeyId, setKmsKeyId] = useState("");
+  const kmsKeyId = activeKms?.isExternal ? activeKms.id : INTERNAL_KMS_KEY_ID;
 
   const {
     handleSubmit,
     control,
-    setValue,
     formState: { isSubmitting, isDirty }
   } = useForm<TForm>({
-    resolver: zodResolver(formSchema)
+    resolver: zodResolver(formSchema),
+    values: {
+      kmsKeyId
+    }
   });
 
-  useEffect(() => {
-    if (activeKms) {
-      setKmsKeyId(activeKms.isExternal ? activeKms.id : INTERNAL_KMS_KEY_ID);
-    } else {
-      setKmsKeyId(INTERNAL_KMS_KEY_ID);
-    }
-  }, [activeKms]);
-
-  useEffect(() => {
-    if (kmsKeyId) {
-      setValue("kmsKeyId", kmsKeyId);
-    }
-  }, [kmsKeyId]);
-
   const onUpdateProjectKms = async (data: TForm) => {
     try {
       await updateProjectKms(
@@ -277,10 +265,7 @@ export const EncryptionTab = () => {
   };
 
   return (
-    <form
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      onSubmit={handleSubmit(onUpdateProjectKms)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
       <div className="flex justify-between">
         <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Key Management</h2>
         {kmsKeyId !== INTERNAL_KMS_KEY_ID && (
@@ -304,6 +289,7 @@ export const EncryptionTab = () => {
         Select which Key Management System to use for encrypting your project data
       </p>
       <div className="mb-6 max-w-md">
+        <form onSubmit={handleSubmit(onUpdateProjectKms)}>
           <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Kms}>
             {(isAllowed) => (
               <Controller
@@ -332,6 +318,7 @@ export const EncryptionTab = () => {
               />
             )}
           </ProjectPermissionCan>
+        </form>
       </div>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
         {(isAllowed) => (
@@ -357,6 +344,6 @@ export const EncryptionTab = () => {
         org={currentOrg}
         workspace={currentWorkspace}
       />
-    </form>
+    </div>
   );
 };