Alerting: Fix incorrect render during long legacy upgrade cancel (#80339)

When using the legacy migration dry-run, if a cancel takes a long time (long
enough for the page to poll) the page will incorrectly render the previous
data.

This change stops the polling while the upgrading or cancelling.

public/app/features/alerting/Upgrade.tsx

@@ -46,13 +46,20 @@ import { createContactPointLink, makeDashboardLink, makeFolderLink } from './uni
 import { createUrl } from './unified/utils/url';
 
 export const UpgradePage = () => {
-  const { useGetOrgUpgradeSummaryQuery } = upgradeApi;
+  const [, { isLoading: isUpgradeLoading }] = upgradeApi.useUpgradeOrgMutation({
+    fixedCacheKey: 'upgrade-org-loading',
+  });
+  const [, { isLoading: isCancelLoading }] = upgradeApi.useCancelOrgUpgradeMutation({
+    fixedCacheKey: 'cancel-org-upgrade-loading',
+  });
   const {
     currentData: summary,
     isError: isFetchError,
     error: fetchError,
-  } = useGetOrgUpgradeSummaryQuery(undefined, {
+    isLoading: isLoading,
+  } = upgradeApi.useGetOrgUpgradeSummaryQuery(undefined, {
     pollingInterval: 10000,
+    skip: isCancelLoading || isUpgradeLoading, // Stop polling when upgrade or cancel is in progress.
   });
 
   const alertCount = (summary?.migratedDashboards ?? []).reduce(
@@ -71,16 +78,22 @@ export const UpgradePage = () => {
     return null;
   }, [isFetchError, hasData]);
 
+  const showError = isFetchError;
+  const showLoading = isLoading;
+  const showStart = !isLoading && !isFetchError && !hasData;
+  const showData = !isLoading && !isFetchError && hasData;
+
   return (
     <Page navId="alerting-upgrade" actions={cancelUpgrade}>
       <Page.Contents>
-        {isFetchError && (
+        {showError && (
           <Alert severity="error" title="Error loading Grafana Alerting upgrade information">
             {fetchError instanceof Error ? fetchError.message : 'Unknown error.'}
           </Alert>
         )}
-        {!isFetchError && !hasData && <CTAElement />}
-        {!isFetchError && hasData && (
+        {showLoading && <Loading text={'Loading...'} />}
+        {showStart && <CTAElement />}
+        {showData && (
           <>
             <ErrorSummary errors={errors} />
             <UpgradeTabs alertCount={alertCount} contactCount={contactCount} />