Merge pull request #549 from sanger/x1142_labware_state_visible

The display of the labware state for the destination labware upon scanning in the Visium transfer page.
sanger · Jan 31, 2024 · 771e528 · 771e528
2 parents dbced0c + 2bdc79e
commit 771e528
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/cypress/e2e/pages/visiumTransfer.cy.ts b/cypress/e2e/pages/visiumTransfer.cy.ts
@@ -50,6 +50,7 @@ describe('Transfer Page', () => {
     it('should display scanned output labware', () => {
       cy.findByText('STAN-3112').should('be.visible');
       cy.findByTestId('removeButton').should('exist');
+      cy.findByText('ACTIVE').should('be.visible');
     });
     it('should display filled slots in output labware as disabled', () => {
       cy.findByTestId('labware-STAN-3112').within(() => {

diff --git a/src/pages/SlotCopy.tsx b/src/pages/SlotCopy.tsx
@@ -26,6 +26,8 @@ import RadioGroup, { RadioButtonInput } from '../components/forms/RadioGroup';
 import LabwareScanner from '../components/labwareScanner/LabwareScanner';
 import RemoveButton from '../components/buttons/RemoveButton';
 import { objectKeys } from '../lib/helpers';
+import { StripyCardDetail } from '../components/StripyCard';
+import { LabwareStatePill } from '../components/LabwareStatePill';
 
 type PageParams = {
   title: string;
@@ -134,14 +136,23 @@ const SlotCopyDestinationConfigPanel: React.FC<DestinationLabwareScanPanelProps>
             >
               {(props) => {
                 return (
-                  <div className="flex flex-row justify-end">
+                  <div className="flex flex-col">
                     {props.labwares.length > 0 && (
-                      <RemoveButton
-                        onClick={() => {
-                          labware?.labware.barcode && props.removeLabware(labware?.labware.barcode);
-                          onLabwareScan?.([]);
-                        }}
-                      />
+                      <>
+                        <div className={'flex flex-row justify-end'}>
+                          <RemoveButton
+                            onClick={() => {
+                              labware?.labware.barcode && props.removeLabware(labware?.labware.barcode);
+                              onLabwareScan?.([]);
+                            }}
+                          />
+                        </div>
+                        {labware && labware?.labware.barcode && (
+                          <StripyCardDetail term={'State'}>
+                            <LabwareStatePill labware={labware?.labware} />
+                          </StripyCardDetail>
+                        )}
+                      </>
                     )}
                   </div>
                 );