Fix members link

Author: spalmurray

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx

@@ -281,17 +281,17 @@ describe('AccountOrgs', () => {
       })
     })
 
-    describe('when user clicks on an org', () => {
+    describe('when user clicks on activated user count', () => {
       describe('and they are a member of that org', () => {
         it('redirects them to the member page for that org', async () => {
           setup()
           const user = userEvent.setup()
           render(<AccountOrgs account={mockAccount} />, { wrapper })
 
-          const org1 = await screen.findByText('org1')
-          expect(org1).toBeInTheDocument()
+          const org1Members = await screen.findByRole('link', { name: '7' })
+          expect(org1Members).toBeInTheDocument()
 
-          await user.click(org1)
+          await user.click(org1Members)
 
           await waitFor(() =>
             expect(testLocation.pathname).toBe('/members/gh/org1')
@@ -305,10 +305,10 @@ describe('AccountOrgs', () => {
           const user = userEvent.setup()
           render(<AccountOrgs account={mockAccount} />, { wrapper })
 
-          const org2 = await screen.findByText('org2')
-          expect(org2).toBeInTheDocument()
+          const org2Members = await screen.findByRole('cell', { name: '4' })
+          expect(org2Members).toBeInTheDocument()
 
-          await user.click(org2)
+          await user.click(org2Members)
 
           await waitFor(() =>
             expect(testLocation.pathname).toBe('/plan/gh/codecov')

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx

@@ -7,9 +7,8 @@ import {
 } from '@tanstack/react-table'
 import { useEffect, useMemo, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
-import { useHistory, useParams } from 'react-router'
+import { useParams } from 'react-router'
 
-import { useNavLinks } from 'services/navigation'
 import A from 'ui/A'
 import { Card } from 'ui/Card'
 import Icon from 'ui/Icon'
@@ -96,8 +95,6 @@ interface URLParams {
 }
 
 export default function AccountOrgs({ account }: AccountOrgsArgs) {
-  const history = useHistory()
-  const { membersTab } = useNavLinks()
   const { provider, owner } = useParams<URLParams>()
   const { ref, inView } = useInView()
   const [sorting, setSorting] = useState<SortingState>([
@@ -107,11 +104,6 @@ export default function AccountOrgs({ account }: AccountOrgsArgs) {
     },
   ])
 
-  const linkToMembersTab = (orgOwner: string) =>
-    history.push(
-      membersTab.path({ owner: encodeURIComponent(orgOwner), provider })
-    )
-
   const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useInfiniteAccountOrganizations({
       provider,
@@ -223,36 +215,25 @@ export default function AccountOrgs({ account }: AccountOrgsArgs) {
               ) : (
                 table.getRowModel().rows.map((row) =>
                   row.original.isCurrentUserPartOfOrg ? (
-                    <tr
-                      key={row.id}
-                      className="h-14 hover:cursor-pointer hover:bg-ds-gray-primary"
-                      onClick={() => linkToMembersTab(row.original.name)}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <td key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </td>
-                      ))}
-                    </tr>
-                  ) : (
                     <tr key={row.id} className="h-14">
                       {row.getVisibleCells().map((cell) => (
                         <td key={cell.id}>
-                          {cell.id === 'activatedUserCount' ? (
-                            <div className="flex justify-items-end">
+                          {cell.column.id === 'activatedUserCount' ? (
+                            <div className="flex w-full justify-end">
                               {/* @ts-ignore-error */}
                               <A
                                 to={{
                                   pageName: 'membersTab',
                                   options: {
-                                    owner: cell.getValue(),
+                                    owner: encodeURIComponent(
+                                      row.original.name
+                                    ),
                                     provider,
                                   },
                                 }}
-                              />
+                              >
+                                {cell.getValue()}
+                              </A>
                             </div>
                           ) : (
                             flexRender(
@@ -263,6 +244,17 @@ export default function AccountOrgs({ account }: AccountOrgsArgs) {
                         </td>
                       ))}
                     </tr>
+                  ) : (
+                    <tr key={row.id} className="h-14">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      ))}
+                    </tr>
                   )
                 )
               )}