chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx

@@ -1,39 +1,31 @@
 import { History } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { NomadEvent } from '@/react/nomad/types';
 
 import { Datatable } from '@@/datatables';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 export interface EventsDatatableProps {
   data: NomadEvent[];
   isLoading: boolean;
 }
 
-const storageKey = 'events';
+const storageKey = 'nomad_events';
 
-const settingsStore = createPersistedStore(storageKey, 'Date');
+const settingsStore = createPersistedStore(storageKey, 'date');
 
 export function EventsDatatable({ data, isLoading }: EventsDatatableProps) {
-  const columns = useColumns();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   return (
     <Datatable
       isLoading={isLoading}
+      settingsManager={tableState}
       columns={columns}
       dataset={data}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
       titleIcon={History}
       title="Events"
       totalCount={data.length}

app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx

@@ -1,12 +1,12 @@
-import { Column } from 'react-table';
-
-import { NomadEvent } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
-export const date: Column<NomadEvent> = {
-  Header: 'Date',
-  accessor: (row) => (row.Date ? isoDate(row.Date) : '-'),
+import { columnHelper } from './helper';
+
+export const date = columnHelper.accessor('Date', {
+  header: 'Date',
   id: 'date',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const date = getValue();
+    return date ? isoDate(date) : '-';
+  },
+});

app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NomadEvent } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<NomadEvent>();

app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx

@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-
 import { date } from './date';
 import { type } from './type';
 import { message } from './message';
 
-export function useColumns() {
-  return useMemo(() => [date, type, message], []);
-}
+export const columns = [date, type, message];

app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const message: Column<NomadEvent> = {
-  Header: 'Message',
-  accessor: 'Message',
+export const message = columnHelper.accessor('Message', {
+  header: 'Message',
   id: 'message',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const type: Column<NomadEvent> = {
-  Header: 'Type',
-  accessor: 'Type',
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx

@@ -1,12 +1,11 @@
-import { useStore } from 'zustand';
 import { Clock } from 'lucide-react';
 
 import { Job } from '@/react/nomad/types';
 
 import { useRepeater } from '@@/datatables/useRepeater';
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
-import { TableSettingsMenu } from '@@/datatables';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { TableSettingsMenu } from '@@/datatables/TableSettingsMenu';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { TasksDatatable } from './TasksDatatable';
 import { columns } from './columns';
@@ -19,7 +18,7 @@ export interface JobsDatatableProps {
   isLoading?: boolean;
 }
 
-const storageKey = 'jobs';
+const storageKey = 'nomad_jobs';
 const settingsStore = createStore(storageKey);
 
 export function JobsDatatable({
@@ -27,20 +26,14 @@ export function JobsDatatable({
   refreshData,
   isLoading,
 }: JobsDatatableProps) {
-  const [search, setSearch] = useSearchBarState(storageKey);
-  const settings = useStore(settingsStore);
-  useRepeater(settings.autoRefreshRate, refreshData);
+  const tableState = useTableState(settingsStore, storageKey);
+  useRepeater(tableState.autoRefreshRate, refreshData);
 
   return (
-    <ExpandableDatatable<Job>
+    <ExpandableDatatable
       dataset={jobs}
       columns={columns}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
+      settingsManager={tableState}
       title="Nomad Jobs"
       titleIcon={Clock}
       disableSelect
@@ -49,9 +42,10 @@ export function JobsDatatable({
       isLoading={isLoading}
       renderTableSettings={() => (
         <TableSettingsMenu>
-          <JobsDatatableSettings settings={settings} />
+          <JobsDatatableSettings settings={tableState} />
         </TableSettingsMenu>
       )}
+      expandOnRowClick
     />
   );
 }

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/TasksDatatable.tsx

@@ -2,20 +2,18 @@ import { Task } from '@/react/nomad/types';
 
 import { NestedDatatable } from '@@/datatables/NestedDatatable';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 export interface Props {
   data: Task[];
 }
 
 export function TasksDatatable({ data }: Props) {
-  const columns = useColumns();
-
   return (
     <NestedDatatable
       columns={columns}
       dataset={data}
-      defaultSortBy="taskName"
+      initialSortBy={{ id: 'taskName', desc: false }}
     />
   );
 }

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx

@@ -1,24 +1,23 @@
-import { CellProps, Column } from 'react-table';
 import { Clock, FileText } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import { Task } from '@/react/nomad/types';
 
 import { Link } from '@@/Link';
 import { Icon } from '@@/Icon';
 
-export const actions: Column<Task> = {
-  Header: 'Task Actions',
-  id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '5px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
+import { columnHelper } from './helper';
 
-export function ActionsCell({ row }: CellProps<Task>) {
+export const actions = columnHelper.display({
+  header: 'Task Actions',
+  id: 'actions',
+  meta: {
+    width: '5px',
+  },
+  cell: ActionsCell,
+});
+
+export function ActionsCell({ row }: CellContext<Task, unknown>) {
   const params = {
     allocationID: row.original.AllocationID,
     taskName: row.original.TaskName,

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/allocationID.tsx

@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const allocationID: Column<Task> = {
-  Header: 'Allocation ID',
-  accessor: (row) => row.AllocationID || '-',
+export const allocationID = columnHelper.accessor('AllocationID', {
+  header: 'Allocation ID',
   id: 'allocationID',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Task } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<Task>();

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/index.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import { taskStatus } from './taskStatus';
 import { taskName } from './taskName';
 import { taskGroup } from './taskGroup';
@@ -7,9 +5,11 @@ import { allocationID } from './allocationID';
 import { started } from './started';
 import { actions } from './actions';
 
-export function useColumns() {
-  return useMemo(
-    () => [taskStatus, taskName, taskGroup, allocationID, actions, started],
-    []
-  );
-}
+export const columns = [
+  taskStatus,
+  taskName,
+  taskGroup,
+  allocationID,
+  actions,
+  started,
+];

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/started.tsx

@@ -1,19 +1,17 @@
 import moment from 'moment';
-import { Column } from 'react-table';
 
 import { Task } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
+import { columnHelper } from './helper';
+
 function accessor(row: Task) {
   const momentDate = moment(row.StartedAt);
   const isValid = momentDate.unix() > 0;
   return isValid ? isoDate(momentDate) : '-';
 }
 
-export const started: Column<Task> = {
-  accessor,
-  Header: 'Started',
+export const started = columnHelper.accessor(accessor, {
+  header: 'Started',
   id: 'startedName',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskGroup.tsx

@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const taskGroup: Column<Task> = {
-  Header: 'Task Group',
-  accessor: (row) => row.TaskGroup || '-',
+export const taskGroup = columnHelper.accessor('TaskGroup', {
+  header: 'Task Group',
   id: 'taskGroup',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskName.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const taskName: Column<Task> = {
-  Header: 'Task Name',
-  accessor: (row) => row.TaskName || '-',
+export const taskName = columnHelper.accessor('TaskName', {
+  header: 'Task Name',
   id: 'taskName',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskStatus.tsx

@@ -1,32 +1,35 @@
 import _ from 'lodash';
 import clsx from 'clsx';
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Task } from '@/react/nomad/types';
 
-import { DefaultFilter } from '@@/datatables/Filter';
+import { filterHOC } from '@@/datatables/Filter';
 
-export const taskStatus: Column<Task> = {
-  Header: 'Task Status',
-  accessor: 'State',
+import { columnHelper } from './helper';
+
+export const taskStatus = columnHelper.accessor('State', {
+  header: 'Task Status',
   id: 'status',
-  Filter: DefaultFilter,
-  canHide: true,
-  sortType: 'string',
-  Cell: StateCell,
-};
+  meta: {
+    filter: filterHOC('Filter by state'),
+  },
+  cell: StateCell,
+  enableColumnFilter: true,
+});
 
-function StateCell({ value }: CellProps<Task, string>) {
+function StateCell({ getValue }: CellContext<Task, string>) {
+  const state = getValue();
   const className = getClassName();
 
-  return <span className={clsx('label', className)}>{value}</span>;
+  return <span className={clsx('label', className)}>{state}</span>;
 
   function getClassName() {
-    if (['dead'].includes(_.toLower(value))) {
+    if (['dead'].includes(_.toLower(state))) {
       return 'label-danger';
     }
 
-    if (['pending'].includes(_.toLower(value))) {
+    if (['pending'].includes(_.toLower(state))) {
       return 'label-warning';
     }
 

app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx

@@ -1,25 +1,22 @@
-import { CellProps, Column } from 'react-table';
 import { Clock } from 'lucide-react';
 
-import { Job } from '@/react/nomad/types';
+import { Icon } from '@@/Icon';
 
-export const actions: Column<Job> = {
-  Header: 'Job Actions',
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.display({
+  header: 'Job Actions',
   id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '110px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
+  meta: {
+    width: '110px',
+  },
+  cell: ActionsCell,
+});
 
-export function ActionsCell({ row }: CellProps<Job>) {
+export function ActionsCell() {
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div className="text-center" {...row.getToggleRowExpandedProps()}>
-      <Clock className="lucide" />
+    <div className="text-center">
+      <Icon icon={Clock} />
     </div>
   );
 }

app/react/nomad/jobs/JobsView/JobsDatatable/columns/created.tsx

@@ -1,13 +1,12 @@
-import { Column } from 'react-table';
-
-import { Job } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
-export const created: Column<Job> = {
-  Header: 'Created',
-  accessor: (row) =>
-    row.SubmitTime ? isoDate(parseInt(row.SubmitTime, 10)) : '-',
-  id: 'createdName',
-  disableFilters: true,
-  canHide: true,
-};
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor('SubmitTime', {
+  header: 'Created',
+  id: 'created',
+  cell: ({ getValue }) => {
+    const date = getValue();
+    return date ? isoDate(parseInt(date, 10)) : '-';
+  },
+});

app/react/nomad/jobs/JobsView/JobsDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Job } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<Job>();

app/react/nomad/jobs/JobsView/JobsDatatable/columns/index.tsx

@@ -1,7 +1,13 @@
+import { Job } from '@/react/nomad/types';
+
+import { buildExpandColumn } from '@@/datatables/expand-column';
+
 import { name } from './name';
 import { status } from './status';
 import { created } from './created';
 import { actions } from './actions';
 import { namespace } from './namespace';
 
-export const columns = [name, status, namespace, actions, created];
+const expand = buildExpandColumn<Job>();
+
+export const columns = [expand, name, status, namespace, actions, created];

app/react/nomad/jobs/JobsView/JobsDatatable/columns/name.tsx

@@ -1,24 +1,6 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-import { ExpandingCell } from '@@/datatables/ExpandingCell';
-
-export const name: Column<Job> = {
-  Header: 'Name',
-  accessor: (row) => row.ID,
+export const name = columnHelper.accessor('ID', {
+  header: 'Name',
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
-
-export function NameCell({ value: name, row }: CellProps<Job>) {
-  return (
-    <ExpandingCell row={row} showExpandArrow>
-      {name}
-    </ExpandingCell>
-  );
-}
+});

app/react/nomad/jobs/JobsView/JobsDatatable/columns/namespace.tsx

@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-export const namespace: Column<Job> = {
-  Header: 'Namespace',
-  accessor: (row) => row.Namespace || '-',
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
   id: 'namespace',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});

app/react/nomad/jobs/JobsView/JobsDatatable/columns/status.tsx

@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-export const status: Column<Job> = {
-  Header: 'Job Status',
-  accessor: (row) => row.Status || '-',
-  id: 'statusName',
-  disableFilters: true,
-  canHide: true,
-};
+export const status = columnHelper.accessor('Status', {
+  header: 'Job Status',
+  id: 'status',
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});

app/react/nomad/jobs/JobsView/JobsDatatable/datatable-store.ts

@@ -3,11 +3,7 @@ import { refreshableSettings, createPersistedStore } from '@@/datatables/types';
 import { TableSettings } from './types';
 
 export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(
-    storageKey,
-    'SubmitTime',
-    (set) => ({
-      ...refreshableSettings(set),
-    })
-  );
+  return createPersistedStore<TableSettings>(storageKey, 'created', (set) => ({
+    ...refreshableSettings(set),
+  }));
 }