Merge pull request #3738 from Infisical/gcp-sync-location

feature(gcp-sync): Add support for syncing to locations

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -5,27 +5,56 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
-import { useGcpConnectionListProjects } from "@app/hooks/api/appConnections/gcp/queries";
-import { TGitHubConnectionEnvironment } from "@app/hooks/api/appConnections/github";
+import {
+  Badge,
+  FilterableSelect,
+  FormControl,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { GCP_SYNC_SCOPES } from "@app/helpers/secretSyncs";
+import {
+  useGcpConnectionListProjectLocations,
+  useGcpConnectionListProjects
+} from "@app/hooks/api/appConnections/gcp/queries";
+import { TGcpLocation, TGcpProject } from "@app/hooks/api/appConnections/gcp/types";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 import { TSecretSyncForm } from "../schemas";
 
+const formatOptionLabel = ({ displayName, locationId }: TGcpLocation) => (
+  <div className="flex w-full flex-row items-center gap-1">
+    <span>{displayName}</span>{" "}
+    <Badge className="h-5 leading-5" variant="success">
+      {locationId}
+    </Badge>
+  </div>
+);
+
 export const GcpSyncFields = () => {
   const { control, setValue } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.GCPSecretManager }
   >();
 
   const connectionId = useWatch({ name: "connection.id", control });
+  const projectId = useWatch({ name: "destinationConfig.projectId", control });
+  const selectedScope = useWatch({ name: "destinationConfig.scope", control });
 
   const { data: projects, isPending } = useGcpConnectionListProjects(connectionId, {
     enabled: Boolean(connectionId)
   });
 
+  const { data: locations, isPending: areLocationsPending } = useGcpConnectionListProjectLocations(
+    { connectionId, projectId },
+    {
+      enabled: Boolean(connectionId) && Boolean(projectId)
+    }
+  );
+
   useEffect(() => {
-    setValue("destinationConfig.scope", GcpSyncScope.Global);
+    if (!selectedScope) setValue("destinationConfig.scope", GcpSyncScope.Global);
   }, []);
 
   return (
@@ -33,6 +62,7 @@ export const GcpSyncFields = () => {
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.projectId", "");
+          setValue("destinationConfig.locationId", "");
         }}
       />
       <Controller
@@ -60,9 +90,10 @@ export const GcpSyncFields = () => {
               isLoading={isPending && Boolean(connectionId)}
               isDisabled={!connectionId}
               value={projects?.find((project) => project.id === value) ?? null}
-              onChange={(option) =>
-                onChange((option as SingleValue<TGitHubConnectionEnvironment>)?.id ?? null)
-              }
+              onChange={(option) => {
+                setValue("destinationConfig.locationId", "");
+                onChange((option as SingleValue<TGcpProject>)?.id ?? null);
+              }}
               options={projects}
               placeholder="Select a GCP project..."
               getOptionLabel={(option) => option.name}
@@ -71,6 +102,76 @@ export const GcpSyncFields = () => {
           </FormControl>
         )}
       />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error?.message)}
+            tooltipText={
+              <div className="flex flex-col gap-3">
+                <p>
+                  Specify how Infisical should sync secrets to GCP. The following options are
+                  available:
+                </p>
+                <ul className="flex list-disc flex-col gap-3 pl-4">
+                  {Object.values(GCP_SYNC_SCOPES).map(({ name, description }) => {
+                    return (
+                      <li key={name}>
+                        <p className="text-mineshaft-300">
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            }
+            tooltipClassName="max-w-lg"
+            label="Scope"
+          >
+            <Select
+              value={value}
+              onValueChange={(val) => onChange(val)}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              dropdownContainerClassName="max-w-none"
+              isDisabled={!projectId}
+            >
+              {Object.values(GcpSyncScope).map((scope) => {
+                return (
+                  <SelectItem className="capitalize" value={scope} key={scope}>
+                    {scope}
+                  </SelectItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+        )}
+      />
+      {selectedScope === GcpSyncScope.Region && (
+        <Controller
+          name="destinationConfig.locationId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Region">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={areLocationsPending && Boolean(projectId)}
+                isDisabled={!projectId}
+                value={locations?.find((option) => option.locationId === value) ?? null}
+                onChange={(option) =>
+                  onChange((option as SingleValue<TGcpLocation>)?.locationId ?? null)
+                }
+                options={locations}
+                placeholder="Select a region..."
+                getOptionValue={(option) => option.locationId}
+                formatOptionLabel={formatOptionLabel}
+              />
+            </FormControl>
+          )}
+        />
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/GcpSyncReviewFields.tsx

@@ -3,12 +3,23 @@ import { useFormContext } from "react-hook-form";
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 export const GcpSyncReviewFields = () => {
   const { watch } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.GCPSecretManager }
   >();
-  const projectId = watch("destinationConfig.projectId");
+  const destinationConfig = watch("destinationConfig");
 
-  return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Project ID">{destinationConfig.projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Scope" className="capitalize">
+        {destinationConfig.scope}
+      </GenericFieldLabel>
+      {destinationConfig.scope === GcpSyncScope.Region && (
+        <GenericFieldLabel label="Region">{destinationConfig.locationId}</GenericFieldLabel>
+      )}
+    </>
+  );
 };

frontend/src/components/secret-syncs/forms/schemas/gcp-sync-destination-schema.ts

@@ -7,9 +7,16 @@ import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 export const GcpSyncDestinationSchema = BaseSecretSyncSchema().merge(
   z.object({
     destination: z.literal(SecretSync.GCPSecretManager),
-    destinationConfig: z.object({
-      scope: z.literal(GcpSyncScope.Global),
-      projectId: z.string().min(1, "Project ID required")
-    })
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(GcpSyncScope.Global),
+        projectId: z.string().min(1, "Project ID required")
+      }),
+      z.object({
+        scope: z.literal(GcpSyncScope.Region),
+        projectId: z.string().min(1, "Project ID required"),
+        locationId: z.string().min(1, "Region required")
+      })
+    ])
   })
 );