diff --git a/frontend/components/TabText/TabText.tsx b/frontend/components/TabText/TabText.tsx index 1cd00dda50..c7077b4bd7 100644 --- a/frontend/components/TabText/TabText.tsx +++ b/frontend/components/TabText/TabText.tsx @@ -7,6 +7,9 @@ interface ITabTextProps { children: React.ReactNode; count?: number; countVariant?: TabCountVariant; + /** When true, renders a small dot indicator next to the tab text + * (e.g. to indicate that something is configured for this tab). */ + showDot?: boolean; } /* @@ -20,6 +23,7 @@ const TabText = ({ children, count, countVariant, + showDot, }: ITabTextProps): JSX.Element => { const classNames = classnames(baseClass, className); @@ -41,6 +45,13 @@ const TabText = ({ {children} {renderCount()} + {showDot && ( +
+ )}
); }; diff --git a/frontend/components/TabText/_styles.scss b/frontend/components/TabText/_styles.scss index c14b0868dd..4c5a9d786b 100644 --- a/frontend/components/TabText/_styles.scss +++ b/frontend/components/TabText/_styles.scss @@ -23,4 +23,13 @@ background-color: $ui-fleet-black-50; } } + + &__dot { + display: inline-block; + width: 8px; + height: 8px; + min-width: 8px; + border-radius: 100%; + background-color: $ui-success; + } } diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx index 2c53e6df29..69eff6ff38 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx @@ -67,6 +67,13 @@ const PlatformTabs = ({ onSelectPlatform(platformByIndex[index]); }; + // A platform is considered "configured" when it has a minimum version + // (Apple) or deadline days (Windows) set. + const isMacOSConfigured = !!defaultMacOSVersion; + const isWindowsConfigured = !!defaultWindowsDeadlineDays; + const isIOSConfigured = !!defaultIOSVersion; + const isIPadOSConfigured = !!defaultIPadOSVersion; + return (
@@ -76,18 +83,18 @@ const PlatformTabs = ({ > - macOS + macOS {isWindowsMdmEnabled && ( - Windows + Windows )} - iOS + iOS - iPadOS + iPadOS {isAndroidMdmEnabled && (