Refactor DnD on NTP Top Sites

[cezaraugusto]

Close brave/brave-browser#2971

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Assertions:

• Fresh profile should have 0 entries
• Non-fresh profile should show your current top sites unpinned
• Should be able to drag n' drop tiles without errors
• Should not be able to drag a pinned tile
• Should not be able to drop over a pinned tile
• Changes should persist on page refresh
• Should be able to exclude a site
• Should be able to undo an excluded site, which should go back to the first grid position
• Should be able to undo all excluded sites, which should go back to first grid positions
• Should be able to spot a bookmarked site on first render
• Should be able to toggle a bookmarked site

Manual test plan:

Note: Chromium topSites API is not reliable and can drastically vary the time to update the list. Below steps will be async so it's not guaranteed that you will se the site after you visit it, but they should work after some site interaction.

1. Fresh profile
2. Visit https://brave.com
3. Visit https://quora.com
4. Once sites are available on the grid, pin the site on the 2nd grid position
5. Visit https://twitter.com
6. Pinned site should retain position: grid should be Twitter (1), PINNED_SITE (2), other site (3)

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[bsclifton]

Built locally - a few things I noticed:

1. dragging a pinned item still let's you drag into the omnibox. I think this is OK- but just mentioning because it will show the ghost icon for the favicon as you are dragging. The tile itself doesn't move
2. you can drag a tile OVER a pinned tile and it appears to move. However, when you drop (release mouse), it goes back to where it was. Is this expected?
3. the bookmark button on the tiles doesn't seem to be working at all
4. If I click the X or bookmark button on the first tile (I only have two tiles), it causes the second to be pinned?

I'm going to re-run sync / build and clear my profile directory again. Something must be wrong on my side

[bsclifton]

OK did a rebuild, issue 4 went away, but all the rest still exist

[bsclifton]

see comments

[cezaraugusto]

thanks for checking, I'm addressing your comments. I've run into a race condition and topSites API isn't working reliably which makes testing hard.

re your comments:

1. yes. link should work just can't re-order the tile;
2. yes, expected;
3. bookmarks doesn't work for me on latest build and it's been this way for a while. In this PR I removed the bookmark code to avoid increasing the number of changes. Plan was to make it as a follow-up but can be added if we feel so.

[cezaraugusto]

PR ready for re-review

[cezaraugusto]

also test plan updated

[bsclifton]

LGTM

[cezaraugusto]

Added several key tests and rebranded "topSites" with "gridSites". Since we plan to keep Chromium-only top sites as an option in the near future, it helps that both have different names.

Travis is failing due to Storybook. There is a separate PR to fix it once for all: #4470.

[cezaraugusto]

Going to merge this one as it's been sitting here for while even after being approved. Please ping in case this causes any harm and I'll revert/revisit. Thanks!