Unified Dashboard: Remove tabs and update quick links layout

[ravishanker]

Part of #19270
Fixes #. See pbArwn-6dL-p2#comment-7813

Description

This PR updates the following based on above

• Removes tabs (Home | Menu) on My Site for Jetpack app
• Updates layout of Quick Links menu from pills in horizontal scroll to vertical items inside a card
• Adds a personalization screen for quick links - Users can add or remove any quick links from the dashboard using personalization screen

📔 No changes to WP app dashboard

Jetpack app - Before and After

Home	Menu	Home	Menu

Personalization screen for QuickLinks

Known issues

• The Snackbar prompt for quick start is not working as expected for tasks which are part of quick links. Since any quick links can be removed, the quick start focus points for Pages, Stats, Media and Social sharing is shown inside More menu. Although the focus points are shown correctly, the prompt for the next task is not shown correctly.
• The personalization screen tabs are not swipeable, this will be taken up in a seperate PR cc: @zwarm

To test:

Jetpack app

Dashboard is working as expected

• Launch JP app
• Verify the Home now looks as in third screen shot above
• Tap on Quick links and verify that it is working as expected
• Go to Me → App Settings → Privacy Settings → Enable Collect Information
• Verify that the tracking for quick link is working as expected

More menu is working as expected

• Go to dashboard
• Tap on ... More
• Verify it goes to My Site menu as in fourth screen shot above
• Tap on each of the menu items and Verify they all work as before
• Verify that the tracking for quick link is working as expected
• Test Quick Start flow
• Verify that the app goes through the flow as before

Personalization screen is working as expected

• Go to dashboard
• Tap on Personalize your home tab
• Go to Shortcuts tab
• Hide/Show any quick links
• Verify that the same is reflected on the dashboard

Signup flow

• Sign up on the Jetpack app with an email
• Click on the magic link
• Verify that the login works as expected
• Verify that no sites view is shown as before

WordPress app

• Launch WP app
• Verify it only shows menu on My Site as before

Regression Notes

1. Potential unintended areas of impact
   Home

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Existing unit tests

3. What automated tests I added (or what prevented me from doing so)
   Updated existing tests

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr19151-66901f8
	Commit	66901f8
	Direct Download	wordpress-prototype-build-pr19151-66901f8.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr19151-66901f8
	Commit	66901f8
	Direct Download	jetpack-prototype-build-pr19151-66901f8.apk

Note: Google Login is not supported on these builds.

[ravishanker]

@pachlava - FYI, Making changes to dashboard in the PR. Need your help in looking into UI tests. 🙇

[AjeshRPai]

Hey @ravishanker

I took the build and smoke tested the app. Below are my findings

1. We need to remove the Initial screen setting and set the default value to Dashboard, otherwise the Quick start card would show up in the menu screen. Any quick start task that has a quick start focus - for eg: Connect with Other sites in the dashboard will crash on click

quick_start_settings.webm

2. Also I feel that we should remove the Jetpack migration card on menu(In the Jetpack App). We are already showing it in Dashboard, I think its irrelevant to show in menu 🤔

[osullivanchris]

@ravishanker hey thanks for pulling this together. It feels good on the whole. I've put together some specs to tighten things up.

First are some header tweaks we can make to align nicer with the cards (see the alignments in blue lines)

• add 8dp left padding to the site icon (currently none)
• change site icon to 40dp (currently 56) and radius 5 (to look nice with cards 10)
• 8dp padding between site icon and site title (currently 16)
• 12dp right padding on the chevron at the end of the row (currently none)

In the new list itself, some other minor visual changes:

• can we make the icons black per the deeper page
• change the spacing between the icon and the list item name to 16dp (currently 8). Aligns the site title and list items both with the 72dp keyline sometimes advised
• change list item weight to medium to align with 16dp medium used throughout cards below. Site title can be same size/weight or retain dynamic size we have now.

ellipsis icon:

• And one for you and @AjeshRPai . could we use the new ellipsis icon below to match the other new icons used. Can we use for both the More list item, and the cards?
• one for @AjeshRPai - can we change the right padding for the ellipsis to be 8dp rather than 16dp?

Referencing @AjeshRPai questions above:

• We removed the choice of dashboard / menu on iOS
• I agree we should no longer show any cards on the menu page

[pachlava]

@pachlava - FYI, Making changes to dashboard in the PR. Need your help in looking into UI tests. 🙇

Thanks for the ping @ravishanker 👋

The reason why two dashboard cards UI tests fail is because Espresso can't scroll to cards in current PR:

Caused by: java.lang.RuntimeException: Action will not be performed because the target view does not match 
one or more of the following constraints:
(view has effective visibility <VISIBLE> 
and is descendant of a view matching (is assignable from class <class android.widget.ScrollView> 
or is assignable from class <class android.widget.HorizontalScrollView> 
or is assignable from class <class androidx.core.widget.NestedScrollView> 
or is assignable from class <class android.widget.ListView>))

While I'm not entirely sure that this is the exact reason, I can see that top NestedScrollView has been replaced with CoordinatorLayout in my_site_tab_fragment.xml.

With my limited knowledge around this topic, I tried playing around locally with adding ScrollView or NestedScrollView back into this file, and also into my_site_dashboard_cards.xml. I obtained the best results when I added ScrollView as a root item into my_site_dashboard_cards.xml: after that, the native Espresso scrollTo() started working again, the e2ePagesCardNavigation started passing, but e2eActivityLogCardNavigation still failed, but because of a different reason: "Activity Log" card was not properly shown on screen any longer, most probably because I messed up the elements sizing / loading when I added the tag.

Because of this, I made no commits, but what I described above is at least one way to solve it, if done properly (which you have much higher chances to do than me). Please let me know if you need any more help 🙂

[AjeshRPai]

Hey @osullivanchris
This PR is ready for another design review.

1 - when I go into the full menu there's something wrong with the text styles. They have changed. They look heavier and grey rather than regular black text from before. And also the space between the icon and text looks tighter. The text style in the personalisation>shortcuts tab seems the same. It can also change to the way the menu was before.

I have fixed this by making the font weight to normal and udpating the font color

2 - the color of the separators between the shortcuts should be the same as the card border around it, but looks slightly different right now. I also removed all cards, then added others back, and the separator color changed to a darker color

Fixed this issue with commit 85ac64b

3 - Can you add some extra space above the 'Active shortcuts' and 'Inactive shortcuts' headings? It all looks a bit jammed up together.

Done 👍🏼

4 - the style and label 'more' looks a bit weird when you remove all shortcuts. We didn't resolve on iOS. I suppose the user has chosen this setup. Same as having every single menu item on too is a bit strange. We could enforce it being 3-5 items, but that seems against the spirit of it.

I am not sure what we can do right now for fixing this TBH, I considered renaming the more to menu if there are no other quick links but that would add complexity to quick start snackbar messaging and all. As you said, if the user decides to go with no items or with all items I think we should let it be.

[osullivanchris]

Thanks @AjeshRPai. Not at my machine or android phone now to install the build but looks good from the screenshots. No problem about the case with all shortcuts removed.

Re; the menu. The text looks better but still want to double check what is the padding between icon and text? Looks tight

[AjeshRPai]

Re; the menu. The text looks better but still want to double check what is the padding between icon and text? Looks tight

The padding now is 12 dp, earlier it was 8. I tried changing it to 16, felt its too much. I can make it to 16 dp if you think thats better.

[osullivanchris]

I think go with 16 and then it's all good 👍🏻

[ravishanker]

@AjeshRPai - Please merge this first. Fix any issues in subsequent PRs. Longer it waits, more conflicts, and merge issues it may face. 👍