Trim URLs generated using user input (#14616)

* Trim URLs generated using user input

* Simplify concat function

* Assert exact URL sans spaces

frontend/src/metabase/entities/databases/forms.js

@@ -113,10 +113,16 @@ export const DEFAULT_SCHEDULES = {
   },
 };
 
+function concatTrimmed(a, b) {
+  return (a || "").trim() + (b || "").trim();
+}
+
 function getClientIdDescription(engine, details) {
   if (CREDENTIALS_URL_PREFIXES[engine]) {
-    const credentialsURL =
-      CREDENTIALS_URL_PREFIXES[engine] + (details["project-id"] || "");
+    const credentialsURL = concatTrimmed(
+      CREDENTIALS_URL_PREFIXES[engine],
+      details["project-id"] || "",
+    );
     return (
       <span>
         {jt`${(
@@ -132,22 +138,24 @@ function getClientIdDescription(engine, details) {
 
 function getAuthCodeLink(engine, details) {
   if (AUTH_URL_PREFIXES[engine] && details["client-id"]) {
+    const authCodeURL = concatTrimmed(
+      AUTH_URL_PREFIXES[engine],
+      details["client-id"],
+    );
+    const googleDriveAuthCodeURL = concatTrimmed(
+      AUTH_URL_PREFIXES["bigquery_with_drive"],
+      details["client-id"],
+    );
     return (
       <span>
         {jt`${(
-          <ExternalLink href={AUTH_URL_PREFIXES[engine] + details["client-id"]}>
-            {t`Click here`}
-          </ExternalLink>
+          <ExternalLink href={authCodeURL}>{t`Click here`}</ExternalLink>
         )} to get an auth code.`}
         {engine === "bigquery" && (
           <span>
             {" "}
             ({t`or`}{" "}
-            <ExternalLink
-              href={
-                AUTH_URL_PREFIXES["bigquery_with_drive"] + details["client-id"]
-              }
-            >
+            <ExternalLink href={googleDriveAuthCodeURL}>
               {t`with Google Drive permissions`}
             </ExternalLink>
             )
@@ -167,7 +175,11 @@ function getAuthCodeEnableAPILink(engine, details) {
       details["client-id"] && (details["client-id"].match(/^\d+/) || [])[0];
     if (ENABLE_API_PREFIXES[engine] && projectID) {
       // URL looks like https://console.developers.google.com/apis/api/analytics.googleapis.com/overview?project=12343611585
-      const enableAPIURL = ENABLE_API_PREFIXES[engine] + projectID;
+      const enableAPIURL = concatTrimmed(
+        ENABLE_API_PREFIXES[engine],
+        projectID,
+      );
+
       return (
         <span>
           {t`To use Metabase with this data you must enable API access in the Google Developers Console.`}{" "}

frontend/test/metabase/scenarios/admin/databases/add.cy.spec.js

@@ -201,4 +201,27 @@ describe("scenarios > admin > databases > add", () => {
       cy.contains("generate a Client ID and Client Secret for your project");
     });
   });
+
+  describe("Google Analytics ", () => {
+    it.only("should generate well-formed external auth URLs", () => {
+      cy.visit("/admin/databases/create");
+      cy.contains("Database type")
+        .parents(".Form-field")
+        .find(".AdminSelect")
+        .click();
+      popover()
+        .contains("Google Analytics")
+        .click({ force: true });
+
+      typeField("Client ID", "   999  ");
+
+      cy.findByText("get an auth code", { exact: false })
+        .findByRole("link")
+        .then(el => {
+          expect(el.attr("href")).to.equal(
+            "https://accounts.google.com/o/oauth2/auth?access_type=offline&redirect_uri=urn:ietf:wg:oauth:2.0:oob&response_type=code&scope=https://www.googleapis.com/auth/analytics.readonly&client_id=999",
+          );
+        });
+    });
+  });
 });