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?{" "} + {" "} + 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;