fix issue where mdm page wasnt updating properly when turning off apple mdm (#40854)

**Related issue:** Resolves #38546

This fixes an issue where the MDM section on the intergation page was
not updating properly when apple mdm was turned off

# Checklist for submitter

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Magnus Jensen <magnus@fleetdm.com>

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.

frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -107,7 +107,6 @@ const IntegrationsPage = ({
           !isLoadingAppConfig && appConfig ? (
             <CurrentCard
               router={router}
-              // below props used only by settings-related cards e.g. SSO
               appConfig={appConfig}
               handleSubmit={onUpdateSettings}
               isPremiumTier={isPremiumTier}

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx

@@ -41,7 +41,10 @@ const AppleMdmPage = ({ router }: { router: InjectedRouter }) => {
     refetch,
     error: errorMdmApple,
   } = useQuery<IMdmApple, AxiosError, IMdmApple>(
-    ["appleAPNInfo"],
+    [
+      "apppleMDMPage-appleAPNInfo",
+      { isMdmEnabled: config?.mdm.enabled_and_configured ?? false },
+    ],
     () => mdmAppleAPI.getAppleAPNInfo(),
     {
       retry: (tries, error) => error.status !== 404 && tries <= 3,

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<IMdmApple, AxiosError, IMdmApple>(
-    ["appleAPNInfo"],
+    ["appleAPNInfo", { isMdmEnabled }],
     () => mdmAppleAPI.getAppleAPNInfo(),
     {
       ...DEFAULT_USE_QUERY_OPTIONS,
@@ -59,7 +64,7 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => {
     isLoading: isLoadingVpp,
     isError: isVppError,
   } = useQuery<IGetVppTokensResponse, AxiosError>(
-    "vppInfo",
+    ["vppInfo", { isMdmEnabled }],
     () => mdmAppleAPI.getVppTokens(),
     {
       ...DEFAULT_USE_QUERY_OPTIONS,
@@ -76,7 +81,7 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => {
     error: eulaError,
     refetch: refetchEulaMetadata,
   } = useQuery<IEulaMetadataResponse, AxiosError>(
-    ["eula-metadata"],
+    ["eula-metadata", { isMdmEnabled }],
     () => mdmAPI.getEULAMetadata(),
     {
       ...DEFAULT_USE_QUERY_OPTIONS,
@@ -122,26 +127,28 @@ const MdmSettings = ({ router }: IMdmSettingsProps) => {
         <>
           <AppleBusinessManagerSection
             router={router}
-            isPremiumTier={!!isPremiumTier}
+            isPremiumTier={isPremiumTier}
             isVppOn={!noVppTokenUploaded}
           />
           <MicrosoftEntraSection
             router={router}
-            windowsMdmEnabled={!!config?.mdm.windows_enabled_and_configured}
-            tenantAdded={!!config?.mdm.windows_entra_tenant_ids?.length}
-            isPremiumTier={!!isPremiumTier}
+            windowsMdmEnabled={!!appConfig?.mdm.windows_enabled_and_configured}
+            tenantAdded={!!appConfig?.mdm.windows_entra_tenant_ids?.length}
+            isPremiumTier={isPremiumTier}
           />
-          {isPremiumTier && !!config?.mdm.apple_bm_enabled_and_configured && (
-            <>
-              <EulaSection
-                eulaMetadata={eulaMetadata}
-                isEulaUploaded={!noEulaUploaded}
-                onUpload={refetchEulaMetadata}
-                onDelete={refetchEulaMetadata}
-              />
-              <EndUserMigrationSection router={router} />
-            </>
-          )}
+          {isPremiumTier &&
+            !!appConfig?.mdm.apple_bm_enabled_and_configured &&
+            isMdmEnabled && (
+              <>
+                <EulaSection
+                  eulaMetadata={eulaMetadata}
+                  isEulaUploaded={!noEulaUploaded}
+                  onUpload={refetchEulaMetadata}
+                  onDelete={refetchEulaMetadata}
+                />
+                <EndUserMigrationSection router={router} />
+              </>
+            )}
         </>
       )}
     </div>

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