17445 calendar events modal (#17717)

Addresses #17445 

Follow-up iteration:
- Finalize styling of dropdown tooltips
- All `//TODO`s

<img width="1393" alt="Screenshot 2024-03-20 at 1 43 54 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9b792cf0-058a-4ae6-8f5f-a49eb936ebef">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 01 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/86195dcf-ec28-4cf0-ab8b-d785d12372ed">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 21 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/01effdec-ca20-49ec-a442-5fe754a5e12b">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b6de6891-6eae-426e-bbff-b01184094ac9">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 33 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/96e167dd-752c-4b49-a1a7-69fe9b4f42ac">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 43 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/feedbda5-e915-4e5e-84ee-2316db49434a">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 47 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/c4b5ac47-3357-43ef-95ca-dd0953994f6f">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 02 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/17838415-5bf4-46f0-9bde-522deb0f0886">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b7228484-bb9f-4119-9fbf-a60ce990ba0e">

---------

Co-authored-by: Jacob Shandling <[email protected]>

Author: 2 people

frontend/__mocks__/configMock.ts

@@ -76,6 +76,7 @@ const DEFAULT_CONFIG_MOCK: IConfig = {
   integrations: {
     jira: [],
     zendesk: [],
+    google_calendar: [],
   },
   logging: {
     debug: false,

frontend/__mocks__/policyMock.ts

@@ -22,6 +22,7 @@ const DEFAULT_POLICY_MOCK: IPolicyStats = {
   webhook: "Off",
   has_run: true,
   next_update_ms: 3600000,
+  calendar_events_enabled: true,
 };
 
 const createMockPolicy = (overrides?: Partial<IPolicyStats>): IPolicyStats => {

frontend/components/forms/FormField/FormField.tsx

@@ -3,6 +3,7 @@ import classnames from "classnames";
 import { isEmpty } from "lodash";
 
 import TooltipWrapper from "components/TooltipWrapper";
+import { PlacesType } from "react-tooltip-5";
 
 // all form-field styles are defined in _global.scss, which apply here and elsewhere
 const baseClass = "form-field";
@@ -16,6 +17,7 @@ export interface IFormFieldProps {
   name: string;
   type: string;
   tooltip?: React.ReactNode;
+  labelTooltipPosition?: PlacesType;
 }
 
 const FormField = ({
@@ -27,6 +29,7 @@ const FormField = ({
   name,
   type,
   tooltip,
+  labelTooltipPosition,
 }: IFormFieldProps): JSX.Element => {
   const renderLabel = () => {
     const labelWrapperClasses = classnames(`${baseClass}__label`, {
@@ -45,7 +48,10 @@ const FormField = ({
       >
         {error ||
           (tooltip ? (
-            <TooltipWrapper tipContent={tooltip}>
+            <TooltipWrapper
+              tipContent={tooltip}
+              position={labelTooltipPosition || "top-start"}
+            >
               {label as string}
             </TooltipWrapper>
           ) : (

frontend/components/forms/fields/InputField/InputField.jsx

@@ -33,6 +33,7 @@ class InputField extends Component {
     ]).isRequired,
     parseTarget: PropTypes.bool,
     tooltip: PropTypes.string,
+    labelTooltipPosition: PropTypes.string,
     helpText: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
@@ -55,6 +56,7 @@ class InputField extends Component {
     value: "",
     parseTarget: false,
     tooltip: "",
+    labelTooltipPosition: "",
     helpText: "",
     enableCopy: false,
     ignore1password: false,
@@ -124,6 +126,7 @@ class InputField extends Component {
       "error",
       "name",
       "tooltip",
+      "labelTooltipPosition",
     ]);
 
     const copyValue = (e) => {

frontend/components/forms/fields/Slider/Slider.tsx

@@ -6,7 +6,10 @@ import FormField from "components/forms/FormField";
 import { IFormFieldProps } from "components/forms/FormField/FormField";
 
 interface ISliderProps {
-  onChange: () => void;
+  onChange: (newValue?: {
+    name: string;
+    value: string | number | boolean;
+  }) => void;
   value: boolean;
   inactiveText: string;
   activeText: string;

frontend/components/graphics/CalendarEventPreview.tsx

@@ -17,6 +17,7 @@ import EmptyTeams from "./EmptyTeams";
 import EmptyPacks from "./EmptyPacks";
 import EmptySchedule from "./EmptySchedule";
 import CollectingResults from "./CollectingResults";
+import CalendarEventPreview from "./CalendarEventPreview";
 
 export const GRAPHIC_MAP = {
   // Empty state graphics
@@ -41,6 +42,7 @@ export const GRAPHIC_MAP = {
   "file-pem": FilePem,
   // Other graphics
   "collecting-results": CollectingResults,
+  "calendar-event-preview": CalendarEventPreview,
 };
 
 export type GraphicNames = keyof typeof GRAPHIC_MAP;

frontend/components/graphics/index.ts

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+import { IPolicy } from "interfaces/policy";
+
+interface ICheckedPolicy {
+  name?: string;
+  id: number;
+  isChecked: boolean;
+}
+
+const useCheckboxListStateManagement = (
+  allPolicies: IPolicy[],
+  automatedPolicies: number[] | undefined
+) => {
+  const [policyItems, setPolicyItems] = useState<ICheckedPolicy[]>(() => {
+    return allPolicies.map(({ name, id }) => ({
+      name,
+      id,
+      isChecked: !!automatedPolicies?.includes(id),
+    }));
+  });
+
+  const updatePolicyItems = (policyId: number) => {
+    setPolicyItems((prevItems) =>
+      prevItems.map((policy) =>
+        policy.id !== policyId
+          ? policy
+          : { ...policy, isChecked: !policy.isChecked }
+      )
+    );
+  };
+
+  return { policyItems, updatePolicyItems };
+};
+
+export default useCheckboxListStateManagement;

frontend/hooks/useCheckboxListStateManagement.tsx

@@ -4,7 +4,7 @@ import {
   IWebhookFailingPolicies,
   IWebhookSoftwareVulnerabilities,
 } from "interfaces/webhook";
-import { IIntegrations } from "./integration";
+import { IGlobalIntegrations } from "./integration";
 
 export interface ILicense {
   tier: string;
@@ -175,7 +175,7 @@ export interface IConfig {
   //   databases_path: string;
   // };
   webhook_settings: IWebhookSettings;
-  integrations: IIntegrations;
+  integrations: IGlobalIntegrations;
   logging: {
     debug: boolean;
     json: boolean;

frontend/interfaces/config.ts

@@ -60,7 +60,31 @@ export interface IIntegrationFormErrors {
   enableSoftwareVulnerabilities?: boolean;
 }
 
+export interface IGlobalCalendarIntegration {
+  email: string;
+  private_key: string;
+  domain: string;
+}
+
+interface ITeamCalendarSettings {
+  enable_calendar_events: boolean;
+  webhook_url: string;
+}
+
+// zendesk and jira fields are coupled – if one is present, the other needs to be present. If
+// one is present and the other is null/missing, the other will be nullified. google_calendar is
+// separated – it can be present without the other 2 without nullifying them.
+// TODO:  Update these types to reflect this.
+
 export interface IIntegrations {
   zendesk: IZendeskIntegration[];
   jira: IJiraIntegration[];
 }
+
+export interface IGlobalIntegrations extends IIntegrations {
+  google_calendar?: IGlobalCalendarIntegration[] | null;
+}
+
+export interface ITeamIntegrations extends IIntegrations {
+  google_calendar?: ITeamCalendarSettings | null;
+}

frontend/interfaces/integration.ts

@@ -40,6 +40,7 @@ export interface IPolicy {
   created_at: string;
   updated_at: string;
   critical: boolean;
+  calendar_events_enabled: boolean;
 }
 
 // Used on the manage hosts page and other places where aggregate stats are displayed
@@ -90,6 +91,7 @@ export interface IPolicyFormData {
   query?: string | number | boolean | undefined;
   team_id?: number;
   id?: number;
+  calendar_events_enabled?: boolean;
 }
 
 export interface IPolicyNew {

frontend/interfaces/policy.ts

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { IConfigFeatures, IWebhookSettings } from "./config";
 import enrollSecretInterface, { IEnrollSecret } from "./enroll_secret";
-import { IIntegrations } from "./integration";
+import { ITeamIntegrations } from "./integration";
 import { UserRole } from "./user";
 
 export default PropTypes.shape({
@@ -82,7 +82,7 @@ export type ITeamWebhookSettings = Pick<
  */
 export interface ITeamAutomationsConfig {
   webhook_settings: ITeamWebhookSettings;
-  integrations: IIntegrations;
+  integrations: ITeamIntegrations;
 }
 
 /**

frontend/interfaces/team.ts

@@ -1,104 +1,9 @@
 .host-actions-dropdown {
-  .form-field {
-    margin: 0;
+  @include button-dropdown;
+  .Select-multi-value-wrapper {
+    width: 55px;
   }
-
-  .Select {
-    position: relative;
-    border: 0;
-    height: auto;
-
-    &.is-focused,
-    &:hover {
-      border: 0;
-    }
-
-    &.is-focused:not(.is-open) {
-      .Select-control {
-        background-color: initial;
-      }
-    }
-
-    .Select-control {
-      display: flex;
-      background-color: initial;
-      height: auto;
-      justify-content: space-between;
-      border: 0;
-      cursor: pointer;
-
-      &:hover {
-        box-shadow: none;
-      }
-
-      &:hover .Select-placeholder {
-        color: $core-vibrant-blue;
-      }
-
-      .Select-placeholder {
-        color: $core-fleet-black;
-        font-size: 14px;
-        line-height: normal;
-        padding-left: 0;
-        margin-top: 1px;
-      }
-
-      .Select-input {
-        height: auto;
-      }
-
-      .Select-arrow-zone {
-        display: flex;
-      }
-    }
-
-    .Select-multi-value-wrapper {
-      width: 55px;
-    }
-
-    .Select-placeholder {
-      display: flex;
-      align-items: center;
-    }
-
-    .Select-menu-outer {
-      margin-top: $pad-xsmall;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-      border-radius: $border-radius;
-      z-index: 6;
-      overflow: hidden;
-      border: 0;
-      width: 188px;
-      left: unset;
-      top: unset;
-      max-height: none;
-      padding: $pad-small;
-      position: absolute;
-      left: -120px;
-
-      .Select-menu {
-        max-height: none;
-      }
-    }
-
-    .Select-arrow {
-      transition: transform 0.25s ease;
-    }
-
-    &:not(.is-open) {
-      .Select-control:hover .Select-arrow {
-        content: url("../assets/images/[email protected]");
-      }
-    }
-
-    &.is-open {
-      .Select-control .Select-placeholder {
-        color: $core-vibrant-blue;
-      }
-
-      .Select-arrow {
-        transform: rotate(180deg);
-      }
-    }
+  .Select > .Select-menu-outer {
+    left: -120px;
   }
 }

frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/_styles.scss

@@ -13,7 +13,6 @@ import { QueryContext } from "context/query";
 import { NotificationContext } from "context/notification";
 
 import activitiesAPI, {
-  IActivitiesResponse,
   IPastActivitiesResponse,
   IUpcomingActivitiesResponse,
 } from "services/entities/activities";