New Tab Page: Move from brave-ui to brave-core

[petemill]

Fix brave/brave-browser#2518 (add storybook to brave-core)
Partially address brave/brave-browser#2335 (umbrella)
Fix brave/brave-browser#5178

This moves all New Tab Page specific UI and Storybook code from brave-ui. It includes all the history from brave-ui where the NTP files were modified.

Sets up at brave-core specific Storybook at npm run storybook

The steps I performed

Will be useful for moving the other brave-ui features to brave-core

Reduce brave-ui to necessary folders:

# clone brave-ui to a temp location
git clone -s brave-ui brave-ui-temp-move-ntp
cd brave-ui-temp-move-ntp

# remove everything else
git checkout -b only-ntp
git filter-branch --index-filter 'git rm --cached -qr --ignore-unmatch -- . && git reset -q $GIT_COMMIT -- src/features/newTab stories/features/newTab' --prune-empty -- --all

# then clean working dir
git reset --hard

# move to where we want them in brave-core

# -EITHER- manual:

mkdir -p components/brave_new_tab_ui/components
git mv src/features/newTab/** components/brave_new_tab_ui/components

mkdir -p components/brave_new_tab_ui/stories
git mv stories/features/newTab/** components/brave_new_tab_ui/stories

git commit -m "New Tab Page WebUI: Move brave-ui paths to brave-core paths

# -OR- automatic, for simple cases where everything has always been in the same place:

git filter-branch --tree-filter '(test -d src/features/newTab && mkdir -p components/brave_new_tab_ui/components && mv src/features/newTab/* components/brave_new_tab_ui/components && mkdir -p components/brave_new_tab_ui/stories && mv stories/features/newTab/* components/brave_new_tab_ui/stories) || echo "Did not exist"' HEAD

# Prepend string to commit message
git filter-branch -f --msg-filter 'printf "New Tab Page: Imported from brave-ui - " && cat' [first commit ref]..HEAD

2. Move brave-core files

cd brave-core
git checkout -b brave-ui-ntp
git mv components/brave_new_tab_ui/components components/brave_new_tab_ui/containers
# First, change any references from components/ to containers/
...
# Check everything still builds and works, then...
git commit -m "NTP WebUI: Reclassify existing components as containers"

3. Pull reduced brave-ui history to brave-core repo

# In brave-core repo path (brave-browser/src/brave)
git remote add tmp-brave-ui-ntp ../../../brave-ui-temp-justntp
git pull tmp-brave-ui-ntp temp-justntp --allow-unrelated-histories
git remote rm tmp-brave-ui-ntp

4. Find any missing npm dependencies:
   Do a project search...
   Find (regex): from '[^\.].*'
   In: brave/components/brave_new_tab_ui/{components,stories}/**/*.{ts,tsx}
   Then npm install --save any that aren't already in brave-core
5. Find TS import paths which need to change
   Do a project find / replace
   Find (regex): '(\.\.\/)+(theme|components)'
   In: brave/components/brave_new_tab_ui/components/**/*.{ts,tsx}
   Replace with: 'brave-ui/$2
6. Find storybook TS import paths which need to change
   Do a project find / replace
   Find (regex): '(\.\.\/)+src([^']*)'
   In: brave/components/brave_new_tab_ui/stories/**/*.{ts,tsx}
   Replace with: 'brave-ui$2'
7. Change brave-ui feature refs to components/ refs
   Do a project find
   Find (regex): brave-ui(/src)?/features/newTab
   In: brave/components/brave_new_tab_ui/{components,containers,stories}/*/*.{ts,tsx}
   Replace with: ../../components
   Then repeat adding an extra /* and an extra ../ for as many folder depths until we think we have them all :-)
8. Test TS / Webpack build

npm run web-ui -- --mode=production brave_new_tab_ui=/Users/petemill/Development/Brave/brave-browser/src/brave/components/brave_new_tab_ui/brave_new_tab.tsx

9. Test storybook build

npm run storybook

Fix any errors, in NTP case:
* Removed muli.css and poppins.css import (now inserted automatically)
* Fixed inconsistent assets/img path and file naming compared to brave-core
(In NTP case: assets/img paths)

10. Rename stories
    Do a project find / replace
    Find (regex): 'Feature Components/New Tab'
    In: brave/components/brave_new_tab_ui/stories/**/*.{ts,tsx}
    Replace with: 'New Tab'

Test Plan:

NTP works

• Open NTP
• Check renders and no console errors

NTP is coming from brave-core not brave-ui

• Modify components/brave_new_tab_ui/components/[something]
• Build brave browser again
• Check modification is visible on NTP

Storybook works

• npm run storybook
• Check NTP is visible in Storybook
• Modify components/brave_new_tab_ui/components/[something]
• Check modification is visible on Storybook with hot-reloading

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

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.

[petemill]

🤦‍♀ I need to rebase this to include #2762

[petemill]

Rebase complete, review appreciated

[petemill]

Jenkins and Travis now both passed. Test plan is included and Issues created / updated. Ready for review ASAP please.

[cezaraugusto]