misc: improved helper text for GCP sa field

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>
-                    {`Service account ID (the part of the email before '@') must be suffixed with "${expectedAccountIdSuffix}"`}
-                  </span>
+                  <div>
+                    {`Service account ID must be suffixed with "${expectedAccountIdSuffix}"`}
                     <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 font-semibold">
+                      {`service-account-${expectedAccountIdSuffix}@my-project.iam.gserviceaccount.com`}
+                    </span>
+                  </div>
                 </>
               }
             >