refactor: use MRT for config relationships

Fixes #2285

fix: typescript error

refactor: move to MRT for tables for configs

Fixes  #2285

fix: fix empty text for default grouping value

Author: mainawycliffe

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

@@ -1,11 +1,11 @@
+import { ConfigItem } from "@flanksource-ui/api/types/configs";
 import ChangeCountIcon from "@flanksource-ui/ui/Icons/ChangeCount";
-import { CellContext } from "@tanstack/react-table";
-import { ConfigItem } from "../../../../api/types/configs";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 
 export default function ConfigListChangeCell({
   row,
   column
-}: CellContext<ConfigItem, any>) {
+}: MRTCellProps<ConfigItem>) {
   const changes = row?.getValue<ConfigItem["changes"]>(column.id);
 
   if (!changes) {

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

@@ -1,4 +1,5 @@
 import { CellContext, Row } from "@tanstack/react-table";
+import { MRT_Row } from "mantine-react-table";
 import {
   ConfigItem,
   ConfigSummary,
@@ -16,14 +17,19 @@ export default function ConfigListCostCell({
  * Recursively aggregate costs for a given row and its children, and its children's children, etc.
  *
  */
-const aggregatedCosts = (
-  rows: Row<ConfigItem>,
+export const aggregatedCosts = (
+  rows: Row<ConfigItem> | MRT_Row<ConfigItem>,
   data: Required<Costs>
 ): Required<Costs> => {
-  if (rows.subRows.length === 0) {
+  const subRows = rows.subRows;
+  if (!subRows) {
     return data;
   }
-  return rows.subRows.reduce((acc, row) => {
+  if (subRows.length === 0) {
+    return data;
+  }
+  // @ts-ignore
+  return subRows.reduce((acc, row) => {
     if (row.original) {
       acc.cost_total_30d! += row.original.cost_total_30d ?? 0;
       acc.cost_total_7d! += row.original.cost_total_7d ?? 0;

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

@@ -1,3 +1,4 @@
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { CellContext } from "@tanstack/react-table";
 import { FaTrash } from "react-icons/fa";
 import { Age } from "../../../../ui/Age";
@@ -22,3 +23,24 @@ export default function ConfigListDateCell<T extends Record<string, any>>({
     </div>
   );
 }
+
+export function MRTConfigListDateCell<T extends Record<string, any>>({
+  column,
+  row,
+  cell
+}: MRTCellProps<T>) {
+  const dateString = cell.getValue();
+  if (dateString === "0001-01-01T00:00:00") {
+    return null;
+  }
+  const isDeleted = !!row.original.deleted_at;
+  const value = isDeleted ? row.original.deleted_at : dateString;
+  return (
+    <div className="text-xs">
+      <Age from={value} />
+      {column.id === "updated_at" && isDeleted && (
+        <FaTrash className="mx-2 inline h-4 w-4 align-middle text-gray-400" />
+      )}
+    </div>
+  );
+}

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

@@ -1,9 +1,9 @@
-import { CellContext } from "@tanstack/react-table";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import React from "react";
 import { ConfigItem } from "../../../../api/types/configs";
 import ConfigsTypeIcon from "../../ConfigsTypeIcon";
 
-function ConfigListNameCell({ row, getValue }: CellContext<ConfigItem, any>) {
+function ConfigListNameCell({ row, cell }: MRTCellProps<ConfigItem>) {
   const configType = row.original.type;
 
   return (
@@ -14,7 +14,7 @@ function ConfigListNameCell({ row, getValue }: CellContext<ConfigItem, any>) {
       }}
     >
       <ConfigsTypeIcon config={{ type: configType }} showPrimaryIcon={false}>
-        <span>{getValue()}</span>
+        <span>{cell.getValue<string>()}</span>
       </ConfigsTypeIcon>
     </div>
   );

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

@@ -4,12 +4,15 @@ import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import { ConfigItem } from "../../../../api/types/configs";
 
-type MRTConfigListTagsCellProps<T extends Pick<ConfigItem, "tags" | "id">> =
-  Pick<MRTCellProps<T>, "cell" | "row"> & {
-    hideGroupByView?: boolean;
-    label?: string;
-    enableFilterByTag?: boolean;
-  };
+type MRTConfigListTagsCellProps<
+  T extends {
+    tags?: Record<string, any>;
+    id: string;
+  }
+> = MRTCellProps<T> & {
+  hideGroupByView?: boolean;
+  enableFilterByTag?: boolean;
+};
 
 export default function MRTConfigListTagsCell<
   T extends { tags?: Record<string, any>; id: string }