fix: mobile ux

Author: aldbr

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

@@ -14,7 +14,6 @@ import { Delete, Clear } from "@mui/icons-material";
 import {
   useReactTable,
   getCoreRowModel,
-  ColumnDef,
   ColumnPinningState,
   RowSelectionState,
   VisibilityState,
@@ -26,6 +25,7 @@ import type { ToolbarAction } from "../shared/DataTable/SplitActionButton";
 import { Job, JobHistory, SearchBody } from "../../types";
 import { useDiracxUrl } from "../../hooks/utils";
 import { JobHistoryDialog } from "./JobHistoryDialog";
+import { JobColumnDef } from "./JobMonitorContext";
 
 import {
   deleteJobs,
@@ -48,7 +48,7 @@ interface JobDataTableProps {
   /** The function to call when the search body changes */
   setSearchBody: React.Dispatch<React.SetStateAction<SearchBody>>;
   /** Columns */
-  columns: ColumnDef<Job, string | number | Date | null>[];
+  columns: JobColumnDef[];
   /** Pagination */
   pagination: PaginationState;
   /** Set pagination */

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

@@ -17,7 +17,7 @@ import {
 
 import { lighten, darken, useTheme, Box, Paper } from "@mui/material";
 
-import { createColumnHelper, ColumnDef } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 
 import { mutate } from "swr";
 import { useApplicationId } from "../../hooks/application";
@@ -31,6 +31,7 @@ import { getSearchJobUrl } from "./jobDataService";
 import {
   JobMonitorContext,
   JobMonitorState,
+  JobColumnDef,
   jobMonitorReducer,
   defaultColumnVisibility,
   defaultPagination,
@@ -42,29 +43,34 @@ const rootSx = {
   flexDirection: "column",
   flexGrow: 1,
   overflow: "hidden",
+  maxWidth: "100%",
 } as const;
 
 const contentSx = {
   display: "flex",
   flexDirection: { xs: "column", md: "row" },
   flexGrow: 1,
-  overflow: "hidden",
+  overflow: { xs: "auto", md: "hidden" },
+  minWidth: 0,
 } as const;
 
 const tableSx = {
   flexGrow: 1,
   minWidth: 0,
+  maxWidth: "100%",
   overflow: "auto",
   display: "flex",
   flexDirection: "column",
 } as const;
 
 const pieChartPaperSx = {
-  width: { md: 340 },
+  width: { xs: "100%", md: 340 },
+  maxWidth: "100%",
   flexShrink: 0,
   alignSelf: "flex-start",
   m: 1,
   borderRadius: 2,
+  boxSizing: "border-box",
 } as const;
 
 function loadInitialState(appId: string): JobMonitorState {
@@ -517,7 +523,7 @@ export function validateAndConvertState(state: string): [string, boolean] {
  */
 export function fromHumanReadableText(
   name: string,
-  columns: ColumnDef<Job, string | number | Date | null>[],
+  columns: JobColumnDef[],
 ): string {
   const index = columns.findIndex((column) => column.header === name);
   if (index !== -1) {

packages/diracx-web-components/src/components/JobMonitor/JobMonitorContext.tsx

@@ -11,6 +11,14 @@ import {
 import { Filter } from "../../types/Filter";
 import { Job, SearchBody } from "../../types";
 
+/**
+ * TanStack Table's ColumnDef is invariant on TValue, so a heterogeneous
+ * column array (mixing string, number, Date columns) cannot be typed with
+ * a single concrete TValue. We use `any` here as an intentional escape hatch.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type JobColumnDef = ColumnDef<Job, any>;
+
 export interface JobMonitorState {
   filters: Filter[];
   searchBody: SearchBody;
@@ -48,11 +56,8 @@ export type JobMonitorAction =
     }
   | {
       type: "APPLY_FILTERS";
-      columns: ColumnDef<Job, string | number | Date | null>[];
-      fromHumanReadableText: (
-        name: string,
-        columns: ColumnDef<Job, string | number | Date | null>[],
-      ) => string;
+      columns: JobColumnDef[];
+      fromHumanReadableText: (name: string, columns: JobColumnDef[]) => string;
     };
 
 export const defaultColumnVisibility: VisibilityState = {
@@ -146,7 +151,7 @@ export function jobMonitorReducer(
 interface JobMonitorContextValue {
   state: JobMonitorState;
   dispatch: React.Dispatch<JobMonitorAction>;
-  columns: ColumnDef<Job, string | number | Date | null>[];
+  columns: JobColumnDef[];
   statusColors: Record<string, string>;
   mutateJobs: () => void;
 }

packages/diracx-web-components/src/components/JobMonitor/JobPieChart.tsx

@@ -2,7 +2,6 @@
 import { useState, useCallback, useMemo, memo } from "react";
 
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
-import { ColumnDef } from "@tanstack/react-table";
 import {
   Box,
   Alert,
@@ -12,11 +11,12 @@ import {
 } from "@mui/material";
 
 import { useDiracxUrl } from "../../hooks/utils";
-import type { SearchBody, Job, Filter, JobSummary } from "../../types";
+import type { SearchBody, Filter, JobSummary } from "../../types";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
 import { PieChart, PieChartItem } from "../shared/PieChart";
 import { useJobSummary } from "./jobDataService";
 import { fromHumanReadableText } from "./JobMonitor";
+import { JobColumnDef } from "./JobMonitorContext";
 
 interface JobPieChartProps {
   /** The search body used for querying */
@@ -26,7 +26,7 @@ interface JobPieChartProps {
   /** Status color mapping */
   statusColors: Record<string, string>;
   /** Column definitions from the table */
-  columns: ColumnDef<Job, string | number | Date | null>[];
+  columns: JobColumnDef[];
 }
 
 /**

packages/diracx-web-components/src/components/JobMonitor/JobSearchBar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { ColumnDef } from "@tanstack/react-table";
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
 import { Box, IconButton, Popover, Typography, Tooltip } from "@mui/material";
 import { HelpOutline } from "@mui/icons-material";
@@ -18,13 +17,13 @@ import {
   SearchBarToken,
   SearchBarTokenEquation,
   SearchBody,
-  Job,
   Operators,
   SearchBarTokenNature,
   CategoryType,
 } from "../../types";
 import { getJobSummary } from "./jobDataService";
 import { fromHumanReadableText } from "./JobMonitor";
+import { JobColumnDef } from "./JobMonitorContext";
 
 interface JobSearchBarProps {
   /** The filters */
@@ -36,7 +35,7 @@ interface JobSearchBarProps {
   /** The function to apply the filters */
   handleApplyFilters: () => void;
   /** The columns to display in the job monitor */
-  columns: ColumnDef<Job, string | number | Date | null>[];
+  columns: JobColumnDef[];
   /** Function to mutate the job data */
   mutateJobs: () => void;
 }
@@ -88,7 +87,14 @@ export const JobSearchBar = memo(function JobSearchBar({
   );
 
   return (
-    <Box sx={{ display: "flex", alignItems: "flex-start" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "flex-start",
+        minWidth: 0,
+        maxWidth: "100%",
+      }}
+    >
       <SearchBar
         filters={filters}
         setFilters={setFilters}
@@ -157,7 +163,7 @@ async function createSuggestions({
   accessToken: string | undefined;
   previousToken: SearchBarToken | undefined;
   previousEquation: SearchBarTokenEquation | undefined;
-  columns: ColumnDef<Job, string | number | Date | null>[];
+  columns: JobColumnDef[];
   searchBody?: SearchBody;
   searchBodyIndex?: number;
 }): Promise<SearchBarSuggestions> {