feat: #1984 Add test history for the selected seedlot (#2247)

Author: MCatherine1994

frontend/src/components/GenericTable/index.tsx

@@ -76,7 +76,7 @@ const GenericTable = <T extends Record<string, any>>({
   enableHiding = false,
   enableSorting = false,
   manualSorting = false,
-  sorting,
+  sorting = [],
   onSortingChange,
   enableFilters = false,
   enableRowSelection = false,

frontend/src/types/consep/TestingSearchType.ts

@@ -25,6 +25,7 @@ export type TestingSearchResponseType = {
   itemId: string;
   seedlotSample: string;
   riaSkey: number;
+  activityTypeCd: string;
 };
 
 // Type for pagination details

frontend/src/views/CONSEP/TestingActivities/TestSearch/TestListTable.tsx

@@ -1,10 +1,16 @@
-import React, { useRef } from 'react';
-import { Row, Column, Button } from '@carbon/react';
+/* eslint-disable camelcase */
+import React, { useRef, useState } from 'react';
+import { type MRT_TableInstance } from 'material-react-table';
+import {
+  Row, Column, Button, Modal, Tooltip
+} from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 
 import GenericTable from '../../../../components/GenericTable';
 import ShowHideColumnControl from './ToolbarControls/ShowHideColumnControl';
+import TestHistory from './ToolbarControls/TestHistory';
 import { getTestingActivityListColumns, columnVisibilityLocalStorageKey } from './constants';
+
 import type {
   TestingSearchResponseType,
   PaginationInfoType
@@ -30,6 +36,8 @@ const TestListTable = ({
   sorting
 }: TestListTableProp) => {
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+  const tableRef = useRef<MRT_TableInstance<TestingSearchResponseType> | null>(null);
+  const [showTestHistory, setShowTestHistory] = useState(false);
 
   const actions = [
     {
@@ -45,7 +53,7 @@ const TestListTable = ({
     {
       label: 'Test history',
       type: 'tertiary',
-      action: () => {}
+      action: () => setShowTestHistory(true)
     },
     {
       label: 'Add activity',
@@ -75,6 +83,28 @@ const TestListTable = ({
 
   return (
     <div className="concep-test-search-table-container">
+      <Modal
+        className="concep-test-history-modal"
+        open={showTestHistory}
+        passiveModal
+        size="lg"
+        modalHeading={
+          tableRef.current?.getSelectedRowModel().rows?.length === 1
+            ? `Seedlot ${
+              tableRef.current.getSelectedRowModel().rows[0].original.seedlotDisplay
+            }: Test history`
+            : 'Seedlot: Test history'
+        }
+        onRequestClose={() => setShowTestHistory(false)}
+        selectorsFloatingMenus={[
+          // specify selectors for floating menus
+          // that should remain accessible and on top of the modal
+          '.MuiPopover-root',
+          '.MuiPaper-root'
+        ]}
+      >
+        {showTestHistory && tableRef.current && <TestHistory table={tableRef.current} />}
+      </Modal>
       <Row className="concep-test-search-table">
         <GenericTable
           columns={getTestingActivityListColumns()}
@@ -106,29 +136,49 @@ const TestListTable = ({
           renderTopToolbarCustomActions={() => (
             <div className="concep-test-search-table-title">{`Total search result: ${paginationInfo.totalElements}`}</div>
           )}
-          renderToolbarInternalActions={({ table }) => (
-            <Column>
-              {actions.map(({
-                label, icon, action, type
-              }) => (
-                <Button
-                  key={label}
-                  onClick={action}
-                  kind={type}
-                  aria-label={label}
-                  size="md"
-                  className="concep-test-search-table-toolbar-button"
-                >
-                  {label}
-                  {icon}
-                </Button>
-              ))}
-              <ShowHideColumnControl
-                table={table}
-                columnVisibilityLocalStorageKey={columnVisibilityLocalStorageKey}
-              />
-            </Column>
-          )}
+          renderToolbarInternalActions={({ table }) => {
+            tableRef.current = table as MRT_TableInstance<TestingSearchResponseType>;
+            const selectedRows = table.getSelectedRowModel().rows;
+            const isTestHistoryEnabled = selectedRows.length === 1;
+            const testHistoryDisabledReason = selectedRows.length === 0
+              ? 'Select one seedlot to view its test history.'
+              : 'You can only view test history for one seedlot at a time.';
+
+            return (
+              <Column>
+                {actions.map(({
+                  label, icon, action, type
+                }) => {
+                  const button = (
+                    <Button
+                      key={label}
+                      onClick={action}
+                      kind={type}
+                      aria-label={label}
+                      size="md"
+                      className="concep-test-search-table-toolbar-button"
+                      disabled={label === 'Test history' && !isTestHistoryEnabled}
+                    >
+                      {label}
+                      {icon}
+                    </Button>
+                  );
+
+                  return label === 'Test history' && !isTestHistoryEnabled ? (
+                    <Tooltip key={label} label={testHistoryDisabledReason} align="right">
+                      <span>{button}</span>
+                    </Tooltip>
+                  ) : (
+                    button
+                  );
+                })}
+                <ShowHideColumnControl
+                  table={table as MRT_TableInstance<TestingSearchResponseType>}
+                  columnVisibilityLocalStorageKey={columnVisibilityLocalStorageKey}
+                />
+              </Column>
+            );
+          }}
         />
       </Row>
     </div>

frontend/src/views/CONSEP/TestingActivities/TestSearch/ToolbarControls/ShowHideColumnControl/index.tsx

@@ -4,13 +4,14 @@ import { Button, Checkbox } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 import { type MRT_TableInstance } from 'material-react-table';
 import { Menu, MenuItem } from '@mui/material';
+import type { TestingSearchResponseType } from '../../../../../../types/consep/TestingSearchType';
 import './styles.scss';
 
 const ShowHideColumnControl = ({
   table,
   columnVisibilityLocalStorageKey = 'table-columns-visibility'
 }: {
-  table: MRT_TableInstance<any>;
+  table: MRT_TableInstance<TestingSearchResponseType>;
   columnVisibilityLocalStorageKey?: string;
 }) => {
   // The button element that the menu is attached to

frontend/src/views/CONSEP/TestingActivities/TestSearch/ToolbarControls/TestHistory/constants.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { type MRT_ColumnDef, MRT_Cell } from 'material-react-table';
+import { Tag } from '@carbon/react';
+import { TestingSearchResponseType } from '../../../../../../types/consep/TestingSearchType';
+import { formatDateCell } from '../../constants';
+
+export const getTestHistoryTableColumns = (): MRT_ColumnDef<TestingSearchResponseType>[] => [
+  {
+    accessorKey: 'activityTypeCd',
+    header: 'Type',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'testCategoryCd',
+    header: 'Category',
+    enableEditing: false,
+    size: 40
+  },
+  {
+    accessorKey: 'actualEndDtTm',
+    header: 'End Date',
+    enableEditing: false,
+    Cell: ({ cell }) => formatDateCell(cell.getValue<string | null>()),
+    size: 110
+  },
+  {
+    accessorKey: 'requestItem',
+    header: 'Request ID',
+    enableEditing: false,
+    size: 110
+  },
+  {
+    accessorKey: 'currentTestInd',
+    header: 'Curr',
+    enableEditing: false,
+    Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
+      const value = cell.getValue();
+      return value === -1 ? (
+        <Tag type="teal" size="sm">
+          Curr
+        </Tag>
+      ) : null;
+    },
+    size: 80
+  },
+  {
+    accessorKey: 'germinationPct',
+    header: 'Germ',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'testRank',
+    header: 'Rnk',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'pv',
+    header: 'PV',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'moisturePct',
+    header: 'MC',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'purityPct',
+    header: 'Purity',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'seedsPerGram',
+    header: 'SPG',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'otherTestResult',
+    header: 'Oth',
+    enableEditing: false,
+    size: 50
+  },
+  {
+    accessorKey: 'acceptResultInd',
+    header: 'Acc',
+    enableEditing: false,
+    Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
+      const value = cell.getValue();
+      return value === -1 ? (
+        <Tag type="green" size="sm">
+          Acc
+        </Tag>
+      ) : null;
+    },
+    size: 80
+  },
+  {
+    accessorKey: 'significntStsInd',
+    header: 'Sig',
+    enableEditing: false,
+    Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
+      const value = cell.getValue();
+      return value === -1 ? (
+        <Tag type="purple" size="sm">
+          Sig
+        </Tag>
+      ) : null;
+    },
+    size: 80
+  }
+];

frontend/src/views/CONSEP/TestingActivities/TestSearch/ToolbarControls/TestHistory/index.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable camelcase */
+import React, {
+  useState, useRef, useEffect, useMemo
+} from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { type MRT_TableInstance } from 'material-react-table';
+import { InlineNotification } from '@carbon/react';
+import { searchTestingActivities } from '../../../../../../api-service/consep/searchTestingActivitiesAPI';
+import GenericTable from '../../../../../../components/GenericTable';
+import { getTestHistoryTableColumns } from './constants';
+import type {
+  PaginatedTestingSearchResponseType,
+  TestingSearchResponseType,
+  PaginationInfoType
+} from '../../../../../../types/consep/TestingSearchType';
+
+const TestHistory = ({ table }: { table: MRT_TableInstance<TestingSearchResponseType> }) => {
+  const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+  const [searchResults, setSearchResults] = useState<TestingSearchResponseType[]>([]);
+  const [paginationInfo, setPaginationInfo] = useState<PaginationInfoType>({
+    totalElements: 0,
+    totalPages: 0,
+    pageNumber: 0,
+    pageSize: 10
+  });
+  const [alert, setAlert] = useState<{
+    status: 'error' | 'info' | 'success' | 'warning';
+    message: string;
+  } | null>(null);
+  const columns = useMemo(() => getTestHistoryTableColumns(), []);
+
+  const searchMutation = useMutation({
+    mutationFn: ({ page = 0, size = 10 }: { page?: number; size?: number }) => {
+      const selectedRows = table.getSelectedRowModel()?.rows ?? [];
+      const selectedSeedlots = selectedRows.map((row) => row.original.seedlotDisplay);
+      return searchTestingActivities(
+        { lotNumbers: selectedSeedlots },
+        undefined,
+        'asc',
+        false,
+        size,
+        page
+      );
+    },
+    onMutate: () => {
+      setAlert(null);
+    },
+    onSuccess: (data: PaginatedTestingSearchResponseType) => {
+      setSearchResults(data.content);
+      setPaginationInfo({
+        totalElements: data.totalElements,
+        totalPages: data.totalPages,
+        pageNumber: data.pageNumber,
+        pageSize: data.pageSize
+      });
+    },
+    onError: (error) => {
+      setAlert({
+        status: 'error',
+        message: `Failed to get the test history: ${error.message}`
+      });
+    }
+  });
+
+  useEffect(() => {
+    searchMutation.mutate({ page: 0, size: paginationInfo.pageSize });
+  }, []);
+
+  const handlePageChange = (pageIndex: number, pageSize: number) => {
+    searchMutation.mutate({ page: pageIndex, size: pageSize });
+  };
+
+  return (
+    <div>
+      {alert?.message && (
+        <InlineNotification
+          lowContrast
+          kind={alert.status}
+          subtitle={alert?.message}
+          style={{ marginBottom: '0.8rem' }}
+        />
+      )}
+      <GenericTable
+        columns={columns}
+        data={searchResults}
+        enablePagination
+        manualPagination
+        pageIndex={paginationInfo.pageNumber}
+        pageSize={paginationInfo.pageSize}
+        rowCount={paginationInfo.totalElements}
+        onPaginationChange={handlePageChange}
+        isLoading={searchMutation.isPending}
+        tableBodyRef={tableBodyRef}
+      />
+    </div>
+  );
+};
+
+export default TestHistory;