feat: Switch from handleRowClicked to defaultColumn

* Set linkCell Renderer and link props on default column and remove row click. * Update cell renderers to all support links if present * Apply to lots of tables * Move test files to be closer to their components
bcgov · Jan 7, 2025 · 406d5d3 · 406d5d3
1 parent 0218467
commit 406d5d3
Show file tree

Hide file tree

Showing 25 changed files with 558 additions and 688 deletions.
diff --git a/frontend/src/utils/grid/cellRenderers.jsx b/frontend/src/utils/grid/cellRenderers.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import BCBadge from '@/components/BCBadge'
 import BCBox from '@/components/BCBox'
 import { roles } from '@/constants/roles'
@@ -7,7 +6,7 @@ import {
   getAllOrganizationStatuses
 } from '@/constants/statuses'
 import { Link, useLocation } from 'react-router-dom'
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import colors from '@/themes/base/colors'
 
 export const TextRenderer = (props) => {
@@ -20,15 +19,13 @@ export const TextRenderer = (props) => {
 
 export const LinkRenderer = (props) => {
   const location = useLocation()
+
+  const baseUrl = props.isAbsolute ? '' : `${location.pathname}/`
+  const targetUrl =
+    baseUrl +
+    ((props.url && props.url({ data: props.data })) || props?.node?.id)
   return (
-    <Link
-      to={
-        location.pathname +
-        '/' +
-        ((props.url && props.url({ data: props.data })) || props?.node?.id)
-      }
-      style={{ color: '#000' }}
-    >
+    <Link to={targetUrl} style={{ color: '#000' }}>
       <BCBox component="div" sx={{ width: '100%', height: '100%' }}>
         {props.valueFormatted || props.value}
       </BCBox>
@@ -69,6 +66,21 @@ const BaseStatusRenderer = ({
       />
     </BCBox>
   )
+
+  if (props.url) {
+    const baseUrl = props.isAbsolute ? '' : `${location.pathname}/`
+    const targetUrl =
+      baseUrl +
+      ((props.url && props.url({ data: props.data })) || props?.node?.id)
+
+    return (
+      <Link to={targetUrl} style={{ color: '#000' }}>
+        {component}
+      </Link>
+    )
+  } else {
+    return component
+  }
 }
 
 export const StatusRenderer = (props) => (
@@ -161,38 +173,6 @@ export const FuelCodeStatusRenderer = (props) => {
     </Link>
   )
 }
-export const FuelCodeStatusTextRenderer = (props) => {
-  const statusArr = getAllFuelCodeStatuses()
-  const statusColorArr = ['info', 'success', 'error']
-  const statusIndex = statusArr.indexOf(props.data.fuelCodeStatus.status)
-  return (
-    <BCBox sx={{ width: '100%', height: '100%' }}>
-      <BCBox
-        mt={1}
-        sx={{
-          display: 'flex',
-          justifyContent: 'center'
-        }}
-      >
-        <BCBadge
-          badgeContent={statusArr[statusIndex]}
-          color={statusColorArr[statusIndex]}
-          variant="contained"
-          size="lg"
-          sx={{
-            '& .MuiBadge-badge': {
-              minWidth: '120px',
-              fontWeight: 'regular',
-              textTransform: 'capitalize',
-              fontSize: '0.875rem',
-              padding: '0.4em 0.6em'
-            }
-          }}
-        />
-      </BCBox>
-    </BCBox>
-  )
-}
 
 export const TransactionStatusRenderer = (props) => {
   const statusArr = [
@@ -220,7 +200,7 @@ export const TransactionStatusRenderer = (props) => {
     'error'
   ]
   const statusIndex = statusArr.indexOf(props.data.status)
-  return (
+  const component = (
     <BCBox
       m={1}
       sx={{
@@ -244,6 +224,20 @@ export const TransactionStatusRenderer = (props) => {
       />
     </BCBox>
   )
+  if (props.url) {
+    const baseUrl = props.isAbsolute ? '' : `${location.pathname}/`
+    const targetUrl =
+      baseUrl +
+      ((props.url && props.url({ data: props.data })) || props?.node?.id)
+
+    return (
+      <Link to={targetUrl} style={{ color: '#000' }}>
+        {component}
+      </Link>
+    )
+  } else {
+    return component
+  }
 }
 export const ReportsStatusRenderer = (props) => {
   const statusArr = [
@@ -428,16 +422,16 @@ const GenericChipRenderer = ({
       {renderOverflowChip(hiddenChipsCount)}
     </div>
   )
-
+  const baseUrl = props.isAbsolute ? '' : `${location.pathname}/`
+  const targetUrl =
+    baseUrl +
+    ((props.url && props.url({ data: props.data })) || props?.node?.id)
   return disableLink ? (
     chipContent
   ) : (
-    <a
-      href={`${location.pathname}?filter=${options.join(',')}`}
-      style={{ textDecoration: 'none', color: 'inherit' }}
-    >
+    <Link to={targetUrl} style={{ color: '#000' }}>
       {chipContent}
-    </a>
+    </Link>
   )
 }
 

diff --git a/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx b/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx
@@ -1,16 +1,15 @@
-import { useRef, useCallback } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import BCBox from '@/components/BCBox'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
 import BCTypography from '@/components/BCTypography'
 import { useTranslation } from 'react-i18next'
 import { auditLogColDefs, defaultAuditLogSortModel } from './_schema'
-import { apiRoutes, ROUTES } from '@/constants/routes'
-import { useNavigate } from 'react-router-dom'
+import { apiRoutes } from '@/constants/routes'
+import { LinkRenderer } from '@/utils/grid/cellRenderers.jsx'
 
 export const AuditLog = () => {
   const { t } = useTranslation(['common', 'admin'])
   const gridRef = useRef()
-  const navigate = useNavigate()
 
   const gridOptions = {
     overlayNoRowsTemplate: t('admin:auditLogsNotFound'),
@@ -24,16 +23,14 @@ export const AuditLog = () => {
 
   const apiEndpoint = apiRoutes.getAuditLogs
 
-  const handleRowClicked = useCallback(
-    (params) => {
-      const { auditLogId } = params.data
-      const path = ROUTES.ADMIN_AUDIT_LOG_VIEW.replace(
-        ':auditLogId',
-        auditLogId
-      )
-      navigate(path)
-    },
-    [navigate]
+  const defaultColDef = useMemo(
+    () => ({
+      cellRenderer: LinkRenderer,
+      cellRendererParams: {
+        url: (data) => data.data.auditLogId
+      }
+    }),
+    []
   )
 
   return (
@@ -54,7 +51,7 @@ export const AuditLog = () => {
         enableCopyButton={false}
         enableExportButton={true}
         exportName="AuditLog"
-        handleRowClicked={handleRowClicked}
+        defaultColDef={defaultColDef}
       />
     </BCBox>
   )

diff --git a/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx b/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx
@@ -1,48 +1,47 @@
 import BCBox from '@/components/BCBox'
 import BCTypography from '@/components/BCTypography'
 import { useTranslation } from 'react-i18next'
-import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
 import { userActivityColDefs } from '@/views/Admin/AdminMenu/components/_schema'
 import { ROUTES } from '@/constants/routes'
 import { BCGridViewer } from '@/components/BCDataGrid/BCGridViewer'
 import { useGetUserActivities } from '@/hooks/useUser'
+import { LinkRenderer } from '@/utils/grid/cellRenderers.jsx'
 
 export const UserActivity = () => {
   const { t } = useTranslation(['common', 'admin'])
-  const navigate = useNavigate()
 
   const getRowId = useCallback((params) => {
     return `${
       params.data.actionTaken
     }-${params.data.transactionType}-${params.data.transactionId}`
   }, [])
 
-  const handleRowClicked = useCallback(
-    (params) => {
-      const { transactionType, transactionId } = params.data
-
-      let route
-      switch (transactionType) {
-        case 'Transfer':
-          route = ROUTES.TRANSFERS_VIEW.replace(':transferId', transactionId)
-          break
-        case 'AdminAdjustment':
-          route = ROUTES.ADMIN_ADJUSTMENT_VIEW.replace(
-            ':transactionId',
-            transactionId
-          )
-          break
-        case 'InitiativeAgreement':
-          route = ROUTES.INITIATIVE_AGREEMENT_VIEW.replace(
-            ':transactionId',
-            transactionId
-          )
+  const defaultColDef = useMemo(
+    () => ({
+      cellRenderer: LinkRenderer,
+      cellRendererParams: {
+        isAbsolute: true,
+        url: (data) => {
+          const { transactionType, transactionId } = data.data
+          switch (transactionType) {
+            case 'Transfer':
+              return ROUTES.TRANSFERS_VIEW.replace(':transferId', transactionId)
+            case 'AdminAdjustment':
+              return ROUTES.ADMIN_ADJUSTMENT_VIEW.replace(
+                ':transactionId',
+                transactionId
+              )
+            case 'InitiativeAgreement':
+              return ROUTES.INITIATIVE_AGREEMENT_VIEW.replace(
+                ':transactionId',
+                transactionId
+              )
+          }
+        }
       }
-
-      navigate(route)
-    },
-    [navigate]
+    }),
+    []
   )
 
   return (
@@ -64,7 +63,7 @@ export const UserActivity = () => {
             defaultMinWidth: 50,
             defaultMaxWidth: 600
           }}
-          onRowClicked={handleRowClicked}
+          defaultColDef={defaultColDef}
         />
       </BCBox>
     </BCBox>

diff --git a/frontend/src/views/Admin/AdminMenu/components/Users.jsx b/frontend/src/views/Admin/AdminMenu/components/Users.jsx
@@ -1,20 +1,16 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-// @mui component
 import BCTypography from '@/components/BCTypography'
 import BCButton from '@/components/BCButton'
 import BCBox from '@/components/BCBox'
 import BCAlert from '@/components/BCAlert'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
-// icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'
-// hooks
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useCallback, useRef, useState, useEffect } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-import { ROUTES, apiRoutes } from '@/constants/routes'
-import { usersColumnDefs, idirUserDefaultFilter } from './_schema'
+import { apiRoutes, ROUTES } from '@/constants/routes'
+import { idirUserDefaultFilter, usersColumnDefs } from './_schema'
+import { LinkRenderer } from '@/utils/grid/cellRenderers.jsx'
 
 export const Users = () => {
   const { t } = useTranslation(['common', 'admin'])
@@ -45,9 +41,15 @@ export const Users = () => {
     return params.data.userProfileId.toString()
   }, [])
 
-  const handleRowClicked = useCallback((params) => {
-    navigate(`${ROUTES.ADMIN_USERS}/${params.data.userProfileId}`)
-  })
+  const defaultColDef = useMemo(
+    () => ({
+      cellRenderer: LinkRenderer,
+      cellRendererParams: {
+        url: (data) => data.data.userProfileId
+      }
+    }),
+    []
+  )
 
   const gridRef = useRef()
   useEffect(() => {
@@ -98,9 +100,9 @@ export const Users = () => {
             defaultSortModel={defaultSortModel}
             defaultFilterModel={idirUserDefaultFilter}
             handleGridKey={handleGridKey}
-            handleRowClicked={handleRowClicked}
             enableResetButton={false}
             enableCopyButton={false}
+            defaultColDef={defaultColDef}
           />
         </BCBox>
       </BCBox>