Fleet UI: Calendar settings page (#17593)

Author: RachelElysia

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -51,12 +51,7 @@
   }
 
   &__copy-message {
-    font-weight: $regular;
-    vertical-align: top;
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
+    @include copy-message;
   }
 
   .buttons {
@@ -122,9 +117,6 @@
   }
 
   &__copy-message {
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
+    @include copy-message;
   }
 }

frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss

@@ -40,10 +40,7 @@
   }
 
   &__copy-message {
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
+    @include copy-message;
   }
 
   &__action-overlay {

frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss

@@ -43,9 +43,6 @@
   }
 
   &__copy-message {
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
+    @include copy-message;
   }
 }

frontend/interfaces/integration.ts

@@ -61,9 +61,8 @@ export interface IIntegrationFormErrors {
 }
 
 export interface IGlobalCalendarIntegration {
-  email: string;
-  private_key: string;
   domain: string;
+  api_key_json: string;
 }
 
 interface ITeamCalendarSettings {

frontend/pages/AccountPage/APITokenModal/TokenSecretField/_styles.scss

@@ -31,12 +31,7 @@
   }
 
   &__copy-message {
-    font-weight: $regular;
-    vertical-align: top;
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: 10px;
-    padding: 2px 6px;
+    @include copy-message;
   }
 
   &__secret-download-icon {

frontend/pages/SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx

@@ -8,7 +8,7 @@ import {
   IJiraIntegration,
   IZendeskIntegration,
   IIntegration,
-  IIntegrations,
+  IGlobalIntegrations,
   IIntegrationType,
 } from "interfaces/integration";
 import {
@@ -124,7 +124,7 @@ const ManageAutomationsModal = ({
     }
   }, [destinationUrl]);
 
-  const { data: integrations } = useQuery<IConfig, Error, IIntegrations>(
+  const { data: integrations } = useQuery<IConfig, Error, IGlobalIntegrations>(
     ["integrations"],
     () => configAPI.loadAll(),
     {

frontend/pages/admin/IntegrationsPage/IntegrationNavItems.tsx

@@ -4,32 +4,34 @@ import { ISideNavItem } from "../components/SideNav/SideNav";
 import Integrations from "./cards/Integrations";
 import Mdm from "./cards/MdmSettings/MdmSettings";
 import AutomaticEnrollment from "./cards/AutomaticEnrollment/AutomaticEnrollment";
+import Calendars from "./cards/Calendars/Calendars";
 
-const getFilteredIntegrationSettingsNavItems = (
-  isSandboxMode = false
-): ISideNavItem<any>[] => {
-  return [
-    // TODO: types
-    {
-      title: "Ticket destinations",
-      urlSection: "ticket-destinations",
-      path: PATHS.ADMIN_INTEGRATIONS_TICKET_DESTINATIONS,
-      Card: Integrations,
-    },
-    {
-      title: "Mobile device management (MDM)",
-      urlSection: "mdm",
-      path: PATHS.ADMIN_INTEGRATIONS_MDM,
-      Card: Mdm,
-      exclude: isSandboxMode,
-    },
-    {
-      title: "Automatic enrollment",
-      urlSection: "automatic-enrollment",
-      path: PATHS.ADMIN_INTEGRATIONS_AUTOMATIC_ENROLLMENT,
-      Card: AutomaticEnrollment,
-    },
-  ].filter((navItem) => !navItem.exclude);
-};
+const integrationSettingsNavItems: ISideNavItem<any>[] = [
+  // TODO: types
+  {
+    title: "Ticket destinations",
+    urlSection: "ticket-destinations",
+    path: PATHS.ADMIN_INTEGRATIONS_TICKET_DESTINATIONS,
+    Card: Integrations,
+  },
+  {
+    title: "Mobile device management (MDM)",
+    urlSection: "mdm",
+    path: PATHS.ADMIN_INTEGRATIONS_MDM,
+    Card: Mdm,
+  },
+  {
+    title: "Automatic enrollment",
+    urlSection: "automatic-enrollment",
+    path: PATHS.ADMIN_INTEGRATIONS_AUTOMATIC_ENROLLMENT,
+    Card: AutomaticEnrollment,
+  },
+  {
+    title: "Calendars",
+    urlSection: "calendars",
+    path: PATHS.ADMIN_INTEGRATIONS_CALENDARS,
+    Card: Calendars,
+  },
+];
 
-export default getFilteredIntegrationSettingsNavItems;
+export default integrationSettingsNavItems;

frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -1,9 +1,8 @@
-import { AppContext } from "context/app";
-import React, { useContext } from "react";
+import React from "react";
 import { InjectedRouter, Params } from "react-router/lib/Router";
 
 import SideNav from "../components/SideNav";
-import getFilteredIntegrationSettingsNavItems from "./IntegrationNavItems";
+import integrationSettingsNavItems from "./IntegrationNavItems";
 
 const baseClass = "integrations";
 
@@ -16,9 +15,8 @@ const IntegrationsPage = ({
   router,
   params,
 }: IIntegrationSettingsPageProps) => {
-  const { isSandboxMode } = useContext(AppContext);
   const { section } = params;
-  const navItems = getFilteredIntegrationSettingsNavItems(isSandboxMode);
+  const navItems = integrationSettingsNavItems;
   const DEFAULT_SETTINGS_SECTION = navItems[0];
   const currentSection =
     navItems.find((item) => item.urlSection === section) ??