From 4e8696cb1d07fb43123796f88031774d02619e46 Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Fri, 18 Aug 2023 12:49:12 +0100 Subject: [PATCH] update windows auto enrollment page list items in UI (#13330) relates to #12606 this updates the styling of the list items on the windows automatic enrollment page. It pushes the wrapping text to the right side of the list number. **Before:** ![image](https://github.com/fleetdm/fleet/assets/1153709/44b8942e-eb89-4592-bd5a-ccb9a6a53fce) **After:** ![image](https://github.com/fleetdm/fleet/assets/1153709/7a0e6a0f-2807-4d28-97b0-788f391367cd) - [x] Manual QA for all new/changed functionality --- .../WindowsAutomaticEnrollmentPage.tsx | 168 ++++++++++++------ .../_styles.scss | 12 +- 2 files changed, 120 insertions(+), 60 deletions(-) diff --git a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx index 3aaddfaa22..3586ff29c8 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/WindowsAutomaticEnrollmentPage.tsx @@ -41,8 +41,12 @@ const WindowsAutomaticEnrollmentPage = () => { url="https://fleetdm.com/docs/using-fleet/windows-mdm-setup" />

+ {/* Ideally we'd use the native browser list styles and css to display + the list numbers but this does not allow us to style the list items as we'd + like so we write the numbers in the JSX instead. */}
  1. + 1. { />
  2. - Select Azure Active Directory > Custom domain names, then - select + Add custom domain, type your organization's - domain name (e.g. acme.com), and select Add domain. + 2. +

    + Select Azure Active Directory > Custom domain names, + then select + Add custom domain, type your + organization's domain name (e.g. acme.com), and select{" "} + Add domain. +

  3. - Use the information presented in Azure AD to create a new TXT/MX - record with your domain registrar, then select Verify. + 3. +

    + Use the information presented in Azure AD to create a new TXT/MX + record with your domain registrar, then select Verify. +

  4. - Select Azure Active Directory > Mobility (MDM and MAM) (or - search for “Mobility” at the top of the page). + 4. +

    + Select Azure Active Directory > Mobility (MDM and MAM){" "} + (or search for “Mobility” at the top of the page). +

  5. - Select + Add application, then select{" "} - + Create your own application. + 5. +

    + Select + Add application, then select{" "} + + Create your own application. +

  6. + 6. Enter “Fleet” as the name of your application and select{" "} Create.
  7. - Set MDM user scope to All, then copy the URLs below, paste - them in Azure AD, and select Save. -
    - - + 7. +
    +

    + Set MDM user scope to All, then copy the URLs below, + paste them in Azure AD, and select Save. +

    +
    + + +
  8. - Go back to Mobility (MDM and MAM), refresh the page, then - open newly created app and select{" "} - On-premises MDM application settings. + 8. +

    + Go back to Mobility (MDM and MAM), refresh the page, then + open newly created app and select{" "} + On-premises MDM application settings. +

  9. - Select the link under Application ID URI, then select{" "} - Edit button next to the Application ID URI input. + 9. +

    + Select the link under Application ID URI, then select{" "} + Edit button next to the Application ID URI input. +

  10. - Use your organization's domain you added in the first step, and - select Save. + 10. +

    + Use your organization's domain you added in the first step, + and select Save. +

  11. - Select API permissions from the sidebar, then select{" "} - + Add permissions. + 11. +

    + Select API permissions from the sidebar, then select{" "} + + Add permissions. +

  12. - Select Microsoft Graph, then select{" "} - Delegated permissions, and select{" "} - Group > Group.Read.All and{" "} - Group > Group.ReadWrite.All. + 12. +

    + Select Microsoft Graph, then select{" "} + Delegated permissions, and select{" "} + Group > Group.Read.All and{" "} + Group > Group.ReadWrite.All. +

  13. - Select Application permissions, then select following: -
      -
    • Device.Read.All
      • -
    • Device > Device.ReadWrite.All
      • -
    • Directory > Directory.Read.All
      • -
    • Group > Group.Read.All
      • -
    • User > User.Read.All
      • -
    + 13. +
    + Select Application permissions, then select following: +
      +
    • Device.Read.All
      • +
    • Device > Device.ReadWrite.All
      • +
    • Directory > Directory.Read.All
      • +
    • Group > Group.Read.All
      • +
    • User > User.Read.All
      • +
    +
  14. - Select Add permissions. + 14. +

    + Select Add permissions. +

  15. - Select Grant admin consent for <your tenant name>, and - confirm. + 15. +

    + Select Grant admin consent for <your tenant name>, + and confirm. +

  16. - You're ready to automatically enroll Windows hosts to Fleet. + 16. +

    + You're ready to automatically enroll Windows hosts to Fleet. +

diff --git a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/_styles.scss index 995198c7d2..d67d01b3fb 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/WindowsAutomaticEnrollmentPage/_styles.scss @@ -21,7 +21,17 @@ padding: 0; margin: 0; max-width: 660px; - list-style-position: inside; + list-style: none; + + li { + display: flex; + flex-direction: row; + gap: $pad-small; + + p { + margin: 0; + } + } } &__url-inputs-wrapper {