Merge pull request #4440 from Infisical/daniel/vault-migration

feat(vault-migration): gateway support & kv v1 support

frontend/src/hooks/api/migration/mutations.tsx

@@ -46,18 +46,21 @@ export const useImportVault = () => {
       vaultAccessToken,
       vaultNamespace,
       vaultUrl,
-      mappingType
+      mappingType,
+      gatewayId
     }: {
       vaultAccessToken: string;
       vaultNamespace?: string;
       vaultUrl: string;
       mappingType: string;
+      gatewayId?: string;
     }) => {
       await apiRequest.post("/api/v3/external-migration/vault/", {
         vaultAccessToken,
         vaultNamespace,
         vaultUrl,
-        mappingType
+        mappingType,
+        gatewayId
       });
     }
   });

frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx

@@ -6,9 +6,16 @@ import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Tooltip } from "@app/components/v2";
+import { Button, FormControl, Input, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { useImportVault } from "@app/hooks/api/migration/mutations";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { useQuery } from "@tanstack/react-query";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 
 type Props = {
   id?: string;
@@ -62,36 +69,32 @@ const MAPPING_TYPE_MENU_ITEMS = [
 export const VaultPlatformModal = ({ onClose }: Props) => {
   const formSchema = z.object({
     vaultUrl: z.string().min(1),
+    gatewayId: z.string().optional(),
     vaultNamespace: z.string().trim().optional(),
     vaultAccessToken: z.string().min(1),
     mappingType: z.nativeEnum(VaultMappingType).default(VaultMappingType.KeyVault)
   });
   type TFormData = z.infer<typeof formSchema>;
 
+  const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());
   const { mutateAsync: importVault } = useImportVault();
 
   const {
     control,
     handleSubmit,
     reset,
-    formState: { isLoading, isDirty, isSubmitting, isValid, errors }
+    formState: { isLoading, isDirty, isSubmitting, isValid }
   } = useForm<TFormData>({
     resolver: zodResolver(formSchema)
   });
 
-  console.log({
-    isSubmitting,
-    isLoading,
-    isValid,
-    errors
-  });
-
   const onSubmit = async (data: TFormData) => {
     await importVault({
       vaultAccessToken: data.vaultAccessToken,
       vaultNamespace: data.vaultNamespace,
       vaultUrl: data.vaultUrl,
-      mappingType: data.mappingType
+      mappingType: data.mappingType,
+      ...(data.gatewayId && { gatewayId: data.gatewayId })
     });
     createNotification({
       title: "Import started",
@@ -110,11 +113,70 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
           The Vault migration currently supports importing static secrets from Vault
           Dedicated/Self-Hosted.
           <div className="mt-2 text-xs opacity-80">
-            Currently only KV Secret Engine V2 is supported for Vault migrations.
+            Currently only KV Secret Engine is supported for Vault migrations.
           </div>
         </p>
       </NoticeBannerV2>
       <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+        <div className="w-full flex-1">
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                    isOptional
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <div>
+                        <Select
+                          isDisabled={!isAllowed}
+                          value={value as string}
+                          onValueChange={(v) => {
+                            if (v !== "") {
+                              onChange(v);
+                            }
+                          }}
+                          className="w-full border border-mineshaft-500"
+                          dropdownContainerClassName="max-w-none"
+                          isLoading={isGatewayLoading}
+                          placeholder="Default: Internet Gateway"
+                          position="popper"
+                        >
+                          <SelectItem
+                            value=""
+                            onClick={() => {
+                              onChange(undefined);
+                            }}
+                          >
+                            Internet Gateway
+                          </SelectItem>
+                          {gateways?.map((el) => (
+                            <SelectItem value={el.id} key={el.id}>
+                              {el.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </div>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+
         <Controller
           control={control}
           name="vaultUrl"