fix os updates page form not updating properly on team switch (#16369)

relates to #16045

fix UI bug on the controls os updates page where the updated targets
were not being rendered correctly when switching teams.

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

changes/issue-16045-fix-controls-page-target-forms

@@ -0,0 +1,2 @@
+- fix UI bug on controls page where the target forms were not rendering correctly when switching
+  teams

frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx

@@ -85,6 +85,7 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
         </div>
         <div className={`${baseClass}__taget-container`}>
           <TargetSection
+            key={teamIdForApi} // we need to re-render this component when the team id changes.
             currentTeamId={teamIdForApi}
             onSelectAccordionItem={handleSelectPlatform}
           />

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

@@ -11,6 +11,7 @@ import teamsAPI from "services/entities/teams";
 import InputField from "components/forms/fields/InputField";
 import Button from "components/buttons/Button";
 import validatePresence from "components/forms/validators/validate_presence";
+import { AppContext } from "context/app";
 
 const baseClass = "mac-os-target-form";
 
@@ -50,7 +51,19 @@ const validateForm = (formData: IMacOSTargetFormData) => {
   return errors;
 };
 
-const createMdmConfigData = (minOsVersion: string, deadline: string) => {
+interface IMacMdmConfigData {
+  mdm: {
+    macos_updates: {
+      minimum_version: string;
+      deadline: string;
+    };
+  };
+}
+
+const createMdmConfigData = (
+  minOsVersion: string,
+  deadline: string
+): IMacMdmConfigData => {
   return {
     mdm: {
       macos_updates: {
@@ -72,6 +85,7 @@ const MacOSTargetForm = ({
   defaultMinOsVersion,
   defaultDeadline,
 }: IMacOSTargetFormProps) => {
+  const { setConfig } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
   const [isSaving, setIsSaving] = useState(false);
@@ -82,6 +96,11 @@ const MacOSTargetForm = ({
   >();
   const [deadlineError, setDeadlineError] = useState<string | undefined>();
 
+  const updateNoTeamConfig = async (updateData: IMacMdmConfigData) => {
+    const updatedConfig = await configAPI.update(updateData);
+    setConfig(updatedConfig);
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const errors = validateForm({
@@ -97,7 +116,7 @@ const MacOSTargetForm = ({
       const updateData = createMdmConfigData(minOsVersion, deadline);
       try {
         currentTeamId === APP_CONTEXT_NO_TEAM_ID
-          ? await configAPI.update(updateData)
+          ? await updateNoTeamConfig(updateData)
           : await teamsAPI.update(updateData, currentTeamId);
         renderFlash("success", "Successfully updated minimum version!");
       } catch {

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

@@ -11,6 +11,7 @@ import teamsAPI from "services/entities/teams";
 import InputField from "components/forms/fields/InputField";
 import Button from "components/buttons/Button";
 import validatePresence from "components/forms/validators/validate_presence";
+import { AppContext } from "context/app";
 
 const baseClass = "windows-target-form";
 
@@ -58,7 +59,19 @@ const validateForm = (formData: IWindowsTargetFormData) => {
   return errors;
 };
 
-const createMdmConfigData = (deadlineDays: string, gracePeriodDays: string) => {
+interface IWindowsMdmConfigData {
+  mdm: {
+    windows_updates: {
+      deadline_days: number;
+      grace_period_days: number;
+    };
+  };
+}
+
+const createMdmConfigData = (
+  deadlineDays: string,
+  gracePeriodDays: string
+): IWindowsMdmConfigData => {
   return {
     mdm: {
       windows_updates: {
@@ -82,6 +95,7 @@ const WindowsTargetForm = ({
   defaultGracePeriodDays,
   inAccordion = false,
 }: IWindowsTargetFormProps) => {
+  const { setConfig } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
   const [isSaving, setIsSaving] = useState(false);
   const [deadlineDays, setDeadlineDays] = useState(
@@ -101,6 +115,11 @@ const WindowsTargetForm = ({
     [`${baseClass}__accordion-form`]: inAccordion,
   });
 
+  const updateNoTeamConfig = async (updateData: IWindowsMdmConfigData) => {
+    const updatedConfig = await configAPI.update(updateData);
+    setConfig(updatedConfig);
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const errors = validateForm({
@@ -116,7 +135,7 @@ const WindowsTargetForm = ({
       const updateData = createMdmConfigData(deadlineDays, gracePeriodDays);
       try {
         currentTeamId === APP_CONTEXT_NO_TEAM_ID
-          ? await configAPI.update(updateData)
+          ? await updateNoTeamConfig(updateData)
           : await teamsAPI.update(updateData, currentTeamId);
         renderFlash(
           "success",

frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/_styles.scss

@@ -1,4 +1,7 @@
 .windows-target-form {
+  input {
+    background-color: $core-white;
+  }
 
   &__accordion-form {
      padding: $pad-large;