Fix unreleased bug in dashboard page UI that caused re-render loop (#…

…21621)

quick cherry-pick of fixing the dashboard page rendering bug

Co-authored-by: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useRef,
   useCallback,
+  useMemo,
 } from "react";
 import { InjectedRouter } from "react-router";
 import { useQuery } from "react-query";
@@ -19,11 +20,7 @@ import {
 } from "interfaces/enroll_secret";
 import { IHostSummary, IHostSummaryPlatforms } from "interfaces/host_summary";
 import { ILabelSummary } from "interfaces/label";
-import {
-  IMacadminAggregate,
-  IMunkiIssuesAggregate,
-  IMunkiVersionsAggregate,
-} from "interfaces/macadmins";
+import { IMacadminAggregate } from "interfaces/macadmins";
 import {
   IMdmStatusCardData,
   IMdmSummaryResponse,
@@ -150,7 +147,6 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
   const [softwareNavTabIndex, setSoftwareNavTabIndex] = useState(0);
   const [softwarePageIndex, setSoftwarePageIndex] = useState(0);
   const [softwareActionUrl, setSoftwareActionUrl] = useState<string>();
-  const [showMunkiCard, setShowMunkiCard] = useState(true);
   const [showMdmCard, setShowMdmCard] = useState(true);
   const [showSoftwareCard, setShowSoftwareCard] = useState(false);
   const [showAddHostsModal, setShowAddHostsModal] = useState(false);
@@ -172,18 +168,9 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
 
   const selectedMdmSolutionName = useRef<string>("");
 
-  const [munkiIssuesData, setMunkiIssuesData] = useState<
-    IMunkiIssuesAggregate[]
-  >([]);
-  const [munkiVersionsData, setMunkiVersionsData] = useState<
-    IMunkiVersionsAggregate[]
-  >([]);
   const [mdmTitleDetail, setMdmTitleDetail] = useState<
     JSX.Element | string | null
   >();
-  const [munkiTitleDetail, setMunkiTitleDetail] = useState<
-    JSX.Element | string | null
-  >();
 
   useEffect(() => {
     const platformByPathname =
@@ -423,26 +410,24 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
     }
   );
 
-  const { isFetching: isMacAdminsFetching, error: errorMacAdmins } = useQuery<
-    IMacadminAggregate,
-    Error
-  >(["macAdmins", teamIdForApi], () => macadminsAPI.loadAll(teamIdForApi), {
-    keepPreviousData: true,
-    enabled: isRouteOk && selectedPlatform === "darwin",
-    onSuccess: ({
-      macadmins: { munki_issues, munki_versions, counts_updated_at },
-    }) => {
-      setMunkiVersionsData(munki_versions);
-      setMunkiIssuesData(munki_issues);
-      setShowMunkiCard(!!munki_versions);
-      setMunkiTitleDetail(
-        <LastUpdatedText
-          lastUpdatedAt={counts_updated_at}
-          whatToRetrieve="Munki"
-        />
-      );
-    },
-  });
+  const {
+    data: macAdminsData,
+    isFetching: isMacAdminsFetching,
+    error: errorMacAdmins,
+  } = useQuery<IMacadminAggregate, Error, IMacadminAggregate["macadmins"]>(
+    ["macAdmins", teamIdForApi],
+    () => macadminsAPI.loadAll(teamIdForApi),
+    {
+      select: (data) => data.macadmins,
+      keepPreviousData: true,
+      enabled: isRouteOk && selectedPlatform === "darwin",
+    }
+  );
+  const {
+    munki_issues: munkiIssues,
+    munki_versions: munkiVersions,
+    counts_updated_at: munkiCountsUpdatedAt,
+  } = macAdminsData || {};
 
   useEffect(() => {
     softwareCount && softwareCount > 0
@@ -668,6 +653,16 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
     ),
   });
 
+  const munkiTitleDetail = useMemo(
+    () => (
+      <LastUpdatedText
+        lastUpdatedAt={munkiCountsUpdatedAt}
+        whatToRetrieve="Munki"
+      />
+    ),
+    [munkiCountsUpdatedAt]
+  );
+
   const MunkiCard = useInfoCard({
     title: "Munki",
     titleDetail: munkiTitleDetail,
@@ -686,8 +681,8 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
       <Munki
         errorMacAdmins={errorMacAdmins}
         isMacAdminsFetching={isMacAdminsFetching}
-        munkiIssuesData={munkiIssuesData}
-        munkiVersionsData={munkiVersionsData}
+        munkiIssuesData={munkiIssues || []}
+        munkiVersionsData={munkiVersions || []}
         selectedTeamId={currentTeamId}
       />
     ),
@@ -752,7 +747,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
     <>
       <div className={`${baseClass}__section`}>{OperatingSystemsCard}</div>
       {showMdmCard && <div className={`${baseClass}__section`}>{MDMCard}</div>}
-      {showMunkiCard && (
+      {!!munkiVersions && (
         <div className={`${baseClass}__section`}>{MunkiCard}</div>
       )}
     </>