Fleet UI: Apple Business Manager expiry banner (#9021)

frontend/components/CustomLink/CustomLink.tsx

@@ -10,6 +10,7 @@ interface ICustomLinkProps {
   newTab?: boolean;
   /** Icon wraps on new line with last word */
   multiline?: boolean;
+  black?: boolean;
 }
 
 const baseClass = "custom-link";
@@ -20,6 +21,7 @@ const CustomLink = ({
   className,
   newTab = false,
   multiline = false,
+  black = false,
 }: ICustomLinkProps): JSX.Element => {
   const customLinkClass = classnames(baseClass, className);
 
@@ -37,6 +39,7 @@ const CustomLink = ({
           <Icon
             name="external-link"
             className={`${baseClass}__external-icon`}
+            color={black ? "core-fleet-black" : "core-fleet-blue"}
           />
         )}
       </span>
@@ -45,7 +48,11 @@ const CustomLink = ({
     <>
       {text}
       {newTab && (
-        <Icon name="external-link" className={`${baseClass}__external-icon`} />
+        <Icon
+          name="external-link"
+          className={`${baseClass}__external-icon`}
+          color={black ? "core-fleet-black" : "core-fleet-blue"}
+        />
       )}
     </>
   );

frontend/components/MDM/AppleBMTermsMessage/AppleBMTermsMessage.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import PATHS from "router/paths";
+import { browserHistory } from "react-router";
+import Button from "components/buttons/Button";
+import CustomLink from "components/CustomLink";
+
+const baseClass = "apple-bm-terms-message";
+
+const AppleBMTermsMessage = () => {
+  const onClick = (): void => {
+    browserHistory.push(PATHS.MANAGE_HOSTS);
+  };
+
+  return (
+    <div className={baseClass}>
+      <p>
+        Your organization can’t automatically enroll macOS hosts until you
+        accept the new terms and conditions for Apple Business Manager (ABM). An
+        ABM administrator can accept these terms. Done?{" "}
+        <Button onClick={onClick} variant="unstyled">
+          Go to Hosts
+        </Button>{" "}
+        to remove this banner.
+      </p>
+      <CustomLink
+        url="https://business.apple.com/"
+        text="Go to ABM"
+        className={`${baseClass}__new-tab`}
+        newTab
+        black
+      />
+    </div>
+  );
+};
+
+export default AppleBMTermsMessage;

frontend/components/MDM/AppleBMTermsMessage/_styles.scss

@@ -0,0 +1,32 @@
+.apple-bm-terms-message {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px $pad-large;
+  margin-bottom: $pad-large;
+  background-color: $ui-yellow-banner;
+  border: 1px solid #ece0bb;
+  border-radius: $border-radius;
+  font-size: $xx-small;
+  position: sticky; // Needed for settings page scroll
+  z-index: 4; // Needed for settings page scroll
+
+  color: $core-fleet-black;
+  font-weight: $regular;
+
+  p {
+    margin: 0;
+  }
+
+  .button,
+  a {
+    color: $core-fleet-black;
+    font-size: $xx-small;
+    font-weight: $bold;
+  }
+
+  &__new-tab {
+    text-align: right;
+    min-width: 90px;
+  }
+}

frontend/components/MDM/AppleBMTermsMessage/index.ts

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

frontend/components/MainContent/MainContent.tsx

@@ -3,6 +3,8 @@ import classnames from "classnames";
 import { formatDistanceToNow } from "date-fns";
 
 import SandboxExpiryMessage from "components/Sandbox/SandboxExpiryMessage";
+import AppleBMTermsMessage from "components/MDM/AppleBMTermsMessage";
+
 import SandboxGate from "components/Sandbox/SandboxGate";
 import { AppContext } from "context/app";
 
@@ -25,17 +27,26 @@ const MainContent = ({
   className,
 }: IMainContentProps): JSX.Element => {
   const classes = classnames(baseClass, className);
-  const { sandboxExpiry } = useContext(AppContext);
+  const { sandboxExpiry, config, isSandboxMode, isPremiumTier } = useContext(
+    AppContext
+  );
 
-  const expiry =
+  const isAppleBmTermsExpired = config?.mdm?.apple_bm_terms_expired;
+
+  const sandboxExpiryTime =
     sandboxExpiry === undefined
       ? "..."
       : formatDistanceToNow(new Date(sandboxExpiry));
 
   return (
     <div className={classes}>
+      {isAppleBmTermsExpired && isPremiumTier && !isSandboxMode && (
+        <AppleBMTermsMessage />
+      )}
       <SandboxGate
-        fallbackComponent={() => <SandboxExpiryMessage expiry={expiry} />}
+        fallbackComponent={() => (
+          <SandboxExpiryMessage expiry={sandboxExpiryTime} />
+        )}
       />
       {children}
     </div>

frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss

@@ -4,7 +4,7 @@
   align-items: center;
   padding: 12px $pad-large;
   margin-bottom: $pad-large;
-  background-color: $ui-expiry-message;
+  background-color: $ui-yellow-banner;
   border: 1px solid #ece0bb;
   border-radius: $border-radius;
   font-size: $xx-small;
@@ -27,4 +27,9 @@
     font-weight: $bold;
     text-align: right;
   }
+
+  .button {
+    font-size: $xx-small;
+    font-weight: $bold;
+  }
 }

frontend/components/icons/ExternalLink.tsx

@@ -1,11 +1,16 @@
 import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
 import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
 
 interface IExternalLinkProps {
   size: IconSizes;
+  color: Colors;
 }
 
-const ExternalLink = ({ size = "small" }: IExternalLinkProps) => {
+const ExternalLink = ({
+  size = "small",
+  color = "core-fleet-blue",
+}: IExternalLinkProps) => {
   return (
     <svg
       width={ICON_SIZES[size]}
@@ -18,7 +23,7 @@ const ExternalLink = ({ size = "small" }: IExternalLinkProps) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.33 1.993c.593 0 1.073.473 1.073 1.057 0 .57-.457 1.035-1.029 1.057h-5.23v9.778h9.905v-5.12c0-.57.457-1.035 1.029-1.058h.043c.577 0 1.048.45 1.07 1.015l.001.042v6.178c0 .57-.456 1.035-1.028 1.057L13.12 16H1.07c-.577 0-1.048-.45-1.07-1.015L0 3.05c0-.57.457-1.034 1.029-1.056l.043-.001H7.33ZM14.929 0c.578 0 1.048.45 1.071 1.015L16 5.523c0 .584-.48 1.058-1.072 1.058-.577 0-1.048-.45-1.07-1.015l-.001-.043-.001-1.777-5.854 5.848a1.082 1.082 0 0 1-1.515.009 1.048 1.048 0 0 1-.043-1.46l.033-.036 6-5.992h-2.105c-.577 0-1.048-.45-1.07-1.015L9.3 1.058C9.3.488 9.757.023 10.329 0L14.93 0Z"
-        fill="#6A67FE"
+        fill={COLORS[color]}
       />
     </svg>
   );

frontend/interfaces/config.ts

@@ -43,6 +43,9 @@ export default PropTypes.shape({
   organization: PropTypes.string,
   device_count: PropTypes.number,
   expiration: PropTypes.string,
+  mdm: PropTypes.shape({
+    apple_bm_terms_expired: PropTypes.bool,
+  }),
   note: PropTypes.string,
   // vulnerability_settings: PropTypes.any, TODO
   enable_host_status_webhook: PropTypes.bool,
@@ -213,6 +216,9 @@ export interface IConfig {
     };
   };
   mdm_enabled?: boolean;
+  mdm: {
+    apple_bm_terms_expired: boolean;
+  };
 }
 
 export interface IWebhookSettings {

frontend/pages/LabelPage/LabelPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
 import { useQuery } from "react-query";
 import { InjectedRouter, Params } from "react-router/lib/Router";
 

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -71,14 +71,6 @@
     align-items: flex-start;
   }
 
-  .button {
-    font-size: $x-small;
-
-    img {
-      transform: scale(0.5);
-    }
-  }
-
   &__advanced-button {
     margin-right: $pad-medium;
   }

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -59,14 +59,6 @@
     align-items: flex-start;
   }
 
-  .button {
-    font-size: $x-small;
-
-    img {
-      transform: scale(0.5);
-    }
-  }
-
   .form-field--dropdown {
     margin: 0;
   }

frontend/pages/schedule/ManageSchedulePage/_styles.scss

@@ -60,14 +60,6 @@
     align-items: flex-start;
   }
 
-  .button {
-    font-size: $x-small;
-
-    img {
-      transform: scale(0.5);
-    }
-  }
-
   &__advanced-button {
     margin-right: $pad-medium;
   }

frontend/styles/var/colors.scss

@@ -29,7 +29,7 @@ $ui-success: #3db67b;
 $ui-warning: #ebbc43;
 $ui-error: #d66c7b;
 $ui-info: #6a67fe;
-$ui-expiry-message: #fef7e0;
+$ui-yellow-banner: #fef7e0;
 
 // Rainbow
 $rainbow-orange: #faa669;