Y24-022 UI Submit Pool XP tube to traction

[seenanair]

Closes #1617

Changes proposed in this pull request

This PR introduces a new panel for submitting the Pool XP tube (LBSN-9216 Lib PCR Pool XP tube) to the Traction system for the BioScan pipeline.
Key features:

1. Display of the New Panel:

The panel will only be displayed when the tube type is LBSN-9216 Lib PCR Pool XP tube.

2.New Presenter:

A new presenter is added to enable the "Export to Traction" option. This feature is configured in bioscan.yml.

3. New Component:

A new component is introduced to handle the export of the tube to Traction.
This component is responsible for exporting the tube to Traction and polling Traction to verify if the export was successful.
It displays:
An icon to indicate the export status.
A label to show the current status.
A button to perform an action corresponding to the component’s current state.
A spinner if there is an action in progress

Component States:

1. State 1: CHECKING_TUBE_STATUS
When the component first loads, it enters the CHECKING_TUBE_STATUS state.
The component displays a spinner and a message indicating that it is checking if the tube is in Traction. The button is disabled.
Transitions:

• If the tube is not found, the component transitions to State 2 (READY_TO_EXPORT).
• If the tube is found, the component transitions to State 6 (TUBE_ALREADY_EXPORTED).
• If the service is unavailable or returns an error, the component transitions to State 4 (FAILURE_TUBE_CHECK).

2. State 2: READY_TO_EXPORT
This state occurs if the tube is found in Traction during State 1.
The component provides a button to export the tube to Traction. Clicking the button transitions the component as follows:
Transitions:

• If the export using the Sequencescape API is successful, the component transitions to State 3 (EXPORTING_TUBE).
• If the export using the Sequencescape API fails, the component transitions to State 8 (FAILURE_EXPORT_TUBE).
• If the tube is found in Traction after the export, the component transitions to State 5 (TUBE_EXPORT_SUCCESS).
• If the tube is not found in Traction after the export, the component transitions to State 7 (FAILURE_TUBE_CHECK_AFTER_EXPORT).

3. State 3: EXPORTING_TUBE

This state occurs when the user clicks the export button, and the request to export via the Sequencescape API is successful.
At this point, the component polls Traction using the Traction API to verify if the tube has been exported successfully.
The component displays a spinner and a message indicating that the tube is being exported to Traction. The button is disabled.
Transitions:

• If the polling is successful, the component transitions to State 5 (TUBE_EXPORT_SUCCESS).
• If the polling fails, the component transitions to State 7 (FAILURE_TUBE_CHECK_AFTER_EXPORT).
  

4. State 4: FAILURE_TUBE_CHECK
This state occurs if the initial check to determine whether the tube is in Traction fails.
The component provides a button to retry checking the tube's status in Traction and displays a message indicating that the export cannot be verified.
On clicking the button, the component performs the same operation as in State 1.

Transition:

• The component transitions back to State 1 (CHECKING_TUBE_STATUS).
  

5. State 5: TUBE_EXPORT_SUCCESS

This state occurs when the tube export via the Sequencescape API is successful, and the subsequent polling using the Traction API also confirms success.
The component displays a message indicating that the tube has been successfully exported to Traction, along with an "Open Traction" button to view the tube in Traction.

Transition:

• If the user clicks the "Open Traction" button, the component opens the tube in Traction.
  

6. State 6: TUBE_ALREADY_EXPORTED
This state occurs when the initial check to see if the tube is in Traction confirms that the tube is already present.
The component displays a message indicating that the tube has already been exported to Traction and shows an "Open Traction" button.
Transition:

• If the user clicks the "Open Traction" button, the component opens the tube in Traction
  

7. State 7: FAILURE_TUBE_CHECK_AFTER_EXPORT

This state occurs when the tube export via the Sequencescape API is successful, but the polling using the Traction API fails.
The component displays a message indicating that the export cannot be verified and provides a button to retry polling.
Transition:

• When the retry button is clicked, the component transitions to State 3 (EXPORTING_TUBE).
  

8. State 8: FAILURE_EXPORT_TUBE
This state occurs when the export via the Sequencescape API fails.
The component displays a message indicating that the tube export to Traction failed and provides a button to retry the export.
Transition:

• When the retry button is clicked, the component transitions to State 3 (EXPORTING_TUBE).

Instructions for Reviewers

Architectural diagram
sanger/General-Backlog-Items#374

[All PRs] - Confirm PR template filled
[Feature Branches] - Review code
[Production Merges to main]
    - Check story numbers included
    - Check for debug code
    - Check version

[codeclimate]

Code Climate has analyzed commit 87352d4 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 91.1% (0.0% change).

View more on Code Climate.

[codecov]

Codecov Report

Attention: Patch coverage is 85.82375% with 74 lines in your changes missing coverage. Please review.

Project coverage is 78.32%. Comparing base (11736d4) to head (87352d4).
Report is 47 commits behind head on develop.

Files with missing lines	Patch %	Lines
...pp/frontend/javascript/pool-xp-tube-panel/index.js	0.00%	66 Missing ⚠️
...xp-tube-panel/components/PoolXPTubeSubmitPanel.vue	98.25%	7 Missing ⚠️
app/frontend/entrypoints/application.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #2008      +/-   ##
===========================================
+ Coverage    77.97%   78.32%   +0.35%     
===========================================
  Files          459      471      +12     
  Lines        17699    18455     +756     
  Branches       225      262      +37     
===========================================
+ Hits         13800    14455     +655     
- Misses        3897     3998     +101     
  Partials         2        2              

Flag	Coverage Δ
javascript	70.41% <85.71%> (+0.71%)	⬆️
pull_request	78.19% <85.82%> (+0.22%)	⬆️
push	78.19% <85.82%> (+0.22%)	⬆️
ruby	91.09% <100.00%> (-0.06%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[KatyTaylor]

LOVE the detailed explanation and screenshots, thank you 😍

and also love the rethink of the states, messages and styling - looks great.

Haven't looked at the code yet!