Evaluation Panel Page Updates

[r-bartlett-gsa]

User Story

As a challenge manager, in order to accomplish all tasks associated with my challenge management in a consistent way, I would like evaluation panel workflows to be consistent in design and styles with other eval site features.

Acceptance Criteria:

• When the challenge manager clicks on "Invite evaluators" or "[number] evaluators" links on the new challenges dashboard page, they are taken to the evaluation panel page associated with that challenge
• Evaluation Panel page H1 is Challenge Title (if it's a phased challenge, the phase is indicated in the H1)
• Page H2 is "Evaluation Panel"
• Add Evaluators form consists of two fields:
  • Full Name
  • Email Address
  • All fields are required
  • Add Evaluator button adds the evaluator to the evaluator table with appropriate name, user role, and user status (no changes)
  • Cancel button clears out the form
• If there are no evaluators in the panel, a warning alert is displayed indicating so
• Evaluation Panel table consist of the following headers:
  • Name
    • Links to the Evaluator's Submission Page
  • Email Address
  • User Role
  • User Status
    • Invite Sent status also includes an option to resend the invite
  • # of Assigned Submissions
    • If the number of assigned submissions is >0, then it links to the Evaluator's Submissions Page
  • Action
    • Delete button is displayed for each row
    • Delete action shows confirmation modal
    • Successful deletion shows a success alert on the elevation panel page
      • Delete button removes an evaluator from the panel and all associations to submission evaluation (no changes)
• Info alert is displayed for how to assign evaluators to submissions and a link to the submissions list page for that challenge
• Designs (colors, fonts, labels, etc) match wireframes in Figma: https://www.figma.com/design/sLkJM1Ua9Zu3HW2h4mVdgr/Challenge.gov-Eval-(Updated-01%2F27%2F25)?node-id=7003-153455&t=G2WnCXJa1OXhZSU3-1

Definition of Done

Doing (dev team)

• Code complete
• Code is organized appropriately
• Any known trade offs are documented in the associated GH issue
• Code is documented, modules, shared functions, etc.
• Automated testing has been added or updated in response to changes in this PR
• The feature is smoke tested to confirm it meets requirements
• Database changes have been peer reviewed for index changes and performance bottlenecks
• PR that changes or adds UI
  • include a screenshot of the WAVE report for the altered pages
  • Confirm changes were validated for mobile responsiveness
• PR approved / Peer reviewed
• Security scans passed
• Automate accessibility tests passed
• Build process and deployment is automated and repeatable
• Feature toggles if appropriate
• Deploy to staging
• Move card to testing column in the board

---

Staging

• Accessibility tested (Marni)
  • Keyboard navigation
  • Focus confirmed
  • Color contrast compliance
  • Screen reader testing
• Usability testing: mobile and desktop (Tracy or Marni)
• Cross browser testing - UI rendering is performant on below listed devices/browsers (Tracy or Marni)
  • Windows/Chrome
  • Windows/Edge
  • Mac/Chrome
  • Mac/Safari
  • iOS/Safari
• AC review (Renata)
• Deploy to production (production-like environment for eval capability) (dev team)
• Move to production column in the board

---

Production

• User and security documentation has been reviewed for necessary updates (Renata/Tracy/Dev team)
• PO / PM approved (Renata)
• AC is met and it works as expected (Renata)
• Move to done column in the board (Renata)

[r-bartlett-gsa]

Linked user story #348