Merge pull request #5970 from thornbill/material-react-table

src/apps/dashboard/components/dataGrid/GridActionsCellLink.tsx

@@ -1,17 +0,0 @@
-import React, { type RefAttributes } from 'react';
-import { Link } from 'react-router-dom';
-import { GridActionsCellItem, type GridActionsCellItemProps } from '@mui/x-data-grid';
-
-type GridActionsCellLinkProps = { to: string } & GridActionsCellItemProps & RefAttributes<HTMLButtonElement>;
-
-/**
- * Link component to use in mui's data-grid action column due to a current bug with passing props to custom link components.
- * @see https://github.com/mui/mui-x/issues/4654
- */
-const GridActionsCellLink = ({ to, ...props }: GridActionsCellLinkProps) => (
-    <Link to={to}>
-        <GridActionsCellItem {...props} />
-    </Link>
-);
-
-export default GridActionsCellLink;

src/apps/dashboard/features/activity/api/useLogEntries.ts

@@ -1,18 +1,20 @@
 import type { ActivityLogApiGetLogEntriesRequest } from '@jellyfin/sdk/lib/generated-client';
 import type { AxiosRequestConfig } from 'axios';
+import type { Api } from '@jellyfin/sdk';
 import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
 import { useQuery } from '@tanstack/react-query';
 
-import { JellyfinApiContext, useApi } from './useApi';
+import { useApi } from 'hooks/useApi';
 
-const fetchGetLogEntries = async (
-    currentApi: JellyfinApiContext,
-    requestParams: ActivityLogApiGetLogEntriesRequest,
+const fetchLogEntries = async (
+    api?: Api,
+    requestParams?: ActivityLogApiGetLogEntriesRequest,
     options?: AxiosRequestConfig
 ) => {
-    const { api } = currentApi;
-
-    if (!api) return;
+    if (!api) {
+        console.warn('[fetchLogEntries] No API instance available');
+        return;
+    }
 
     const response = await getActivityLogApi(api).getLogEntries(requestParams, {
         signal: options?.signal
@@ -24,10 +26,11 @@ const fetchGetLogEntries = async (
 export const useLogEntires = (
     requestParams: ActivityLogApiGetLogEntriesRequest
 ) => {
-    const currentApi = useApi();
+    const { api } = useApi();
     return useQuery({
         queryKey: ['LogEntries', requestParams],
         queryFn: ({ signal }) =>
-            fetchGetLogEntries(currentApi, requestParams, { signal })
+            fetchLogEntries(api, requestParams, { signal }),
+        enabled: !!api
     });
 };

src/apps/dashboard/features/activity/components/ActionsCell.tsx

@@ -0,0 +1,22 @@
+import IconButton from '@mui/material/IconButton/IconButton';
+import PermMedia from '@mui/icons-material/PermMedia';
+import React, { type FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import type { ActivityLogEntryCell } from 'apps/dashboard/features/activity/types/ActivityLogEntryCell';
+import globalize from 'lib/globalize';
+
+const ActionsCell: FC<ActivityLogEntryCell> = ({ row }) => (
+    row.original.ItemId ? (
+        <IconButton
+            size='large'
+            title={globalize.translate('LabelMediaDetails')}
+            component={Link}
+            to={`/details?id=${row.original.ItemId}`}
+        >
+            <PermMedia fontSize='inherit' />
+        </IconButton>
+    ) : undefined
+);
+
+export default ActionsCell;

src/apps/dashboard/features/activity/components/LogLevelCell.tsx

@@ -0,0 +1,14 @@
+import type { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+import React, { type FC } from 'react';
+
+import { ActivityLogEntryCell } from '../types/ActivityLogEntryCell';
+import LogLevelChip from './LogLevelChip';
+
+const LogLevelCell: FC<ActivityLogEntryCell> = ({ cell }) => {
+    const level = cell.getValue<LogLevel | undefined>();
+    return level ? (
+        <LogLevelChip level={level} />
+    ) : undefined;
+};
+
+export default LogLevelCell;

src/apps/dashboard/features/activity/components/OverviewCell.tsx

@@ -1,12 +1,14 @@
-import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import Info from '@mui/icons-material/Info';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import React, { FC, useCallback, useState } from 'react';
+import React, { type FC, useCallback, useState } from 'react';
 
-const OverviewCell: FC<ActivityLogEntry> = ({ Overview, ShortOverview }) => {
+import type { ActivityLogEntryCell } from '../types/ActivityLogEntryCell';
+
+const OverviewCell: FC<ActivityLogEntryCell> = ({ row }) => {
+    const { ShortOverview, Overview } = row.original;
     const displayValue = ShortOverview ?? Overview;
     const [ open, setOpen ] = useState(false);
 

src/apps/dashboard/features/activity/components/UserAvatarButton.tsx

@@ -0,0 +1,27 @@
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import IconButton from '@mui/material/IconButton/IconButton';
+import React, { type FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import UserAvatar from 'components/UserAvatar';
+
+interface UserAvatarButtonProps {
+    user?: UserDto
+}
+
+const UserAvatarButton: FC<UserAvatarButtonProps> = ({ user }) => (
+    user?.Id ? (
+        <IconButton
+            size='large'
+            color='inherit'
+            sx={{ padding: 0 }}
+            title={user.Name || undefined}
+            component={Link}
+            to={`/dashboard/users/profile?userId=${user.Id}`}
+        >
+            <UserAvatar user={user} />
+        </IconButton>
+    ) : undefined
+);
+
+export default UserAvatarButton;

src/apps/dashboard/features/activity/types/ActivityLogEntryCell.ts

@@ -0,0 +1,7 @@
+import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
+import type { MRT_Cell, MRT_Row } from 'material-react-table';
+
+export interface ActivityLogEntryCell {
+    cell: MRT_Cell<ActivityLogEntry>
+    row: MRT_Row<ActivityLogEntry>
+}

src/apps/dashboard/routes/activity.tsx

@@ -1,34 +1,34 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
-import PermMedia from '@mui/icons-material/PermMedia';
 import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
-import { DataGrid, type GridColDef } from '@mui/x-data-grid';
-import { Link, useSearchParams } from 'react-router-dom';
+import { type MRT_ColumnDef, MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import { useSearchParams } from 'react-router-dom';
 
+import { useLogEntires } from 'apps/dashboard/features/activity/api/useLogEntries';
+import ActionsCell from 'apps/dashboard/features/activity/components/ActionsCell';
+import LogLevelCell from 'apps/dashboard/features/activity/components/LogLevelCell';
+import OverviewCell from 'apps/dashboard/features/activity/components/OverviewCell';
+import UserAvatarButton from 'apps/dashboard/features/activity/components/UserAvatarButton';
+import type { ActivityLogEntryCell } from 'apps/dashboard/features/activity/types/ActivityLogEntryCell';
 import Page from 'components/Page';
-import UserAvatar from 'components/UserAvatar';
-import { useLogEntires } from 'hooks/useLogEntries';
 import { useUsers } from 'hooks/useUsers';
-import { parseISO8601Date, toLocaleDateString, toLocaleTimeString } from 'scripts/datetime';
+import { parseISO8601Date, toLocaleString } from 'scripts/datetime';
 import globalize from 'lib/globalize';
 import { toBoolean } from 'utils/string';
 
-import LogLevelChip from '../components/activityTable/LogLevelChip';
-import OverviewCell from '../components/activityTable/OverviewCell';
-import GridActionsCellLink from '../components/dataGrid/GridActionsCellLink';
+type UsersRecords = Record<string, UserDto>;
 
 const DEFAULT_PAGE_SIZE = 25;
 const VIEW_PARAM = 'useractivity';
 
 const enum ActivityView {
-    All,
-    User,
-    System
+    All = 'All',
+    User = 'User',
+    System = 'System'
 }
 
 const getActivityView = (param: string | null) => {
@@ -37,7 +37,11 @@ const getActivityView = (param: string | null) => {
     return ActivityView.System;
 };
 
-const getRowId = (row: ActivityLogEntry) => row.Id ?? -1;
+const getUserCell = (users: UsersRecords) => function UserCell({ row }: ActivityLogEntryCell) {
+    return (
+        <UserAvatarButton user={row.original.UserId && users[row.original.UserId] || undefined} />
+    );
+};
 
 const Activity = () => {
     const [ searchParams, setSearchParams ] = useSearchParams();
@@ -45,14 +49,13 @@ const Activity = () => {
     const [ activityView, setActivityView ] = useState(
         getActivityView(searchParams.get(VIEW_PARAM)));
 
-    const [ paginationModel, setPaginationModel ] = useState({
-        page: 0,
+    const [ pagination, setPagination ] = useState({
+        pageIndex: 0,
         pageSize: DEFAULT_PAGE_SIZE
     });
 
     const { data: usersData, isLoading: isUsersLoading } = useUsers();
 
-    type UsersRecords = Record<string, UserDto>;
     const users: UsersRecords = useMemo(() => {
         if (!usersData) return {};
 
@@ -67,107 +70,79 @@ const Activity = () => {
         }, {});
     }, [usersData]);
 
+    const UserCell = getUserCell(users);
+
     const activityParams = useMemo(() => ({
-        startIndex: paginationModel.page * paginationModel.pageSize,
-        limit: paginationModel.pageSize,
+        startIndex: pagination.pageIndex * pagination.pageSize,
+        limit: pagination.pageSize,
         hasUserId: activityView !== ActivityView.All ? activityView === ActivityView.User : undefined
-    }), [activityView, paginationModel.page, paginationModel.pageSize]);
+    }), [activityView, pagination.pageIndex, pagination.pageSize]);
 
     const { data: logEntries, isLoading: isLogEntriesLoading } = useLogEntires(activityParams);
 
     const isLoading = isUsersLoading || isLogEntriesLoading;
 
-    const userColDef: GridColDef[] = activityView !== ActivityView.System ? [
-        {
-            field: 'User',
-            headerName: globalize.translate('LabelUser'),
-            width: 60,
-            valueGetter: ( value, row ) => users[row.UserId]?.Name,
-            renderCell: ({ row }) => (
-                <IconButton
-                    size='large'
-                    color='inherit'
-                    sx={{ padding: 0 }}
-                    title={users[row.UserId]?.Name ?? undefined}
-                    component={Link}
-                    to={`/dashboard/users/profile?userId=${row.UserId}`}
-                >
-                    <UserAvatar user={users[row.UserId]} />
-                </IconButton>
-            )
-        }
-    ] : [];
-
-    const columns: GridColDef[] = [
-        {
-            field: 'Date',
-            headerName: globalize.translate('LabelDate'),
-            width: 90,
-            type: 'date',
-            valueGetter: ( value ) => parseISO8601Date(value),
-            valueFormatter: ( value ) => toLocaleDateString(value)
-        },
-        {
-            field: 'Time',
-            headerName: globalize.translate('LabelTime'),
-            width: 100,
-            type: 'dateTime',
-            valueGetter: ( value, row ) => parseISO8601Date(row.Date),
-            valueFormatter: ( value ) => toLocaleTimeString(value)
-        },
-        {
-            field: 'Severity',
-            headerName: globalize.translate('LabelLevel'),
-            width: 110,
-            renderCell: ({ value }) => (
-                value ? (
-                    <LogLevelChip level={value} />
-                ) : undefined
-            )
-        },
-        ...userColDef,
-        {
-            field: 'Name',
-            headerName: globalize.translate('LabelName'),
-            width: 300
-        },
-        {
-            field: 'Overview',
-            headerName: globalize.translate('LabelOverview'),
-            width: 200,
-            valueGetter: ( value, row ) => row.ShortOverview ?? row.Overview,
-            renderCell: ({ row }) => (
-                <OverviewCell {...row} />
-            )
-        },
-        {
-            field: 'Type',
-            headerName: globalize.translate('LabelType'),
-            width: 180
-        },
-        {
-            field: 'actions',
-            type: 'actions',
-            width: 50,
-            getActions: ({ row }) => {
-                const actions = [];
-
-                if (row.ItemId) {
-                    actions.push(
-                        <GridActionsCellLink
-                            size='large'
-                            icon={<PermMedia />}
-                            label={globalize.translate('LabelMediaDetails')}
-                            title={globalize.translate('LabelMediaDetails')}
-                            to={`/details?id=${row.ItemId}`}
-                        />
-                    );
-                }
-
-                return actions;
+    const userColumn: MRT_ColumnDef<ActivityLogEntry>[] = useMemo(() =>
+        (activityView === ActivityView.System) ? [] : [{
+            id: 'User',
+            accessorFn: row => row.UserId && users[row.UserId]?.Name,
+            header: globalize.translate('LabelUser'),
+            size: 75,
+            Cell: UserCell,
+            enableResizing: false,
+            muiTableBodyCellProps: {
+                align: 'center'
             }
+        }], [ activityView, users, UserCell ]);
+
+    const columns = useMemo<MRT_ColumnDef<ActivityLogEntry>[]>(() => [
+        {
+            id: 'Date',
+            accessorFn: row => parseISO8601Date(row.Date),
+            header: globalize.translate('LabelTime'),
+            size: 160,
+            Cell: ({ cell }) => toLocaleString(cell.getValue<Date>())
+        },
+        {
+            accessorKey: 'Severity',
+            header: globalize.translate('LabelLevel'),
+            size: 90,
+            Cell: LogLevelCell,
+            enableResizing: false,
+            muiTableBodyCellProps: {
+                align: 'center'
+            }
+        },
+        ...userColumn,
+        {
+            accessorKey: 'Name',
+            header: globalize.translate('LabelName'),
+            size: 270
+        },
+        {
+            id: 'Overview',
+            accessorFn: row => row.ShortOverview || row.Overview,
+            header: globalize.translate('LabelOverview'),
+            size: 170,
+            Cell: OverviewCell
+        },
+        {
+            accessorKey: 'Type',
+            header: globalize.translate('LabelType'),
+            size: 150
+        },
+        {
+            id: 'Actions',
+            accessorFn: row => row.ItemId,
+            header: '',
+            size: 60,
+            Cell: ActionsCell,
+            enableColumnActions: false,
+            enableColumnFilter: false,
+            enableResizing: false,
+            enableSorting: false
         }
-    ];
+    ], [ userColumn ]);
 
     const onViewChange = useCallback((_e: React.MouseEvent<HTMLElement, MouseEvent>, newView: ActivityView | null) => {
         if (newView !== null) {
@@ -187,6 +162,58 @@ const Activity = () => {
         }
     }, [ activityView, searchParams, setSearchParams ]);
 
+    const table = useMaterialReactTable({
+        columns,
+        data: logEntries?.Items || [],
+
+        // Enable custom features
+        enableColumnPinning: true,
+        enableColumnResizing: true,
+
+        // Sticky header/footer
+        enableStickyFooter: true,
+        enableStickyHeader: true,
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: 'calc(100% - 7rem)' // 2 x 3.5rem for header and footer
+            }
+        },
+
+        // State
+        initialState: {
+            density: 'compact'
+        },
+        state: {
+            isLoading,
+            pagination
+        },
+
+        // Server pagination
+        manualPagination: true,
+        onPaginationChange: setPagination,
+        rowCount: logEntries?.TotalRecordCount || 0,
+
+        // Custom toolbar contents
+        renderTopToolbarCustomActions: () => (
+            <ToggleButtonGroup
+                size='small'
+                value={activityView}
+                onChange={onViewChange}
+                exclusive
+            >
+                <ToggleButton value={ActivityView.All}>
+                    {globalize.translate('All')}
+                </ToggleButton>
+                <ToggleButton value={ActivityView.User}>
+                    {globalize.translate('LabelUser')}
+                </ToggleButton>
+                <ToggleButton value={ActivityView.System}>
+                    {globalize.translate('LabelSystem')}
+                </ToggleButton>
+            </ToggleButtonGroup>
+        )
+    });
+
     return (
         <Page
             id='serverActivityPage'
@@ -203,43 +230,14 @@ const Activity = () => {
             >
                 <Box
                     sx={{
-                        display: 'flex',
-                        alignItems: 'baseline',
-                        marginY: 2
+                        marginBottom: 1
                     }}
                 >
-                    <Box sx={{ flexGrow: 1 }}>
-                        <Typography variant='h2'>
-                            {globalize.translate('HeaderActivity')}
-                        </Typography>
-                    </Box>
-                    <ToggleButtonGroup
-                        value={activityView}
-                        onChange={onViewChange}
-                        exclusive
-                    >
-                        <ToggleButton value={ActivityView.All}>
-                            {globalize.translate('All')}
-                        </ToggleButton>
-                        <ToggleButton value={ActivityView.User}>
-                            {globalize.translate('LabelUser')}
-                        </ToggleButton>
-                        <ToggleButton value={ActivityView.System}>
-                            {globalize.translate('LabelSystem')}
-                        </ToggleButton>
-                    </ToggleButtonGroup>
+                    <Typography variant='h2'>
+                        {globalize.translate('HeaderActivity')}
+                    </Typography>
                 </Box>
-                <DataGrid
-                    columns={columns}
-                    rows={logEntries?.Items || []}
-                    pageSizeOptions={[ 10, 25, 50, 100 ]}
-                    paginationMode='server'
-                    paginationModel={paginationModel}
-                    onPaginationModelChange={setPaginationModel}
-                    rowCount={logEntries?.TotalRecordCount || 0}
-                    getRowId={getRowId}
-                    loading={isLoading}
-                />
+                <MaterialReactTable table={table} />
             </Box>
         </Page>
     );

src/hooks/useUsers.ts

@@ -1,18 +1,20 @@
 import type { AxiosRequestConfig } from 'axios';
+import type { Api } from '@jellyfin/sdk';
 import type { UserApiGetUsersRequest } from '@jellyfin/sdk/lib/generated-client';
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { useQuery } from '@tanstack/react-query';
 
-import { type JellyfinApiContext, useApi } from './useApi';
+import { useApi } from './useApi';
 
-export const fetchGetUsers = async (
-    currentApi: JellyfinApiContext,
+const fetchUsers = async (
+    api?: Api,
     requestParams?: UserApiGetUsersRequest,
     options?: AxiosRequestConfig
 ) => {
-    const { api } = currentApi;
-
-    if (!api) return;
+    if (!api) {
+        console.warn('[fetchUsers] No API instance available');
+        return;
+    }
 
     const response = await getUserApi(api).getUsers(requestParams, {
         signal: options?.signal
@@ -22,10 +24,11 @@ export const fetchGetUsers = async (
 };
 
 export const useUsers = (requestParams?: UserApiGetUsersRequest) => {
-    const currentApi = useApi();
+    const { api } = useApi();
     return useQuery({
         queryKey: ['Users'],
         queryFn: ({ signal }) =>
-            fetchGetUsers(currentApi, requestParams, { signal })
+            fetchUsers(api, requestParams, { signal }),
+        enabled: !!api
     });
 };