diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx index da22ea4801a4..e9f6ed57c9d5 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx @@ -7,6 +7,7 @@ import { AppContext } from "context/app"; import configAPI from "services/entities/config"; // @ts-ignore import { stringToClipboard } from "utilities/copy_text"; +import paths from "router/paths"; // @ts-ignore import InputField from "components/forms/fields/InputField"; @@ -17,6 +18,7 @@ import Spinner from "components/Spinner"; import DataError from "components/DataError"; import PremiumFeatureMessage from "components/PremiumFeatureMessage/PremiumFeatureMessage"; import Icon from "components/Icon"; +import Card from "components/Card"; const CREATING_SERVICE_ACCOUNT = "https://www.fleetdm.com/learn-more-about/creating-service-accounts"; @@ -236,6 +238,9 @@ const Calendars = (): JSX.Element => { For "Organization" and "Location", select your calendar's organization. +
  • + Click Create. +
  • @@ -277,69 +282,72 @@ const Calendars = (): JSX.Element => {
  • Click Create to create the key & download a JSON file.
  • -
  • - Configure your service account integration in Fleet using the - form below: -
    - - Paste the full contents of the JSON file downloaded{" "} -
    - when creating your service account API key. - - } - placeholder={API_KEY_JSON_PLACEHOLDER} - ignore1password - inputClassName={`${baseClass}__api-key-json`} - error={formErrors.apiKeyJson} - /> - - If the end user is signed into multiple Google accounts, - this will be used to identify their work calendar. - - } - placeholder="example.com" - helpText={ - <> - You can find your primary domain in Google Workspace{" "} - - - } - error={formErrors.domain} - /> - - + +

    +

    + 5. Configure your service account integration in Fleet using the + form below: +

      +
    • + Paste the full contents of the JSON file downloaded when + creating your service account API key. +
    • +
    • + Set your primary domain. (If the end user is signed into + multiple Google accounts, this will be used to identify their + work calendar.) +
    • +
    • + Save your changes. + +
      + + + You can find your primary domain in Google Workspace{" "} + + + } + error={formErrors.domain} + /> + + +

    - 5. Authorize the service account via domain-wide delegation. + 6. Authorize the service account via domain-wide delegation.

    • In Google Workspace, go to{" "} @@ -381,7 +389,7 @@ const Calendars = (): JSX.Element => {

    - 6. Enable the Google Calendar API. + 7. Enable the Google Calendar API.

    • In the Google Cloud console API library, go to the Google @@ -402,8 +410,12 @@ const Calendars = (): JSX.Element => {

    - You're ready to automatically schedule calendar events for end - users. + Now head over to{" "} + {" "} + to finish setup.

    diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss index 01db771e0054..ffd30992ef79 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss @@ -16,8 +16,8 @@ margin: $pad-small 0; } - form { - margin-top: $pad-large; + .card { + margin-top: $pad-small; } &__configuration {