ref: Convert SessionsTable to tanstack table (#2842)

* Convert Access.jsx -> tsx

* Fix type issue with TokensTable

* Remove unnecessary import

* Convert SessionsTable to ts

* Add tests

* Fix tests

* Fix all testLocation: any

* Use msw for mutation mock

* Improve flatmap callback for readability

* Better type hint for flat map return

* Fix flake

* Fix imports

* Fix indirect coverage loss

src/App.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
 import React from 'react'
-import { MemoryRouter, Route } from 'react-router-dom'
+import { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
 import config from 'config'
 
@@ -72,7 +72,7 @@ const queryClient = new QueryClient({
 })
 
 const server = setupServer()
-let testLocation: any
+let testLocation: ReturnType<typeof useLocation>
 const wrapper =
   (initialEntries = ['']): React.FC<React.PropsWithChildren> =>
   ({ children }) =>

src/old_ui/Table/Table.spec.jsx

@@ -81,6 +81,7 @@ describe('Table', () => {
               header: 'Header 1',
               accessorKey: 'col1',
               cell: (info) => info.getValue(),
+              justifyStart: true,
             },
             {
               header: 'Header 2',

src/pages/AccountSettings/tabs/Access/Access.spec.jsx → src/pages/AccountSettings/tabs/Access/Access.spec.tsx

@@ -5,7 +5,7 @@ import { subDays } from 'date-fns'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
-import { MemoryRouter, Route } from 'react-router-dom'
+import { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
 import Access from './Access'
 
@@ -55,8 +55,8 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-let testLocation
-const wrapper =
+let testLocation: ReturnType<typeof useLocation>
+const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
   (initialEntries = '/account/gh/codecov-user/access') =>
   ({ children }) =>
     (
@@ -167,7 +167,7 @@ describe('AccessTab', () => {
 
         const revokeButtons = await screen.findAllByText(/Revoke/)
 
-        await user.click(revokeButtons[0])
+        await user.click(revokeButtons[0]!)
 
         await waitFor(() => expect(window.confirm).toHaveBeenCalled())
       })

src/pages/AccountSettings/tabs/Access/Access.jsx → src/pages/AccountSettings/tabs/Access/Access.tsx

@@ -9,8 +9,13 @@ import CreateTokenModal from './CreateTokenModal'
 import SessionsTable from './SessionsTable'
 import TokensTable from './TokensTable'
 
+interface URLParams {
+  provider: string
+  owner: string
+}
+
 function Access() {
-  const { provider, owner } = useParams()
+  const { provider, owner } = useParams<URLParams>()
   const [showModal, setShowModal] = useState(false)
 
   const { data: sessionData } = useSessions({
@@ -42,7 +47,12 @@ function Access() {
           </a>
           .
         </p>
-        <Button hook="generate-token" onClick={() => setShowModal(true)}>
+        <Button
+          hook="generate-token"
+          onClick={() => setShowModal(true)}
+          to={undefined}
+          disabled={false}
+        >
           Generate Token
         </Button>
         {showModal && (
@@ -54,9 +64,7 @@ function Access() {
       </div>
       <TokensTable tokens={sessionData?.tokens} />
       <h2 className="mb-4 mt-8 text-lg font-semibold">Login Sessions</h2>
-      <div className="max-w-screen-md">
-        <SessionsTable sessions={sessionData?.sessions} />
-      </div>
+      <SessionsTable sessions={sessionData?.sessions} />
     </div>
   )
 }