diff --git a/frontend/components/CustomLink/CustomLink.tsx b/frontend/components/CustomLink/CustomLink.tsx
index 1c897a888a..b6857528ac 100644
--- a/frontend/components/CustomLink/CustomLink.tsx
+++ b/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 = ({
)}
@@ -45,7 +48,11 @@ const CustomLink = ({
<>
{text}
{newTab && (
-
+
)}
>
);
diff --git a/frontend/components/MDM/AppleBMTermsMessage/AppleBMTermsMessage.tsx b/frontend/components/MDM/AppleBMTermsMessage/AppleBMTermsMessage.tsx
new file mode 100644
index 0000000000..f7d53dbb92
--- /dev/null
+++ b/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 (
+
+
+ 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?{" "}
+
+ Go to Hosts
+ {" "}
+ to remove this banner.
+
+
+
+ );
+};
+
+export default AppleBMTermsMessage;
diff --git a/frontend/components/MDM/AppleBMTermsMessage/_styles.scss b/frontend/components/MDM/AppleBMTermsMessage/_styles.scss
new file mode 100644
index 0000000000..5f8deb4f37
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/frontend/components/MDM/AppleBMTermsMessage/index.ts b/frontend/components/MDM/AppleBMTermsMessage/index.ts
new file mode 100644
index 0000000000..237a50e11b
--- /dev/null
+++ b/frontend/components/MDM/AppleBMTermsMessage/index.ts
@@ -0,0 +1 @@
+export { default } from "./AppleBMTermsMessage";
diff --git a/frontend/components/MainContent/MainContent.tsx b/frontend/components/MainContent/MainContent.tsx
index 26c9edf807..20df011a44 100644
--- a/frontend/components/MainContent/MainContent.tsx
+++ b/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 (
+ {isAppleBmTermsExpired && isPremiumTier && !isSandboxMode && (
+
+ )}
}
+ fallbackComponent={() => (
+
+ )}
/>
{children}
diff --git a/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss b/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss
index e4fe7ccc1e..afb56403c9 100644
--- a/frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss
+++ b/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;
+ }
}
diff --git a/frontend/components/icons/ExternalLink.tsx b/frontend/components/icons/ExternalLink.tsx
index 03f41108bc..eb5757580d 100644
--- a/frontend/components/icons/ExternalLink.tsx
+++ b/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 (
{
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]}
/>
);
diff --git a/frontend/interfaces/config.ts b/frontend/interfaces/config.ts
index 2f8f878e92..3601be9f8c 100644
--- a/frontend/interfaces/config.ts
+++ b/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 {
diff --git a/frontend/pages/LabelPage/LabelPage.tsx b/frontend/pages/LabelPage/LabelPage.tsx
index 76564de4e0..2325138a4d 100644
--- a/frontend/pages/LabelPage/LabelPage.tsx
+++ b/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";
diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
index c4b86b2967..db987494d9 100644
--- a/frontend/pages/policies/ManagePoliciesPage/_styles.scss
+++ b/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;
}
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index 90528ea3bf..92af0cf03b 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/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;
}
diff --git a/frontend/pages/schedule/ManageSchedulePage/_styles.scss b/frontend/pages/schedule/ManageSchedulePage/_styles.scss
index 962935e6b9..5268debf8c 100644
--- a/frontend/pages/schedule/ManageSchedulePage/_styles.scss
+++ b/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;
}
diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss
index 18daff24f8..3b15a9a1fc 100644
--- a/frontend/styles/var/colors.scss
+++ b/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;