fix: use mantine react table for config summary

Author: mainawycliffe

package-lock.json

@@ -128,7 +128,7 @@ export interface ConfigAnalysis extends Analysis, CreatedAt, Avatar {
 export type ConfigSummary = {
   type: string;
   analysis?: Record<string, any>;
-  changes?: string;
+  changes?: number;
   count: number;
   health: {
     healthy: number;

src/api/types/configs.ts

@@ -1,3 +1,4 @@
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { CellContext, Row } from "@tanstack/react-table";
 import { MRT_Row } from "mantine-react-table";
 import {
@@ -9,7 +10,7 @@ import ConfigCostValue from "../../ConfigCosts/ConfigCostValue";
 
 export default function ConfigListCostCell({
   row
-}: CellContext<ConfigItem, any> | CellContext<ConfigSummary, any>) {
+}: MRTCellProps<ConfigItem> | MRTCellProps<ConfigSummary>) {
   return <ConfigCostValue config={row.original} popover={false} />;
 }
 /**

src/components/Configs/ConfigList/Cells/ConfigListCostCell.tsx

@@ -89,7 +89,6 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
   {
     header: "Status",
     accessorKey: "health",
-    minSize: 200,
     enableSorting: true,
     enableColumnActions: false,
     Cell: ({ cell, row }) => {
@@ -132,7 +131,6 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
 
       return <ChangeCountIcon count={value} />;
     },
-    size: 200,
     meta: {
       cellClassName: "overflow-hidden"
     },
@@ -148,8 +146,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
         enableFilterByTag
         filterByTagParamKey="labels"
       />
-    ),
-    minSize: 100
+    )
   },
   {
     header: "Analysis",
@@ -248,16 +245,16 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
     accessorKey: "deleted_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    size: 90,
-    enableHiding: true
+    enableHiding: true,
+    maxSize: 100
   },
   {
     header: "Changed",
     enableColumnActions: false,
     accessorFn: changeColumnAccessorFN,
     id: "changed",
+    maxSize: 100
     // sortingFn: changeColumnSortingFN,
-    size: 180
   }
 ];
 

src/components/Configs/ConfigList/MRTConfigListColumn.tsx

@@ -1,22 +1,22 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 
-import { CellContext } from "@tanstack/react-table";
-import { useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
-import { getConfigStatusColor } from "../ConfigSummaryList";
 import {
   Count,
   CountBar,
   OrderByColor
 } from "@flanksource-ui/ui/Icons/ChangeCount";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getConfigStatusColor } from "../ConfigSummaryList";
 
 export function ConfigSummaryHealthCell({
-  getValue,
+  cell,
   row
-}: CellContext<ConfigSummary, any>) {
+}: MRTCellProps<ConfigSummary>) {
   const [searchParams] = useSearchParams();
 
-  const value = getValue<ConfigSummary["health"]>();
+  const value = cell.getValue<ConfigSummary["health"]>();
   const type = row.original.type;
   const groupBy = searchParams.get("groupBy");
 
@@ -59,8 +59,8 @@ export function ConfigSummaryHealthCell({
 
 export function ConfigSummaryHealthAggregateCell({
   row
-}: CellContext<ConfigSummary, any>) {
-  const value = row.subRows.reduce(
+}: Pick<MRTCellProps<ConfigSummary>, "row">) {
+  const value = row.subRows?.reduce(
     (acc, row) => {
       const health = row.original.health;
       if (health) {

src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx

@@ -1,23 +1,24 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { CellContext } from "@tanstack/react-table";
-import { IoChevronDown, IoChevronForward } from "react-icons/io5";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import ConfigsTypeIcon from "../../ConfigsTypeIcon";
 
 export function ConfigSummaryTableVirtualAggregateColumn({
   row
-}: CellContext<ConfigSummary, any>) {
+}: Pick<MRTCellProps<ConfigSummary>, "row">) {
   if (row.getCanExpand()) {
     const groupingValue = row.getGroupingValue(row.groupingColumnId!) as string;
-    const count = row.subRows.reduce((acc, row) => acc + row.original.count, 0);
+    const count = row.subRows?.reduce(
+      (acc, row) => acc + row.original.count,
+      0
+    );
     return (
       <div
         className="flex flex-row items-center gap-1"
         style={{
           marginLeft: row.depth * 20
         }}
       >
-        {row.getIsExpanded() ? <IoChevronDown /> : <IoChevronForward />}
         {row.groupingColumnId === "type" ||
         row.groupingColumnId === "config_class" ? (
           <ConfigsTypeIcon

src/components/Configs/ConfigSummary/Cells/ConfigSummaryTableVirtualAggregateColumn.tsx

@@ -1,19 +1,19 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { CellContext } from "@tanstack/react-table";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { BiLabel } from "react-icons/bi";
 
 export function ConfigSummaryVirtualColumnCell({
-  getValue,
   row,
   groupByTags,
-  columnId
-}: CellContext<ConfigSummary, any> & {
+  columnId,
+  cell
+}: MRTCellProps<ConfigSummary> & {
   groupByTags: string[];
   columnId: string;
 }) {
   const isTag = groupByTags.includes(columnId);
-  const value = getValue();
+  const value = cell.getValue<any>();
 
   return (
     <div