Merge pull request #706 from sanger/RT-803875-updating-section-number…

…-after-deletion Rt 803875 updating section number after deletion
sanger · Jun 21, 2024 · 831bc26 · 831bc26
2 parents 14720f2 + 94e442c
commit 831bc26
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/cypress/e2e/pages/sectioningConfirmation.cy.ts b/cypress/e2e/pages/sectioningConfirmation.cy.ts
@@ -11,6 +11,7 @@ import { findPlanData } from '../../../src/mocks/handlers/planHandlers';
 import { getAllSelect, selectOptionForMultiple, selectSGPNumber } from '../shared/customReactSelect.cy';
 import { HttpResponse } from 'msw';
 
+let highestSectionNumber: number = 0;
 describe('Sectioning Confirmation', () => {
   before(() => {
     cy.visit('/lab/sectioning/confirm');
@@ -178,19 +179,30 @@ describe('Sectioning Confirmation', () => {
       });
 
       it('should renumber all section numbers', () => {
-        let highestSectionNumber = 0;
-        cy.findByRole('table')
-          .find('td')
-          .eq(1)
-          .then((col) => {
-            highestSectionNumber = Number(col.text());
-          });
-
+        readHighestSectionNumber();
         cy.findAllByTestId('section-number').each((elem) => {
           highestSectionNumber++;
           cy.wrap(elem).should('have.value', highestSectionNumber + '');
         });
       });
+      context('after section deletion', () => {
+        before(() => {
+          cy.screenshot();
+          readHighestSectionNumber();
+          cy.screenshot();
+          cy.findByText('Edit Layout').click();
+          cy.findByRole('dialog').within(() => {
+            cy.findByText('STAN-2021').click({ ctrlKey: true });
+            cy.findByText('Done').click();
+          });
+          cy.screenshot();
+        });
+        it('renumbers all section numbers', () => {
+          cy.findAllByTestId('section-number').each((elem) => {
+            cy.wrap(elem).should('have.value', ++highestSectionNumber + '');
+          });
+        });
+      });
       it('should display region fields for all sections', () => {
         getAllSelect('region-select').forEach((elem: any) => {
           cy.wrap(elem).should('be.enabled');
@@ -427,3 +439,12 @@ function findPlanByBarcode(barcode: string) {
 function saveButton() {
   return cy.findByRole('button', { name: /Save/i });
 }
+
+const readHighestSectionNumber = () => {
+  cy.findByRole('table')
+    .find('td')
+    .eq(1)
+    .then((col) => {
+      highestSectionNumber = Number(col.text());
+    });
+};
diff --git a/src/components/sectioningConfirm/ConfirmLabware.tsx b/src/components/sectioningConfirm/ConfirmLabware.tsx
@@ -128,6 +128,7 @@ const ConfirmLabware: React.FC<ConfirmLabwareProps> = ({
     if (mode === SectionNumberMode.Auto && sectionNumberEnabled) {
       setNotifyDelete(true);
     } else {
+      notifySectionChange.current = true;
       removePlan(layoutPlan.destinationLabware.barcode!);
     }
   }, [mode, setNotifyDelete, removePlan, layoutPlan.destinationLabware.barcode, sectionNumberEnabled]);

diff --git a/src/components/sectioningConfirm/ConfirmTubes.tsx b/src/components/sectioningConfirm/ConfirmTubes.tsx
@@ -106,8 +106,7 @@ const TubeRow: React.FC<TubeRowProps> = ({
     return createConfirmLabwareMachine(comments, initialLayoutPlan.destinationLabware, initialLayoutPlan);
   }, [comments, initialLayoutPlan]);
   const [current, send, service] = useMachine(confirmLabwareMachine);
-  const { cancelled, layoutPlan, labware } = current.context;
-  const { layoutMachine } = current.context;
+  const { cancelled, layoutPlan, labware, layoutMachine } = current.context;
   const [notifyCancel, setNotifyCancel] = React.useState(false);
   const notifySectionChange = React.useRef(false);
 
@@ -121,7 +120,10 @@ const TubeRow: React.FC<TubeRowProps> = ({
 
   /** Notify section confirm machine when increasing/decreasing the number of section  */
   useEffect(() => {
-    if (layoutPlan && current.context.isLayoutUpdated && notifySectionChange.current) {
+    if (
+      (layoutPlan && current.context.isLayoutUpdated && notifySectionChange.current) ||
+      (current.context.isCancelToggled && notifySectionChange.current)
+    ) {
       notifySectionChange.current = false;
       onSectionUpdate(layoutPlan);
     }
@@ -139,8 +141,9 @@ const TubeRow: React.FC<TubeRowProps> = ({
     'cursor-pointer hover:opacity-90 text-sm tracking-wide'
   );
 
-  const handleOnClick = useCallback(() => {
+  const handleOnRemoveClick = useCallback(() => {
     if (mode === SectionNumberMode.Auto) {
+      notifySectionChange.current = true;
       setNotifyCancel(true);
     } else {
       send({ type: 'TOGGLE_CANCEL' });
@@ -260,7 +263,7 @@ const TubeRow: React.FC<TubeRowProps> = ({
             />
           ))}
         </TableCell>
-        <TableCell onClick={handleOnClick}>
+        <TableCell onClick={handleOnRemoveClick}>
           <RemoveIcon
             data-testid={`remove-tube-${layoutPlan.destinationLabware.barcode}`}
             className="h-4 w-4 text-red-500"

diff --git a/src/components/sectioningConfirm/sectioningConfirm.machine.ts b/src/components/sectioningConfirm/sectioningConfirm.machine.ts
@@ -368,7 +368,7 @@ export function createSectioningConfirmMachine() {
           /**
            * If a layoutPlan has been removed, make sure to also remove the ConfirmSectionLabware for that layoutPlan
            */
-          const destinationBarcodes = new Set(context.plans.map((plan) => plan.planData.destination.barcode));
+          const destinationBarcodes = new Set(event.plans.map((plan) => plan.planData.destination.barcode));
 
           const confirmSectionLabware = context.confirmSectionLabware.filter((csl) =>
             destinationBarcodes.has(csl.barcode)