[2290] Request details Approve & Deny button group

[ssangervasi]

Closes #2290

Code Changes

• Request details Approve & Deny button group

  • ApproveButton component
  • DenyButton component
  • Tests for approve & deny buttons

• General improvements:

  • StyledButton for shared button styles
  • Use "on" for props and "handle" for handler functions
  • Fix returnFocusOnClose
  • Initial tests for requests table and details pages
  • getByTestIdPrefix Cypress command

Steps to Confirm

• Details page buttons
  • Approve a request
  • Deny a request with reason modal
• Table menu buttons
  • Should be verified as well because the components were refactored
  • Approve a request
  • Deny a request with reason modal

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Documentation:
  • documentation complete, PR opened in fidesdocs
  • documentation issue created in fidesdocs
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md

Description Of Changes

Updated video after resolving #2443 merge conflicts:

details-approve-conf.mp4

With the buttons refactored out, they can be dropped right into the page:

Video of using Deny button & modal:

details-deny.mp4

[codecov]

Codecov Report

Base: 88.45% // Head: 88.45% // No change to project coverage 👍

Coverage data is based on head (db1e47c) compared to base (6f88689).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2473   +/-   ##
=======================================
  Coverage   88.45%   88.45%           
=======================================
  Files         327      327           
  Lines       15957    15957           
  Branches     4431     4431           
=======================================
  Hits        14115    14115           
  Misses       1688     1688           
  Partials      154      154           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ssangervasi]

Still resolving the merge conflicts from #2443 which adds a confirmation for the approve button.

[TheAndrewJackson]

Thanks for refactoring this and adding the tests! Just one small nit. Otherwise everything looks great.

In my testing I noticed that the approval modal was styled slightly different between the table and details pages. Did you see this?

table:

details:

[ssangervasi]

In my testing I noticed that the approval modal was styled slightly different between the table and details pages. Did you see this?

Looks like applying the size to the ButtonGroup made the style leak through to the modal buttons - I guess because the react context transcends portals 🌌.

[TheAndrewJackson]

I checked again and the styles are working now 👍 Thanks for the edits!