WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 8 weeks ago

#46894 assigned enhancement

Personal Data Export Report: Table of contents for easier navigation

Reported by: birgire Owned by: xkon
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: has-screenshots has-patch needs-refresh needs-design
Focuses: ui Cc:
PR Number:

Description

The personal data export reports can contain lot of groups and items, so having a table of contents and back to top links would help navigate very long reports.

Similar was explored in the early stages of the Site Health admin page in #39165.

See e.g. the screenshot below https://core.trac.wordpress.org/ticket/39165#comment:23.

We could explore similar setup for these reports.

Attachments (4)

toc.jpg (40.7 KB) - added by birgire 8 months ago.
46894.diff (2.5 KB) - added by xkon 8 months ago.
Screen Shot 2019-04-14 at 2.11.58 PM.png (87.1 KB) - added by garrett-eclipse 8 months ago.
No Data w/ TOC
Screen Shot 2019-04-14 at 2.13.29 PM.png (217.5 KB) - added by garrett-eclipse 8 months ago.
One Group w/ TOC

Download all attachments as: .zip

Change History (14)

@birgire
8 months ago

#1 @birgire
8 months ago

toc.jpg is a mockup suggestion showing a table of contents and "Return to table of contents" links.

There could also be some minimum number of groups (e.g. 3-5) to display the table of contents.

#2 @birgire
8 months ago

  • Focuses ui added
  • Keywords has-screenshots added

#3 @garrett-eclipse
8 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Thanks @birgire

I like the concept here, this could be very useful on larger more data heavy sites. And I agree it would make sense to have a minimum threshold as a TOC when there's only 1 or 2 items wouldn't have much worth.

Cheers

@xkon
8 months ago

#4 @xkon
8 months ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to xkon
  • Status changed from new to assigned

46894.diff is a first pass on adding a TOC and the return links as well. It uses the Group Labels to create the needed anchor IDs to link to and a standardized toc id to get back to top.

This doesn't add the "limiting" of groups to create the TOC as I'm leaning on the side of "let's have it always for consistency". It's not going to be an issue in my opinion to have it there even if you only have the "default" groups.

#5 @garrett-eclipse
8 months ago

  • Keywords needs-refresh added

Thanks for the initial patch @xkon

It applies nicely and introduces the TOC as expected.

Some thoughts;

  1. Should we use sanitize_title or esc_url on the anchors? Some plugins will have special characters, and many languages will as well.
  2. Should we enable plugins to provide a $group_toc_label so they can provide a shortened version of their Group Label. In many cases the label used by plugins can be quite long which wouldn't be as appropriate for the TOC, so wondering if we allow for a group_toc_label and fall back to the group_label otherwise and for back-compat.
  3. When there's no data there's no poitn of a TOC for just the 'About' section. Also when there's just one more section in most browsers there's not enough content to make it worth anchors as no scroll action is possible. Am wondering if we just start at '>1' to enable the functionality otherwise it feels broken as it doesn't do anything.

*I would normally agree be consistent, but when there's link on the screen and they don't appear to cause an action they feel broken.

All the best,
Cheers

#6 @garrett-eclipse
8 months ago

P.S. Now that grunt test completed it's showing there's 4 phpunit issues due to the email contents being changed without their corresponding tests being updated.

There were 4 failures:

1) Tests_Privacy_WpPrivacyGeneratePersonalDataExportFile::test_contents
Failed asserting that '<!DOCTYPE html>\n
<html>\n
<head>\n
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />\n
<style type='text/css'>body { color: black; font-family: Arial, sans-serif; font-size: 11pt; margin: 15px auto; width: 860px; }table { background: #f0f0f0; border: 1px solid #ddd; margin-bottom: 20px; width: 100%; }th { padding: 5px; text-align: left; width: 20%; }td { padding: 5px; }tr:nth-child(odd) { background-color: #fafafa; }#table_of_contents { padding: 10px 0 10px 0; }.return_to_table_of_contents { text-align:right; }</style><title>Personal Data Export for export-requester@example.com</title></head>\n
<body>\n
<h1>Personal Data Export</h1><div id="table_of_contents"><a href="#About">About</a></div><h2 id="About">About</h2><div><table><tbody><tr><th>Report generated for</th><td>export-requester@example.com</td></tr><tr><th>For site</th><td>Test Blog</td></tr><tr><th>At URL</th><td><a href="http://example.org">http://example.org</a></td></tr><tr><th>On</th><td>2019-04-14 21:17:52</td></tr></tbody></table><div class="return_to_table_of_contents"><a href="#table_of_contents">Return to table of contents</a></div></div></body>\n
</html>\n
' contains "<h2>About</h2>".

/Users/garretthyder/WordPress/46894-export-toc/tests/phpunit/tests/privacy/wpPrivacyGeneratePersonalDataExportFile.php:264

2) Tests_Privacy_WpPrivacyGeneratePersonalDataExportGroupHtml::test_group_html_generation_single_data_item
Failed asserting that '<h2 id="Test_Data_Group">Test Data Group</h2><div><table><tbody><tr><th>Field 1 Name</th><td>Field 1 Value</td></tr><tr><th>Field 2 Name</th><td>Field 2 Value</td></tr></tbody></table><div class="return_to_table_of_contents"><a href="#table_of_contents">Return to table of contents</a></div></div>' contains "<h2>Test Data Group</h2>".

/Users/garretthyder/WordPress/46894-export-toc/tests/phpunit/tests/privacy/wpPrivacyGeneratePersonalDataExportGroupHtml.php:45

3) Tests_Privacy_WpPrivacyGeneratePersonalDataExportGroupHtml::test_group_html_generation_multiple_data_items
Failed asserting that '<h2 id="Test_Data_Group">Test Data Group</h2><div><table><tbody><tr><th>Field 1 Name</th><td>Field 1 Value</td></tr><tr><th>Field 2 Name</th><td>Field 2 Value</td></tr></tbody></table><table><tbody><tr><th>Field 1 Name</th><td>Another Field 1 Value</td></tr><tr><th>Field 2 Name</th><td>Another Field 2 Value</td></tr></tbody></table><div class="return_to_table_of_contents"><a href="#table_of_contents">Return to table of contents</a></div></div>' contains "<h2>Test Data Group</h2>".

/Users/garretthyder/WordPress/46894-export-toc/tests/phpunit/tests/privacy/wpPrivacyGeneratePersonalDataExportGroupHtml.php:83

4) Tests_Privacy_WpPrivacyGeneratePersonalDataExportGroupHtml::test_group_labels_escaped
Failed asserting that '<h2 id="&lt;div&gt;Escape_HTML_in_group_lavels&lt;/div&gt;">&lt;div&gt;Escape HTML in group lavels&lt;/div&gt;</h2><div><div class="return_to_table_of_contents"><a href="#table_of_contents">Return to table of contents</a></div></div>' contains "<h2>&lt;div&gt;Escape HTML in group lavels&lt;/div&gt;</h2>".

/Users/garretthyder/WordPress/46894-export-toc/tests/phpunit/tests/privacy/wpPrivacyGeneratePersonalDataExportGroupHtml.php:139

#7 @birgire
8 months ago

  • Keywords needs-design-feedback added

@garrett-eclipse @xkon thank you for looking into this.

It would be interesting to explore other TOC design options as well.

Here are few that come to mind:

  • Floating TOC.
  • Sidebar with TOC.
  • Special mobile TOC (hamburger)
  • The one like in screenshot toc.jpg
  • Some other options ...

So I'm tagging it with needs-design-feedback and look forward to suggestions.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


8 weeks ago

#9 @karmatosed
8 weeks ago

  • Keywords needs-design added; needs-design-feedback removed

Just swapping in 'needs design' as this looks like it needs design over just feedback.

#10 @garrett-eclipse
8 weeks ago

  • Milestone changed from Future Release to 5.4
Note: See TracTickets for help on using tickets.