chore(prettier): fix issues

packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx

@@ -41,7 +41,6 @@ import {
   rescheduleJobs,
   useJobs,
 } from "./JobDataService";
-import { InternalFilter } from "@/types/Filter";
 import { JobHistory } from "@/types/JobHistory";
 import { Job, SearchBody } from "@/types";
 
@@ -129,8 +128,6 @@ const headCells: Array<
   }) as AccessorKeyColumnDef<Job, Date>,
 ];
 
-type Order = "asc" | "desc";
-
 /**
  * The data grid for the jobs
  */
@@ -147,16 +144,13 @@ export function JobDataTable() {
     message: "",
     severity: "success",
   });
-  // State for sorting
-  const [order, setOrder] = React.useState<Order>("asc");
-  const [orderBy, setOrderBy] = React.useState<string | number>("JobID");
   // State for pagination
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(25);
-  // State for filters
-  const [filters, setFilters] = React.useState<InternalFilter[]>([]);
   // State for search body
-  const [searchBody, setSearchBody] = React.useState<SearchBody>({});
+  const [searchBody, setSearchBody] = React.useState<SearchBody>({
+    sort: [{ parameter: "JobID", direction: "asc" }],
+  });
   // State for job history
   const [isHistoryDialogOpen, setIsHistoryDialogOpen] = React.useState(false);
   const [jobHistoryData, setJobHistoryData] = React.useState<JobHistory[]>([]);
@@ -171,23 +165,8 @@ export function JobDataTable() {
     rowsPerPage,
   );
 
-  const dataHeader = data?.headers;
   const results = data?.data || [];
 
-  // Parse the headers to get the first item, last item and number of items
-  const contentRange = dataHeader?.get("content-range");
-  let totalJobs = 0;
-
-  if (contentRange) {
-    const match = contentRange.match(/jobs (\d+)-(\d+)\/(\d+)/);
-    if (match) {
-      totalJobs = parseInt(match[3]);
-    }
-  } else if (results) {
-    totalJobs = results.length;
-  }
-
-  const columns = headCells;
   const clearSelected = () => setSelected([]);
 
   /**
@@ -364,17 +343,11 @@ export function JobDataTable() {
         setPage={setPage}
         rowsPerPage={rowsPerPage}
         setRowsPerPage={setRowsPerPage}
-        order={order}
-        setOrder={setOrder}
-        orderBy={orderBy}
-        setOrderBy={setOrderBy}
-        totalRows={totalJobs}
         selected={selected}
         setSelected={setSelected}
-        filters={filters}
-        setFilters={setFilters}
+        searchBody={searchBody}
         setSearchBody={setSearchBody}
-        columns={columns}
+        columns={headCells}
         rows={results}
         error={error}
         isLoading={isLoading}

packages/diracx-web-components/components/shared/DataTable.stories.tsx

@@ -2,6 +2,10 @@ import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import { useArgs } from "@storybook/core/preview-api";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import {
+  AccessorKeyColumnDef,
+  createColumnHelper,
+} from "@tanstack/react-table";
 import { useMUITheme } from "../../hooks/theme";
 import { DataTable } from "./DataTable";
 
@@ -18,15 +22,9 @@ const meta = {
     setPage: { control: false },
     rowsPerPage: { control: "number" },
     setRowsPerPage: { control: false },
-    order: { control: "radio" },
-    setOrder: { control: false },
-    orderBy: { control: "text" },
-    setOrderBy: { control: false },
-    totalRows: { control: "number" },
     selected: { control: "object" },
     setSelected: { control: false },
-    filters: { control: "object" },
-    setFilters: { control: false },
+    searchBody: { control: false },
     setSearchBody: { control: false },
     columns: { control: "object" },
     rows: { control: "object" },
@@ -51,6 +49,34 @@ const meta = {
   ],
 } satisfies Meta<typeof DataTable>;
 
+interface SimpleItem extends Record<string, unknown> {
+  id: number;
+  name: string;
+  email: string;
+  [key: string]: unknown;
+}
+
+const columnHelper = createColumnHelper<SimpleItem>();
+
+const columns: Array<
+  | AccessorKeyColumnDef<Record<string, unknown>, number>
+  | AccessorKeyColumnDef<Record<string, unknown>, string>
+  | AccessorKeyColumnDef<Record<string, unknown>, Date>
+> = [
+  columnHelper.accessor("id", {
+    header: "ID",
+    meta: { type: "number" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, number>,
+  columnHelper.accessor("name", {
+    header: "Name",
+    meta: { type: "string" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, string>,
+  columnHelper.accessor("email", {
+    header: "Email",
+    meta: { type: "string" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, string>,
+];
+
 export default meta;
 type Story = StoryObj<typeof meta>;
 
@@ -68,21 +94,11 @@ export const Default: Story = {
     setPage: () => {},
     rowsPerPage: 25,
     setRowsPerPage: () => {},
-    order: "asc",
-    setOrder: () => {},
-    orderBy: "id",
-    setOrderBy: () => {},
-    totalRows: 1,
     selected: [],
     setSelected: () => {},
-    filters: [],
-    setFilters: () => {},
+    searchBody: { sort: [{ parameter: "id", direction: "asc" }] },
     setSearchBody: () => {},
-    columns: [
-      { id: "id", label: "ID" },
-      { id: "name", label: "Name" },
-      { id: "email", label: "Email" },
-    ],
+    columns: columns,
     rows: [{ id: 1, name: "John Doe", email: "[email protected]" }],
     error: "",
     isValidating: false,
@@ -103,15 +119,6 @@ export const Default: Story = {
         newRowsPerPage = newRowsPerPage(props.rowsPerPage);
       updateArgs({ rowsPerPage: newRowsPerPage });
     };
-    props.setOrder = (newOrder) => {
-      if (typeof newOrder === "function") newOrder = newOrder(props.order);
-      updateArgs({ order: newOrder });
-    };
-    props.setOrderBy = (newOrderBy) => {
-      if (typeof newOrderBy === "function")
-        newOrderBy = newOrderBy(props.orderBy);
-      updateArgs({ orderBy: newOrderBy });
-    };
     props.setSelected = (newSelected) => {
       if (typeof newSelected === "function")
         newSelected = newSelected(props.selected);

packages/diracx-web-components/components/shared/DataTable.tsx

@@ -126,7 +126,7 @@ function DataTableToolbar(props: DataTableToolbarProps) {
             open={snackbarOpen}
             autoHideDuration={6000}
             onClose={() => setSnackbarOpen(false)}
-            message="Job IDs copied to clipboard"
+            message="IDs copied to clipboard"
           />
           {toolbarComponents}
         </Stack>
@@ -146,8 +146,6 @@ function DataTableToolbar(props: DataTableToolbarProps) {
  * @property {function} setRowsPerPage - the function to call when the rows per page change
  * @property {number[]} selected - the selected rows
  * @property {function} setSelected - the function to call when the selected rows change
- * @property {Filter[]} filters - the filters to apply
- * @property {function} setFilters - the function to call when the filters change
  * @property {function} setSearchBody - the function to call when the search body changes
  * @property {AccessorKeyColumnDef[]} columns - the columns of the table
  * @property {T[]} rows - the rows of the table
@@ -168,24 +166,12 @@ interface DataTableProps<T extends Record<string, unknown>> {
   rowsPerPage: number;
   /** The function to call when the rows per page change */
   setRowsPerPage: React.Dispatch<React.SetStateAction<number>>;
-  /** The order of the table, either "asc" or "desc" */
-  order: "asc" | "desc";
-  /** The function to call when the order changes */
-  setOrder: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
-  /** The column to order by */
-  orderBy: string | number;
-  /** The function to call when the order by changes */
-  setOrderBy: React.Dispatch<React.SetStateAction<string | number>>;
-  /** The total number of rows */
-  totalRows: number;
   /** The selected rows */
   selected: readonly number[];
   /** The function to call when the selected rows change */
   setSelected: React.Dispatch<React.SetStateAction<readonly number[]>>;
-  /** The filters to apply */
-  filters: InternalFilter[];
-  /** The function to call when the filters change */
-  setFilters: React.Dispatch<React.SetStateAction<InternalFilter[]>>;
+  /** The search body to send along with the request */
+  searchBody: SearchBody;
   /** The function to call when the search body changes */
   setSearchBody: React.Dispatch<React.SetStateAction<SearchBody>>;
   /** The columns of the table */
@@ -226,15 +212,9 @@ export function DataTable<T extends Record<string, unknown>>(
     setPage,
     rowsPerPage,
     setRowsPerPage,
-    order,
-    setOrder,
-    orderBy,
-    setOrderBy,
-    totalRows,
     selected,
     setSelected,
-    filters,
-    setFilters,
+    searchBody,
     setSearchBody,
     columns,
     rows,
@@ -255,6 +235,8 @@ export function DataTable<T extends Record<string, unknown>>(
   const { getParam, setParam } = useSearchParamsUtils();
   const appId = getParam("appId");
 
+  // State for filters
+  const [filters, setFilters] = React.useState<InternalFilter[]>([]);
   const [appliedFilters, setAppliedFilters] =
     React.useState<InternalFilter[]>(filters);
 
@@ -348,9 +330,10 @@ export function DataTable<T extends Record<string, unknown>>(
     _event: React.MouseEvent<unknown>,
     property: string,
   ) => {
-    const isAsc = orderBy === property && order === "asc";
-    setOrder(isAsc ? "desc" : "asc");
-    setOrderBy(property);
+    const isAsc =
+      searchBody.sort &&
+      searchBody.sort[0]?.parameter === property &&
+      searchBody.sort[0]?.direction === "asc";
     setSearchBody((prevState: SearchBody) => ({
       ...prevState,
       sort: [{ parameter: property, direction: isAsc ? "desc" : "asc" }],
@@ -559,7 +542,7 @@ export function DataTable<T extends Record<string, unknown>>(
         />
         <TableContainer sx={{ flexGrow: 1, overflow: "auto" }}>
           <TableVirtuoso<T, TableContextProps>
-            style={{ flexGrow: 1, width: "100%" }}
+            style={{ flexGrow: 1, width: "100%", minHeight: "100px" }}
             data={rows}
             components={VirtuosoTableComponents}
             context={{
@@ -593,8 +576,16 @@ export function DataTable<T extends Record<string, unknown>>(
                       }}
                     >
                       <TableSortLabel
-                        active={orderBy === header.id}
-                        direction={order === "asc" ? "asc" : "desc"}
+                        active={
+                          searchBody.sort &&
+                          searchBody.sort[0]?.parameter === header.id
+                        }
+                        direction={
+                          searchBody.sort &&
+                          searchBody.sort[0]?.direction === "asc"
+                            ? "asc"
+                            : "desc"
+                        }
                         onClick={(event) => handleRequestSort(event, header.id)}
                       >
                         {flexRender(
@@ -668,7 +659,7 @@ export function DataTable<T extends Record<string, unknown>>(
         <TablePagination
           rowsPerPageOptions={[25, 50, 100, 500, 1000]}
           component="div"
-          count={totalRows}
+          count={rows.length}
           showFirstButton
           showLastButton
           rowsPerPage={rowsPerPage}

packages/diracx-web-components/components/shared/FilterForm.stories.tsx

@@ -2,6 +2,10 @@ import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Paper } from "@mui/material";
+import {
+  AccessorKeyColumnDef,
+  createColumnHelper,
+} from "@tanstack/react-table";
 import { useMUITheme } from "../../hooks/theme";
 import { FilterForm } from "./FilterForm";
 
@@ -37,14 +41,37 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+interface SimpleItem extends Record<string, unknown> {
+  id: number;
+  name: string;
+  email: string;
+}
+
+const columnHelper = createColumnHelper<SimpleItem>();
+
+const columns: Array<
+  | AccessorKeyColumnDef<Record<string, unknown>, number>
+  | AccessorKeyColumnDef<Record<string, unknown>, string>
+  | AccessorKeyColumnDef<Record<string, unknown>, Date>
+> = [
+  columnHelper.accessor("id", {
+    header: "ID",
+    meta: { type: "number" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, number>,
+  columnHelper.accessor("name", {
+    header: "Name",
+    meta: { type: "string" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, string>,
+  columnHelper.accessor("email", {
+    header: "Email",
+    meta: { type: "string" },
+  }) as AccessorKeyColumnDef<Record<string, unknown>, string>,
+];
+
 export const Default: Story = {
   args: {
-    columns: [
-      { id: "id", label: "ID" },
-      { id: "name", label: "Name" },
-      { id: "age", label: "Age" },
-    ],
-    filters: [{ id: 0, column: "id", operator: "eq", value: "1" }],
+    columns: columns,
+    filters: [{ id: 0, parameter: "id", operator: "eq", value: "1" }],
     setFilters: () => {},
     handleFilterChange: () => {},
     handleFilterMenuClose: () => {},

packages/diracx-web-components/components/shared/FilterForm.tsx

@@ -250,7 +250,7 @@ export function FilterForm<T extends Record<string, unknown>>(
             multiple={isMultiple}
             sx={{ minWidth: 100 }}
           >
-            {selectedColumn?.meta?.values?.map((val) => (
+            {selectedColumn?.meta?.values?.map((val: string) => (
               <MenuItem key={val} value={val}>
                 {val}
               </MenuItem>