Add Jetpack badge to Activity log detail #19007

Gio2018 · 2022-07-07T20:20:23Z

Fixes #NA

This PR adds the "Jetpack powered" badge to activity log detail.
It also optimizes code between JetpackButton and JetpackBannerView

To test:

on any iPhone or iPad

WordPress app

Go to My Site -> Menu then select Activity log (make sure to have at least one activity: if you don't, you can, for example, change your site name to generate one)
Tap on any activity
Make sure the badge shows up in the activity detail screen (see screenshot above).

Jetpack app

Repeat the above steps and make sure that the Jetpack powered badge does not show in any of the steps.

Regression Notes

Potential unintended areas of impact
Low impacts on activity detail UI
What I did to test those areas of impact (or what existing automated tests I relied on)
Test on a variety of devices
What automated tests I added (or what prevented me from doing so)
none
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.~~ Not released

… powered button, used both as a badge and as a banner

…cludes the Jetpack powered badge (iPhone only)

…om the split screen master view

…m the Jetpack app

…he Jetpack app

wpmobilebot · 2022-07-07T20:52:28Z

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 pr19007-725dfec on your iPhone

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

wpmobilebot · 2022-07-07T20:56:09Z

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 pr19007-7bc522d on your iPhone

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

twstokes

👋 @Gio2018! This looks good to me and passed the manual tests you provided. I've added some comments below.

✅ "Jetpack powered" badge appears at the bottom of My Site -> Menu on iPhone 13 (WPiOS)
✅ "Jetpack powered" badge does not appear at the bottom of My Site -> Menu when using a larger phone and rotated to landscape (iPhone 13 Pro Max) or an iPad (WPiOS)
✅ "Jetpack powered" badge appears in the activity detail screen
✅ "Jetpack powered" badge does not appear at the bottom of My Site -> Menu or under an activity for any device running Jetpack app
✅ Badge looks good in dark / light mode
⚠️ Padding around the text is lost for larger font sizes. Text will show ellipses for very large fonts.

Padding lost	Ellipses

⚠️ Badge appears on self-hosted sites that doesn't have Jetpack installed

⚠️ Badge's top margin isn't slightly different between the My Site menu and activity detail view

My Site	Activity Detail

⚠️ Tapping the badge on the My Site menu shows the outline but does nothing

WordPress/Classes/ViewRelated/Activity/ActivityDetailViewController.swift

WordPress/Classes/ViewRelated/Jetpack/Branding/Common/JetpackButton.swift

…nt size for accessibility categories

…geView.isHidden = false in storyboard

…rve both the badge and the banner when scaling

…ge on My Site for self hosted sites

…ed badge to align it with My Site

guarani

Make sure the "Jetpack powered" badge appears at the bottom of the list (see screenshot above)

Hi @Gio2018, I think the "Home" tab within "My Site" is Jetpack-powered. The "Menu" tab is not related to Jetpack AFAIK. For example, logging into a self-hosted shows the "Menu" tab only.

I haven't done a complete review, do you want me to review this fully, or is one review (@twstokes's review) what you're looking for?

Gio2018 · 2022-07-12T21:10:22Z

Make sure the "Jetpack powered" badge appears at the bottom of the list (see screenshot above)

Hi @Gio2018, I think the "Home" tab within "My Site" is Jetpack-powered. The "Menu" tab is not related to Jetpack AFAIK. For example, logging into a self-hosted shows the "Menu" tab only.

I haven't done a complete review, do you want me to review this fully, or is one review (@twstokes's review) what you're looking for?

Thank you @guarani ! Looking at the Figma designs, the badge also appears in Menu under View Site. I have also just added code to exclude that badge from self hosted sites. Does it make sense?

* Update BlogDetailsViewController * Remove JetpackBadgeCell

Gio2018 · 2022-07-13T15:18:12Z

Thanks for reviewing @twstokes @guarani ! This is now ready for another pass!

WordPress/Classes/ViewRelated/Jetpack/Branding/Common/JetpackButton.swift

twstokes · 2022-07-13T15:59:38Z

WordPress/Classes/ViewRelated/Jetpack/Branding/Banner/JetpackBannerView.swift

+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+


Micro, optional nit: Extra spacing.

twstokes · 2022-07-13T16:00:47Z

WordPress/Classes/ViewRelated/Jetpack/Branding/Common/JetpackButton.swift

+        titleLabel?.adjustsFontSizeToFitWidth = true
+        setImage(.gridicon(.plans), for: .normal)
+        contentVerticalAlignment = .fill
+        contentHorizontalAlignment = .center


It looks like this may be a default?

twstokes · 2022-07-13T16:02:06Z

WordPress/Classes/ViewRelated/Jetpack/Branding/Banner/JetpackBannerView.swift

+    }
+
+    func setup() {
+


Micro, optional nit: Extra spacing.

twstokes · 2022-07-13T16:02:32Z

WordPress/Classes/ViewRelated/Activity/ActivityDetailViewController.swift

@@ -36,6 +36,9 @@ class ActivityDetailViewController: UIViewController, StoryboardLoadable {
        }
    }

+    @IBOutlet weak var jetpackBadgeView: UIView!
+
+


Micro, optional nite: Not sure if this extra space was intentional.

twstokes · 2022-07-13T16:04:53Z

👋 @Gio2018, I noticed for very large accessibility sizes the badge will exceed the bounds of the screen. Possibly we could add constraints to prevent this?

…-iOS into feature/jetpack-badge-my-site-menu-activity-log

Giorgio Ruscigno added 8 commits July 7, 2022 12:37

Add JetpackButton, a UIButton subclass to that implements the Jetpack…

c0be422

… powered button, used both as a badge and as a banner

Update JetpackBannerView, refactor to reuse the JetpackButton type

3847614

Update BlogDetailsViewController, add new row to My Site menu that in…

9e654b7

…cludes the Jetpack powered badge (iPhone only)

Add JetpackBadgeCell, a cell containing the Jetpack powered badge

4af379f

Rearranged files in the Jetpack Branding group

e715af8

Update ActivityDetailViewController, add the Jetpack powered badge

c423fc0

Merge branch trunk into featurejetpack-badge-my-site-menu-activity-log

3f1c302

Update BlogDetailsViewController, remove the Jetpack powered badge fr…

13f6a38

…om the split screen master view

Gio2018 added [Type] Enhancement Jetpack labels Jul 7, 2022

Gio2018 added this to the 20.3 milestone Jul 7, 2022

Gio2018 requested review from guarani and a team July 7, 2022 20:20

Gio2018 self-assigned this Jul 7, 2022

Giorgio Ruscigno added 3 commits July 7, 2022 15:31

Update ActivityDetailViewController, remove Jetpack powered badge fro…

2066afd

…m the Jetpack app

Update BlogDetailsViewController, remove Jetpack powered badge from t…

2ae5be1

…he Jetpack app

Add missing files to the Jetpack target

a6a0925

Gio2018 modified the milestones: 20.3, 20.4 Jul 8, 2022

twstokes self-requested a review July 11, 2022 19:27

twstokes reviewed Jul 11, 2022

View reviewed changes

WordPress/Classes/ViewRelated/Activity/ActivityDetailViewController.swift Outdated Show resolved Hide resolved

twstokes reviewed Jul 12, 2022

View reviewed changes

WordPress/Classes/ViewRelated/Jetpack/Branding/Common/JetpackButton.swift Outdated Show resolved Hide resolved

Giorgio Ruscigno added 6 commits July 12, 2022 12:46

Update ActivityDetailViewController, refactor call to JetpackButton

def3f4c

Update BlogDetailsViewController, refactor call to JetpackBadgeCell

fafcfd9

Update JetpackBadgeCell, refactor view layput into initializer

308278a

Update JEtpackButton, refactor to handle variable size and maximum fo…

667aca5

…nt size for accessibility categories

Update ActivityDetailViewController, set the default state jetpackBad…

38b9298

…geView.isHidden = false in storyboard

Upodate JetpackBadgeCell, set selection style to .none

69717d1

Giorgio Ruscigno added 4 commits July 12, 2022 15:10

Update JetpackButton, set contentmode and alignment in order to prese…

bd1132f

…rve both the badge and the banner when scaling

Update JetpackButton, use reverse-dns notation for localized string

3b5fd91

Update BlogDetailsViewController, do not show the Jetpack powered bad…

59e3296

…ge on My Site for self hosted sites

Update ActivityDetailViewController, update position of jetpack power…

3700b6e

…ed badge to align it with My Site

guarani reviewed Jul 12, 2022

View reviewed changes

Giorgio Ruscigno added 2 commits July 13, 2022 10:09

Remove Jetpack powered button from my site menu

afa605c

* Update BlogDetailsViewController * Remove JetpackBadgeCell

Update JetpackButton, make button image resizable for badges

cdfff49

Gio2018 changed the title ~~Add Jetpack badge to My Site menu and Activity log~~ Add Jetpack badge to Activity log detail Jul 13, 2022

Gio2018 requested review from guarani and twstokes July 13, 2022 15:17

twstokes reviewed Jul 13, 2022

View reviewed changes

WordPress/Classes/ViewRelated/Jetpack/Branding/Common/JetpackButton.swift Show resolved Hide resolved

twstokes reviewed Jul 13, 2022

View reviewed changes

Address PR comments

7bc522d

Gio2018 requested a review from twstokes July 13, 2022 16:10

twstokes approved these changes Jul 13, 2022

View reviewed changes

Merge branch 'trunk' of https://github.com/wordpress-mobile/WordPress…

725dfec

…-iOS into feature/jetpack-badge-my-site-menu-activity-log

Gio2018 merged commit a865286 into trunk Jul 13, 2022

Gio2018 deleted the feature/jetpack-badge-my-site-menu-activity-log branch July 13, 2022 18:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Jetpack badge to Activity log detail #19007

Add Jetpack badge to Activity log detail #19007

Gio2018 commented Jul 7, 2022 •

edited

Loading

wpmobilebot commented Jul 7, 2022 •

edited

Loading

wpmobilebot commented Jul 7, 2022 •

edited

Loading

twstokes left a comment •

edited

Loading

guarani left a comment •

edited

Loading

Gio2018 commented Jul 12, 2022

Gio2018 commented Jul 13, 2022

twstokes Jul 13, 2022

twstokes Jul 13, 2022

twstokes Jul 13, 2022

twstokes Jul 13, 2022

twstokes commented Jul 13, 2022

Add Jetpack badge to Activity log detail #19007

Add Jetpack badge to Activity log detail #19007

Conversation

Gio2018 commented Jul 7, 2022 • edited Loading

Regression Notes

wpmobilebot commented Jul 7, 2022 • edited Loading

wpmobilebot commented Jul 7, 2022 • edited Loading

twstokes left a comment • edited Loading

Choose a reason for hiding this comment

guarani left a comment • edited Loading

Choose a reason for hiding this comment

Gio2018 commented Jul 12, 2022

Gio2018 commented Jul 13, 2022

twstokes Jul 13, 2022

Choose a reason for hiding this comment

twstokes Jul 13, 2022

Choose a reason for hiding this comment

twstokes Jul 13, 2022

Choose a reason for hiding this comment

twstokes Jul 13, 2022

Choose a reason for hiding this comment

twstokes commented Jul 13, 2022

Gio2018 commented Jul 7, 2022 •

edited

Loading

wpmobilebot commented Jul 7, 2022 •

edited

Loading

wpmobilebot commented Jul 7, 2022 •

edited

Loading

twstokes left a comment •

edited

Loading

guarani left a comment •

edited

Loading