From c5800db8c90a64c7aa40b75d30e876118259c89f Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 21 Nov 2023 15:22:34 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20add=20gdoc=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/GdocsAdd.tsx                     |  4 ++++
 adminSiteClient/admin.scss                       | 16 ++++++++++++++++
 .../@ourworldindata/utils/src/GdocsConstants.ts  |  2 +-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/adminSiteClient/GdocsAdd.tsx b/adminSiteClient/GdocsAdd.tsx
index b148b6f25b0..e294f0d9c88 100644
--- a/adminSiteClient/GdocsAdd.tsx
+++ b/adminSiteClient/GdocsAdd.tsx
@@ -67,6 +67,10 @@ export const GdocsAdd = ({ onAdd }: { onAdd: (id: string) => void }) => {
                         placeholder="https://docs.google.com/document/d/****/edit"
                         pattern={gdocUrlRegex.toString().slice(1, -1)}
                     />
+                    <span className="validation-notice">
+                        Invalid URL - it should look like this:{" "}
+                        <pre>https://docs.google.com/document/d/****/edit</pre>
+                    </span>
                 </div>
             </div>
             <div className="modal-footer">
diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
index bb7d613da1c..0c41513a726 100644
--- a/adminSiteClient/admin.scss
+++ b/adminSiteClient/admin.scss
@@ -1243,6 +1243,22 @@ main:not(.ChartEditorPage):not(.GdocsEditPage) {
             margin-bottom: 1rem;
         }
     }
+    .validation-notice {
+        display: none;
+    }
+    input:invalid + .validation-notice {
+        display: block;
+        margin-top: 4px;
+        color: red;
+        padding-left: 5px;
+        pre {
+            color: red;
+        }
+    }
+    // don't show the validation notice when the input is blank (because that counts as "invalid")
+    input:placeholder-shown + .validation-notice {
+        display: none;
+    }
 }
 
 .GdocsEditPage,
diff --git a/packages/@ourworldindata/utils/src/GdocsConstants.ts b/packages/@ourworldindata/utils/src/GdocsConstants.ts
index 927a2702358..1013d1ba840 100644
--- a/packages/@ourworldindata/utils/src/GdocsConstants.ts
+++ b/packages/@ourworldindata/utils/src/GdocsConstants.ts
@@ -20,6 +20,6 @@ export const IMAGES_DIRECTORY = "/images/published/"
  * https://docs.google.com/spreadsheets/d/abcd1234
  */
 export const gdocUrlRegex =
-    /https:\/\/docs\.google\.com\/document(?:\/u\/\d)?\/d\/([-\w]+)\/?(edit)?#?/
+    /https:\/\/docs\.google\.com\/document(?:\/u\/\d)?\/d\/([\-\w]+)\/?(edit)?#?/
 
 export const gdocIdRegex = /^[0-9A-Za-z\-_]{44}$/