fix synonym button in selectingTables

frontend/src/components/DetailView/common/SelectingTable.tsx

@@ -16,6 +16,7 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
   data,
   columns,
   editingAction,
+  tableRowAction,
   fieldName,
   idFieldName,
   selectedValues,
@@ -26,6 +27,7 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
   data: T[] | undefined
   columns: MRT_ColumnDef<T>[]
   editingAction?: (object: T) => void
+  tableRowAction?: (row: T) => void
   fieldName: keyof ParentType
   idFieldName: keyof T
   selectedValues?: string[]
@@ -76,6 +78,7 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
           visibleColumns={visibleColumns}
           selectorFn={editingAction ?? defaultEditingAction}
           idFieldName={idFieldName}
+          tableRowAction={tableRowAction}
         />
       ) : (
         <CircularProgress />

frontend/src/components/Species/Tabs/TaxonomyTab.tsx

@@ -6,10 +6,19 @@ import { Box } from '@mui/material'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { useGetAllSpeciesQuery } from '@/redux/speciesReducer'
 import { smallSpeciesTableColumns } from '@/common'
+import { SynonymsModal } from '../SynonymsModal'
+import { useState } from 'react'
 
 export const TaxonomyTab = () => {
   const { textField, dropdown, bigTextField, editData, setEditData, mode } = useDetailContext<SpeciesDetailsType>()
   const { data: speciesQueryData, isError } = useGetAllSpeciesQuery()
+  const [selectedSpecies, setSelectedSpecies] = useState<string | undefined>()
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+
+  const handleRowActionClick = (row: Species) => {
+    setSelectedSpecies(row.species_id.toString())
+    setModalOpen(true)
+  }
 
   const copyTaxonomyButton = (
     <Box key="copy_existing_taxonomy_button" id="copy_existing_taxonomy_button">
@@ -21,6 +30,7 @@ export const TaxonomyTab = () => {
         fieldName="order_name" // this doesn't do anything here but is required
         idFieldName="species_id"
         useObject={true}
+        tableRowAction={handleRowActionClick}
         editingAction={(selectedSpecies: Species) => {
           setEditData({
             ...editData,
@@ -35,6 +45,7 @@ export const TaxonomyTab = () => {
           })
         }}
       />
+      <SynonymsModal open={modalOpen} onClose={() => setModalOpen(false)} selectedSpecies={selectedSpecies} />
     </Box>
   )
 

frontend/src/components/TableView/ActionComponent.tsx

@@ -25,9 +25,7 @@ export const ActionComponent = <T extends MRT_RowData>({
   const id = row.original[idFieldName]
 
   const getIconToShow = () => {
-    if (selectorFn) {
-      return <AddCircleOutlineIcon />
-    } else if (tableRowAction) {
+    if (tableRowAction) {
       return (
         <Typography
           sx={{
@@ -45,17 +43,19 @@ export const ActionComponent = <T extends MRT_RowData>({
           S
         </Typography>
       )
+    } else if (selectorFn) {
+      return <AddCircleOutlineIcon />
     }
     return <ManageSearchIcon />
   }
 
   const onClick = (event: React.MouseEvent) => {
-    if (selectorFn) {
-      event.stopPropagation()
-      selectorFn(row.original)
-    } else if (tableRowAction) {
+    if (tableRowAction) {
       event.stopPropagation()
       tableRowAction(row.original)
+    } else if (selectorFn) {
+      event.stopPropagation()
+      selectorFn(row.original)
     } else {
       navigate(`/${url}/${id}`)
     }