Merge pull request #791 from sanger/x1234-flatten-the-display-of-labw…

…are-layout Display the predefined number of labware layouts.
sanger · Nov 12, 2024 · 2b98017 · 2b98017
2 parents a98c906 + c2aa651
commit 2b98017
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 40 deletions.
diff --git a/cypress/e2e/pages/sectioningPlanning.cy.ts b/cypress/e2e/pages/sectioningPlanning.cy.ts
@@ -21,8 +21,19 @@ describe('Sectioning Planning', () => {
         cy.get('#labwareScanInput').should('not.be.disabled');
       });
     });
+    context('number of labware is defined greater than 1', () => {
+      before(() => {
+        cy.get('#labwareScanInput').type('STAN-113{enter}');
+        cy.findByTestId('numLabware').type('{selectall}').type('2');
+        cy.findByText('+ Add Labware').click();
+      });
+      it('create as much labware layouts as much precised ', () => {
+        cy.findAllByTestId('labware-').should('have.length', 2);
+      });
+    });
     context('when a source labware loaded with fetal samples less than 12 weeks old', () => {
       before(() => {
+        cy.reload();
         const sourceLabware = labwareFactory.build(
           { barcode: 'STAN-113' },
           {
@@ -140,11 +151,6 @@ describe('Sectioning Planning', () => {
         cy.findByText('Delete Layout').should('not.exist');
       });
 
-      it('disables the form inputs', () => {
-        cy.findByLabelText('Number of Labware').should('be.disabled');
-        cy.findByLabelText('Section Thickness').should('be.disabled');
-      });
-
       it('shows the LabelPrinter', () => {
         cy.findByText('Print Labels').should('be.visible');
       });

diff --git a/src/components/planning/LabwarePlan.tsx b/src/components/planning/LabwarePlan.tsx
@@ -52,9 +52,6 @@ type LabwarePlanProps = {
 
   sampleColors: Map<number, string>;
 
-  /** Specified number of labware when setting the plan */
-  numLabware: number;
-
   /** Specified section thickness when setting the plan */
   sectionThickness: number;
   /**
@@ -81,7 +78,6 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
       sampleColors,
       operationType,
       sourceLabware,
-      numLabware,
       sectionThickness
     },
     ref
@@ -139,7 +135,7 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
         className="relative p-3 shadow"
       >
         <Formik<FormValues>
-          initialValues={buildInitialValues(operationType, outputLabware.labwareType, numLabware, sectionThickness)}
+          initialValues={buildInitialValues(operationType, outputLabware.labwareType, sectionThickness)}
           validationSchema={buildValidationSchema(outputLabware.labwareType)}
           onSubmit={async (values) => {
             const newValues = {
@@ -195,18 +191,6 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
                       />
                     )}
 
-                    {outputLabware.labwareType.name !== LabwareTypeName.VISIUM_LP &&
-                      outputLabware.labwareType.name !== LabwareTypeName.XENIUM && (
-                        <FormikInput
-                          label={'Number of Labware'}
-                          name={'quantity'}
-                          type={'number'}
-                          min={1}
-                          step={1}
-                          disabled={current.matches('printing') || current.matches('done')}
-                        />
-                      )}
-
                     {outputLabware.labwareType.name !== LabwareTypeName.FETAL_WASTE_CONTAINER && (
                       <FormikInput
                         disabled={current.matches('printing') || current.matches('done')}
@@ -332,11 +316,6 @@ type FormValues = {
    */
   barcode?: string;
 
-  /**
-   * The number of this labware type that will be created
-   */
-  quantity: number;
-
   /**
    * The thickness of the sections being taken, in micrometres
    */
@@ -358,12 +337,10 @@ type FormValues = {
 function buildInitialValues(
   operationType: string,
   labwareType: LabwareTypeFieldsFragment,
-  quantity: number,
   sectionThickness: number
 ): FormValues {
   let formValues: FormValues = {
     operationType,
-    quantity,
     sectionThickness
   };
 
@@ -388,17 +365,13 @@ function buildInitialValues(
  */
 function buildValidationSchema(labwareType: LabwareType): Yup.AnyObjectSchema {
   type FormShape = {
-    quantity: Yup.NumberSchema;
     sectionThickness?: Yup.NumberSchema;
     barcode?: Yup.StringSchema;
     lotNumber?: Yup.StringSchema;
     costing?: Yup.StringSchema;
   };
 
-  let formShape: FormShape = {
-    quantity: Yup.number().required().integer().min(1).max(99)
-  };
-
+  let formShape: FormShape = {};
   if (labwareType.name === LabwareTypeName.VISIUM_LP) {
     formShape.barcode = Yup.string().required().min(14);
   } else if (labwareType.name === LabwareTypeName.XENIUM) {

diff --git a/src/components/planning/labwarePlan.machine.ts b/src/components/planning/labwarePlan.machine.ts
@@ -10,7 +10,6 @@ type CreateLabwareEvent = {
   type: 'CREATE_LABWARE';
   sectionThickness?: number;
   barcode?: string;
-  quantity: number;
   lotNumber?: string;
   costing?: SlideCosting;
   operationType: string;
@@ -169,9 +168,8 @@ export const createLabwarePlanMachine = (initialLayoutPlan: LayoutPlan) =>
                 destinationLabwareTypeName: context.layoutPlan.destinationLabware.labwareType.name,
                 barcode: event.barcode
               });
-              const labware: PlanRequestLabware[] = new Array(event.quantity).fill(planRequestLabware);
               return {
-                labware,
+                labware: [planRequestLabware],
                 operationType: event.operationType
               };
             },

diff --git a/src/pages/sectioning/Plan.tsx b/src/pages/sectioning/Plan.tsx
@@ -93,14 +93,13 @@ function Plan() {
               sourceLabware={sourceLabware}
               onDeleteButtonClick={deleteAction}
               onComplete={confirmAction!}
-              numLabware={numLabware}
               sectionThickness={sectionThickness}
             />
           ))}
         </>
       );
     },
-    [sectionThickness, numLabware]
+    [sectionThickness]
   );
   const buildPlanCreationSettings = React.useCallback(() => {
     return (
@@ -143,6 +142,7 @@ function Plan() {
         <div className="my-4 mx-auto max-w-screen-xl space-y-16">
           <Planner<PlanMutation>
             operationType={'Section'}
+            numPlansToCreate={numLabware}
             selectedLabwareType={allowedLabwareTypes.find((lt) => lt.name === selectedLabwareType)}
             onPlanChanged={handlePlanChange}
             buildPlanCreationSettings={buildPlanCreationSettings}

diff --git a/tests/unit/components/planning/labwarePlan.spec.tsx b/tests/unit/components/planning/labwarePlan.spec.tsx
@@ -272,7 +272,6 @@ const renderLabwarePlan = (outputLabwareType: string) => {
         sourceLabware={[buildFlaggedLabware(LabwareTypeName.TUBE)]}
         onDeleteButtonClick={jest.fn()}
         onComplete={jest.fn()}
-        numLabware={2}
         sectionThickness={3}
       />
     </div>