misc: minor UI updates

backend/src/ee/services/external-kms/external-kms-service.ts

@@ -62,7 +62,9 @@ export const externalKmsServiceFactory = ({
       case KmsProviders.Aws:
         {
           const externalKms = await AwsKmsProviderFactory({ inputs: provider.inputs });
-          await externalKms.validateConnection();
+          if (provider.inputs.kmsKeyId) {
+            await externalKms.validateConnection();
+          }
           // if missing kms key this generate a new kms key id and returns new provider input
           const newProviderInput = await externalKms.generateInputKmsKey();
           sanitizedProviderInput = JSON.stringify(newProviderInput);

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx

@@ -52,7 +52,7 @@ const formSchema = z.object({
     .trim()
     .min(1)
     .refine((v) => slugify(v) === v, {
-      message: "Slug must be a valid slug"
+      message: "Alias must be a valid slug"
     }),
   description: z.string().trim().min(1).default(""),
   credential: z.discriminatedUnion("type", [
@@ -177,7 +177,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
         control={control}
         name="slug"
         render={({ field, fieldState: { error } }) => (
-          <FormControl label="Slug" errorText={error?.message} isError={Boolean(error)}>
+          <FormControl label="Alias" errorText={error?.message} isError={Boolean(error)}>
             <Input placeholder="" {...field} />
           </FormControl>
         )}
@@ -293,7 +293,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
             >
               {AWS_REGIONS.map((awsRegion) => (
                 <SelectItem value={awsRegion.slug} key={`kms-aws-region-${awsRegion.slug}`}>
-                  {awsRegion.name}
+                  {awsRegion.name} ({awsRegion.slug})
                 </SelectItem>
               ))}
             </Select>
@@ -304,14 +304,14 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
         control={control}
         name="kmsKeyId"
         render={({ field, fieldState: { error } }) => (
-          <FormControl label="KMS Key ID" errorText={error?.message} isError={Boolean(error)}>
+          <FormControl label="AWS KMS Key ID" errorText={error?.message} isError={Boolean(error)}>
             <Input placeholder="" {...field} />
           </FormControl>
         )}
       />
       <div className="mt-6 flex items-center space-x-4">
         <Button type="submit" isLoading={isSubmitting}>
-          Submit
+          Save
         </Button>
         <Button variant="outline_bg" onClick={onCancel}>
           Cancel

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx

@@ -1,3 +1,4 @@
+import { faAws } from "@fortawesome/free-brands-svg-icons";
 import { faEllipsis, faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -23,6 +24,7 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useGetExternalKmsList, useRemoveExternalKms } from "@app/hooks/api";
+import { ExternalKmsProvider } from "@app/hooks/api/kms/types";
 
 import { AddExternalKmsForm } from "./AddExternalKmsForm";
 import { UpdateExternalKmsForm } from "./UpdateExternalKmsForm";
@@ -102,8 +104,11 @@ export const OrgEncryptionTab = withPermission(
               {!isExternalKmsListLoading &&
                 externalKmsList?.map((kms) => (
                   <Tr key={kms.id}>
-                    <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                      {kms.externalKms.provider}
+                    <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+                      {kms.externalKms.provider === ExternalKmsProvider.AWS && (
+                        <FontAwesomeIcon icon={faAws} />
+                      )}
+                      <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
                     </Td>
                     <Td>{kms.slug}</Td>
                     <Td>

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";