diff --git a/changes/issue-38546-fix-mdm-page-update b/changes/issue-38546-fix-mdm-page-update new file mode 100644 index 0000000000..3869aae0a7 --- /dev/null +++ b/changes/issue-38546-fix-mdm-page-update @@ -0,0 +1 @@ +- Fixed an issue where the MDM section on the integration page did not update correctly when Apple MDM is turned off. diff --git a/frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx b/frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx index 5d4070cb19..17df3312e1 100644 --- a/frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx +++ b/frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx @@ -107,7 +107,6 @@ const IntegrationsPage = ({ !isLoadingAppConfig && appConfig ? ( { refetch, error: errorMdmApple, } = useQuery( - ["appleAPNInfo"], + [ + "apppleMDMPage-appleAPNInfo", + { isMdmEnabled: config?.mdm.enabled_and_configured ?? false }, + ], () => mdmAppleAPI.getAppleAPNInfo(), { retry: (tries, error) => error.status !== 404 && tries <= 3, diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx index 5fe358d449..726ac94e32 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/MdmSettings.tsx @@ -1,11 +1,11 @@ -import React, { useContext } from "react"; +import React from "react"; import { useQuery } from "react-query"; import { AxiosError } from "axios"; import { InjectedRouter } from "react-router"; import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants"; -import { AppContext } from "context/app"; import { IMdmApple } from "interfaces/mdm"; +import { IConfig } from "interfaces/config"; import mdmAppleAPI, { IGetVppTokensResponse, } from "services/entities/mdm_apple"; @@ -21,12 +21,16 @@ const baseClass = "mdm-settings"; interface IMdmSettingsProps { router: InjectedRouter; + appConfig?: IConfig; + isPremiumTier?: boolean; } -const MdmSettings = ({ router }: IMdmSettingsProps) => { - const { isPremiumTier, config } = useContext(AppContext); - - const isMdmEnabled = !!config?.mdm.enabled_and_configured; +const MdmSettings = ({ + router, + appConfig, + isPremiumTier = false, +}: IMdmSettingsProps) => { + const isMdmEnabled = !!appConfig?.mdm.enabled_and_configured; // Currently the status of this API call is what determines various UI states on // this page. Because of this we will not render any of this components UI until this API @@ -35,9 +39,10 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => { data: APNSInfo, isLoading: isLoadingAPNSInfo, isError: isAPNSInfoError, + isIdle: isAPNSInfoIdle, error: errorAPNSInfo, } = useQuery( - ["appleAPNInfo"], + ["appleAPNInfo", { isMdmEnabled }], () => mdmAppleAPI.getAppleAPNInfo(), { ...DEFAULT_USE_QUERY_OPTIONS, @@ -59,7 +64,7 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => { isLoading: isLoadingVpp, isError: isVppError, } = useQuery( - "vppInfo", + ["vppInfo", { isMdmEnabled }], () => mdmAppleAPI.getVppTokens(), { ...DEFAULT_USE_QUERY_OPTIONS, @@ -76,7 +81,7 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => { error: eulaError, refetch: refetchEulaMetadata, } = useQuery( - ["eula-metadata"], + ["eula-metadata", { isMdmEnabled }], () => mdmAPI.getEULAMetadata(), { ...DEFAULT_USE_QUERY_OPTIONS, @@ -122,26 +127,28 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => { <> - {isPremiumTier && !!config?.mdm.apple_bm_enabled_and_configured && ( - <> - - - - )} + {isPremiumTier && + !!appConfig?.mdm.apple_bm_enabled_and_configured && + isMdmEnabled && ( + <> + + + + )} )} diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MdmSettingsSection/MdmSettingsSection.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MdmSettingsSection/MdmSettingsSection.tsx index 60d66f883f..4d5b155bbd 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MdmSettingsSection/MdmSettingsSection.tsx +++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/MdmSettingsSection/MdmSettingsSection.tsx @@ -31,9 +31,6 @@ const MdmSettingsSection = ({ router, appleAPNSInfo, }: IMdmSectionProps) => { - // TODO: feature flag check, remove when feature releases - const { config } = useContext(AppContext); - const navigateToAppleMdm = () => { router.push(PATHS.ADMIN_INTEGRATIONS_MDM_APPLE); };