[DRAFT] Fleet UI: Add certificates (SCEP/NDES) section to integrations settings

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx

@@ -17,6 +17,7 @@ import VppSection from "./components/VppSection";
 import IdpSection from "./components/IdpSection";
 import EulaSection from "./components/EulaSection";
 import EndUserMigrationSection from "./components/EndUserMigrationSection";
+import ScepSection from "./components/CertificatesSection/CertificatesSection";
 
 const baseClass = "mdm-settings";
 
@@ -130,6 +131,11 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => {
             isVppOn={!noVppTokenUploaded}
             isPremiumTier={!!isPremiumTier}
           />
+          <ScepSection
+            router={router}
+            isScepOn={!noVppTokenUploaded} // TODO
+            isPremiumTier={!!isPremiumTier}
+          />
           {isPremiumTier && !!config?.mdm.apple_bm_enabled_and_configured && (
             <>
               <IdpSection />

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/_styles.scss

@@ -1,19 +1,5 @@
 .mdm-settings {
   display: flex;
   flex-direction: column;
-  gap: 80px;
-
-  &__section {
-    .mdm-settings-team-btn {
-      margin-left: 12px;
-
-      .children-wrapper {
-        gap: $pad-small;
-      }
-    }
-
-    .component__tooltip-wrapper__tip-text {
-      max-width: initial;
-    }
-  }
+  gap: $pad-xxxlarge;
 }

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AutomaticEnrollmentSection/AppleAutomaticEnrollmentCard/AppleAutomaticEnrollmentCard.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
-import Card from "components/Card";
 import Button from "components/buttons/Button";
 import Icon from "components/Icon/Icon";
 
-const baseClass = "automatic-enrollment-card";
+import SectionCard from "../../SectionCard";
 
 interface IAppleAutomaticEnrollmentCardProps {
   isAppleMdmOn: boolean;
@@ -17,52 +16,51 @@ const AppleAutomaticEnrollmentCard = ({
   viewDetails,
   configured,
 }: IAppleAutomaticEnrollmentCardProps) => {
-  let icon = "";
-  let msg =
-    "To enable automatic enrollment for macOS, iOS, and iPadOS hosts, first turn on Apple MDM.";
-  if (isAppleMdmOn && !configured) {
-    msg =
-      "Add an Apple Business Manager (ABM) connection to automatically enroll newly " +
-      "purchased Apple hosts when they're first unboxed and set up by your end users.";
-  } else if (isAppleMdmOn && configured) {
-    msg = "Automatic enrollment for Apple (macOS, iOS, iPadOS) is enabled.";
-    icon = "success";
-  }
+  const appleMdmDiabledCard = (
+    <SectionCard header="Automatic enrollment for Apple (macOS, iOS, iPadOS) hosts.">
+      To enable automatic enrollment for macOS, iOS, and iPadOS hosts, first
+      turn on Apple MDM.
+    </SectionCard>
+  );
+
+  const isAbmConfiguredCard = (
+    <SectionCard
+      iconName="success"
+      cta={
+        <Button onClick={viewDetails} variant="text-icon">
+          <Icon name="pencil" />
+          Edit
+        </Button>
+      }
+    >
+      Automatic enrollment for Apple (macOS, iOS, iPadOS) is enabled.
+    </SectionCard>
+  );
 
-  return (
-    <Card className={baseClass} color="gray">
-      <div>
-        {!icon && (
-          <h3>Automatic enrollment for Apple (macOS, iOS, iPadOS) hosts.</h3>
-        )}
-        <p>
-          {icon ? (
-            <span>
-              <Icon name="success" />
-              {msg}
-            </span>
-          ) : (
-            msg
-          )}
-        </p>
-      </div>
-      {isAppleMdmOn && !configured && (
+  const isAbmNotConfiguredCard = (
+    <SectionCard
+      header="Automatic enrollment for Apple (macOS, iOS, iPadOS) hosts."
+      cta={
         <Button
           className="add-abm-button"
           onClick={viewDetails}
           variant="brand"
         >
           Add ABM
         </Button>
-      )}
-      {isAppleMdmOn && configured && (
-        <Button onClick={viewDetails} variant="text-icon">
-          <Icon name="pencil" />
-          Edit
-        </Button>
-      )}
-    </Card>
+      }
+    >
+      Add an Apple Business Manager (ABM) connection to automatically enroll
+      newly purchased Apple hosts when they&apos;re first unboxed and set up by
+      your end users.
+    </SectionCard>
   );
+
+  if (!isAppleMdmOn) {
+    return appleMdmDiabledCard;
+  }
+
+  return configured ? isAbmConfiguredCard : isAbmNotConfiguredCard;
 };
 
 export default AppleAutomaticEnrollmentCard;

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AutomaticEnrollmentSection/WindowsAutomaticEnrollmentCard/WindowsAutomaticEnrollmentCard.tsx

@@ -1,10 +1,8 @@
 import React from "react";
 
-import Card from "components/Card";
 import Button from "components/buttons/Button";
 import Icon from "components/Icon/Icon";
-
-const baseClass = "automatic-enrollment-card";
+import SectionCard from "../../SectionCard";
 
 interface IWindowsAutomaticEnrollmentCardProps {
   viewDetails: () => void;
@@ -14,22 +12,21 @@ const WindowsAutomaticEnrollmentCard = ({
   viewDetails,
 }: IWindowsAutomaticEnrollmentCardProps) => {
   return (
-    <Card className={baseClass} color="gray">
-      <div>
-        <h3>Windows automatic enrollment</h3>
-        <p>
-          To use automatic enrollment for Windows hosts and Windows Autopilot
-          you need to connect Fleet to Azure AD first.
-        </p>
-      </div>
-      <Button
-        className="windows-details-button"
-        onClick={viewDetails}
-        variant="text-icon"
-      >
-        Details <Icon name="chevron-right" color="core-fleet-blue" />
-      </Button>
-    </Card>
+    <SectionCard
+      header="Windows automatic enrollment"
+      cta={
+        <Button
+          className="windows-details-button"
+          onClick={viewDetails}
+          variant="text-icon"
+        >
+          Details <Icon name="chevron-right" color="core-fleet-blue" />
+        </Button>
+      }
+    >
+      To use automatic enrollment for Windows hosts and Windows Autopilot you
+      need to connect Fleet to Azure AD first.
+    </SectionCard>
   );
 };
 

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AutomaticEnrollmentSection/_styles.scss

@@ -3,34 +3,5 @@
     display: flex;
     flex-direction: column;
     gap: $pad-xxlarge;
-
-    // styles for the apple and windows automatic enrollment cards.
-    .automatic-enrollment-card {
-      font-size: $x-small;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: $pad-medium;
-
-      h3 {
-        font-size: $x-small;
-        font-weight: $bold;
-        margin: 0 0 $pad-xsmall;
-      }
-
-      p {
-        margin: 0;
-
-        span {
-          display: flex;
-          align-items: center;
-          gap: $pad-small;
-        }
-      }
-
-      .add-abm-button {
-        white-space: nowrap;
-      }
-    }
   }
 }

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/CertificatesSection/CertificatesSection.tsx

@@ -0,0 +1,120 @@
+import React, { useContext } from "react";
+import { InjectedRouter } from "react-router";
+
+import PATHS from "router/paths";
+import { AppContext } from "context/app";
+
+import Button from "components/buttons/Button";
+import Icon from "components/Icon";
+
+import SettingsSection from "pages/admin/components/SettingsSection";
+import PremiumFeatureMessage from "components/PremiumFeatureMessage";
+import SectionCard from "../SectionCard";
+
+const baseClass = "certificates-section";
+
+interface IScepCardProps {
+  isAppleMdmOn: boolean;
+  isScepOn: boolean;
+  router: InjectedRouter;
+}
+
+const ScepCard = ({ isAppleMdmOn, isScepOn, router }: IScepCardProps) => {
+  const navigateToScepSetup = () => {
+    router.push(PATHS.ADMIN_INTEGRATIONS_SCEP_SETUP);
+  };
+
+  const appleMdmDiabledCard = (
+    <SectionCard header="Simple Certificate Enrollment Protocol (SCEP)">
+      <p>
+        To enable Fleet to get SCEP certificates from your custom SCEP server
+        and install them on macOS hosts, first turn on Apple (macOS, iOS,
+        iPadOS) MDM.
+      </p>
+      <p>
+        Fleet currently supports Microsoft&apos;s Network Device Enrollment
+        Service (NDES) as a custom SCEP server.
+      </p>
+    </SectionCard>
+  );
+
+  const isScepOnCard = (
+    <SectionCard
+      iconName="success"
+      cta={
+        <Button onClick={navigateToScepSetup} variant="text-icon">
+          <Icon name="pencil" />
+          Edit
+        </Button>
+      }
+    >
+      TODO: Need Figma design for this
+    </SectionCard>
+  );
+
+  const isScepOffCard = (
+    <SectionCard
+      header="Simple Certificate Enrollment Protocol (SCEP)"
+      cta={
+        <Button
+          className={`${baseClass}__add-scep-button`}
+          onClick={navigateToScepSetup}
+          variant="brand"
+        >
+          Add SCEP
+        </Button>
+      }
+    >
+      <p>
+        Add a SCEP connection to enable Fleet to get SCEP certificates from your
+        custom SCEP server and install them on macOS hosts.{" "}
+      </p>
+      <p>
+        Fleet currently supports Microsoft&apos;s Network Device Enrollment
+        Service (NDES) as a custom SCEP server.
+      </p>
+    </SectionCard>
+  );
+
+  if (!isAppleMdmOn) {
+    return appleMdmDiabledCard;
+  }
+
+  return !isScepOn ? isScepOnCard : isScepOffCard;
+};
+
+interface IScepSectionProps {
+  router: InjectedRouter;
+  isScepOn: boolean;
+  isPremiumTier: boolean;
+}
+
+const ScepSection = ({
+  router,
+  isScepOn,
+  isPremiumTier,
+}: IScepSectionProps) => {
+  const { config } = useContext(AppContext);
+
+  const renderContent = () => {
+    if (!isPremiumTier) {
+      return <PremiumFeatureMessage alignment="left" />;
+    }
+
+    return (
+      <ScepCard
+        isAppleMdmOn={!!config?.mdm.enabled_and_configured}
+        isScepOn={isScepOn}
+        router={router}
+      />
+    );
+  };
+
+  return (
+    <SettingsSection title="Certificates" className={baseClass}>
+      <>{renderContent()}</>
+    </SettingsSection>
+  );
+};
+
+export default ScepSection;

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/CertificatesSection/index.ts

@@ -0,0 +1 @@
+export { default } from "./CertificatesSection";