misc: minor UI updates

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>