From c4d142af139fc2a3bd3244846efe4b43dd4e0675 Mon Sep 17 00:00:00 2001
From: "kilo-code-bot[bot]"
 <240665456+kilo-code-bot[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 12:34:53 -0500
Subject: [PATCH] Add configured indicators to OS updates platform tabs
 (#41597)

---
 frontend/components/TabText/TabText.tsx           | 11 +++++++++++
 frontend/components/TabText/_styles.scss          |  9 +++++++++
 .../components/PlatformTabs/PlatformTabs.tsx      | 15 +++++++++++----
 3 files changed, 31 insertions(+), 4 deletions(-)

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}
       </div>
       {renderCount()}
+      {showDot && (
+        <div
+          className={`${baseClass}__dot`}
+          role="status"
+          aria-label="Configured"
+        />
+      )}
     </div>
   );
 };
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 (
     <div className={baseClass}>
       <TabNav secondary>
@@ -76,18 +83,18 @@ const PlatformTabs = ({
         >
           <TabList>
             <Tab key="macOS" data-text="macOS">
-              <TabText>macOS</TabText>
+              <TabText showDot={isMacOSConfigured}>macOS</TabText>
             </Tab>
             {isWindowsMdmEnabled && (
               <Tab key="Windows" data-text="Windows">
-                <TabText>Windows</TabText>
+                <TabText showDot={isWindowsConfigured}>Windows</TabText>
               </Tab>
             )}
             <Tab key="iOS" data-text="iOS">
-              <TabText>iOS</TabText>
+              <TabText showDot={isIOSConfigured}>iOS</TabText>
             </Tab>
             <Tab key="iPadOS" data-text="iPadOS">
-              <TabText>iPadOS</TabText>
+              <TabText showDot={isIPadOSConfigured}>iPadOS</TabText>
             </Tab>
             {isAndroidMdmEnabled && (
               <Tab key="Android" data-text="Android">