Feature/upgrade react table to v8

packages/services/package.json

@@ -35,6 +35,6 @@
     "serialize-error": "^7.0.1"
   },
   "devDependencies": {
-    "@types/node": "^16.18.13"
+    "@types/node": "^18.19.69"
   }
 }

packages/ui/__stories__/Table.stories.tsx

@@ -6,10 +6,10 @@ import { PaginationChangeProps, Table, TableProps } from '../src/Table/Table'
 import { getColumns, Person } from '../__tests__/Table/utils'
 import { bigDataSet, smallDataSet, smallDataSetWithSubRows } from '../__tests__/Table/consts'
 import { TextField } from '../src'
+import { SortingRule } from '../src/Table/tableTypes'
 
 import storyStyles from './TextField.stories.module.scss'
 import styles from './utils.scss'
-import { SortingRule } from 'react-table'
 
 export default {
   title: 'Components/Table',
@@ -55,15 +55,15 @@ WithHiddenHeader.args = {
 export const WithClickableRows = Template.bind({})
 WithClickableRows.args = {
   onRowClick: (row) => {
-    logger.log(`You just clicked (or pressed) row: ${row.values.name as Person['name']}`)
+    logger.log(`You just clicked (or pressed) row: ${row.original.name}`)
   },
 }
 
 export const WithClickableAnchorRows = Template.bind({})
 WithClickableAnchorRows.args = {
   getHref: (row) => {
-    logger.log(`You just clicked (or pressed) row: ${row.values.name as Person['name']}. You can use row info to generate href!`)
-    return window.location.hash
+    logger.log(`You just clicked (or pressed) row: ${row.original.name}. You can use row info to generate href!`)
+    return `#${row.id}`
   },
 }
 
@@ -144,7 +144,7 @@ export const WithControlledSorting = () => {
   const firstUpdate = useRef(true)
 
   // This will get called when the table needs new data.
-  const onSortingChange = useCallback((sortBy: SortingRule<Person>[]) => {
+  const onSortingChange = useCallback((sortBy: SortingRule[]) => {
     if (firstUpdate.current) {
       firstUpdate.current = false
       return
@@ -166,14 +166,16 @@ export const WithControlledSorting = () => {
         const { id, desc: isDescending } = sortBy[0]
         const sortColumn = id as keyof Person
         const newData = [...bigDataSet]
-        newData.sort((a, b) => (isDescending ? b[sortColumn] - a[sortColumn] : a[sortColumn] - b[sortColumn]))
+        newData.sort((a, b) =>
+          isDescending ? Number(b[sortColumn]) - Number(a[sortColumn]) : Number(a[sortColumn]) - Number(b[sortColumn]),
+        )
         setData(newData)
         setLoading(false)
       }
     }, 750)
   }, [])
 
-  return <Table columns={columns} data={data} loading={loading} manualSortBy onSortingChange={onSortingChange} />
+  return <Table columns={columns} data={data} loading={loading} onSortingChange={onSortingChange} />
 }
 
 export const WithGlobalSearch = () => {
@@ -197,6 +199,7 @@ export const WithGlobalSearch = () => {
 
 export const WithCustomStyles = Template.bind({})
 WithCustomStyles.args = {
+  columns: getColumns({ withFooter: true }),
   contentClassName: styles.customTableContent,
   headerClassName: styles.customTableHeader,
   footerClassName: styles.customTableFooter,
@@ -211,7 +214,7 @@ WithCustomRowAndCellProps.parameters = {
 }
 WithCustomRowAndCellProps.args = {
   getCustomRowProps: (row) => {
-    if (row.values.age < 15) {
+    if (row.original.age < 15) {
       return {
         style: {
           background: 'white',
@@ -221,7 +224,7 @@ WithCustomRowAndCellProps.args = {
     return {}
   },
   getCustomCellProps: (cell) => {
-    if (cell.row.values.age < 15) {
+    if (cell.row.original.age < 15) {
       if (cell.column.id === 'age') {
         return {
           warning: 'Younger than 15',
@@ -235,7 +238,7 @@ WithCustomRowAndCellProps.args = {
           color: '#707482',
         },
       }
-    } else if (cell.column.id === 'id') {
+    } else if (cell.column.id === 'ID') {
       return {
         style: {
           borderLeft: '0.25rem solid limegreen',

packages/ui/__tests__/.eslintrc.js

@@ -4,5 +4,15 @@ module.exports = {
     '@typescript-eslint/no-unsafe-call': 'off',
     '@typescript-eslint/no-unsafe-member-access': 'off',
     '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        caughtErrors: 'none',
+        argsIgnorePattern: '_',
+        ignoreRestSiblings: true,
+      },
+    ],
   },
 }

packages/ui/__tests__/Alert.test.tsx

@@ -75,7 +75,7 @@ describe('Alert', () => {
       expect(AlertElement.findDataTest('alert-content').props()).toMatchObject({
         children: content,
       })
-      expect(wrapper.findDataTest('alert-icon').props()).toMatchObject({
+      expect(wrapper.findDataTestFirst('alert-icon').props()).toMatchObject({
         icon,
         ariaLabel,
       })

packages/ui/__tests__/Badge.test.tsx

@@ -12,7 +12,7 @@ describe('Badge', () => {
   it('Renders Badge with all necessary components', async () => {
     const wrapper = await mountAndCheckA11Y(<Badge type="neutral" size="normal" content={badgeContent} />)
 
-    expect(wrapper.findDataTest('badge-icon').prop('size')).toBe('medium')
+    expect(wrapper.findDataTestFirst('badge-icon').prop('size')).toBe('medium')
     expect(wrapper.findDataTest('badge-content').text()).toBe(badgeContent)
   })
 
@@ -63,7 +63,7 @@ describe('Badge', () => {
     const wrapper = await mountAndCheckA11Y(<Badge type={type} size="small" content={badgeContent} />)
 
     expect(wrapper.findDataTest('badge-container').prop('className')).toContain(className)
-    expect(wrapper.findDataTest('badge-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('badge-icon').props()).toMatchObject({
       ariaLabel,
       icon,
       size: 'small',

packages/ui/__tests__/Calendar/CalendarRange.test.tsx

@@ -28,7 +28,7 @@ describe('CalendarRange', () => {
     })
 
     // Icon
-    expect(wrapper.findDataTest('calendar-range-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('calendar-range-icon').props()).toMatchObject({
       icon: ArrowRight,
       ariaLabel: 'Arrow Right',
     })
@@ -72,7 +72,7 @@ describe('CalendarRange', () => {
     })
 
     // Icon
-    expect(wrapper.findDataTest('calendar-range-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('calendar-range-icon').props()).toMatchObject({
       icon: ArrowRight,
       ariaLabel: 'Arrow Right',
     })

packages/ui/__tests__/Card.test.tsx

@@ -59,8 +59,7 @@ describe('Card', () => {
     expect(content).toBeInTheDocument()
     expect(content.className).toEqual(styles.content)
     expect(within(content).queryByText(cardContent)).toBeInTheDocument()
-
-    expect(screen.queryByTestId('card-heading-icon')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('card-heading-icon')).toBeInTheDocument()
   })
 
   it('renders caption', async () => {

packages/ui/__tests__/EmptyState.test.tsx

@@ -31,7 +31,7 @@ describe('EmptyState', () => {
     )
 
     expect(wrapper.findDataTest('empty-state-container').prop('className')).toBe(cn(styles.container))
-    expect(wrapper.findDataTest('empty-state-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('empty-state-icon').props()).toMatchObject({
       icon,
       ariaLabel: iconLabel,
       size: 'large',
@@ -59,7 +59,7 @@ describe('EmptyState', () => {
     )
 
     expect(wrapper.findDataTest('empty-state-container').prop('className')).toBe(cn(styles.container))
-    expect(wrapper.findDataTest('empty-state-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('empty-state-icon').props()).toMatchObject({
       icon,
       ariaLabel: iconLabel,
       size: 'large',
@@ -80,7 +80,7 @@ describe('EmptyState', () => {
     )
 
     expect(wrapper.findDataTest('empty-state-container').prop('className')).toBe(cn(styles.container, styles.large))
-    expect(wrapper.findDataTest('empty-state-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('empty-state-icon').props()).toMatchObject({
       icon,
       ariaLabel: iconLabel,
       size: 'xlarge',
@@ -108,7 +108,7 @@ describe('EmptyState', () => {
     )
 
     expect(wrapper.findDataTest('empty-state-container').prop('className')).toBe(cn(styles.container, styles.horizontal))
-    expect(wrapper.findDataTest('empty-state-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('empty-state-icon').props()).toMatchObject({
       icon,
       ariaLabel: iconLabel,
       size: 'large',

packages/ui/__tests__/Modal.test.tsx

@@ -98,7 +98,7 @@ describe('Modal', () => {
       onRequestClose: onClose,
     })
 
-    expect(wrapper.findDataTest('modal-header-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('modal-header-icon').props()).toMatchObject({
       icon: CloudLightning,
       ariaLabel: iconAriaLabel,
     })

packages/ui/__tests__/Notification.test.tsx

@@ -51,7 +51,7 @@ describe('Notification', () => {
     expect(wrapper.findDataTest('notification').props()).toMatchObject({
       className: cn(styles.notification, className),
     })
-    expect(wrapper.findDataTest('notification-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('notification-icon').props()).toMatchObject({
       ariaLabel,
       icon,
     })
@@ -72,7 +72,7 @@ describe('Notification', () => {
     expect(wrapper.findDataTest('notification').props()).toMatchObject({
       className: cn(styles.notification, styles.success),
     })
-    expect(wrapper.findDataTest('notification-icon').props()).toMatchObject({
+    expect(wrapper.findDataTestFirst('notification-icon').props()).toMatchObject({
       ariaLabel: 'Check circle icon',
       icon: CheckCircle,
     })

packages/ui/__tests__/Overlay.test.tsx

@@ -32,7 +32,7 @@ describe('Overlay', () => {
     const reactModal = wrapper.find(ReactModal)
     const overlayWrapper = reactModal.findDataTest('overlay-wrapper')
     const header = overlayWrapper.findDataTest('overlay-header')
-    const headerIcon = header.findDataTest('overlay-header-icon')
+    const headerIcon = header.findDataTestFirst('overlay-header-icon')
     const headerTitle = header.findDataTest('overlay-header-title')
     const headerCancelButton = header.findDataTestFirst('overlay-header-cancel-button')
     const overlayContent = overlayWrapper.findDataTest('overlay-content')