*feat upgrade react-table from 7 to 8

hazelcast · Dec 19, 2024 · ce0a7a8 · ce0a7a8
1 parent 43a0371
commit ce0a7a8
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 48 deletions.
diff --git a/packages/ui/__stories__/Table.stories.tsx b/packages/ui/__stories__/Table.stories.tsx
@@ -9,7 +9,7 @@ import { TextField } from '../src'
 
 import storyStyles from './TextField.stories.module.scss'
 import styles from './utils.scss'
-import { SortingRule } from 'react-table'
+import { SortingRule } from '../lib/Table/types'
 
 export default {
   title: 'Components/Table',
@@ -164,7 +164,7 @@ export const WithControlledSorting = () => {
       // Only update the data if this is the latest fetch
       if (fetchId === fetchIdRef.current) {
         const { id, desc: isDescending } = sortBy[0]
-        const sortColumn = id as keyof Person
+        const sortColumn = id
         const newData = [...bigDataSet]
         newData.sort((a, b) =>
           isDescending ? Number(b[sortColumn]) - Number(a[sortColumn]) : Number(a[sortColumn]) - Number(b[sortColumn]),

diff --git a/packages/ui/__tests__/.eslintrc.js b/packages/ui/__tests__/.eslintrc.js
@@ -6,5 +6,13 @@ module.exports = {
     '@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,
+      },
+    ],
   },
 }
diff --git a/packages/ui/__tests__/Alert.test.tsx b/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,
       })

diff --git a/packages/ui/__tests__/Badge.test.tsx b/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',

diff --git a/packages/ui/__tests__/Calendar/CalendarRange.test.tsx b/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',
     })

diff --git a/packages/ui/__tests__/Card.test.tsx b/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 () => {

diff --git a/packages/ui/__tests__/EmptyState.test.tsx b/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',

diff --git a/packages/ui/__tests__/Modal.test.tsx b/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,
     })

diff --git a/packages/ui/__tests__/Notification.test.tsx b/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,
     })

diff --git a/packages/ui/__tests__/Overlay.test.tsx b/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')