misc: added ability for users to select KMS during project creation

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -36,6 +36,10 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { tempLocalStorage } from "@app/components/utilities/checks/tempLocalStorage";
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Button,
   Checkbox,
   DropdownMenu,
@@ -66,11 +70,13 @@ import {
   useAddUserToWsNonE2EE,
   useCreateWorkspace,
   useGetAccessRequestsCount,
+  useGetExternalKmsList,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
   useLogoutUser,
   useSelectOrganization
 } from "@app/hooks/api";
+import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
 import { Workspace } from "@app/hooks/api/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
@@ -113,7 +119,8 @@ const formSchema = yup.object({
     .label("Project Name")
     .trim()
     .max(64, "Too long, maximum length is 64 characters"),
-  addMembers: yup.bool().required().label("Add Members")
+  addMembers: yup.bool().required().label("Add Members"),
+  kmsKeyId: yup.string().label("KMS Key ID")
 });
 
 type TAddProjectFormData = yup.InferType<typeof formSchema>;
@@ -147,6 +154,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
   const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
+  const { data: externalKmsList } = useGetExternalKmsList(currentOrg?.id!);
 
   const pendingRequestsCount = useMemo(() => {
     return (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
@@ -172,7 +180,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
     reset,
     handleSubmit
   } = useForm<TAddProjectFormData>({
-    resolver: yupResolver(formSchema)
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      kmsKeyId: INTERNAL_KMS_KEY_ID
+    }
   });
 
   const { t } = useTranslation();
@@ -245,7 +256,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
     putUserInOrg();
   }, [router.query.id]);
 
-  const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => {
+  const onCreateProject = async ({ name, addMembers, kmsKeyId }: TAddProjectFormData) => {
     // type check
     if (!currentOrg) return;
     if (!user) return;
@@ -255,7 +266,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
           project: { id: newProjectId }
         }
       } = await createWs.mutateAsync({
-        projectName: name
+        projectName: name,
+        kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined
       });
 
       if (addMembers) {
@@ -889,24 +901,67 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     )}
                   />
                 </div>
-                <div className="mt-7 flex items-center">
-                  <Button
-                    isDisabled={isSubmitting}
-                    isLoading={isSubmitting}
-                    key="layout-create-project-submit"
-                    className="mr-4"
-                    type="submit"
-                  >
-                    Create Project
-                  </Button>
-                  <Button
-                    key="layout-cancel-create-project"
-                    onClick={() => handlePopUpClose("addNewWs")}
-                    variant="plain"
-                    colorSchema="secondary"
-                  >
-                    Cancel
-                  </Button>
+                <div className="mt-14 flex">
+                  <Accordion type="single" collapsible className="w-full">
+                    <AccordionItem
+                      value="advance-settings"
+                      className="data-[state=open]:border-none"
+                    >
+                      <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                        <div className="order-1 ml-3">Advanced Settings</div>
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <Controller
+                          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                              errorText={error?.message}
+                              isError={Boolean(error)}
+                              label="KMS"
+                            >
+                              <Select
+                                {...field}
+                                onValueChange={(e) => {
+                                  onChange(e);
+                                }}
+                                className="mb-12 mr-4 w-full 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}
+                                  </SelectItem>
+                                ))}
+                              </Select>
+                            </FormControl>
+                          )}
+                          control={control}
+                          name="kmsKeyId"
+                        />
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
+                  <div className="flex items-end justify-end">
+                    <Button
+                      key="layout-cancel-create-project"
+                      onClick={() => handlePopUpClose("addNewWs")}
+                      colorSchema="secondary"
+                      variant="plain"
+                      className="py-2"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      isDisabled={isSubmitting}
+                      isLoading={isSubmitting}
+                      key="layout-create-project-submit"
+                      className="ml-4"
+                      type="submit"
+                    >
+                      Create Project
+                    </Button>
+                  </div>
                 </div>
               </form>
             </ModalContent>