Define regions with the labware layout

cypress/e2e/pages/xeniumAnalyser.cy.ts

@@ -86,30 +86,81 @@ describe('Xenium Analyser', () => {
         });
       });
     });
+
+    describe('Defining new regions of interest', () => {
+      before(() => {
+        cy.findByTestId('define-regions-button').click();
+      });
+      it('displays regions definer component', () => {
+        cy.findByText('Set Regions').should('be.visible');
+      });
+      describe('creating a new region', () => {
+        before(() => {
+          cy.findByTestId('region-color-0').click();
+          cy.findByTestId('labware-region-definer-container').within(() => {
+            cy.findByText('A1').click();
+            cy.findByText('B1').click({ cmdKey: true });
+          });
+          cy.findByTestId('create-update-region-button').click();
+          cy.findByText('Done').click();
+        });
+        it('adds a region border with the same selected color on the the selected slots', () => {
+          cy.findByTestId('labware-STAN-3111').within(() => {
+            cy.get('div.border-black').should('have.length', 2);
+          });
+        });
+        it('updates the regions table accordingly', () => {
+          cy.findByTestId('STAN-3111-regions-table').get('tbody tr').should('have.length', 4);
+        });
+        it('updates the region name accordingly', () => {
+          cy.findByText('SGP1009_Region1').should('be.visible');
+        });
+      });
+
+      describe('removing a region', () => {
+        before(() => {
+          cy.findByTestId('define-regions-button').click();
+          cy.findByTestId('region-color-0').click();
+          cy.findByTestId('remove-region-button').click();
+          cy.findByText('Done').click();
+        });
+        it('removes the region border from the slots of that region', () => {
+          cy.findByTestId('labware-STAN-3111').within(() => {
+            cy.get('div.border-black').should('have.length', 0);
+          });
+        });
+        it('updates the regions table accordingly', () => {
+          cy.findByTestId('STAN-3111-regions-table').get('tbody tr').should('have.length', 5);
+        });
+        it('renames the region of interest with the sample external id', () => {
+          cy.findByText('SGP1009_Region1').should('not.exist');
+        });
+      });
+    });
   });
-  describe('When  two labware is scanned ', () => {
+  describe('When  two labware are scanned ', () => {
     before(() => {
       cy.get('#labwareScanInput').type('STAN-3112{enter}'); //scan second labware
     });
     it('should display Analyser Details for STAN-3112', () => {
       cy.findAllByRole('table').eq(1).contains('STAN-3112');
       cy.findByTestId('STAN-3112-workNumber').should('exist');
       cy.findByTestId('STAN-3112-position').should('exist');
-      cy.findByTestId('STAN-3112-samples').should('exist');
+      cy.findByTestId('STAN-3112-regions-table').should('exist');
     });
     it('should disable any further labware scanning', () => {
       cy.get('#labwareScanInput').should('be.disabled');
     });
   });
-  describe('When  two labware is scanned and one is removed', () => {
+  describe('When  two labware are scanned and one is removed', () => {
     before(() => {
       cy.findAllByTestId('removeButton').eq(1).click();
     });
     it('should only display Analyser Details for STAN-3111', () => {
       cy.findByText('STAN-3112').should('not.exist');
       cy.findByTestId('STAN-3112-workNumber').should('not.exist');
       cy.findByTestId('STAN-3112-position').should('not.exist');
-      cy.findByTestId('STAN-3112-samples').should('not.exist');
+      cy.findByTestId('STAN-3112-regions-table').should('not.exist');
     });
     it('should enable labware scanning', () => {
       cy.get('#labwareScanInput').should('be.enabled');

src/components/WorkNumberSelect.tsx

@@ -184,10 +184,10 @@ export default function WorkNumberSelect({
       />
       {!name && error.length ? <p className="text-red-500 text-xs italic">{error}</p> : ''}
       <div className={'flex-row whitespace-nowrap space-x-2 p-0'}>
-        {currentSelectedWork && currentSelectedWork.project.length > 0 && (
+        {currentSelectedWork && currentSelectedWork.project?.length > 0 && (
           <Pill color={'pink'}>{currentSelectedWork.project}</Pill>
         )}
-        {currentSelectedWork && currentSelectedWork.workRequester.length > 0 && (
+        {currentSelectedWork && currentSelectedWork.workRequester?.length > 0 && (
           <Pill color={'pink'}>{currentSelectedWork.workRequester}</Pill>
         )}
       </div>