From 2a8d84a0fe9f4c6a7853b49215eee58f9afc666e Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 28 Mar 2024 08:57:41 -0400
Subject: [PATCH] [tiny unreleased bugs] Fleet UI: Calendar feature calendar
 settings page (#17905)

---
 .../IntegrationsPage/cards/Calendars/Calendars.tsx   | 12 ++++++------
 .../IntegrationsPage/cards/Calendars/_styles.scss    |  5 +++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index e9f6ed57c9..019d5f192e 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -27,7 +27,7 @@ const GOOGLE_WORKSPACE_DOMAINS =
 const DOMAIN_WIDE_DELEGATION =
   "https://www.fleetdm.com/learn-more-about/domain-wide-delegation";
 const ENABLING_CALENDAR_API =
-  "fleetdm.com/learn-more-about/enabling-calendar-api";
+  "https://www.fleetdm.com/learn-more-about/enabling-calendar-api";
 const OAUTH_SCOPES =
   "https://www.googleapis.com/auth/calendar.events,https://www.googleapis.com/auth/calendar.settings.readonly";
 
@@ -112,10 +112,10 @@ const Calendars = (): JSX.Element => {
 
     // Must set all keys or no keys at all
     if (!curFormData.apiKeyJson && !!curFormData.domain) {
-      errors.apiKeyJson = "API key JSON must be present";
+      errors.apiKeyJson = "API key JSON must be completed";
     }
     if (!curFormData.domain && !!curFormData.apiKeyJson) {
-      errors.domain = "Domain must be present";
+      errors.domain = "Domain must be completed";
     }
     if (curFormData.apiKeyJson) {
       try {
@@ -167,11 +167,11 @@ const Calendars = (): JSX.Element => {
       await configAPI.update({ integrations: destination });
       renderFlash(
         "success",
-        "Successfully saved calendar integration settings"
+        "Successfully saved calendar integration settings."
       );
       refetchConfig();
     } catch (e) {
-      renderFlash("error", "Could not save calendar integration settings");
+      renderFlash("error", "Could not save calendar integration settings.");
     } finally {
       setIsUpdatingSettings(false);
     }
@@ -286,7 +286,7 @@ const Calendars = (): JSX.Element => {
           </p>
           <p className={`${baseClass}__configuration`}>
             5. Configure your service account integration in Fleet using the
-            form below:
+            form below.
             <ul>
               <li>
                 Paste the full contents of the JSON file downloaded when
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
index ffd30992ef..a3b2b7a8b7 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
@@ -12,6 +12,10 @@
     margin-block-start: $pad-small;
   }
 
+  ul {
+    margin: 0;
+  }
+
   li {
     margin: $pad-small 0;
   }
@@ -27,6 +31,7 @@
   }
 
   &__api-key-json {
+    font-family: "SourceCodePro", $monospace;
     min-width: 100%; // resize vertically only
     height: 294px;
     font-size: $x-small;