diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx index 6c628d6c6..388814108 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx +++ b/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 (
@@ -22,28 +30,32 @@ export const ProjectSettingsPage = () => {
- {tabs.map((tab) => ( - - {({ selected }) => ( - - )} - - ))} + {tabs + .filter((el) => !el.isHidden) + .map((tab) => ( + + {({ selected }) => ( + + )} + + ))} - - - + {currentWorkspace?.version === ProjectVersion.V3 && ( + + + + )} diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EncryptionTab/EncryptionTab.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EncryptionTab/EncryptionTab.tsx index 13d86f42c..2d622366a 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/components/EncryptionTab/EncryptionTab.tsx +++ b/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({ - 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 ( -
+

Key Management

{kmsKeyId !== INTERNAL_KMS_KEY_ID && ( @@ -304,34 +289,36 @@ export const EncryptionTab = () => { Select which Key Management System to use for encrypting your project data

- - {(isAllowed) => ( - ( - - + + Default Infisical KMS - ))} - - - )} - control={control} - name="kmsKeyId" - /> - )} - + {externalKmsList?.map((kms) => ( + + {kms.slug} + + ))} + + + )} + control={control} + name="kmsKeyId" + /> + )} + +
{(isAllowed) => ( @@ -357,6 +344,6 @@ export const EncryptionTab = () => { org={currentOrg} workspace={currentWorkspace} /> - +
); };