[waiting for ux] 4942 Datatable Details Panel to Child Rows

[rfultz]

Summary

• Resolves [waiting for ux] Update datatable details panels #4942

Changing the way the datatables' details are presented, from the single side panel to child rows inside the tables.

Required reviewers

• UX and design
• front-end for approach

Impacted areas of the application

Every datatable that presents more details (a few don't)

Screenshots

(see comments below)

Related PRs

None

How to test

(Include any information that may be helpful to the reviewer(s). This might include links to sample pages to test or any local environmental setup that is unusual such as environment variable (never credentials), API version to point to, etc)

• Raising
  • All receipts
  • Individual contributions
  • National party account receipts
• Spending
  • Disbursements
  • Independent expenditures
  • Party-coordinated expenditures
  • National party account disbursements
  • Allocated federal/nonfederal disbursements
  • Electioneering communications
  • Communication costs
• Loans and debts
  • Loans
  • Debts
• Candidates
  • All candidates
  • Presidential candidates
  • Senate candidates
  • House of Representatives candidates
  • Most recent Statements of Candidacy (Form 2) (no details panel/row)
  • need to check a candidate with showFinancialTotals
• Committees
  • All committees
  • Political action and party committees
  • Most recent Statements of Organization (Form 1) (no details panel/row)
  • Requests for Additional Information sent to committees (no details panel/row)
  • need to check:
    • committees.principal
    • committees.authorized
    • first_form_2
    • last_form_2
    • showFinancialTotals
• Filings & Reports
  • All filings
  • All electronic filings (no details panel/row)
  • Presidential committee reports
  • House and Senate committee reports
  • PAC and party committee reports
  • the ie-only template, too

[rfultz]

@JonellaCulmer some things I wanted to run by you…

Should this table have a title? I don't like that it's top-aligned with a table that does have a title. IE-only reports has the same issue.

Is there enough visual connection between the original row and its details?
Is there enough difference between the open row + its details and the other rows?

Should we visually separate multiple open rows?

For the medium widths, the table heads were too wide and were colliding with the "Open image" button so I bumped them down. I don't like that table-wide gap to the left of "Open image". What about putting a line break in "Transaction information"? Something better?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.68%. Comparing base (de36ad1) to head (556bf1e).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6528   +/-   ##
========================================
  Coverage    79.68%   79.68%           
========================================
  Files          237      237           
  Lines         5178     5178           
========================================
  Hits          4126     4126           
  Misses        1052     1052           

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

[johnnyporkchops]

tested locally and works well. Left on comment about zebra striping. Also I agree that there might be a confusing visual effect between the way parent row's cells line up with panel's columns

[johnnyporkchops]

@rfultz It look like rows that are zebra-striped, get and odd zebra striping on the associated panel

[rfultz]

I've got a change headed up to fix that. Now we just need styles for the details area