Skip to content

Commit 5311142

Browse files
authored
Merge pull request #872 from sanger/x1264-section-thinkness
setting section thickness inputs only for sectioned slots
2 parents ea317a1 + ecbcbd8 commit 5311142

File tree

2 files changed

+48
-35
lines changed

2 files changed

+48
-35
lines changed

cypress/e2e/pages/sectioningPlanning.cy.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,13 @@ describe('Sectioning Planning', () => {
103103
cy.findByRole('button', { name: /Next/i }).should('be.disabled');
104104
});
105105

106+
it('section thickness inputs initially are empty and disabled', () => {
107+
cy.findAllByTestId('section-thickness').each((input) => {
108+
cy.wrap(input).should('have.value', '');
109+
cy.wrap(input).should('be.disabled');
110+
});
111+
});
112+
106113
context('when I try and leave the page', () => {
107114
it('shows a confirm box', () => {
108115
cy.on('window:confirm', (str) => {
@@ -126,7 +133,6 @@ describe('Sectioning Planning', () => {
126133
cy.findByText('A1').click();
127134
cy.findByText('Done').click();
128135
});
129-
cy.findByTestId('section-thickness-A1').type('5');
130136
});
131137

132138
after(() => {
@@ -136,6 +142,11 @@ describe('Sectioning Planning', () => {
136142
it('enables the Create Labware button', () => {
137143
cy.findByText('Create Labware').should('not.be.disabled');
138144
});
145+
146+
it('enables and set section thickness input to the predefined value', () => {
147+
cy.findAllByTestId('section-thickness').eq(0).should('have.value', '0.5');
148+
cy.findAllByTestId('section-thickness').eq(0).should('be.enabled');
149+
});
139150
});
140151
});
141152

@@ -266,7 +277,7 @@ function createLabware() {
266277
cy.findByText('A1').click();
267278
cy.findByText('Done').click();
268279
});
269-
cy.findByTestId('section-thickness-A1').clear().type('5');
280+
cy.findByTestId('section-thickness').eq(0).clear().type('5');
270281
cy.findByText('Create Labware').click();
271282
}
272283

src/components/planning/LabwarePlan.tsx

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import ScanInput from '../scanInput/ScanInput';
3333
import FormikSelect from '../forms/Select';
3434
import { objectKeys, Position } from '../../lib/helpers';
3535
import { FormikErrorMessage } from '../forms';
36-
import Table, { TableBody, TableHead, TableHeader } from '../Table';
3736

3837
type LabwarePlanProps = {
3938
/**
@@ -223,39 +222,42 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
223222
)}
224223

225224
{outputLabware.labwareType.name !== LabwareTypeName.FETAL_WASTE_CONTAINER && (
226-
<Table>
227-
<TableHead>
228-
<tr>
229-
<TableHeader>Slot</TableHeader>
230-
<TableHeader>Section Thickness</TableHeader>
231-
</tr>
232-
</TableHead>
233-
<TableBody>
234-
{outputLabware.slots.map((slot, index) => (
235-
<tr key={index}>
236-
<td className="text-center">{slot.address}</td>
237-
<td>
238-
<FormikInput
239-
className="text-center focus:ring-sdb-100 focus:border-sdb-100 block border-gray-300 rounded-md disabled:opacity-75 disabled:cursor-not-allowed"
240-
label={''}
241-
disabled={current.matches('printing') || current.matches('done')}
242-
name={`sectionThickness[${slot.address}]`}
243-
data-testid={`section-thickness-${slot.address}`}
244-
type="number"
245-
min={0.5}
246-
step={0.5}
247-
onFocus={() => {
248-
setHighlightedSlots(new Set([slot.address]));
249-
}}
250-
onBlur={() => {
251-
setHighlightedSlots(new Set());
252-
}}
253-
/>
254-
</td>
255-
</tr>
225+
<div className="p-4 space-y-2 space-x-2 bg-gray-100">
226+
<div className={'grid grid-cols-2 py-2 text-gray-500 text-center'}>
227+
<div>Section Thickness</div>
228+
</div>
229+
<div className={'flex flex-col space-y-4'}>
230+
{outputLabware.slots.map((slot) => (
231+
<div key={slot.address} className="flex flex-row items-start justify-start gap-x-2">
232+
<span className="font-medium text-gray-800 tracking-wide py-2">{slot.address}</span>
233+
<FormikInput
234+
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"
235+
label={''}
236+
disabled={
237+
current.matches('printing') ||
238+
current.matches('done') ||
239+
!current.context.layoutPlan.plannedActions.has(slot.address)
240+
}
241+
name={
242+
current.context.layoutPlan.plannedActions.has(slot.address)
243+
? `sectionThickness[${slot.address}]`
244+
: 'sectionThickness'
245+
}
246+
data-testid={`section-thickness`}
247+
type="number"
248+
min={0.5}
249+
step={0.5}
250+
onFocus={() => {
251+
setHighlightedSlots(new Set([slot.address]));
252+
}}
253+
onBlur={() => {
254+
setHighlightedSlots(new Set());
255+
}}
256+
/>
257+
</div>
256258
))}
257-
</TableBody>
258-
</Table>
259+
</div>
260+
</div>
259261
)}
260262
</div>
261263

0 commit comments

Comments
 (0)