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,28 +30,32 @@ export const ProjectSettingsPage = () => {
         </div>
         <Tab.Group>
           <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
-            {tabs.map((tab) => (
-              <Tab as={Fragment} key={tab.key}>
-                {({ selected }) => (
-                  <button
-                    type="button"
-                    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"
-                    }`}
-                  >
-                    {tab.name}
-                  </button>
-                )}
-              </Tab>
-            ))}
+            {tabs
+              .filter((el) => !el.isHidden)
+              .map((tab) => (
+                <Tab as={Fragment} key={tab.key}>
+                  {({ selected }) => (
+                    <button
+                      type="button"
+                      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"
+                      }`}
+                    >
+                      {tab.name}
+                    </button>
+                  )}
+                </Tab>
+              ))}
           </Tab.List>
           <Tab.Panels>
             <Tab.Panel>
               <ProjectGeneralTab />
             </Tab.Panel>
-            <Tab.Panel>
-              <EncryptionTab />
-            </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
-      onSubmit={handleSubmit(onUpdateProjectKms)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
+    <div 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,34 +289,36 @@ export const EncryptionTab = () => {
         Select which Key Management System to use for encrypting your project data
       </p>
       <div className="mb-6 max-w-md">
-        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Kms}>
-          {(isAllowed) => (
-            <Controller
-              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                <FormControl errorText={error?.message} isError={Boolean(error)}>
-                  <Select
-                    {...field}
-                    isDisabled={!isAllowed || isUpdatingProjectKms}
-                    onValueChange={onChange}
-                    isLoading={isUpdatingProjectKms}
-                    className="w-3/4 bg-mineshaft-600"
-                  >
-                    <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
-                      Default Infisical KMS
-                    </SelectItem>
-                    {externalKmsList?.map((kms) => (
-                      <SelectItem value={kms.id} key={`kms-${kms.id}`}>
-                        {kms.slug}
+        <form onSubmit={handleSubmit(onUpdateProjectKms)}>
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Kms}>
+            {(isAllowed) => (
+              <Controller
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl errorText={error?.message} isError={Boolean(error)}>
+                    <Select
+                      {...field}
+                      isDisabled={!isAllowed || isUpdatingProjectKms}
+                      onValueChange={onChange}
+                      isLoading={isUpdatingProjectKms}
+                      className="w-3/4 bg-mineshaft-600"
+                    >
+                      <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
+                        Default Infisical KMS
                       </SelectItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-              control={control}
-              name="kmsKeyId"
-            />
-          )}
-        </ProjectPermissionCan>
+                      {externalKmsList?.map((kms) => (
+                        <SelectItem value={kms.id} key={`kms-${kms.id}`}>
+                          {kms.slug}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+                control={control}
+                name="kmsKeyId"
+              />
+            )}
+          </ProjectPermissionCan>
+        </form>
       </div>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
         {(isAllowed) => (
@@ -357,6 +344,6 @@ export const EncryptionTab = () => {
         org={currentOrg}
         workspace={currentWorkspace}
       />
-    </form>
+    </div>
   );
 };