misc: added import support and a few ui/ux updates

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

@@ -1,11 +1,15 @@
+import { useEffect } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { SingleValue } from "react-select";
+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 } from "@app/components/v2";
+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 { SecretSync } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 import { TSecretSyncForm } from "../schemas";
 
@@ -20,6 +24,10 @@ export const GcpSyncFields = () => {
     enabled: Boolean(connectionId)
   });
 
+  useEffect(() => {
+    setValue("destinationConfig.scope", GcpSyncScope.Global);
+  }, []);
+
   return (
     <>
       <SecretSyncConnectionField
@@ -31,7 +39,22 @@ export const GcpSyncFields = () => {
         name="destinationConfig.projectId"
         control={control}
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Project">
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Project"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure that you've enabled the Secret Manager API and Cloud Resource Manager API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
+              >
+                <div>
+                  <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
             <FilterableSelect
               menuPlacement="top"
               isLoading={isPending && Boolean(connectionId)}

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

@@ -8,7 +8,7 @@ import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/hel
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 import { AwsParameterStoreSyncReviewFields } from "./AwsParameterStoreSyncReviewFields";
-import { GcpSyncReviewFields } from "./GcpSyncReviewFIelds";
+import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
 import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
 
 export const SecretSyncReviewFields = () => {

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

@@ -1,10 +1,12 @@
 import { z } from "zod";
 
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 export const GcpSyncDestinationSchema = z.object({
   destination: z.literal(SecretSync.GCPSecretManager),
   destinationConfig: z.object({
+    scope: z.literal(GcpSyncScope.Global),
     projectId: z.string().min(1, "Project ID required")
   })
 });

frontend/src/hooks/api/secretSyncs/types/gcp-sync.ts

@@ -2,9 +2,14 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
 
+export enum GcpSyncScope {
+  Global = "global"
+}
+
 export type TGcpSync = TRootSecretSync & {
   destination: SecretSync.GCPSecretManager;
   destinationConfig: {
+    scope: GcpSyncScope.Global;
     projectId: string;
   };
   connection: {

frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionForm/GcpConnectionForm.tsx

@@ -103,7 +103,7 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
               isError={Boolean(error?.message)}
               label="Service Account Email"
               className="group"
-              helperText={`Service account email must be prefixed with "${currentOrg.id.split("-").slice(0, 2).join("-")}".`}
+              helperText={`Service account ID (the part of the email before '@') must be suffixed with "${currentOrg.id.split("-").slice(0, 2).join("-")}".`}
             >
               <SecretInput
                 containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"