misc: minor UI updates

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

@@ -2,12 +2,14 @@ import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { Tab } from "@headlessui/react";
 
+import { EncryptionTab } from "./components/EncryptionTab";
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
 import { WebhooksTab } from "./components/WebhooksTab";
 
 const tabs = [
   { name: "General", key: "tab-project-general" },
-  { name: "Webhooks", key: "tab-project-webhooks" },
+  { name: "Encryption", key: "tab-project-encryption" },
+  { name: "Webhooks", key: "tab-project-webhooks" }
 ];
 
 export const ProjectSettingsPage = () => {
@@ -25,8 +27,9 @@ export const ProjectSettingsPage = () => {
                 {({ 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"
-                      }`}
+                    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>
@@ -38,6 +41,9 @@ export const ProjectSettingsPage = () => {
             <Tab.Panel>
               <ProjectGeneralTab />
             </Tab.Panel>
+            <Tab.Panel>
+              <EncryptionTab />
+            </Tab.Panel>
             <Tab.Panel>
               <WebhooksTab />
             </Tab.Panel>

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

@@ -0,0 +1,65 @@
+import { Controller, useForm } from "react-hook-form";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, ContentLoader, FormControl, Select, SelectItem } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useOrganization } from "@app/context";
+import { useGetExternalKmsList } from "@app/hooks/api";
+
+export const EncryptionTab = () => {
+  const { handleSubmit, control } = useForm();
+  const { currentOrg } = useOrganization();
+
+  const { data: externalKmsList, isLoading: isExternalKmsListLoading } = useGetExternalKmsList(
+    currentOrg?.id!
+  );
+
+  const onFormSubmit = () => {};
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Key Management</h2>
+      <p className="mb-4 text-gray-400">
+        Select which Key Management System to use for encrypting project data
+      </p>
+      <div className="mb-6 max-w-md">
+        {isExternalKmsListLoading ? (
+          <ContentLoader />
+        ) : (
+          <Controller
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => {
+                    onChange(e);
+                  }}
+                  className="w-3/4 bg-mineshaft-600"
+                >
+                  {externalKmsList?.map((kms) => (
+                    <SelectItem value={kms.id} key={`kms-${kms.id}`}>
+                      {kms.slug}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        )}
+      </div>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
+        {(isAllowed) => (
+          <Button colorSchema="secondary" type="submit" isDisabled={!isAllowed}>
+            Save
+          </Button>
+        )}
+      </ProjectPermissionCan>
+    </form>
+  );
+};

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

@@ -0,0 +1 @@
+export { EncryptionTab } from "./EncryptionTab";