fix: #2269, #2268 Improve test search table scrolling and result column data (#2276)

Author: MCatherine1994

frontend/src/components/GenericTable/index.tsx

@@ -34,6 +34,7 @@ type Props<T extends Record<string, any>> = {
   enableColumnActions?: boolean;
   enableColumnPinning?: boolean;
   enableEditing?: boolean;
+  enableStickyHeader?: boolean;
   isCompacted?: boolean;
   renderRowActions?: (props: { row: any; table: any }) => React.ReactNode;
   onRowClick?: (row: T) => void;
@@ -88,6 +89,7 @@ const GenericTable = <T extends Record<string, any>>({
   enableColumnActions = false,
   enableColumnPinning = false,
   enableEditing = true,
+  enableStickyHeader = false,
   isCompacted = false,
   renderRowActions,
   onRowClick,
@@ -210,6 +212,7 @@ const GenericTable = <T extends Record<string, any>>({
     enableColumnActions,
     enableColumnPinning,
     enableEditing,
+    enableStickyHeader,
     createDisplayMode: 'row',
     editDisplayMode: 'table',
     renderRowActions: renderRowActions

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

@@ -124,6 +124,7 @@ const TestListTable = ({
           enableColumnPinning
           enableSorting
           manualSorting
+          enableStickyHeader
           sorting={sorting}
           onSortingChange={onSortingChange}
           isLoading={isLoading}

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

@@ -82,6 +82,22 @@ export const testRanks: string[] = [
   'A', 'B', 'C', 'P'
 ];
 
+const getResultValue = (row: TestingSearchResponseType) => {
+  if (row.activityId && row.activityId.startsWith('M')) {
+    return row.moisturePct;
+  }
+  switch (row.activityId) {
+    case 'Germ':
+      return row.germinationPct;
+    case 'SPG':
+      return row.seedsPerGram;
+    case 'PUR':
+      return row.purityPct;
+    default:
+      return null;
+  }
+};
+
 const tableCellProps = (size?: number, alignment: 'left' | 'right' | 'center' = 'right') => ({
   muiTableHeadCellProps: {
     align: alignment,
@@ -171,26 +187,9 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
   },
   {
     header: 'Result',
-    accessorFn: (row) => {
-      switch (row.activityId) {
-        case 'Germ':
-          return row.germinationPct;
-        case 'MC':
-          return row.moisturePct;
-        case 'SPG':
-          return row.seedsPerGram;
-        case 'PUR':
-          return row.purityPct;
-        default:
-          return null;
-      }
-    },
+    accessorFn: (row) => getResultValue(row),
     enableEditing: false,
-    ...tableCellProps(92),
-    Cell: ({ cell }) => {
-      const value = cell.getValue<number | null>();
-      return value != null ? `${value}%` : '';
-    }
+    ...tableCellProps(92)
   },
   {
     accessorKey: 'pv',
@@ -318,28 +317,7 @@ export const formatExportData = {
   },
   Result: {
     header: 'Result',
-    value: (row: TestingSearchResponseType) => {
-      switch (row.testCategoryCd) {
-        case 'Germ': {
-          const v = row.germinationPct;
-          return v == null ? '' : `${v}%`;
-        }
-        case 'MC': {
-          const v = row.moisturePct;
-          return v == null ? '' : `${v}%`;
-        }
-        case 'SPG': {
-          const v = row.seedsPerGram;
-          return v == null ? '' : `${v}%`;
-        }
-        case 'PUR': {
-          const v = row.purityPct;
-          return v == null ? '' : `${v}%`;
-        }
-        default:
-          return '';
-      }
-    }
+    value: (row: TestingSearchResponseType) => getResultValue(row)
   },
   pv: {
     header: 'PV',

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

@@ -429,7 +429,7 @@ const TestSearch = () => {
               onChange={(e: ComboBoxEvent) => {
                 handleComboBoxesChanges('testType', e);
               }}
-              style={{ width: '8rem' }}
+              style={{ width: '9rem' }}
             />
             <ComboBox
               id="activity-type-input"
@@ -440,7 +440,7 @@ const TestSearch = () => {
               onChange={(e: ComboBoxEvent) => {
                 handleComboBoxesChanges('activityId', e);
               }}
-              style={{ width: '8rem' }}
+              style={{ width: '9rem' }}
             />
             <TextInput
               id="germ-tray-input"

frontend/src/views/CONSEP/TestingActivities/TestSearch/styles.scss

@@ -6,7 +6,7 @@
   }
 
   .consep-test-search-filters {
-    margin-top: 2rem;
+    margin-top: 1rem;
     margin-bottom: 1rem;
 
     & > div:first-child {
@@ -43,13 +43,13 @@
     }
 
     .lot-input {
-      width: 9rem;
+      width: 25rem;
       min-width: 6rem;
     }
 
     .germ-tray-input {
-      width: 6.25rem;
-      min-width: 6.5rem;
+      width: 7.5rem;
+      min-width: 7.5rem;
     }
 
     #lot-input,
@@ -70,7 +70,6 @@
 
   .concep-test-search-table-container {
     margin-top: 1rem;
-    margin-bottom: 2rem;
     background-color: var(--#{vars.$bcgov-prefix}-layer-01);
 
     .concep-test-search-table-title {
@@ -124,6 +123,10 @@
           padding-right: 0;
         }
       }
+
+      .MuiTableContainer-root {
+        max-height: calc(100vh - 24rem);
+      }
     }
 
     .#{vars.$bcgov-prefix}--modal-content {