LCFS - highlight transaction row after status change that returns the user to the main Transactions page

[justin-lepitzki]

Describe the task State/status change cards for the transfer feature included a requirement that the transaction row for the transfer is highlighted whenever the user has taken action on the transfer that returns them to the transactions page. This includes all major state changes: Save draft, sign & send, sign & submit, Decline transfer, Rescind transfer, Return to analyst, Recommend transfer, Record transfer, and Refuse transfer.

See transfer workflow for status change flow: Image

This card is to add this highlighted row UI feature for when a major state change occurs. See implementation in TFRS: Screenshot

Purpose This feature exists in TFRS and user feedback indicates that it is valuable to easily guide the user to see the transfer that was just actioned from within the Transactions table.

Implementation Details

1. URL Parameter Enhancement:

   • Modify the redirect URL triggered after a successful state change action to include a new parameter, txn_id, which carries the identifier of the transfer that should be highlighted.

2. Frontend Adjustments:

   • Update the React frontend to extract the txn_id parameter from the URL when the transactions page is loaded.
   • Pass this identifier as a new prop to the component rendering the transactions table (e.g., an AG Grid table).
   • Implement logic within the table component to apply a distinct styling (e.g., yellow background) to the row corresponding to the txn_id.

3. Styling:

   • Ensure the highlighted row styling is consistent with the example provided in the TFRS screenshot, focusing on visibility and user-friendly interface design.

Acceptance Criteria

1. Highlighting Functionality: The transactions table row corresponding to a transfer that has just undergone a major state change is distinctly highlighted when the user is redirected back to the transactions page.
2. URL Parameter Handling: The application correctly parses the txn_id parameter from the URL and identifies the appropriate row to highlight.
3. Visual Consistency: The highlighted row's styling is visually appealing, consistent with the provided TFRS example, and does not interfere with the readability of the row's content.
4. Comprehensive Coverage: The highlighting feature is triggered by all specified transfer state changes, ensuring no relevant actions are excluded from this visual feedback mechanism.

Additional Context

• Consideration of accessibility and contrast standards is crucial to ensure the highlighted row is easily distinguishable for all users, including those with visual impairments.

[justin-lepitzki]

Question during refinement: if the transaction is on the second page, will it still highlight? If the user goes to the 2nd page, will the transfer be highlighted on the second row after the pagination loads when going to the 2nd page?