Add id's to details buttons data-cy

cypress/e2e/tests.cy.js

@@ -10,28 +10,28 @@ describe('Open each page, table view and detail view, and check at least some co
   it('Locality works', () => {
     cy.contains('Locality').click()
     cy.contains('Dmanisi')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-20920"]').click()
     cy.contains('Dating method')
     cy.contains('bahean')
   })
   it('Species works', () => {
     cy.contains('Species').click()
     cy.contains('Rodentia')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-21052"]').first().click()
     cy.contains('Class')
     cy.contains('Simplomys')
   })
   it('Reference works', () => {
     cy.contains('Reference').click()
     cy.contains('A Concise Geologic Time')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-10039"]').first().click()
     cy.contains('Reference type')
     cy.contains('A new geomagnetic polarity time scale for the Late Cretaceous and Cenozoic')
   })
   it('Time Unit works', () => {
     cy.contains('Time Unit').click()
     cy.contains('Langhian')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-bahean"]').first().click()
     cy.contains('Sequence')
     cy.contains('chlma')
   })
@@ -39,7 +39,7 @@ describe('Open each page, table view and detail view, and check at least some co
     cy.contains('Admin').click()
     cy.contains('Region').click()
     cy.contains('region 4452477e')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-1"]').first().click()
     cy.contains('Regional Coordinators')
     cy.contains('prs')
   })
@@ -47,14 +47,14 @@ describe('Open each page, table view and detail view, and check at least some co
     cy.contains('Admin').click()
     cy.contains('Project').click()
     cy.contains('Workgroup on Insectivores')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-3"]').first().click()
     cy.contains('Coordinator')
     cy.contains('NOW Database')
   })
   it('Time Bound works', () => {
     cy.contains('Time Bound').click()
     cy.contains('C2N-y')
-    cy.get('[data-cy="detailview-button"]').first().click()
+    cy.get('[data-cy="detailview-button-11"]').first().click()
     cy.contains('Bound')
     cy.contains('1.778')
   })

frontend/src/components/TableView/ActionComponent.tsx

@@ -13,17 +13,20 @@ export const ActionComponent = <T extends MRT_RowData>({
   selectorFn,
 }: {
   row: MRT_Row<T>
-  idFieldName?: keyof T
+  idFieldName: keyof T
   checkRowRestriction?: ((row: T) => boolean) | undefined
   url: string | undefined
   selectorFn?: (id: T) => void
 }) => {
   const navigate = useNavigate()
-  const id = row.original[idFieldName!]
+
+  const id = row.original[idFieldName]
+
   const getIconToShow = () => {
     if (selectorFn) return <AddCircleOutlineIcon />
     return <ManageSearchIcon />
   }
+
   const onClick = () => {
     if (selectorFn) {
       selectorFn(row.original)
@@ -31,10 +34,11 @@ export const ActionComponent = <T extends MRT_RowData>({
       navigate(`/${url}/${id}`)
     }
   }
+
   return (
     <Box display="flex" gap="0.2em" alignItems="center" width="3.6em">
-      <Button variant="text" style={{ width: '2em' }} onClick={onClick}>
-        <div data-cy={`detailview-button`}>{getIconToShow()}</div>
+      <Button data-cy={`detailview-button-${id}`} variant="text" style={{ width: '2em' }} onClick={onClick}>
+        {getIconToShow()}
       </Button>
       {checkRowRestriction && checkRowRestriction(row.original) && (
         <Tooltip placement="top" title="This item has restricted visibility">

frontend/src/components/TableView/TableView.tsx

@@ -34,7 +34,7 @@ export const TableView = <T extends MRT_RowData>({
 }: {
   data: T[] | undefined
   columns: MRT_ColumnDef<T>[]
-  idFieldName?: keyof T
+  idFieldName: keyof T
   checkRowRestriction?: (row: T) => boolean
   selectorFn?: (id: T) => void
   url?: string
@@ -107,7 +107,7 @@ export const TableView = <T extends MRT_RowData>({
     if (selectorFn) {
       return
     }
-    setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName!] as string))
+    setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName] as string))
 
     // Don't put setIdList in the dependency array: it will cause re-render loop.
     // eslint-disable-next-line react-hooks/exhaustive-deps