refactor: switch to MRT for Config Insights Table

Fixes #2285

Author: mainawycliffe

src/api/query-hooks/useFetchConfigInsights.tsx

@@ -0,0 +1,42 @@
+import { useSearchParams } from "react-router-dom";
+import { useConfigInsightsQuery } from "./useConfigAnalysisQuery";
+
+export default function useFetchConfigInsights(
+  setIsLoading: (isLoading: boolean) => void,
+  configId?: string
+) {
+  const [params] = useSearchParams();
+
+  const status = params.get("status") ?? undefined;
+  const severity = params.get("severity") ?? undefined;
+  const type = params.get("type") ?? undefined;
+  const configType = params.get("configType") ?? undefined;
+  const analyzer = params.get("analyzer") ?? undefined;
+  const component = params.get("component") ?? undefined;
+  const pageSize = +(params.get("pageSize") ?? 50);
+  const pageIndex = +(params.get("pageIndex") ?? 0);
+
+  return useConfigInsightsQuery(
+    {
+      status,
+      severity: severity?.toLowerCase(),
+      type,
+      analyzer,
+      component,
+      configId,
+      configType
+    },
+    {
+      sortBy: params.get("sortBy") ?? undefined,
+      sortOrder: params.get("sortOrder") as "asc" | "desc" | undefined
+    },
+    {
+      pageIndex,
+      pageSize
+    },
+    {
+      keepPreviousData: true,
+      onSuccess: () => setIsLoading(false)
+    }
+  );
+}

src/components/Configs/Insights/ConfigInsightsColumns.tsx

@@ -1,22 +1,20 @@
 import { ConfigAnalysis, ConfigItem } from "@flanksource-ui/api/types/configs";
-import { DateCell } from "@flanksource-ui/ui/DataTable/Cells/DateCells";
-import { ColumnDef } from "@tanstack/react-table";
+import { MRTDateCell } from "@flanksource-ui/ui/MRTDataTable/Cells/MRTDateCells";
+import { MRT_ColumnDef } from "mantine-react-table";
 import { Link } from "react-router-dom";
 import { ConfigIcon } from "../../../ui/Icons/ConfigIcon";
 import ConfigInsightsIcon from "./ConfigInsightsIcon";
 import ConfigInsightsSeverityIcons from "./ConfigInsightsSeverityIcons";
 
-export const ConfigInsightsColumns: ColumnDef<
-  ConfigAnalysis & { config?: ConfigItem },
-  any
+export const ConfigInsightsColumns: MRT_ColumnDef<
+  ConfigAnalysis & { config?: ConfigItem }
 >[] = [
   {
     header: "Catalog",
     id: "catalog",
-    aggregatedCell: "",
     enableHiding: true,
     size: 100,
-    cell: ({ cell }) => {
+    Cell: ({ cell }) => {
       const config = cell.row.original.config;
 
       return (
@@ -32,10 +30,9 @@ export const ConfigInsightsColumns: ColumnDef<
   {
     header: "Type",
     id: "analysis_type",
-    aggregatedCell: "",
     accessorKey: "analysis_type",
     size: 50,
-    cell: ({ cell }) => {
+    Cell: ({ cell }) => {
       const data = cell.row.original;
 
       return (
@@ -52,14 +49,15 @@ export const ConfigInsightsColumns: ColumnDef<
   {
     header: "Analyzer",
     id: "analyzer",
-    aggregatedCell: "",
     accessorKey: "analyzer",
     size: 100,
     enableGrouping: true,
-    cell: ({ getValue }) => {
+    Cell: ({ cell }) => {
+      const value = cell.getValue<string>();
+
       return (
         <span className="flex-1 overflow-hidden overflow-ellipsis">
-          {getValue<string>()}
+          {value}
         </span>
       );
     },
@@ -68,41 +66,39 @@ export const ConfigInsightsColumns: ColumnDef<
   {
     header: "Severity",
     id: "severity",
-    aggregatedCell: "",
     accessorKey: "severity",
     size: 50,
     enableSorting: false,
-    cell: ({ getValue }) => {
+    Cell: ({ cell }) => {
+      const value = cell.getValue<string>();
+
       return (
         <div className="flex flex-1 flex-row items-center gap-1 overflow-hidden overflow-ellipsis capitalize">
-          <ConfigInsightsSeverityIcons severity={getValue<string>()} />
-          <span>{getValue<string>()}</span>
+          <ConfigInsightsSeverityIcons severity={value} />
+          <span>{value}</span>
         </div>
       );
     }
   },
   {
     header: "Status",
     id: "status",
-    aggregatedCell: "",
     accessorKey: "status",
     size: 50,
     enableSorting: false
   },
   {
     header: "First Observed",
     id: "first_observed",
-    aggregatedCell: "",
     accessorKey: "first_observed",
     size: 50,
-    cell: DateCell
+    Cell: MRTDateCell
   },
   {
     header: "Last Observed",
     id: "last_observed",
-    aggregatedCell: "",
     accessorKey: "last_observed",
     size: 50,
-    cell: DateCell
+    Cell: MRTDateCell
   }
 ];

src/components/Configs/Insights/ConfigInsightsList.tsx

@@ -1,8 +1,7 @@
-import { useConfigInsightsQuery } from "@flanksource-ui/api/query-hooks/useConfigAnalysisQuery";
+import useFetchConfigInsights from "@flanksource-ui/api/query-hooks/useFetchConfigInsights";
 import { ConfigAnalysis } from "@flanksource-ui/api/types/configs";
-import { DataTable, PaginationOptions } from "@flanksource-ui/ui/DataTable";
-import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
-import { useMemo, useState } from "react";
+import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
+import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { InfoMessage } from "../../InfoMessage";
 import ConfigInsightsDetailsModal from "./ConfigAnalysisLink/ConfigInsightsDetailsModal";
@@ -21,47 +20,18 @@ export default function ConfigInsightsList({
   configId,
   columnsToHide = []
 }: Props) {
-  const [params, setParams] = useSearchParams();
+  const [params] = useSearchParams();
   const [clickedInsightItem, setClickedInsightItem] =
     useState<ConfigAnalysis>();
   const [isInsightDetailsModalOpen, setIsInsightDetailsModalOpen] =
     useState(false);
 
-  const status = params.get("status") ?? undefined;
-  const severity = params.get("severity") ?? undefined;
-  const type = params.get("type") ?? undefined;
-  const configType = params.get("configType") ?? undefined;
-  const analyzer = params.get("analyzer") ?? undefined;
-  const component = params.get("component") ?? undefined;
   const pageSize = +(params.get("pageSize") ?? 50);
-  const pageIndex = +(params.get("pageIndex") ?? 0);
 
   const { data, isLoading, refetch, isRefetching, error } =
-    useConfigInsightsQuery(
-      {
-        status,
-        severity: severity?.toLowerCase(),
-        type,
-        analyzer,
-        component,
-        configId,
-        configType
-      },
-      {
-        sortBy: params.get("sortBy") ?? undefined,
-        sortOrder: params.get("sortOrder") as "asc" | "desc" | undefined
-      },
-      {
-        pageIndex,
-        pageSize
-      },
-      {
-        keepPreviousData: true,
-        onSuccess: () => setIsLoading(false)
-      }
-    );
+    useFetchConfigInsights(setIsLoading, configId);
 
-  useMemo(() => {
+  useEffect(() => {
     setIsLoading(true);
     refetch();
     // we only want to trigger this effect when the triggerRefresh changes and
@@ -71,63 +41,27 @@ export default function ConfigInsightsList({
 
   const configInsights = data?.data ?? [];
 
-  const totalEntries = (data as any)?.totalEntries;
+  const totalEntries = data?.totalEntries;
   const pageCount = totalEntries ? Math.ceil(totalEntries / pageSize) : -1;
 
-  const [sortBy, updateSortBy] = useReactTableSortState();
-
-  const pagination = useMemo(() => {
-    const pagination: PaginationOptions = {
-      setPagination: (updater) => {
-        const newParams =
-          typeof updater === "function"
-            ? updater({
-                pageIndex,
-                pageSize
-              })
-            : updater;
-        params.set("pageIndex", newParams.pageIndex.toString());
-        params.set("pageSize", newParams.pageSize.toString());
-        setParams(params);
-      },
-      pageIndex,
-      pageSize,
-      pageCount,
-      remote: true,
-      enable: true,
-      loading: isLoading || isRefetching
-    };
-    return pagination;
-  }, [
-    pageIndex,
-    pageSize,
-    pageCount,
-    isLoading,
-    isRefetching,
-    params,
-    setParams
-  ]);
-
   return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
       {error ? (
         <InfoMessage message={error.message} />
       ) : (
-        <DataTable
-          columns={configInsightsColumns}
+        <MRTDataTable
           data={configInsights}
-          isLoading={isLoading}
-          stickyHead
-          pagination={pagination}
+          isLoading={isLoading || isRefetching}
           hiddenColumns={columnsToHide}
-          handleRowClick={(row) => {
-            setClickedInsightItem(row.original);
+          onRowClick={(row) => {
+            setClickedInsightItem(row);
             setIsInsightDetailsModalOpen(true);
           }}
           enableServerSideSorting
-          tableSortByState={sortBy}
-          onTableSortByChanged={updateSortBy}
+          totalRowCount={totalEntries}
+          manualPageCount={pageCount}
+          columns={configInsightsColumns}
         />
       )}