add UI updates to OS updates page for ddm (#18113)

relates to #17417

implements UI changes for updating os versions with ddm. This is just
changing the nudge preview

also cleans up some older code on the OS updates page.

**new nudge preview:**


![image](https://github.com/fleetdm/fleet/assets/1153709/abd15609-e60b-490e-8ec4-b823874d9771)


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality

changes/issue-17417-ui-os-updates-ddm

@@ -0,0 +1 @@
+- change UI on OS Updates page to show new nudge for macos DDM

frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx

@@ -17,7 +17,6 @@ import NudgePreview from "./components/NudgePreview";
 import TurnOnMdmMessage from "../components/TurnOnMdmMessage/TurnOnMdmMessage";
 import CurrentVersionSection from "./components/CurrentVersionSection";
 import TargetSection from "./components/TargetSection";
-import { generateKey } from "./components/TargetSection/TargetSection";
 
 export type OSUpdatesSupportedPlatform = "darwin" | "windows";
 
@@ -38,28 +37,26 @@ const getSelectedPlatform = (
 
 interface IOSUpdates {
   router: InjectedRouter;
-  teamIdForApi?: number;
+  teamIdForApi: number;
 }
 
 const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
-  const { isPremiumTier, setConfig } = useContext(AppContext);
+  const { isPremiumTier, config, setConfig } = useContext(AppContext);
 
   const [
     selectedPlatformTab,
     setSelectedPlatformTab,
   ] = useState<OSUpdatesSupportedPlatform | null>(null);
 
-  // FIXME: We're calling this endpoint twice on mount because it also gets called in App.tsx
-  // whenever the pathname changes. We should find a way to avoid this.
   const {
-    data: config,
     isError: isErrorConfig,
     isFetching: isFetchingConfig,
     isLoading: isLoadingConfig,
     refetch: refetchAppConfig,
   } = useQuery<IConfig, Error>(["config"], () => configAPI.loadAll(), {
     refetchOnWindowFocus: false,
-    onSuccess: (data) => setConfig(data), // update the app context with the fetched config
+    onSuccess: (data) => setConfig(data), // update the app context with the refetched config
+    enabled: false, // this is disabled as the config is already fetched in App.tsx
   });
 
   const {
@@ -87,9 +84,6 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
     );
   }
 
-  // FIXME: Are these checks still necessary?
-  if (config === null || teamIdForApi === undefined) return null;
-
   if (isLoadingConfig || isLoadingTeam) return <Spinner />;
 
   // FIXME: Handle error states for app config and team config (need specifications for this).
@@ -118,11 +112,7 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
         </div>
         <div className={`${baseClass}__taget-container`}>
           <TargetSection
-            key={generateKey({
-              currentTeamId: teamIdForApi,
-              appConfig: config,
-              teamConfig,
-            })} // FIXME: Find a better way to trigger re-rendering if these change (see FIXME above regarding refetching)
+            key={teamIdForApi} // if the team changes, remount the target section
             appConfig={config}
             currentTeamId={teamIdForApi}
             isFetching={isFetchingConfig || isFetchingTeamConfig}

frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/NudgePreview.tsx

@@ -4,7 +4,7 @@ import CustomLink from "components/CustomLink";
 
 import { OSUpdatesSupportedPlatform } from "../../OSUpdates";
 
-import MacOSUpdateScreenshot from "../../../../../../assets/images/nudge-screenshot.png";
+import MacOSUpdateScreenshot from "../../../../../../assets/images/macos-updates-preview.png";
 import WindowsUpdateScreenshot from "../../../../../../assets/images/windows-nudge-screenshot.png";
 
 const baseClass = "nudge-preview";
@@ -17,12 +17,12 @@ const NudgeDescription = ({ platform }: INudgeDescriptionProps) => {
     <>
       <h3>End user experience on macOS</h3>
       <p>
-        When a minimum version is saved, the end user sees the below window
-        until their macOS version is at or above the minimum version.
+        For macOS 14 and above, end users will see native macOS notifications
+        (DDM).
       </p>
-      <p>As the deadline gets closer, Fleet provides stronger encouragement.</p>
+      <p>Everyone else will see the Nudge window.</p>
       <CustomLink
-        text="Learn more about macOS updates in Fleet"
+        text="Learn more"
         url="https://fleetdm.com/learn-more-about/os-updates"
         newTab
       />
@@ -33,8 +33,8 @@ const NudgeDescription = ({ platform }: INudgeDescriptionProps) => {
       <p>
         When a Windows host becomes aware of a new update, end users are able to
         defer restarts. Automatic restarts happen before 8am and after 5pm (end
-        user’s local time). After the deadline, restarts are forced regardless
-        of active hours.
+        user&apos;s local time). After the deadline, restarts are forced
+        regardless of active hours.
       </p>
       <CustomLink
         text="Learn more about Windows updates in Fleet"

frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx

@@ -59,16 +59,6 @@ const getDefaultWindowsGracePeriodDays = ({
     : teamConfig?.mdm?.windows_updates.grace_period_days?.toString() ?? "";
 };
 
-export const generateKey = (args: GetDefaultFnParams) => {
-  return (
-    `${args.currentTeamId}-` +
-    `${getDefaultMacOSDeadline(args)}-` +
-    `${getDefaultMacOSVersion(args)}-` +
-    `${getDefaultWindowsDeadlineDays(args)}-` +
-    `${getDefaultWindowsGracePeriodDays(args)}`
-  );
-};
-
 interface ITargetSectionProps {
   appConfig: IConfig;
   currentTeamId: number;