From b5d60398d6d01d2534cf50a82998dd8c4b0e715f Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 29 Jan 2025 03:10:37 +0800
Subject: [PATCH] misc: improved helper text for GCP sa field

---
 .../AppConnectionForm/GcpConnectionForm.tsx   | 60 ++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionForm/GcpConnectionForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionForm/GcpConnectionForm.tsx
index 1a392063b..a89fd0f63 100644
--- a/frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionForm/GcpConnectionForm.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionForm/GcpConnectionForm.tsx
@@ -114,36 +114,42 @@ 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>
-                  <Tooltip className="relative right-2" position="bottom" content="Copy">
-                    <IconButton
-                      variant="plain"
-                      ariaLabel="copy"
-                      onClick={() => {
-                        if (isCopied) {
-                          return;
-                        }
+                  <div>
+                    {`Service account ID must be suffixed with "${expectedAccountIdSuffix}"`}
+                    <Tooltip className="relative right-2" position="bottom" content="Copy">
+                      <IconButton
+                        variant="plain"
+                        ariaLabel="copy"
+                        onClick={() => {
+                          if (isCopied) {
+                            return;
+                          }
 
-                        navigator.clipboard.writeText(expectedAccountIdSuffix);
+                          navigator.clipboard.writeText(expectedAccountIdSuffix);
 
-                        createNotification({
-                          text: "Copied to clipboard",
-                          type: "info"
-                        });
+                          createNotification({
+                            text: "Copied to clipboard",
+                            type: "info"
+                          });
 
-                        toggleIsCopied(2000);
-                      }}
-                      className="hover:bg-bunker-100/10"
-                    >
-                      <FontAwesomeIcon
-                        icon={!isCopied ? faCopy : faCheck}
-                        size="sm"
-                        className="cursor-pointer"
-                      />
-                    </IconButton>
-                  </Tooltip>
+                          toggleIsCopied(2000);
+                        }}
+                        className="hover:bg-bunker-100/10"
+                      >
+                        <FontAwesomeIcon
+                          icon={!isCopied ? faCopy : faCheck}
+                          size="sm"
+                          className="cursor-pointer"
+                        />
+                      </IconButton>
+                    </Tooltip>
+                  </div>
+                  <div>
+                    Example:
+                    <span className="ml-1 font-semibold">
+                      {`service-account-${expectedAccountIdSuffix}@my-project.iam.gserviceaccount.com`}
+                    </span>
+                  </div>
                 </>
               }
             >