feat(app): Add quick transfer tab and details view #15600
Conversation
app/src/organisms/QuickTransferFlow/__tests__/utils/getSelectedWellCount.test.ts
Outdated
Show resolved
Hide resolved
app/src/pages/QuickTransferDashboard/PinnedTransferCarousel.tsx
Outdated
Show resolved
Hide resolved
| const pipetteDisplayName = | ||
| usePipetteNameSpecs((protocolHardware as ProtocolPipette).pipetteName) | ||
| ?.displayName ?? '' |
There was a problem hiding this comment.
this is a todo in the future but since usePipetteNameSpecs returns the v1 specs, it should be deprecated and we shouldn't use it. I think instead we should make a new util that returns the pipetteName given the pipetteV2Specs info
There was a problem hiding this comment.
yeah I thought about this -- I think we should leave as is for now to match ProtocolDetails and since v1 is already anonymized for OEM mode and we haven't done that for v2 yet. But I agree we should try to find some time in continuing work to complete the migration over to the new schema!
app/src/assets/images/on-device-display/empty_quick_transfer_dashboard.png
Outdated
Show resolved
Hide resolved
c012069
to
8b7ed0e
Compare
| import { useNetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection' | ||
| import { NavigationMenu } from '../NavigationMenu' | ||
| import { Navigation } from '..' | ||
| import { when } from 'vitest-when' |
| // TODO(sb:7/10/24): update this wrapper to fade on both sides only when not scrolled completely to that side | ||
| // This will be accomplished in PLAT-399 | ||
| const CarouselWrapper = styled.div` | ||
| display: flex; |
There was a problem hiding this comment.
| display: flex; | |
| display:${DISPLAY_FLEX}; |
| flex-direction: ${DIRECTION_ROW}; | ||
| align-items: ${ALIGN_FLEX_START}; | ||
| width: 650px; | ||
| overflow-x: scroll; |
There was a problem hiding this comment.
| overflow-x: scroll; | |
| overflow-x: ${OVERFLOW_SCROLL}; |
| display: flex; | ||
| flex-direction: ${DIRECTION_ROW}; | ||
| align-items: ${ALIGN_FLEX_START}; | ||
| width: 650px; |
There was a problem hiding this comment.
If there is no specific reason to use px
| width: 650px; | |
| width: 40.625rem; |
There was a problem hiding this comment.
and probably a bit wider (1.5rem or so) to eyeball the full width from figma. 42.25rem works for me:
app/src/organisms/QuickTransferFlow/__tests__/utils/getSelectedWellCount.test.ts
Outdated
Show resolved
Hide resolved
app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx
Outdated
Show resolved
Hide resolved
| } = { | ||
| full: { | ||
| fontSize: TYPOGRAPHY.fontSize32, | ||
| height: '8.875rem', |
There was a problem hiding this comment.
I'm not sure that we need to use the same height, but I updated the height for RTP Csv file support.
the following two cases too.
There was a problem hiding this comment.
Yeah I'm not sure either - Quick Transfer protocols won't have RTP so the previous height is probably sufficient space wise but I'll flag this for Felix to look at in design QA.
app/src/pages/QuickTransferDashboard/PinnedTransferCarousel.tsx
Outdated
Show resolved
Hide resolved
app/src/pages/QuickTransferDashboard/PinnedTransferCarousel.tsx
Outdated
Show resolved
Hide resolved
| &:active { | ||
| background-color: ${longpress.isLongPressed | ||
| ? '' | ||
| : isFailedAnalysis | ||
| ? COLORS.red40 | ||
| : COLORS.grey50}; | ||
| } |
There was a problem hiding this comment.
I think we avoid using a nested ternary.
app/src/pages/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
Outdated
Show resolved
Hide resolved
| import type { ProtocolHardware, ProtocolPipette } from '../Protocols/hooks' | ||
| import type { TFunction } from 'i18next' |
There was a problem hiding this comment.
| import type { ProtocolHardware, ProtocolPipette } from '../Protocols/hooks' | |
| import type { TFunction } from 'i18next' | |
| import type { TFunction } from 'i18next' | |
| import type { ProtocolHardware, ProtocolPipette } from '../Protocols/hooks' |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## edge #15600 +/- ##
==========================================
+ Coverage 60.12% 62.91% +2.78%
==========================================
Files 190 218 +28
Lines 10627 12829 +2202
==========================================
+ Hits 6390 8071 +1681
- Misses 4237 4758 +521
Flags with carried forward coverage won't be shown. Click here to find out more. |
Fix PLAT-231, PLAT-232, PLAT-233, PLAT-344
Overview
This PR adds all functionality needed for the quick transfer dashboard and details pages. It also addresses a discrepancy in the number of wells selected vs number of wells in the stored stateful object
Test Plan
Smoke test all added functionality - create new quick transfer, see that it shows up on the quick transfer dashboard and not the protocols dashboard, pin and unpin it, view the details page, delete it
Changelog
getSelectedWellCountutil and use it to determine more accurate volume limitationsprotocolKindto ProtocolResource type and use this to filter between protocols and quick transfers in details tabsReview requests
Does the protocolKind type match the robot server?
Smoke test the new tab and details view including long press, pinning, unpinning, deleting etc
Risk assessment
Low, behind FF