Merge pull request #3058 from Infisical/misc/improved-helper-text-for-gcp-sa-field

misc: improved helper text for GCP sa field

backend/src/services/app-connection/gcp/gcp-connection-fns.ts

@@ -153,7 +153,7 @@ export const validateGcpConnectionCredentials = async (appConnection: TGcpConnec
     const serviceAccountId = appConnection.credentials.serviceAccountEmail.split("@")[0];
     if (!serviceAccountId.endsWith(expectedAccountIdSuffix)) {
       throw new BadRequestError({
-        message: `GCP service account ID (the part of the email before '@') must have a suffix of "${expectedAccountIdSuffix}"`
+        message: `GCP service account ID must have a suffix of "${expectedAccountIdSuffix}" e.g. service-account-${expectedAccountIdSuffix}@my-project.iam.gserviceaccount.com"`
       });
     }
   }

docs/integrations/app-connections/gcp.mdx

@@ -10,16 +10,21 @@ Infisical supports [service account impersonation](https://cloud.google.com/iam/
     configuring your instance to use it.
 
     <Steps>
+        <Step title="Enable the IAM Service Account Credentials API">
+            ![Service Account API](/images/app-connections/gcp/service-account-credentials-api.png)
+        </Step>
         <Step title="Navigate to IAM & Admin > Service Accounts in Google Cloud Console">
-            ![Service Account Page](/images/app-connections/gcp/service-account-overview.png)
+            ![Service Account IAM Page](/images/app-connections/gcp/service-account-overview.png)
         </Step>
         <Step title="Create a Service Account">
             Create a new service account that will be used to impersonate other GCP service accounts for your app connections.
-            ![Service Account Page](/images/app-connections/gcp/create-instance-service-account.png)
+            ![Create Service Account Page](/images/app-connections/gcp/create-instance-service-account.png)
+
+            Press "DONE" after creating the service account.
         </Step>
         <Step title="Generate Service Account Key">
             Download the JSON key file for your service account. This will be used to authenticate your instance with GCP.
-            ![Service Account Page](/images/app-connections/gcp/create-service-account-credential.png)
+            ![Service Account Credential Page](/images/app-connections/gcp/create-service-account-credential.png)
         </Step>
         <Step title="Configure Your Instance">
             1. Copy the entire contents of the downloaded JSON key file.
@@ -55,9 +60,19 @@ Infisical supports [service account impersonation](https://cloud.google.com/iam/
                 ![Assign Service Account Permission](/images/app-connections/gcp/service-account-secret-sync-permission.png)
             </Tab>
         </Tabs>
+        After configuring the appropriate roles, press "DONE".
     </Step>
     <Step title="Enable Service Account Impersonation">
-        On the new service account, assign the `Service Account Token Creator` role to the Infisical instance's service account. This allows Infisical to impersonate the new service account.
+        To enable service account impersonation, you'll need to grant the **Service Account Token Creator** role to the Infisical instance's service account. This configuration allows Infisical to securely impersonate the new service account.
+        - Navigate to the IAM & Admin > Service Accounts section in your Google Cloud Console
+        - Select the newly created service account
+        - Click on the "PERMISSIONS" tab
+        - Click "Grant Access" to add a new principal
+
+        If you're using Infisical Cloud US, use the following service account: [email protected]
+
+        If you're using Infisical Cloud EU, use the following service account: [email protected]
+
         ![Service Account Page](/images/app-connections/gcp/service-account-grant-access.png)
     </Step>
 

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

@@ -114,9 +114,8 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
               className="group"
               helperText={
                 <>
-                  <span>
+                  <div>
-                    {`Service account ID (the part of the email before '@') must be suffixed with "${expectedAccountIdSuffix}"`}
+                    {`Service account ID must be suffixed with "${expectedAccountIdSuffix}"`}
-                  </span>
                     <Tooltip className="relative right-2" position="bottom" content="Copy">
                       <IconButton
                         variant="plain"
@@ -144,6 +143,13 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
                         />
                       </IconButton>
                     </Tooltip>
+                  </div>
+                  <div>
+                    Example:
+                    <span className="ml-1">service-account-</span>
+                    <span className="font-semibold">{expectedAccountIdSuffix}</span>
+                    <span>@my-project.iam.gserviceaccount.com</span>
+                  </div>
                 </>
               }
             >