From ecbcbd8b4b69312152ef764a60557873d869d48b Mon Sep 17 00:00:00 2001
From: sabrine33 <sa33@sanger.ac.uk>
Date: Fri, 31 Jan 2025 12:18:21 +0000
Subject: [PATCH] setting section thinckness inputs only for sectionned slots

---
 cypress/e2e/pages/sectioningPlanning.cy.ts | 15 ++++-
 src/components/planning/LabwarePlan.tsx    | 68 +++++++++++-----------
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/cypress/e2e/pages/sectioningPlanning.cy.ts b/cypress/e2e/pages/sectioningPlanning.cy.ts
index bab98c31..1dc1ba61 100644
--- a/cypress/e2e/pages/sectioningPlanning.cy.ts
+++ b/cypress/e2e/pages/sectioningPlanning.cy.ts
@@ -103,6 +103,13 @@ describe('Sectioning Planning', () => {
         cy.findByRole('button', { name: /Next/i }).should('be.disabled');
       });
 
+      it('section thickness inputs initially are empty and disabled', () => {
+        cy.findAllByTestId('section-thickness').each((input) => {
+          cy.wrap(input).should('have.value', '');
+          cy.wrap(input).should('be.disabled');
+        });
+      });
+
       context('when I try and leave the page', () => {
         it('shows a confirm box', () => {
           cy.on('window:confirm', (str) => {
@@ -126,7 +133,6 @@ describe('Sectioning Planning', () => {
           cy.findByText('A1').click();
           cy.findByText('Done').click();
         });
-        cy.findByTestId('section-thickness-A1').type('5');
       });
 
       after(() => {
@@ -136,6 +142,11 @@ describe('Sectioning Planning', () => {
       it('enables the Create Labware button', () => {
         cy.findByText('Create Labware').should('not.be.disabled');
       });
+
+      it('enables and set section thickness input to the predefined value', () => {
+        cy.findAllByTestId('section-thickness').eq(0).should('have.value', '0.5');
+        cy.findAllByTestId('section-thickness').eq(0).should('be.enabled');
+      });
     });
   });
 
@@ -266,7 +277,7 @@ function createLabware() {
     cy.findByText('A1').click();
     cy.findByText('Done').click();
   });
-  cy.findByTestId('section-thickness-A1').clear().type('5');
+  cy.findByTestId('section-thickness').eq(0).clear().type('5');
   cy.findByText('Create Labware').click();
 }
 
diff --git a/src/components/planning/LabwarePlan.tsx b/src/components/planning/LabwarePlan.tsx
index 1589e371..8ed46d5f 100644
--- a/src/components/planning/LabwarePlan.tsx
+++ b/src/components/planning/LabwarePlan.tsx
@@ -33,7 +33,6 @@ import ScanInput from '../scanInput/ScanInput';
 import FormikSelect from '../forms/Select';
 import { objectKeys, Position } from '../../lib/helpers';
 import { FormikErrorMessage } from '../forms';
-import Table, { TableBody, TableHead, TableHeader } from '../Table';
 
 type LabwarePlanProps = {
   /**
@@ -223,39 +222,42 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
                     )}
 
                     {outputLabware.labwareType.name !== LabwareTypeName.FETAL_WASTE_CONTAINER && (
-                      <Table>
-                        <TableHead>
-                          <tr>
-                            <TableHeader>Slot</TableHeader>
-                            <TableHeader>Section Thickness</TableHeader>
-                          </tr>
-                        </TableHead>
-                        <TableBody>
-                          {outputLabware.slots.map((slot, index) => (
-                            <tr key={index}>
-                              <td className="text-center">{slot.address}</td>
-                              <td>
-                                <FormikInput
-                                  className="text-center focus:ring-sdb-100 focus:border-sdb-100 block border-gray-300 rounded-md disabled:opacity-75 disabled:cursor-not-allowed"
-                                  label={''}
-                                  disabled={current.matches('printing') || current.matches('done')}
-                                  name={`sectionThickness[${slot.address}]`}
-                                  data-testid={`section-thickness-${slot.address}`}
-                                  type="number"
-                                  min={0.5}
-                                  step={0.5}
-                                  onFocus={() => {
-                                    setHighlightedSlots(new Set([slot.address]));
-                                  }}
-                                  onBlur={() => {
-                                    setHighlightedSlots(new Set());
-                                  }}
-                                />
-                              </td>
-                            </tr>
+                      <div className="p-4 space-y-2 space-x-2 bg-gray-100">
+                        <div className={'grid grid-cols-2 py-2 text-gray-500 text-center'}>
+                          <div>Section Thickness</div>
+                        </div>
+                        <div className={'flex flex-col space-y-4'}>
+                          {outputLabware.slots.map((slot) => (
+                            <div key={slot.address} className="flex flex-row items-start justify-start gap-x-2">
+                              <span className="font-medium text-gray-800 tracking-wide py-2">{slot.address}</span>
+                              <FormikInput
+                                className="text-center focus:ring-sdb-100 focus:border-sdb-100 block border-gray-300 rounded-md disabled:opacity-75 disabled:cursor-not-allowed disabled:bg-gray-300"
+                                label={''}
+                                disabled={
+                                  current.matches('printing') ||
+                                  current.matches('done') ||
+                                  !current.context.layoutPlan.plannedActions.has(slot.address)
+                                }
+                                name={
+                                  current.context.layoutPlan.plannedActions.has(slot.address)
+                                    ? `sectionThickness[${slot.address}]`
+                                    : 'sectionThickness'
+                                }
+                                data-testid={`section-thickness`}
+                                type="number"
+                                min={0.5}
+                                step={0.5}
+                                onFocus={() => {
+                                  setHighlightedSlots(new Set([slot.address]));
+                                }}
+                                onBlur={() => {
+                                  setHighlightedSlots(new Set());
+                                }}
+                              />
+                            </div>
                           ))}
-                        </TableBody>
-                      </Table>
+                        </div>
+                      </div>
                     )}
                   </div>