Add error handling for invalid JSON, escape characters from placeholder text

Author: RachelElysia

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"

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"],