diff --git a/changes/issue-16045-fix-controls-page-target-forms b/changes/issue-16045-fix-controls-page-target-forms
new file mode 100644
index 0000000000..5173c88593
--- /dev/null
+++ b/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
diff --git a/changes/issue-16046-update-to-controls-page-ui b/changes/issue-16046-update-to-controls-page-ui
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
index 65fc5bb7c5..0bf5861922 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
+++ b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
@@ -85,6 +85,7 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/MacOSTargetForm/MacOSTargetForm.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/MacOSTargetForm/MacOSTargetForm.tsx
index 235b4d4914..495c15e2ed 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/components/MacOSTargetForm/MacOSTargetForm.tsx
+++ b/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();
+ const updateNoTeamConfig = async (updateData: IMacMdmConfigData) => {
+ const updatedConfig = await configAPI.update(updateData);
+ setConfig(updatedConfig);
+ };
+
const handleSubmit = async (e: React.FormEvent) => {
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 {
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/WindowsTargetForm.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/WindowsTargetForm.tsx
index ec4a6428f5..0374c71d24 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/WindowsTargetForm.tsx
+++ b/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) => {
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",
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/_styles.scss b/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/_styles.scss
index 613dedafb3..1c2c4f1caf 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/components/WindowsTargetForm/_styles.scss
+++ b/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;