Move Application count badges to Insights page

pkg/app/web/src/components/applications-page/index.tsx

@@ -21,12 +21,10 @@ import {
   UI_TEXT_REFRESH,
 } from "~/constants/ui-text";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
-import { fetchApplicationCount } from "~/modules/application-counts";
-import { ApplicationKind, fetchApplications } from "~/modules/applications";
+import { fetchApplications } from "~/modules/applications";
 import { clearTemplateTarget } from "~/modules/deployment-configs";
 import { stringifySearchParams, useSearchParams } from "~/utils/search-params";
 import { AddApplicationDrawer } from "./add-application-drawer";
-import { ApplicationCounts } from "./application-counts";
 import { ApplicationFilter } from "./application-filter";
 import { ApplicationList } from "./application-list";
 import { DeploymentConfigForm } from "./deployment-config-form";
@@ -97,20 +95,12 @@ export const ApplicationIndexPage: FC = () => {
 
   const fetchApplicationsWithOptions = useCallback(() => {
     dispatch(fetchApplications(filterOptions));
-    dispatch(fetchApplicationCount());
   }, [dispatch, filterOptions]);
 
   const handleCloseTemplateForm = (): void => {
     dispatch(clearTemplateTarget());
   };
 
-  const handleApplicationCountClick = useCallback(
-    (kind: ApplicationKind) => {
-      updateURL({ ...filterOptions, kind });
-    },
-    [updateURL, filterOptions]
-  );
-
   const handlePageChange = useCallback(
     (page: number) => {
       updateURL({ ...filterOptions, page });
@@ -157,7 +147,6 @@ export const ApplicationIndexPage: FC = () => {
 
       <div className={classes.main}>
         <Box display="flex" flexDirection="column" flex={1} p={2}>
-          <ApplicationCounts onClick={handleApplicationCountClick} />
           <ApplicationList
             currentPage={currentPage}
             onPageChange={handlePageChange}

pkg/app/web/src/components/applications-page/application-counts/index.test.tsx → pkg/app/web/src/components/insight-page/application-counts/index.test.tsx

@@ -42,8 +42,8 @@ test("displaying application counts", () => {
   expect(screen.queryByText("TERRAFORM")).toBeInTheDocument();
   expect(screen.queryByText("75")).toBeInTheDocument();
   expect(screen.queryByText("/2")).toBeInTheDocument();
-  expect(screen.queryByText("CROSSPLANE")).not.toBeInTheDocument();
-  expect(screen.queryByText("LAMBDA")).not.toBeInTheDocument();
-  expect(screen.queryByText("CLOUDRUN")).not.toBeInTheDocument();
-  expect(screen.queryByText("ECS")).not.toBeInTheDocument();
+  expect(screen.queryByText("CROSSPLANE")).toBeInTheDocument();
+  expect(screen.queryByText("LAMBDA")).toBeInTheDocument();
+  expect(screen.queryByText("CLOUDRUN")).toBeInTheDocument();
+  expect(screen.queryByText("ECS")).toBeInTheDocument();
 });

pkg/app/web/src/components/applications-page/application-counts/index.tsx → pkg/app/web/src/components/insight-page/application-counts/index.tsx

@@ -38,17 +38,6 @@ export const ApplicationCounts: FC<ApplicationCountsProps> = memo(
     return (
       <div className={classes.root}>
         {Object.keys(counts).map((kindName) => {
-          if (
-            counts[kindName][
-              APPLICATION_ACTIVE_STATUS_NAME[ApplicationActiveStatus.ENABLED]
-            ] === 0 &&
-            counts[kindName][
-              APPLICATION_ACTIVE_STATUS_NAME[ApplicationActiveStatus.DISABLED]
-            ] === 0
-          ) {
-            return null;
-          }
-
           return (
             <ApplicationCount
               key={kindName}

pkg/app/web/src/components/insight-page/index.tsx

@@ -1,8 +1,12 @@
 import { Box } from "@material-ui/core";
-import { FC, memo, useEffect } from "react";
+import { FC, memo, useEffect, useCallback } from "react";
+import { useHistory } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
-import { fetchApplications, selectById } from "~/modules/applications";
+import { PAGE_PATH_APPLICATIONS } from "~/constants/path";
+import { ApplicationKind, fetchApplications, selectById } from "~/modules/applications";
+import { fetchApplicationCount } from "~/modules/application-counts";
 import { InsightDataPoint } from "~/modules/insight";
+import { ApplicationCounts } from "./application-counts";
 import { ChangeFailureRateChart } from "./change-failure-rate-chart";
 import { DeploymentFrequencyChart } from "./deployment-frequency-chart";
 import { InsightHeader } from "./insight-header";
@@ -11,6 +15,7 @@ import { MeanTimeToRestoreChart } from "./mean-time-to-restore-chart";
 
 export const InsightIndexPage: FC = memo(function InsightIndexPage() {
   const dispatch = useAppDispatch();
+  const history = useHistory();
 
   const deploymentFrequency = useAppSelector<InsightDataPoint.AsObject[]>(
     (state) => state.deploymentFrequency.data
@@ -29,10 +34,29 @@ export const InsightIndexPage: FC = memo(function InsightIndexPage() {
 
   useEffect(() => {
     dispatch(fetchApplications());
+    dispatch(fetchApplicationCount());
   }, [dispatch]);
 
+  const updateURL = useCallback((kind: ApplicationKind) => {
+      history.replace(
+        `${PAGE_PATH_APPLICATIONS}?kind=${kind}`
+      );
+    },
+    [history]
+  );
+
+  const handleApplicationCountClick = useCallback(
+    (kind: ApplicationKind) => {
+      updateURL(kind);
+    },
+    [updateURL]
+  );
+
   return (
     <Box flex={1} p={2} overflow="auto">
+      <Box display="flex" flexDirection="column" flex={1} p={2}>
+        <ApplicationCounts onClick={handleApplicationCountClick} />
+      </Box>
       <InsightHeader />
       <Box
         display="grid"