Merge pull request #2354 from flanksource/fix-tables-crashing

Fix-tables-crashing

Author: mainawycliffe

src/api/services/notifications.ts

@@ -26,7 +26,9 @@ export function getPagingParams({
 
 export const getNotificationsSummary = async ({
   pageIndex,
-  pageSize
+  pageSize,
+  sortBy,
+  sortOrder
 }: NotificationQueryFilterOptions) => {
   const pagingParams = getPagingParams({ pageIndex, pageSize });
 
@@ -37,9 +39,13 @@ export const getNotificationsSummary = async ({
     `created_by(${AVATAR_INFO})`
   ].join(",");
 
+  const sortParams = sortBy
+    ? `&order=${sortBy}.${sortOrder}`
+    : "&order=created_at.desc";
+
   return resolvePostGrestRequestWithPagination(
     IncidentCommander.get<NotificationRules[] | null>(
-      `/notifications_summary?select=${selectColumns}&order=created_at.desc${pagingParams}`,
+      `/notifications_summary?select=${selectColumns}${sortParams}${pagingParams}`,
       {
         headers: {
           Prefer: "count=exact"
@@ -131,11 +137,15 @@ export const getNotificationSendHistoryById = async (id: string) => {
 export type NotificationQueryFilterOptions = {
   pageIndex: number;
   pageSize: number;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
 };
 
 export const getNotificationSilences = async ({
   pageIndex,
-  pageSize
+  pageSize,
+  sortBy,
+  sortOrder
 }: NotificationQueryFilterOptions) => {
   const pagingParams = getPagingParams({ pageIndex, pageSize });
 
@@ -147,9 +157,11 @@ export const getNotificationSilences = async ({
     `createdBy:created_by(${AVATAR_INFO})`
   ].join(",");
 
+  const sortParams = sortBy ? `&order=${sortBy}.${sortOrder}` : "";
+
   return resolvePostGrestRequestWithPagination(
     IncidentCommander.get<NotificationSilenceItemApiResponse[] | null>(
-      `/notification_silences?select=${selectColumns}&order=created_at.desc${pagingParams}&deleted_at=is.null`,
+      `/notification_silences?select=${selectColumns}&order=created_at.desc${pagingParams}&deleted_at=is.null&${sortParams}`,
       {
         headers: {
           Prefer: "count=exact"

src/components/Agents/List/AgentsTable.tsx

@@ -35,6 +35,7 @@ export default function AgentsTable({
           searchParams.set("id", agent.id!);
           setSearchParams(searchParams);
         }}
+        enableServerSideSorting
       />
       {agentId && (
         <AgentForm

src/components/Notifications/Rules/NotificationsRulesTable.tsx

@@ -60,13 +60,14 @@ export default function NotificationsRulesTable({
         </Modal>
       )}
       <MRTDataTable
-        data={notifications}
+        data={notifications ?? []}
         columns={notificationsRulesTableColumns}
         isLoading={isLoading}
         onRowClick={onSelectNotification}
         enableServerSidePagination
         manualPageCount={pageCount}
         totalRowCount={totalRecordCount}
+        enableServerSideSorting
       />
       {selectedNotificationId && (
         <EditNotificationRules

src/components/Notifications/SilenceNotificationsList.tsx

@@ -224,8 +224,9 @@ export default function SilenceNotificationsList({
         }}
         isLoading={isLoading}
         manualPageCount={pageCount}
-        enableServerSidePagination={true}
+        enableServerSidePagination
         totalRowCount={recordCount}
+        enableServerSideSorting
       />
       {selectedNotificationSilence && (
         <EditNotificationSilenceModal

src/pages/Settings/notifications/NotificationsRulesPage.tsx

@@ -1,5 +1,6 @@
 import { NotificationRules } from "@flanksource-ui/api/types/notifications";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useState } from "react";
 import {
   useCreateNotification,
@@ -14,12 +15,15 @@ export default function NotificationRulesPage() {
   const [isOpen, setIsOpen] = useState(false);
 
   const { pageIndex, pageSize } = useReactTablePaginationState();
+  const [sortState] = useReactTableSortState();
 
   const { data, isLoading, refetch, isRefetching } =
     useNotificationsSummaryQuery(
       {
         pageIndex,
-        pageSize
+        pageSize,
+        sortBy: sortState[0]?.id,
+        sortOrder: sortState[0]?.desc ? "desc" : "asc"
       },
       {
         keepPreviousData: true

src/pages/Settings/notifications/NotificationsSilencedPage.tsx

@@ -1,14 +1,24 @@
 import { getNotificationSilences } from "@flanksource-ui/api/services/notifications";
 import SilenceNotificationsList from "@flanksource-ui/components/Notifications/SilenceNotificationsList";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useQuery } from "@tanstack/react-query";
 import NotificationTabsLinks from "../../../components/Notifications/NotificationTabsLinks";
 
 export default function NotificationsSilencedPage() {
   const { pageIndex, pageSize } = useReactTablePaginationState();
+  const [sortState] = useReactTableSortState();
 
   const { data, isLoading, refetch, isRefetching } = useQuery({
-    queryKey: ["notification_silences", { pageIndex, pageSize }],
+    queryKey: [
+      "notification_silences",
+      {
+        pageIndex,
+        pageSize,
+        sortBy: sortState[0]?.id,
+        sortOrder: sortState[0]?.desc ? "desc" : "asc"
+      }
+    ],
     queryFn: () => getNotificationSilences({ pageIndex, pageSize }),
     keepPreviousData: true
   });

src/ui/DataTable/Hooks/useReactTableSortState.tsx

@@ -32,7 +32,10 @@ export default function useReactTableSortState(
 
   const updateSortByFn = useCallback(
     (newSortBy: Updater<SortingState>) => {
-      const sort = typeof newSortBy === "function" ? newSortBy([]) : newSortBy;
+      const sort =
+        typeof newSortBy === "function"
+          ? newSortBy([...tableSortByState])
+          : newSortBy;
       if (sort.length === 0) {
         searchParams.delete(sortByKey);
         searchParams.delete(sortOrderKey);
@@ -42,7 +45,7 @@ export default function useReactTableSortState(
       }
       setSearchParams(searchParams);
     },
-    [searchParams, setSearchParams, sortByKey, sortOrderKey]
+    [searchParams, setSearchParams, sortByKey, sortOrderKey, tableSortByState]
   );
 
   return [tableSortByState, updateSortByFn];

src/ui/MRTDataTable/MRTDataTable.tsx

@@ -99,7 +99,7 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
       sx: {
         flex: "1 1 0",
         display: "flex",
-        "flex-flow": "column"
+        flexFlow: "column"
       }
     }),
     enablePagination: !disablePagination,