Displaying flagged labware section in history page

cypress/e2e/pages/history.cy.ts

@@ -58,6 +58,9 @@ describe('History Page', () => {
       it('displays uploaded files section', () => {
         cy.findByText('Files Uploaded').should('be.visible');
       });
+      it('does not display flagged labware section', () => {
+        cy.findByText('Flagged Labware').should('not.exist');
+      });
     });
   });
 
@@ -213,7 +216,6 @@ describe('History Page', () => {
       });
     });
   });
-
   describe('when a search errors', () => {
     before(() => {
       cy.msw().then(({ worker, graphql }) => {

cypress/e2e/pages/staining.cy.ts

@@ -163,7 +163,7 @@ describe('Staining Page', () => {
     getButton('Submit').click();
   }
   function fillInForm(stainType: string) {
-    if (stainType == 'H&E') {
+    if (stainType === 'H&E') {
       selectSGPNumber('SGP1008');
       cy.findByTestId('timeMeasurements.0.minutes').type('1');
       cy.findByTestId('timeMeasurements.0.seconds').type('1');
@@ -177,10 +177,10 @@ describe('Staining Page', () => {
       cy.findByTestId('STAN-3111-bondRun').type('1');
       selectOption('STAN-3111-workNumber', 'SGP1008');
       selectOption('STAN-3111-panel', 'Positive');
-      if (stainType == 'RNAscope' || stainType == 'RNAscope & IHC') {
+      if (stainType === 'RNAscope' || stainType === 'RNAscope & IHC') {
         cy.findByTestId('STAN-3111-plexRNAscope').type('1');
       }
-      if (stainType == 'IHC' || stainType == 'RNAscope & IHC') {
+      if (stainType === 'IHC' || stainType === 'RNAscope & IHC') {
         cy.findByTestId('STAN-3111-plexIHC').type('1');
       }
     }

src/components/history/History.tsx

@@ -161,14 +161,14 @@ export default function History(props: HistoryUrlParams) {
       columnData: {
         columns: historyColumns
       },
-      entries: history
+      entries: history.entries
     };
   }, [history, historyColumns]);
 
   const { downloadURL, extension } = useDownload(downloadData);
 
   const uniqueWorkNumbers = React.useMemo(() => {
-    const uniqueWorkNumbers = [...new Set(history.map((item) => item.workNumber))];
+    const uniqueWorkNumbers = [...new Set(history.entries.map((item) => item.workNumber))];
     const workNumbers: string[] = [];
     uniqueWorkNumbers.forEach((wrkNumber) => {
       if (wrkNumber && wrkNumber.length > 0) {
@@ -191,7 +191,11 @@ export default function History(props: HistoryUrlParams) {
    * File upload option is only for authenticated users, so
    * only allow permission to view or download uploaded files if not authenticated
    */
-  const fileAccessUrlPath = (workNumber: string) => {
+  const labwareUrlPath = (barcode: string) => {
+    return `/labware/${barcode}`;
+  };
+
+  const fileUploadUrlPath = (workNumber: string) => {
     const queryParamsStr = stringify({
       workNumber: workNumber
     });
@@ -219,34 +223,63 @@ export default function History(props: HistoryUrlParams) {
         </div>
       )}
       {current.matches('found') &&
-        (history.length > 0 ? (
+        (history.entries.length > 0 ? (
           <>
             {uniqueWorkNumbers.length > 0 && (
-              <div
-                className={
-                  'mx-auto max-w-screen-lg flex flex-col mt-4 mb-4 w-full p-4 rounded-md justify-center bg-gray-200'
-                }
-              >
-                <Heading level={4} showBorder={false}>
-                  Files Uploaded
-                </Heading>
-                <div className={'flex flex-col mt-4 justify-center'} data-testid="history">
-                  <Table>
-                    <TableBody>
-                      <TableCell className={'flex flex-col justify-center  p-2'}>
-                        {uniqueWorkNumbers.map((workNumber, indx) => (
-                          <StyledLink
-                            data-testid={`styled-link-${workNumber}`}
-                            key={workNumber}
-                            to={fileAccessUrlPath(workNumber)}
-                            className={`text-center bg-white ${indx > 0 && 'border-t-2 border-gray-100'}  p-2`}
-                          >{`Files for ${workNumber}`}</StyledLink>
-                        ))}
-                      </TableCell>
-                    </TableBody>
-                  </Table>
+              <>
+                <div
+                  className={
+                    'mx-auto max-w-screen-lg flex flex-col mt-4 mb-4 w-full p-4 rounded-md justify-center bg-gray-200'
+                  }
+                >
+                  <Heading level={4} showBorder={false}>
+                    Files Uploaded
+                  </Heading>
+                  <div className={'flex flex-col mt-4 justify-center'} data-testid="history">
+                    <Table>
+                      <TableBody>
+                        <TableCell className={'flex flex-col justify-center  p-2'}>
+                          {uniqueWorkNumbers.map((workNumber, indx) => (
+                            <StyledLink
+                              data-testid={`styled-link-${workNumber}`}
+                              key={workNumber}
+                              to={fileUploadUrlPath(workNumber)}
+                              className={`text-center bg-white ${indx > 0 && 'border-t-2 border-gray-100'}  p-2`}
+                            >{`Files for ${workNumber}`}</StyledLink>
+                          ))}
+                        </TableCell>
+                      </TableBody>
+                    </Table>
+                  </div>
                 </div>
-              </div>
+                {history.flaggedBarcodes.length > 0 && (
+                  <div
+                    className={
+                      'mx-auto max-w-screen-lg flex flex-col mt-4 mb-4 w-full p-4 rounded-md justify-center bg-gray-200'
+                    }
+                  >
+                    <Heading level={4} showBorder={false}>
+                      Flagged Labware
+                    </Heading>
+                    <div className={'flex flex-col mt-4 justify-center'} data-testid="flagged-labware">
+                      <Table>
+                        <TableBody>
+                          <TableCell className={'flex flex-col justify-center  p-2'}>
+                            {history.flaggedBarcodes.map((barcode, indx) => (
+                              <StyledLink
+                                data-testid={`styled-link-${barcode}`}
+                                key={barcode}
+                                to={labwareUrlPath(barcode)}
+                                className={`text-center bg-white ${indx > 0 && 'border-t-2 border-gray-100'}  p-2`}
+                              >{`${barcode}`}</StyledLink>
+                            ))}
+                          </TableCell>
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </div>
+                )}
+              </>
             )}
             <div className="mt-6 mb-2 flex flex-row items-center justify-end space-x-3">
               History for
@@ -261,7 +294,7 @@ export default function History(props: HistoryUrlParams) {
               </a>
             </div>
             <TopScrollingBar>
-              <DataTable columns={historyColumns} data={history} fixedHeader={true} />
+              <DataTable columns={historyColumns} data={history.entries} fixedHeader={true} />
             </TopScrollingBar>
           </>
         ) : isValidInput ? (

src/components/history/HistoryInput.tsx

@@ -14,10 +14,10 @@ export default function HistoryInput({ eventTypes }: HistoryInputProps) {
 
   return (
     <div
-      className="mx-auto max-w-screen-lg mb-6 border border-gray-200 bg-gray-100 p-6 rounded-md space-y-4 shadow-lg hover:shadow-2xl"
+      className="mx-auto max-w-screen-lg mb-6 border-gray-200 bg-gray-100 rounded-md space-y-4"
       data-testid={'history-input'}
     >
-      <div className={'grid grid-cols-2 gap-x-10 gap-y-6 border border-gray-200 bg-gray-100 p-6 rounded-md'}>
+      <div className={'grid grid-cols-2 gap-x-10 gap-y-6 bg-gray-100 rounded-md'}>
         <div className={'flex flex-col '}>
           <WorkNumberSelect
             label={'SGP/R&D Number'}

src/components/history/history.machine.ts

@@ -1,21 +1,21 @@
 import { createMachine } from 'xstate';
 import { Maybe } from '../../types/sdk';
-import { HistoryTableEntry, MachineServiceDone, MachineServiceError } from '../../types/stan';
+import { HistoryData, MachineServiceDone, MachineServiceError } from '../../types/stan';
 import * as historyService from '../../lib/services/historyService';
 import { assign } from '@xstate/immer';
 import { ClientError } from 'graphql-request';
 import { HistoryUrlParams } from '../../pages/History';
 
 type HistoryContext = {
   historyProps: HistoryUrlParams;
-  history: Array<HistoryTableEntry>;
+  history: HistoryData;
   serverError: Maybe<ClientError>;
 };
 
 type HistoryEvent =
   | { type: 'UPDATE_HISTORY_PROPS'; props: HistoryUrlParams }
   | { type: 'RETRY' }
-  | MachineServiceDone<'findHistory', Array<HistoryTableEntry>>
+  | MachineServiceDone<'findHistory', HistoryData>
   | MachineServiceError<'findHistory'>;
 
 export default function createHistoryMachine() {
@@ -25,7 +25,7 @@ export default function createHistoryMachine() {
       initial: 'searching',
       context: {
         historyProps: {},
-        history: [],
+        history: { entries: [], flaggedBarcodes: [] },
         serverError: null
       },
       states: {

src/graphql/fragments/HistoryFields.graphql

@@ -8,4 +8,5 @@ fragment HistoryFields on History {
   entries {
     ...HistoryEntryFields
   }
+  flaggedBarcodes
 }

src/lib/machines/layout/layoutContext.ts

@@ -1,5 +1,5 @@
 import { LabwareFieldsFragment, LabwareFlaggedFieldsFragment, Maybe } from '../../../types/sdk';
-import { Address, NewFlaggedLabwareLayout, NewLabwareLayout } from '../../../types/stan';
+import { Address, NewFlaggedLabwareLayout } from '../../../types/stan';
 
 export interface LayoutPlan {
   /**

src/lib/services/historyService.ts

@@ -1,17 +1,19 @@
 import { stanCore } from '../sdk';
-import { HistoryTableEntry } from '../../types/stan';
+import { HistoryData } from '../../types/stan';
 import { HistoryFieldsFragment, LabwareFieldsFragment, SampleFieldsFragment } from '../../types/sdk';
 import { HistoryUrlParams } from '../../pages/History';
 
 /**
  * Retrieves the history for the given History props.
  */
-export async function findHistory(historyProps: HistoryUrlParams): Promise<Array<HistoryTableEntry>> {
+
+export async function findHistory(historyProps: HistoryUrlParams): Promise<HistoryData> {
   let result;
   let history: HistoryFieldsFragment = {
     entries: [],
     labware: [],
     samples: [],
+    flaggedBarcodes: [],
     __typename: 'History'
   };
   if (historyProps.sampleId) {
@@ -44,7 +46,7 @@ export async function findHistory(historyProps: HistoryUrlParams): Promise<Array
   history.labware.forEach((lw) => labwareMap.set(lw.id, lw));
   history.samples.forEach((sample) => sampleMap.set(sample.id, sample));
 
-  return history.entries.map((entry) => {
+  const entries = history.entries.map((entry) => {
     const sourceLabware = labwareMap.get(entry.sourceLabwareId)!;
     const destinationLabware = labwareMap.get(entry.destinationLabwareId)!;
     const sample = entry.sampleId ? sampleMap.get(entry.sampleId) : undefined;
@@ -68,4 +70,8 @@ export async function findHistory(historyProps: HistoryUrlParams): Promise<Array
       sectionPosition: entry.region ?? undefined
     };
   });
+  return {
+    entries,
+    flaggedBarcodes: history.flaggedBarcodes
+  };
 }

src/mocks/handlers/historyHandlers.ts

@@ -21,11 +21,13 @@ import labwareFactory from '../../lib/factories/labwareFactory';
 import { buildLabwareFragment } from '../../lib/helpers/labwareHelper';
 import { sampleFactory } from '../../lib/factories/sampleFactory';
 
-export function buildHistory(workNumber?: string): HistoryFieldsFragment {
+export function buildHistory(workNumber?: string, flagged?: boolean): HistoryFieldsFragment {
   const sourceLabware = labwareFactory.build();
   const destinationLabware = labwareFactory.build();
   const sample = sampleFactory.build();
-
+  if (flagged) {
+    sourceLabware.barcode = 'STAN-1000';
+  }
   const entries: Array<HistoryEntry> = [
     {
       __typename: 'HistoryEntry',
@@ -47,6 +49,7 @@ export function buildHistory(workNumber?: string): HistoryFieldsFragment {
     __typename: 'History',
     samples: [sample],
     labware: [sourceLabware, destinationLabware].map(buildLabwareFragment),
+    flaggedBarcodes: [],
     entries
   };
 }