add startup assistant to the UI

frontend/__mocks__/configMock.ts

@@ -145,6 +145,7 @@ const DEFAULT_CONFIG_MOCK: IConfig = {
       bootstrap_package: "",
       enable_end_user_authentication: false,
       macos_setup_assistant: null,
+      enable_release_device_manually: false,
     },
     macos_migration: {
       enable: false,

frontend/components/Card/Card.tsx

@@ -8,14 +8,20 @@ type CardColor = "white" | "gray" | "purple" | "yellow";
 
 interface ICardProps {
   children?: React.ReactNode;
-  /** The size of the border radius. Defaults to `small` */
+  /** The size of the border radius. Defaults to `small`. */
   borderRadiusSize?: BorderRadiusSize;
   /** Includes the card shadows. Defaults to `false` */
   includeShadow?: boolean;
   /** The color of the card. Defaults to `white` */
   color?: CardColor;
   className?: string;
-  /** Increases to 40px padding. Defaults to `false` */
+  /** The size of the padding around the content of the card. Defaults to `large`.
+   *
+   * These correspond to the padding sizes in the design system. Look at `padding.scss` for values */
+  paddingSize?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
+  /** NOTE: DEPRICATED. Use `paddingSize` prop instead.
+   *
+   * Increases to 40px padding. Defaults to `false` */
   largePadding?: boolean;
 }
 
@@ -30,12 +36,16 @@ const Card = ({
   color = "white",
   className,
   largePadding = false,
+  paddingSize = "large",
 }: ICardProps) => {
   const classNames = classnames(
     baseClass,
     `${baseClass}__${color}`,
     `${baseClass}__radius-${borderRadiusSize}`,
     {
+      // TODO: simplify this when we've replaced largePadding prop with paddingSize
+      [`${baseClass}__padding-${paddingSize}`]:
+        !largePadding && paddingSize !== undefined,
       [`${baseClass}__shadow`]: includeShadow,
       [`${baseClass}__large-padding`]: largePadding,
     },

frontend/components/Card/_styles.scss

@@ -22,7 +22,29 @@
     box-shadow: $box-shadow;
   }
 
+  &__padding-small {
+    padding: $pad-small;
+  }
+
+  &__padding-medium {
+    padding: $pad-medium;
+  }
+
+  &__padding-large {
+    padding: $pad-large;
+  }
+
+  &__padding-xlarge {
+    padding: $pad-xlarge;
+  }
+
+  &__padding-xxlarge {
+    padding: $pad-xxlarge;
+  }
+
   // 40px padding
+  // TODO: remove when we've replaced all instances of largePadding with
+  // paddingSize prop
   &__large-padding {
     padding: $pad-xxlarge;
   }

frontend/components/FileUploader/FileUploader.tsx

@@ -32,6 +32,8 @@ interface IFileUploaderProps {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
    */
   accept?: string;
+  /** The text to display on the upload button */
+  buttonMessage?: string;
   className?: string;
   onFileUpload: (files: FileList | null) => void;
 }
@@ -45,6 +47,7 @@ const FileUploader = ({
   additionalInfo,
   isLoading = false,
   accept,
+  buttonMessage = "Upload",
   className,
   onFileUpload,
 }: IFileUploaderProps) => {
@@ -73,7 +76,7 @@ const FileUploader = ({
         variant="brand"
         isLoading={isLoading}
       >
-        <label htmlFor="upload-profile">Upload</label>
+        <label htmlFor="upload-profile">{buttonMessage}</label>
       </Button>
       <input
         accept={accept}

frontend/components/FileUploader/_styles.scss

@@ -30,12 +30,12 @@
 
   &__upload-button {
     margin-top: 8px;
+    // we handle the padding in the label so the entire button is clickable
     padding: 0;
   }
 
   label {
-    height: 36px;
-    width: 78.2667px;
+    padding: $pad-small $pad-medium;
     display: flex;
     align-items: center;
     justify-content: center;

frontend/interfaces/config.ts

@@ -48,6 +48,7 @@ export interface IMdmConfig {
     bootstrap_package: string | null;
     enable_end_user_authentication: boolean;
     macos_setup_assistant: string | null;
+    enable_release_device_manually: boolean | null;
   };
   macos_migration: IMacOsMigrationSettings;
   windows_updates: {

frontend/interfaces/team.ts

@@ -56,7 +56,8 @@ export interface ITeam extends ITeamSummary {
     macos_setup: {
       bootstrap_package: string | null;
       enable_end_user_authentication: boolean;
-      macos_setup_assistant: string | null; // TODO: types?
+      macos_setup_assistant: string | null;
+      enable_release_device_manually: boolean | null;
     };
     windows_updates: {
       deadline_days: number | null;

frontend/pages/ManageControlsPage/SetupExperience/SetupExperienceNavItems.tsx

@@ -4,6 +4,7 @@ import { ISideNavItem } from "pages/admin/components/SideNav/SideNav";
 
 import EndUserAuthentication from "./cards/EndUserAuthentication/EndUserAuthentication";
 import BootstrapPackage from "./cards/BootstrapPackage";
+import SetupAssistant from "./cards/SetupAssistant";
 
 interface ISetupExperienceCardProps {
   currentTeamId?: number;
@@ -25,6 +26,12 @@ const SETUP_EXPERIENCE_NAV_ITEMS: ISideNavItem<
     path: PATHS.CONTROLS_BOOTSTRAP_PACKAGE,
     Card: BootstrapPackage,
   },
+  {
+    title: "Setup assistant",
+    urlSection: "setup-assistant",
+    path: PATHS.CONTROLS_SETUP_ASSITANT,
+    Card: SetupAssistant,
+  },
 ];
 
 export default SETUP_EXPERIENCE_NAV_ITEMS;

frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapPackagePreview/_styles.scss

@@ -6,7 +6,9 @@
   font-size: $x-small;
 
   h2 {
-    font-size: $x-small; // needed to override global h2 style
+    margin: 0;
+    font-size: $small;
+    font-weight: normal;
   }
 
   &__preview-img {

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/SetupAssistant.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { useQuery } from "react-query";
+import { AxiosError } from "axios";
+
+import { IConfig } from "interfaces/config";
+import { API_NO_TEAM_ID, ITeamConfig } from "interfaces/team";
+import configAPI from "services/entities/config";
+import teamsAPI, { ILoadTeamResponse } from "services/entities/teams";
+import mdmAPI, {
+  IAppleSetupEnrollmentProfileResponse,
+} from "services/entities/mdm";
+import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
+
+import SectionHeader from "components/SectionHeader";
+import Spinner from "components/Spinner";
+import CustomLink from "components/CustomLink";
+
+import SetupAssistantPreview from "./components/SetupAssistantPreview";
+import SetupAssistantProfileUploader from "./components/SetupAssistantProfileUploader";
+import SetuAssistantProfileCard from "./components/SetupAssistantProfileCard/SetupAssistantProfileCard";
+import DeleteAutoEnrollmentProfile from "./components/DeleteAutoEnrollmentProfile";
+import AdvancedOptionsForm from "./components/AdvancedOptionsForm";
+
+const baseClass = "setup-assistant";
+
+interface ISetupAssistantProps {
+  currentTeamId: number;
+}
+
+const StartupAssistant = ({ currentTeamId }: ISetupAssistantProps) => {
+  const [showDeleteProfileModal, setShowDeleteProfileModal] = useState(false);
+
+  const { data: globalConfig, isLoading: isLoadingGlobalConfig } = useQuery<
+    IConfig,
+    Error
+  >(["config", currentTeamId], () => configAPI.loadAll(), {
+    enabled: currentTeamId === API_NO_TEAM_ID,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+
+  const { data: teamConfig, isLoading: isLoadingTeamConfig } = useQuery<
+    ILoadTeamResponse,
+    Error,
+    ITeamConfig
+  >(["team", currentTeamId], () => teamsAPI.load(currentTeamId), {
+    refetchOnWindowFocus: false,
+    retry: false,
+    enabled: currentTeamId !== API_NO_TEAM_ID,
+    select: (res) => res.team,
+  });
+
+  const {
+    data: enrollmentProfileData,
+    isLoading: isLoadingEnrollmentProfile,
+    isError: isErrorEnrollmentProfile,
+    error: enrollmentProfileError,
+    refetch: refetchEnrollmentProfile,
+  } = useQuery<IAppleSetupEnrollmentProfileResponse, AxiosError>(
+    ["enrollment_profile", currentTeamId],
+    () => mdmAPI.getSetupEnrollmentProfile(currentTeamId),
+    {
+      ...DEFAULT_USE_QUERY_OPTIONS,
+      retry: false,
+    }
+  );
+
+  const getReleaseDeviceSetting = () => {
+    if (currentTeamId === API_NO_TEAM_ID) {
+      return (
+        globalConfig?.mdm.macos_setup.enable_release_device_manually || false
+      );
+    }
+    return teamConfig?.mdm?.macos_setup.enable_release_device_manually || false;
+  };
+
+  const onUpload = () => {
+    refetchEnrollmentProfile();
+  };
+
+  const onDelete = () => {
+    setShowDeleteProfileModal(false);
+    refetchEnrollmentProfile();
+  };
+
+  const defaultReleaseDeviceSetting = getReleaseDeviceSetting();
+
+  const isLoading =
+    isLoadingGlobalConfig || isLoadingTeamConfig || isLoadingEnrollmentProfile;
+  const enrollmentProfileNotFound = enrollmentProfileError?.status === 404;
+
+  return (
+    <div className={baseClass}>
+      <SectionHeader title="Setup assistant" />
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        <div className={`${baseClass}__content`}>
+          <div className={`${baseClass}__upload-container`}>
+            <p className={`${baseClass}__section-description`}>
+              Add an automatic enrollment profile to customize the macOS Setup
+              Assistant.
+              <CustomLink
+                url=" https://fleetdm.com/learn-more-about/setup-assistant"
+                text="Learn how"
+                newTab
+              />
+            </p>
+            {enrollmentProfileNotFound || !enrollmentProfileData ? (
+              <SetupAssistantProfileUploader
+                currentTeamId={currentTeamId}
+                onUpload={onUpload}
+              />
+            ) : (
+              <SetuAssistantProfileCard
+                profile={enrollmentProfileData}
+                onDelete={() => setShowDeleteProfileModal(true)}
+              />
+            )}
+            <AdvancedOptionsForm
+              key={String(defaultReleaseDeviceSetting)}
+              currentTeamId={currentTeamId}
+              defaultReleaseDevice={defaultReleaseDeviceSetting}
+            />
+          </div>
+          <div className={`${baseClass}__preview-container`}>
+            <SetupAssistantPreview />
+          </div>
+        </div>
+      )}
+      {showDeleteProfileModal && (
+        <DeleteAutoEnrollmentProfile
+          currentTeamId={currentTeamId}
+          onDelete={onDelete}
+          onCancel={() => setShowDeleteProfileModal(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default StartupAssistant;

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/_styles.scss

@@ -0,0 +1,25 @@
+.setup-assistant {
+  &__content {
+    max-width: $break-xxl;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    gap: $pad-xxlarge;
+  }
+
+  &__upload-container {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-large;
+  }
+
+  &__section-description {
+    margin: 0;
+  }
+
+  @media (max-width: $break-md) {
+    &__content {
+      flex-direction: column;
+    }
+  }
+}