Solicitation detail refactor

[collinschreyer-dev]

Pull Request: Solicitation Details Page Enhancements

Overview

This PR improves the layout, styling, and user experience of the Solicitation Details page, aligning with USWDS guidelines and UI team feedback.

Key Changes

Layout and Structure:

• Added feedback-container and usa-layout-container for responsive layout.
• Organized content within a detail div.

New Elements:

• Added a status-badge to display compliance status (Compliant/Non-compliant) with USWDS styling.
• Added a History button for easy navigation to the solicitation's history.
• Added an alert styled using usa-alert to display when a solicitation is non-compliant.

Styling:

• Applied USWDS typography, spacing, and color guidelines.
• Improved alignment and responsiveness.

Functionality:

• History button state is dynamically updated based on the route.
• onClickTabs function tracks user interactions with the History button.

Accessibility:

• Status badge includes text descriptions for screen readers.
• Adhered to USWDS accessibility guidelines.

Code Changes:

• Restructured HTML with new divs and USWDS classes.
• Added CSS for new elements and updated styles.
• Updated TypeScript for History button functionality and data handling.

Testing:

• Verified layout and styling on different screen sizes.
• Tested History button and status badge functionality.
• Validated accessibility with screen readers.

Please review and provide feedback. Thanks!

[BuckinghamAJ]

Had the header and solicitation report, not sure if that was expected.

Requested a few changes, especially simplifying the component function a bit with a few tweaks to how you are structuring the code.

[BuckinghamAJ]

Header component meant to be in here?

[BuckinghamAJ]

Was this meant to be in this PR as well?

[BuckinghamAJ]

Do we want this data in console.log? Or maybe console.warning? Or console.error? Thoughts?

[BuckinghamAJ]

Instead of repeating the code multiple times, I would break out the code into a singular function to call.

[BuckinghamAJ]

I would recommend figure out how you could get data be placed into a singular value by either subscribe or the extras.state and then pass that along so you don't have to rewrite the same code/same function calls.

Wrap that way of getting data into a try/catch then you can do a single write out a single error message.

[collinschreyer-dev]

Code Review Changes Documentation

1. Error Logging Improvement

Original Comment:

Do we want this data in console.log? Or maybe console.warning? Or console.error? Thoughts?

Changes Made:

• Changed console.log to console.error for error conditions
• Added comprehensive error handling throughout the component

// Before
console.log('Error processing parse status for solicitation ' + data.solNum);

// After
console.error('Error processing parse status for solicitation ' + data.solNum);

2. Code Duplication in Step Processing

Original Comment:

Instead of repeating the code multiple times, I would break out the code into a singular function to call.

Changes Made:

• Created constants for step actions
• Implemented a single reusable function for checking step completion
• Centralized step processing logic

// Before
this.step1 = data.history?.filter(e => 
  e['action'].indexOf('reviewed solicitation action requested summary') > -1
).length > 0;

// After
private readonly STEP_ACTIONS = {
  REVIEW: 'reviewed solicitation action requested summary',
  EMAIL: 'sent email to POC',
  FEEDBACK: 'provided feedback on the solicitation prediction result'
};

private checkStepCompletion(history: any[], actionText: string): boolean {
  return history?.filter(e => e['action'].indexOf(actionText) > -1).length > 0;
}

private processSteps(data: any): void {
  this.step1 = this.checkStepCompletion(data.history, this.STEP_ACTIONS.REVIEW);
  this.step2 = this.checkStepCompletion(data.history, this.STEP_ACTIONS.EMAIL);
  this.step3 = this.checkStepCompletion(data.history, this.STEP_ACTIONS.FEEDBACK);
}

3. Data Processing Consolidation

Original Comment:

I would recommend figure out how you could get data be placed into a singular value by either subscribe or the extras.state and then pass that along so you don't have to rewrite the same code/same function calls. Wrap that way of getting data into a try/catch then you can do a single write out a single error message.

Changes Made:

• Created a single processSolicitationData method for all data processing
• Implemented proper error handling with try/catch blocks
• Split processing into smaller, focused methods
• Consolidated duplicate code paths

private processSolicitationData(data: any): void {
  try {
    this.processParseStatus(data);
    this.processSteps(data);
    this.setSolicitationData(data);
    this.processDocuments();
  } catch (error) {
    console.error('Error processing solicitation data:', error);
  }
}

Results

Hoping the refactored code addresses all of Adam's improvement suggestions!