Quick Start for Existing Users: Add media upload tour #18471

hassaanelgarem · 2022-04-28T15:23:37Z

Description

Added new Media upload tour
- First step depends on where the tour is triggered from
  - Site menu: Point to media menu item, and vertically scroll to it
  - Dashboard: Point to media quick action button, and horizontally scroll to it
- Second step points to add media button
Now we always show the media button, even if there's media available (Ref: p1651124342417449-slack-C027K4MNPGQ)
This PR uses a beta version of MediaPicker-iOS that fixes Empty view incorrect placement MediaPicker-iOS#386

Step 1 Menu	Step 1 Home	Step 2 with media	Step 2 no media

Testing Instructions

Initial screen: Site Menu (With media)

Make sure the initial screen is site menu
Switch to a site that has media already uploaded
Enable quick start for existing site from debug menu
Start media upload task
Make sure notice gets dispalyed with correct copy
Make sure spotlight appears over media item and that the screen autoscrolls to it
Tap on media item
Make sure the second notice gets dispalyed with correct copy
Make sure spotlight is added to the add button
Tap on the add button
Make sure the notice is dismissed
Navigate back to site menu
Make sure media task is marked as completed

Initial screen: Home (With media)

Make sure the initial screen is Home
Switch to a site that has media already uploaded
Enable quick start for existing site from debug menu
Start media upload task
Make sure notice gets dispalyed with correct copy
Make sure spotlight appears over media quick action button and that the screen autoscrolls to it
Tap on media button
Make sure the second notice gets dispalyed with correct copy
Make sure spotlight is added to the add button
Tap on the add button
Make sure the notice is dismissed
Navigate back to site menu
Make sure media task is marked as completed14.

No Media

Switch to a site that has no media uploaded
Enable quick start for existing site from debug menu
Start media upload task
Navigate to media
Make sure the second notice gets dispalyed with correct copy
Make sure the add button is visibile and a spotlight is added to it
Tap on the add button OR the "Upload Media" button
Make sure the notice is dismissed in both cases
Navigate back to site menu
Make sure media task is marked as completed

Regression Notes

Potential unintended areas of impact
N/A
What I did to test those areas of impact (or what existing automated tests I relied on)
N/A
What automated tests I added (or what prevented me from doing so)
N/A

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
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.

Without steps

wpmobilebot · 2022-04-28T16:13:00Z

You can test the changes in Jetpack from this Pull Request by:

Clicking here or scanning the QR code below to access App Center
Then installing the build number pr18471-724a60d on your iPhone

If you need access to App Center, please ask a maintainer to add you.

wpmobilebot · 2022-04-28T16:13:05Z

You can test the changes in WordPress from this Pull Request by:

Clicking here or scanning the QR code below to access App Center
Then installing the build number pr18471-724a60d on your iPhone

If you need access to App Center, please ask a maintainer to add you.

momo-ozawa

Works as described!

Looks like you need to fix QuickStartFactoryTests
Once you release the new WPMediaPicker you can point to the released version before merging this PR

momo-ozawa · 2022-04-29T10:19:43Z

WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h

@@ -74,6 +74,8 @@ typedef NS_ENUM(NSInteger, QuickStartTourElement) {
    QuickStartTourElementNotifications = 23,
    QuickStartTourElementSetupQuickStart = 24,
    QuickStartTourElementRemoveQuickStart = 25,
+    QuickStartTourElementMediaScreen = 26,
+    QuickStartTourElementMediaAdd = 27,


MediaUpload might be a better name, wdyt?

Suggested change

QuickStartTourElementMediaAdd = 27,

QuickStartTourElementMediaUpload = 27,

Done! 724a60d

momo-ozawa · 2022-04-29T10:28:45Z

WordPress/Classes/ViewRelated/Blog/QuickStartTours.swift

+        let step1DescriptionTarget = NSLocalizedString("Media", comment: "The menu item to select during a guided tour.")
+        let step1: WayPoint = (element: .mediaScreen, description: step1DescriptionBase.highlighting(phrase: step1DescriptionTarget, icon: .gridicon(.image)))
+
+        let step2DescriptionBase = NSLocalizedString("Select %@to upload media. You can add it to your posts / pages from any device.", comment: "A step in a guided tour for quick start. %@ will be a plus icon.")


[Q] Is it intentional that there no space between the "%@" and the "to"?

It is yes.
String.highlighting adds a space between the title and the icon passed. Given that the title is empty in this case, this means String.highlighting will add an extra space either way.

Removing the space from the base sting was to mitigate this issue. This was simpler than modifying String.highlighting to handle this specific case.

momo-ozawa · 2022-04-29T10:47:39Z

WordPress/Classes/ViewRelated/Media/MediaLibraryViewController.swift

+            if blog.userCanUploadMedia {
+                addButton.spotlightOffset = Constants.addButtonSpotlightOffset
+                let config = UIImage.SymbolConfiguration(textStyle: .body, scale: .large)
+                let image = UIImage(systemName: "plus", withConfiguration: config) ?? .gridicon(.plus)


[Q] Any particular reason we're using the system image over the gridicon?

We were using the system's default button. Since I had to manually create the button to add the spotlight view, I tried (to the best of my ability) to maintain the same look as before. I found that the plus grid icon was a bit thicker than the system icon.

Grid Icon System

This reverts commit 0b812f0.

# Conflicts: # WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h # WordPress/Classes/ViewRelated/Blog/QuickStartTours.swift

hassaanelgarem · 2022-05-09T01:57:16Z

@momo-ozawa

Looks like you need to fix QuickStartFactoryTests

Fixed in 913e67b

Once you release the new WPMediaPicker you can point to the released version before merging this PR

Done in a91b3b5

momo-ozawa

Looking great! Can you also update the release notes? Otherwise, LGTM!

hassaanelgarem added 13 commits April 27, 2022 05:19

Add: Media upload tour basic info

394bd5b

Without steps

Add: first upload media step

f1b5efc

Add: point to media button on the dashboard

056f06a

Add: point to menu button on site menu

1182fdc

Add: mark first step as visited

9bd6a12

Refactor: always reevaluate if quick action spotlight should be shown

02dc7bf

Add: add media step

6f18cfc

Add: mark the second step as visited

31d47b6

Add: spotlight view to add button

abf84b9

Fix: spotlight view being clipped

fdd5c02

Change: always show add button, even if there's no media

27b9a69

Change: use in-progress MediaPicker beta

0b812f0

Add: documentation for kvo usage

f090094

hassaanelgarem added [Type] Task Quick Start labels Apr 28, 2022

hassaanelgarem added this to the Pending milestone Apr 28, 2022

hassaanelgarem requested review from momo-ozawa and leandroalonso April 28, 2022 15:23

hassaanelgarem self-assigned this Apr 28, 2022

This was referenced Apr 28, 2022

Fix: incorrect placement of empty view in picker wordpress-mobile/MediaPicker-iOS#387

Merged

QuickStart for Existing Users V2: Create New Tour #18388

Closed

momo-ozawa reviewed Apr 29, 2022

View reviewed changes

hassaanelgarem added 5 commits May 9, 2022 03:09

Revert "Change: use in-progress MediaPicker beta"

7c979fc

This reverts commit 0b812f0.

Merge branch 'trunk' into task/18388-qs-media

17d43db

# Conflicts: # WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h # WordPress/Classes/ViewRelated/Blog/QuickStartTours.swift

Change: use WPMediaPicker 1.8.3-beta.1

a91b3b5

Fix: failing unit tests

913e67b

Refactor: rename QuickStartTourElement media enum case

724a60d

hassaanelgarem requested a review from momo-ozawa May 9, 2022 01:57

momo-ozawa approved these changes May 9, 2022

View reviewed changes

hassaanelgarem added 2 commits May 10, 2022 05:36

Add: release note

3ee251c

Change: use WPMediaPicker 1.8.4-beta.1

aa5d805

hassaanelgarem enabled auto-merge May 10, 2022 11:43

hassaanelgarem merged commit 361b4dc into trunk May 10, 2022

hassaanelgarem deleted the task/18388-qs-media branch May 10, 2022 12:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quick Start for Existing Users: Add media upload tour #18471

Quick Start for Existing Users: Add media upload tour #18471

hassaanelgarem commented Apr 28, 2022 •

edited

Loading

wpmobilebot commented Apr 28, 2022 •

edited

Loading

wpmobilebot commented Apr 28, 2022 •

edited

Loading

momo-ozawa left a comment

momo-ozawa Apr 29, 2022

hassaanelgarem May 9, 2022

momo-ozawa Apr 29, 2022

hassaanelgarem May 9, 2022

momo-ozawa Apr 29, 2022

hassaanelgarem May 9, 2022

hassaanelgarem commented May 9, 2022

momo-ozawa left a comment

	QuickStartTourElementMediaAdd = 27,
	QuickStartTourElementMediaUpload = 27,

Quick Start for Existing Users: Add media upload tour #18471

Quick Start for Existing Users: Add media upload tour #18471

Conversation

hassaanelgarem commented Apr 28, 2022 • edited Loading

Description

Testing Instructions

Initial screen: Site Menu (With media)

Initial screen: Home (With media)

No Media

Regression Notes

wpmobilebot commented Apr 28, 2022 • edited Loading

wpmobilebot commented Apr 28, 2022 • edited Loading

momo-ozawa left a comment

Choose a reason for hiding this comment

momo-ozawa Apr 29, 2022

Choose a reason for hiding this comment

hassaanelgarem May 9, 2022

Choose a reason for hiding this comment

momo-ozawa Apr 29, 2022

Choose a reason for hiding this comment

hassaanelgarem May 9, 2022

Choose a reason for hiding this comment

momo-ozawa Apr 29, 2022

Choose a reason for hiding this comment

hassaanelgarem May 9, 2022

Choose a reason for hiding this comment

hassaanelgarem commented May 9, 2022

momo-ozawa left a comment

Choose a reason for hiding this comment

hassaanelgarem commented Apr 28, 2022 •

edited

Loading

wpmobilebot commented Apr 28, 2022 •

edited

Loading

wpmobilebot commented Apr 28, 2022 •

edited

Loading