Merge pull request #558 from sanger/x1143_fix

Bug fix for x1143
sanger · Feb 14, 2024 · 9061155 · 9061155
2 parents ba5bbc2 + 70d8306
commit 9061155
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 61 deletions.
diff --git a/src/components/history/History.tsx b/src/components/history/History.tsx
@@ -20,13 +20,19 @@ import { HistoryUrlParams } from '../../pages/History';
 /**
  * Component for looking up and displaying the history of labware and samples
  */
-export default function History(props: HistoryUrlParams) {
+type HistoryProps = HistoryUrlParams & { displayFlaggedLabware?: boolean };
+export default function History(props: HistoryProps) {
   const historyMachine = React.useMemo(() => {
     return createHistoryMachine();
   }, []);
+  const getHistoryURLParams = (props: HistoryProps): HistoryUrlParams => {
+    const { displayFlaggedLabware, ...urlProps } = props;
+    return urlProps;
+  };
+  const { displayFlaggedLabware, ...urlProps } = props;
   const [current, send] = useMachine(historyMachine, {
     context: {
-      historyProps: props
+      historyProps: getHistoryURLParams(urlProps)
     }
   });
 
@@ -184,7 +190,7 @@ export default function History(props: HistoryUrlParams) {
    * If the props change, send an update event to the machine
    */
   useEffect(() => {
-    send({ type: 'UPDATE_HISTORY_PROPS', props });
+    send({ type: 'UPDATE_HISTORY_PROPS', props: getHistoryURLParams(props) });
   }, [props, send, isValidInput]);
 
   /**
@@ -203,7 +209,7 @@ export default function History(props: HistoryUrlParams) {
   };
 
   const searchString = (keyValSeparator: string, tokenSeparator: string) => {
-    return Object.keys(historyProps)
+    return Object.keys(getHistoryURLParams(historyProps))
       .sort()
       .map((key) => `${key}${keyValSeparator}${historyProps[key as keyof HistoryUrlParams]}`)
       .join(tokenSeparator);
@@ -252,35 +258,35 @@ export default function History(props: HistoryUrlParams) {
                     </Table>
                   </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>
-                )}
               </>
             )}
+            {history.flaggedBarcodes.length > 0 && displayFlaggedLabware && (
+              <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
               <>&nbsp;</>

diff --git a/src/pages/History.tsx b/src/pages/History.tsx
@@ -63,6 +63,7 @@ export default function History() {
   // If the URL parameters don't parse to valid HistoryProps use the default values
   const initialValues = historyProps ?? defaultInitialValues;
   const navigate = useNavigate();
+  const props = { ...historyProps, displayFlaggedLabware: true };
   return (
     <AppShell>
       <AppShell.Header>
@@ -90,7 +91,7 @@ export default function History() {
               </Form>
             </Formik>
           </div>
-          {historyProps && <HistoryComponent {...historyProps} />}
+          {historyProps && <HistoryComponent {...props} />}
         </div>
       </AppShell.Main>
     </AppShell>

diff --git a/src/pages/LabwareDetails.tsx b/src/pages/LabwareDetails.tsx
@@ -129,7 +129,7 @@ export default function LabwareDetails() {
           </div>
           <div className="space-y-4">
             <Heading level={2}>Labware History</Heading>
-            <History barcode={labware.barcode} />
+            <History barcode={labware.barcode} displayFlaggedLabware={false} />
           </div>
         </div>
       </AppShell.Main>

diff --git a/tests/unit/components/history/history.spec.tsx b/tests/unit/components/history/history.spec.tsx
@@ -301,40 +301,69 @@ describe('when release event is present', () => {
 });
 
 describe('when search result includes a flagged labware', () => {
-  const props: HistoryUrlParams = { workNumber: 'SGP1008' };
-  beforeEach(() => {
-    jest.spyOn(xState, 'useMachine').mockReturnValue([
-      {
-        value: 'found',
-        context: {
-          historyProps: props,
-          history: { entries: historyTableEntries, flaggedBarcodes: ['STAN-3111'] },
-          serverError: undefined
-        },
+  describe('when displayFlaggedLabware is true', () => {
+    const historyProps = { workNumber: 'SGP1008', displayFlaggedLabware: true };
+    beforeEach(() => {
+      jest.spyOn(xState, 'useMachine').mockReturnValue([
+        {
+          value: 'found',
+          context: {
+            historyProps: historyProps,
+            history: { entries: historyTableEntries, flaggedBarcodes: ['STAN-3111'] },
+            serverError: undefined
+          },
 
-        matches: jest.fn((val) => val === 'found')
-      },
-      jest.fn()
-    ] as any);
+          matches: jest.fn((val) => val === 'found')
+        },
+        jest.fn()
+      ] as any);
+      act(() => {
+        render(
+          <BrowserRouter>
+            <History {...historyProps} />
+          </BrowserRouter>
+        );
+      });
+    });
+    it('should display the flagged labware section', async () => {
+      expect(screen.getByText('Flagged Labware')).toBeInTheDocument();
+      expect(screen.getByTestId('styled-link-STAN-3111')).toBeInTheDocument();
+    });
 
-    act(() => {
-      render(
-        <BrowserRouter>
-          <History {...props} />
-        </BrowserRouter>
-      );
+    it('should navigate to the flagged labware page when the flagged labware link is clicked', () => {
+      act(() => {
+        screen.getByTestId('styled-link-STAN-3111').click();
+      });
+      expect(global.window.location.pathname).toContain('/labware/STAN-3111');
     });
   });
-  it('should display the flagged labware section', async () => {
-    expect(screen.getByText('Flagged Labware')).toBeInTheDocument();
-    expect(screen.getByTestId('styled-link-STAN-3111')).toBeInTheDocument();
-  });
+  describe('when displayFlaggedLabware is false', () => {
+    const historyProps = { workNumber: 'SGP1008', displayFlaggedLabware: false };
+    beforeEach(() => {
+      jest.spyOn(xState, 'useMachine').mockReturnValue([
+        {
+          value: 'found',
+          context: {
+            historyProps: historyProps,
+            history: { entries: historyTableEntries, flaggedBarcodes: ['STAN-3111'] },
+            serverError: undefined
+          },
 
-  it('should navigate to the flagged labware page when the flagged labware link is clicked', () => {
-    act(() => {
-      screen.getByTestId('styled-link-STAN-3111').click();
+          matches: jest.fn((val) => val === 'found')
+        },
+        jest.fn()
+      ] as any);
+      act(() => {
+        render(
+          <BrowserRouter>
+            <History {...historyProps} />
+          </BrowserRouter>
+        );
+      });
+    });
+    it('should not display the flagged labware section', async () => {
+      expect(screen.queryByText('Flagged Labware')).not.toBeInTheDocument();
     });
-    expect(global.window.location.pathname).toContain('/labware/STAN-3111');
   });
 });
 describe("when there's an error", () => {