From c1a629f0467a8204bddbcc9328aebb85002b732b Mon Sep 17 00:00:00 2001
From: RachelElysia <rachel@fleetdm.com>
Date: Thu, 21 Mar 2024 16:53:48 -0400
Subject: [PATCH 1/3] Add error handling for invalid JSON, escape characters
 from placeholder text

---
 .../IntegrationsPage/cards/Calendars/Calendars.tsx  | 13 +++++++++++--
 tsconfig.json                                       |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index de7c79a139b0..90ad97ad933f 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -33,7 +33,7 @@ const API_KEY_JSON_PLACEHOLDER = `{
   "type": "service_account",
   "project_id": "fleet-in-your-calendar",
   "private_key_id": "<private key id>",
-  "private_key": "-----BEGIN PRIVATE KEY-----\n<private key>\n-----END PRIVATE KEY-----\n",
+  "private_key": "-----BEGIN PRIVATE KEY----\\n<private key>\\n-----END PRIVATE KEY-----\\n",
   "client_email": "fleet-calendar-events@fleet-in-your-calendar.iam.gserviceaccount.com",
   "client_id": "<client id>",
   "auth_uri": "https://accounts.google.com/o/oauth2/auth",
@@ -103,7 +103,14 @@ const Calendars = (): JSX.Element => {
       errors.apiKeyJson = "API key JSON must be present";
     }
     if (!curFormData.domain && !!curFormData.apiKeyJson) {
-      errors.apiKeyJson = "Domain must be present";
+      errors.domain = "Domain must be present";
+    }
+    if (curFormData.apiKeyJson) {
+      try {
+        JSON.parse(curFormData.apiKeyJson);
+      } catch (e) {
+        errors.apiKeyJson = e.message.toString();
+      }
     }
     return errors;
   };
@@ -277,6 +284,7 @@ const Calendars = (): JSX.Element => {
                     placeholder={API_KEY_JSON_PLACEHOLDER}
                     ignore1password
                     inputClassName={`${baseClass}__api-key-json`}
+                    error={formErrors.apiKeyJson}
                   />
                   <InputField
                     label="Primary domain"
@@ -301,6 +309,7 @@ const Calendars = (): JSX.Element => {
                         />
                       </>
                     }
+                    error={formErrors.domain}
                   />
                   <Button
                     type="submit"
diff --git a/tsconfig.json b/tsconfig.json
index 14ad4b5d2f6a..b1297c4d3950 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "lib": ["ES2021.String"]
+    "lib": ["ES2021.String"],
+    "useUnknownInCatchVariables": false
   },
   "include": ["./frontend/**/*"],
   "exclude": ["node_modules"],

From 5380129bc2f70e6e997e5668644b7ee643e3cf92 Mon Sep 17 00:00:00 2001
From: RachelElysia <rachel@fleetdm.com>
Date: Fri, 22 Mar 2024 10:31:49 -0400
Subject: [PATCH 2/3] Add new copy change, clean up spacing, darken oauth
 scopes

---
 .../admin/IntegrationsPage/cards/Calendars/Calendars.tsx    | 6 +++++-
 .../admin/IntegrationsPage/cards/Calendars/_styles.scss     | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index 90ad97ad933f..24b04a390a66 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -315,7 +315,7 @@ const Calendars = (): JSX.Element => {
                     type="submit"
                     variant="brand"
                     disabled={Object.keys(formErrors).length > 0}
-                    className="save-loading button-wrap"
+                    className="save-loading"
                     isLoading={isUpdatingSettings}
                   >
                     Save
@@ -387,6 +387,10 @@ const Calendars = (): JSX.Element => {
               </li>
             </ul>
           </p>
+          <p>
+            You&apos;re ready to automatically schedule calendar events for end
+            users.
+          </p>
         </div>
       </>
     );
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
index 7045a443ef2f..01db771e0054 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
@@ -4,6 +4,10 @@
     color: $core-fleet-black;
   }
 
+  p {
+    margin: $pad-large 0;
+  }
+
   ui {
     margin-block-start: $pad-small;
   }
@@ -30,6 +34,7 @@
 
   #oauth-scopes {
     font-family: "SourceCodePro", $monospace;
+    color: $core-fleet-black;
     min-height: 80px;
     padding: $pad-medium;
     padding-right: $pad-xxlarge;

From 53a7ab16c98738a7d9702fd99d362eba1e956757 Mon Sep 17 00:00:00 2001
From: RachelElysia <rachel@fleetdm.com>
Date: Fri, 22 Mar 2024 14:16:30 -0400
Subject: [PATCH 3/3] Refactor error handling to not be global

---
 .../cards/Calendars/Calendars.tsx              | 18 ++++++++++++++++--
 tsconfig.json                                  |  3 +--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index 24b04a390a66..da22ea4801a4 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -58,6 +58,16 @@ interface ICalendarsFormData {
   apiKeyJson?: string;
 }
 
+// Used to surface error.message in UI of unknown error type
+type ErrorWithMessage = {
+  message: string;
+  [key: string]: unknown;
+};
+
+const isErrorWithMessage = (error: unknown): error is ErrorWithMessage => {
+  return (error as ErrorWithMessage).message !== undefined;
+};
+
 const baseClass = "calendars-integration";
 
 const Calendars = (): JSX.Element => {
@@ -108,8 +118,12 @@ const Calendars = (): JSX.Element => {
     if (curFormData.apiKeyJson) {
       try {
         JSON.parse(curFormData.apiKeyJson);
-      } catch (e) {
-        errors.apiKeyJson = e.message.toString();
+      } catch (e: unknown) {
+        if (isErrorWithMessage(e)) {
+          errors.apiKeyJson = e.message.toString();
+        } else {
+          throw e;
+        }
       }
     }
     return errors;
diff --git a/tsconfig.json b/tsconfig.json
index b1297c4d3950..14ad4b5d2f6a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,8 +7,7 @@
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "lib": ["ES2021.String"],
-    "useUnknownInCatchVariables": false
+    "lib": ["ES2021.String"]
   },
   "include": ["./frontend/**/*"],
   "exclude": ["node_modules"],