Implement Table Actions pattern and default columns

src/components/elements/CommonMenuButton.tsx

@@ -13,6 +13,7 @@ import { To } from 'react-router-dom';
 
 import RouterLink from './RouterLink';
 import { MoreMenuIcon } from './SemanticIcons';
+import { LocationState } from '@/routes/routeUtil';
 
 export type CommonMenuItem = {
   key: string;
@@ -22,6 +23,7 @@ export type CommonMenuItem = {
   divider?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
+  linkState?: LocationState;
 };
 
 interface Props {

src/components/elements/table/GenericTable.stories.tsx

@@ -30,7 +30,6 @@ const Template =
   );
 
 const clientColumns = [
-  CLIENT_COLUMNS.id,
   CLIENT_COLUMNS.first,
   CLIENT_COLUMNS.last,
   CLIENT_COLUMNS.ssn,

src/components/elements/table/GenericTable.tsx

@@ -44,16 +44,15 @@ import {
 import TableRowActions, {
   TableRowActionsType,
 } from '@/components/elements/table/TableRowActions';
-import { LocationState } from '@/routes/routeUtil';
 
 export interface Props<T> {
   rows: T[];
   handleRowClick?: (row: T) => void;
   rowLinkTo?: (row: T) => To | null | undefined;
-  rowLinkState?: LocationState;
   columns?: ColumnDef<T>[];
   paginated?: boolean;
   loading?: boolean;
+  loadingRegardlessOfData?: boolean; // needed for correctly updating AssignBulkService button
   loadingVariant?: 'circular' | 'linear';
   tablePaginationProps?: TablePaginationProps;
   tableContainerProps?: TableContainerProps;
@@ -74,12 +73,11 @@ export interface Props<T> {
   filterToolbar?: ReactNode;
   noData?: ReactNode;
   renderRow?: (row: T, columnKeys: string[]) => ReactNode;
-  condensed?: boolean;
   // if overrideTableBody is true, GenericTable doesn't render a `tbody` element.
   // This should only be used by tables that take over rendering using renderRow and render a `tbody` within their custom render fn
   overrideTableBody?: boolean;
   injectBelowRows?: ReactNode; // component to inject below all rendered rows, above footer
-  getTableRowActions?: (record: T) => TableRowActionsType;
+  getTableRowActions?: (record: T, loading?: boolean) => TableRowActionsType;
   getRowAccessibleName?: (row: T) => string;
 }
 
@@ -118,6 +116,7 @@ const GenericTable = <T extends { id: string }>({
   columns: columnProp,
   paginated = false,
   loading = false,
+  loadingRegardlessOfData = false,
   vertical = false,
   renderVerticalHeaderCell,
   tablePaginationProps,
@@ -135,8 +134,6 @@ const GenericTable = <T extends { id: string }>({
   renderRow,
   noData = 'No data',
   loadingVariant = 'circular',
-  condensed = false,
-  rowLinkState,
   overrideTableBody = false,
   injectBelowRows,
   getTableRowActions,
@@ -435,7 +432,6 @@ const GenericTable = <T extends { id: string }>({
                           {isLinked ? (
                             <RouterLink
                               to={rowLink}
-                              state={rowLinkState}
                               aria-label={ariaLabel && ariaLabel(row)}
                               plain={!linkTreatment}
                               data-testid={linkTreatment && 'table-linkedCell'}
@@ -455,7 +451,7 @@ const GenericTable = <T extends { id: string }>({
                                   height: '100%',
                                   alignItems: 'center',
                                   px: 2,
-                                  py: condensed ? 1 : 2,
+                                  py: 2,
                                 }}
                               >
                                 {renderCellContents(row, render)}
@@ -477,6 +473,7 @@ const GenericTable = <T extends { id: string }>({
                               : row.id
                           }
                           getActions={getTableRowActions}
+                          loading={loadingRegardlessOfData}
                         />
                       </TableCell>
                     )}

src/components/elements/table/TableRowActions.tsx

@@ -1,51 +1,88 @@
-import { Stack } from '@mui/material';
-import { useMemo } from 'react';
+import { Button, Stack } from '@mui/material';
+import React, { ReactNode, useMemo } from 'react';
 import ButtonLink from '../ButtonLink';
 import CommonMenuButton, { CommonMenuItem } from '../CommonMenuButton';
 
 export type TableRowActionsType = {
-  primaryAction?: CommonMenuItem;
+  primaryAction?: CommonMenuItem | ReactNode;
   secondaryActions?: CommonMenuItem[];
 };
 
 interface TableRowActionsProps<T> {
   record: T;
   recordName?: string;
-  getActions: (record: T) => TableRowActionsType;
+  loading?: boolean;
+  getActions: (record: T, loading?: boolean) => TableRowActionsType;
 }
 
 const TableRowActions = <T extends { id: string }>({
   record,
   recordName,
   getActions,
+  loading,
 }: TableRowActionsProps<T>) => {
   const accessibleName = useMemo(
     () => recordName || record.id,
     [record.id, recordName]
   );
 
   const { primaryAction, secondaryActions } = useMemo(
-    () => getActions(record),
-    [getActions, record]
+    () => getActions(record, loading),
+    [getActions, loading, record]
+  );
+
+  const { primaryActionNode, primaryActionTypesafe } = useMemo(() => {
+    return React.isValidElement(primaryAction)
+      ? { primaryActionNode: primaryAction }
+      : { primaryActionTypesafe: primaryAction as CommonMenuItem };
+  }, [primaryAction]);
+
+  const secondariesWithAria = useMemo(
+    () =>
+      secondaryActions?.map((s) => {
+        return {
+          ...s,
+          ariaLabel: s.ariaLabel || `${s.title}, ${recordName}`,
+        };
+      }),
+    [secondaryActions, recordName]
   );
 
   return (
     <Stack direction='row' alignItems='center' gap={0.5}>
-      {!!primaryAction && (
+      {primaryActionNode}
+      {!!primaryActionTypesafe && !!primaryActionTypesafe.to && (
         <ButtonLink
-          to={primaryAction.to || ''}
+          to={primaryActionTypesafe.to}
           size='small'
           variant='outlined'
-          aria-label={primaryAction.ariaLabel}
+          aria-label={
+            primaryActionTypesafe.ariaLabel ||
+            `${primaryActionTypesafe.title}, ${recordName}`
+          }
+          state={primaryActionTypesafe.linkState}
         >
-          {primaryAction.title}
+          {primaryActionTypesafe.title}
         </ButtonLink>
       )}
-      {!!secondaryActions && secondaryActions.length > 0 && (
+      {!!primaryActionTypesafe && !!primaryActionTypesafe.onClick && (
+        <Button
+          onClick={primaryActionTypesafe.onClick}
+          size='small'
+          variant='outlined'
+          aria-label={
+            primaryActionTypesafe.ariaLabel ||
+            `${primaryActionTypesafe.title}, ${recordName}`
+          }
+        >
+          {primaryActionTypesafe.title}
+        </Button>
+      )}
+      {!!secondariesWithAria && secondariesWithAria.length > 0 && (
         <CommonMenuButton
           iconButton
           title='Actions'
-          items={secondaryActions}
+          items={secondariesWithAria}
           aria-label={`Action menu for ${accessibleName}`}
           MenuProps={{
             MenuListProps: {

src/components/elements/table/tableActions/tableRowActionUtil.ts

@@ -0,0 +1,74 @@
+import { generateAssessmentPath } from '@/modules/assessments/util';
+import {
+  assessmentDescription,
+  clientBriefName,
+  entryExitRange,
+  parseAndFormatDate,
+} from '@/modules/hmis/hmisUtil';
+import { ServiceFields } from '@/modules/services/components/ProjectServicesTable';
+import { getServiceTypeForDisplay } from '@/modules/services/serviceColumns';
+import {
+  ClientDashboardRoutes,
+  EnrollmentDashboardRoutes,
+} from '@/routes/routes';
+import {
+  AssessmentFieldsFragment,
+  ClientNameFragment,
+  EnrollmentFieldsFragment,
+} from '@/types/gqlTypes';
+import { generateSafePath } from '@/utils/pathEncoding';
+
+export const getViewClientAction = (client: ClientNameFragment) => {
+  return {
+    title: 'View Client',
+    key: 'client',
+    ariaLabel: `View Client, ${clientBriefName(client)}`,
+    to: generateSafePath(ClientDashboardRoutes.PROFILE, {
+      clientId: client.id,
+    }),
+  };
+};
+
+export const getViewEnrollmentAction = (
+  enrollment: Pick<EnrollmentFieldsFragment, 'id' | 'entryDate' | 'exitDate'>,
+  client: Pick<ClientNameFragment, 'id'> | ClientNameFragment
+) => {
+  return {
+    title: 'View Enrollment',
+    key: 'enrollment',
+    ariaLabel: `View Enrollment, ${client.hasOwnProperty('firstName') ? clientBriefName(client as ClientNameFragment) : ''} ${entryExitRange(enrollment)}`,
+    to: generateSafePath(EnrollmentDashboardRoutes.ENROLLMENT_OVERVIEW, {
+      clientId: client.id,
+      enrollmentId: enrollment.id,
+    }),
+  };
+};
+
+export const getViewAssessmentAction = (
+  assessment: AssessmentFieldsFragment,
+  clientId: string,
+  enrollmentId: string
+) => {
+  return {
+    title: 'View Assessment',
+    key: 'assessment',
+    ariaLabel: `View Assessment, ${assessmentDescription(assessment)}`,
+    to: generateAssessmentPath(assessment, clientId, enrollmentId),
+  };
+};
+
+export const getViewServiceAction = (
+  service: Pick<ServiceFields, 'serviceType' | 'dateProvided'>,
+  enrollmentId: string,
+  clientId: string
+) => {
+  return {
+    title: 'View Service',
+    key: 'service',
+    ariaLabel: `View Service, ${getServiceTypeForDisplay(service.serviceType)} on ${parseAndFormatDate(service.dateProvided)}`,
+    to: generateSafePath(EnrollmentDashboardRoutes.SERVICES, {
+      clientId: clientId,
+      enrollmentId: enrollmentId,
+    }),
+  };
+};

src/modules/admin/components/services/ServiceTypeTable.tsx

@@ -2,6 +2,7 @@ import { Chip } from '@mui/material';
 import { ColumnDef } from '@/components/elements/table/types';
 import GenericTableWithData from '@/modules/dataFetching/components/GenericTableWithData';
 import { useFilters } from '@/modules/hmis/filterUtil';
+import { getServiceTypeForDisplay } from '@/modules/services/serviceColumns';
 import { AdminDashboardRoutes } from '@/routes/routes';
 import {
   GetServiceTypesDocument,
@@ -11,11 +12,10 @@ import {
 } from '@/types/gqlTypes';
 import { generateSafePath } from '@/utils/pathEncoding';
 
-const columns: ColumnDef<ServiceTypeConfigFieldsFragment>[] = [
+const COLUMNS: ColumnDef<ServiceTypeConfigFieldsFragment>[] = [
   {
     header: 'Service Name',
     render: 'name',
-    linkTreatment: true,
   },
   {
     header: 'Service Category',
@@ -42,6 +42,18 @@ const columns: ColumnDef<ServiceTypeConfigFieldsFragment>[] = [
   },
 ];
 
+const getTableRowActions = (row: ServiceTypeConfigFieldsFragment) => {
+  return {
+    primaryAction: {
+      title: 'View Service Type',
+      key: 'service type',
+      to: generateSafePath(AdminDashboardRoutes.CONFIGURE_SERVICE_TYPE, {
+        serviceTypeId: row.id,
+      }),
+    },
+  };
+};
+
 const ServiceTypeTable = () => {
   const filters = useFilters({
     type: 'ServiceTypeFilterOptions',
@@ -57,17 +69,14 @@ const ServiceTypeTable = () => {
       >
         queryVariables={{}}
         queryDocument={GetServiceTypesDocument}
-        columns={columns}
+        columns={COLUMNS}
+        getTableRowActions={getTableRowActions}
+        getRowAccessibleName={(record) => getServiceTypeForDisplay(record)}
         pagePath='serviceTypes'
         noData='No service types'
         filters={filters}
         recordType='ServiceType'
         paginationItemName='service type'
-        rowLinkTo={(row) =>
-          generateSafePath(AdminDashboardRoutes.CONFIGURE_SERVICE_TYPE, {
-            serviceTypeId: row.id,
-          })
-        }
       />
     </>
   );