Add configured indicators to OS updates platform tabs (#41597)

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>
   );
 };

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;
+  }
 }

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">