Show VPN onboarding tips #3429

diegoreymendez · 2024-10-11T08:53:21Z

Task/Issue URL: https://app.asana.com/0/1206580121312550/1208341440402810/f

macOS PR: duckduckgo/macos-browser#3410
BSK PR: duckduckgo/BrowserServicesKit#1024

Description

Shows VPN onboarding tips.

Testing

Debug helper option

If you want to reset TipKit, go to More Menu > All debug options > Reset TipKit
Once that's done you'll need to relaunch the app

Steps

Run the app
Enable PrivacyPro if you haven't
Ensure the VPN is OFF before starting
Go to More Menu > VPN
No tips should be visible
Turn the VPN ON.
You should see the "Change your location" tip with no actions. It should be possible to dismiss the tip by either clicking on "X" in the top-right corner or by changing your location through the cell right above.
Once the previous tip is disabled, if the VPN is still ON, you should see a snooze tip with a "Learn more" option. This can be dismissed directly, or by snoozing the connection.
Once that's dismissed you should not see other tips until you turn the connection OFF.
Once the connection is OFF you should see a tip to add a widget. This can be dismissed by tapping "Add widget" which should take you to a separate education screen.

Testing Variant: Older iOS versions support

You can repeat the test below changing the TipGroup implementation used. This can be easily done by changing the OS checks here.

Make sure that when using the iOS 17 implementation all works the same.
Make sure that when using the implementation for older iOS versions you don't see any tips at all anywhere.

Definition of Done (Internal Only):

Does this PR satisfy our Definition of Done?

Internal references:

Software Engineering Expectations
Technical Design Template

diegoreymendez · 2024-10-11T09:13:49Z

DuckDuckGo/NetworkProtectionRootView.swift

-    let statusViewModel: NetworkProtectionStatusViewModel
-
-    init() {
+    @StateObject


Should've been a @StateObject all along since it was owned by this view.

Looking even beyond, this should probably be instantiated elsewhere but that's far beyond the scope of this PR.

diegoreymendez · 2024-10-11T09:15:10Z

DuckDuckGo/NetworkProtectionStatusView.swift


 struct NetworkProtectionStatusView: View {
    @Environment(\.colorScheme) var colorScheme

-    @StateObject public var statusModel: NetworkProtectionStatusViewModel


The model wasn't owned by this instance, so changed to @ObservedObject.

diegoreymendez · 2024-10-11T09:16:44Z

DuckDuckGo/NetworkProtectionStatusView.swift

@@ -151,8 +176,8 @@ struct NetworkProtectionStatusView: View {

    @ViewBuilder
    private func locationDetails() -> some View {
-        if !statusModel.isSnoozing, let location = statusModel.location {
-            Section {
+        Section {


Changed the code a bit to move the section out of the if conditional block, as it was shared in both scenarios.

This cleans up the code a bit and allows me to add the same TipView below for both branches of the if condition.

diegoreymendez · 2024-10-11T09:27:38Z

DuckDuckGo/NetworkProtectionStatusView.swift

            }
-            .listRowBackground(Color(designSystemColor: .surface))


Most of the red code has just been moved "out" of the if condition.

diegoreymendez · 2024-10-11T09:35:09Z

DuckDuckGo/ViewExtension.swift

+    ///
+    func removeGroupedListStyleInsets() -> some View {
+        listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
+    }


Convenience method to style tip views in a way they can be easily embedded in a list while following the style of other cells.

diegoreymendez · 2024-10-11T10:27:20Z

DuckDuckGo/TipKit/TipGroup.swift

+protocol TipGrouping {
+    @available(iOS 17.0, *)
+    @MainActor
+    var currentTip: (any Tip)? { get }
+}


This protocol allows us to use TipGrouping properties that build across all iOS versions.

diegoreymendez · 2024-10-11T10:29:08Z

DuckDuckGo/TipKit/TipGroup.swift

+struct EmptyTipGroup: TipGrouping {
+    @available(iOS 17.0, *)
+    var currentTip: (any Tip)? {
+        return nil
+    }
+}


This is the struct to instantiate when the OS is lower than iOS 17. It's a glorified no-op.

currentTip is guarded to iOS 17 because we really don't want it used at all, but is necessary in the protocol.

diegoreymendez · 2024-10-11T10:29:33Z

DuckDuckGo/TipKit/TipGroup.swift

+///
+@available(iOS 17.0, *)
+@available(iOS, obsoleted: 18.0)
+struct LegacyTipGroup: TipGrouping {


This is the backport of TipGroup for iOS 17.

github-actions · 2024-10-11T11:45:32Z

	Warnings
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS against 953f864

diegoreymendez · 2024-10-11T15:38:11Z

DuckDuckGo/NetworkProtectionStatusViewModel.swift

+    let vpnEnabledTips: TipGrouping = {
+        // This is temporarily disabled until Xcode 16 is available.
+        // Ref: https://app.asana.com/0/414235014887631/1208528787265444/f
+        //
+        // if #available(iOS 18.0, *) {
+        //     return TipGroup(.ordered) {
+        //     VPNChangeLocationTip()
+        //     VPNUseSnoozeTip()
+        //     VPNAddWidgetTip()
+        // }
+        if #available(iOS 17.0, *) {
+            return LegacyTipGroup(.ordered) {
+                VPNChangeLocationTip()
+                VPNUseSnoozeTip()
+                VPNAddWidgetTip()
+            }
+        } else {
+            return EmptyTipGroup()
+        }
+    }()
+


This is great because we'll be using the default thing in iOS 18+, my backport in iOS 17 and a glorified no-op in lower OS versions.

The iOS 18 code is commented for now as Xcode 15.4 fails to build with it. I've created a follow-up task to re-enable.

Bunn

LGTM.
The lack of animations when displaying the tips is a bit distracting, as every other cell animates due to state changes. I'm not sure if it's related to the tips themselves or something else. Have you tried changing the state that presents the tips with a withAnimation block?. However, as far as functionality goes, it looks good to me.

Video.MP4

diegoreymendez added 10 commits September 24, 2024 12:21

Add VPN tips

4d26d2a

Add VPN tips

b1c4384

WIP

d2ecf8f

Implemented the presentation logic for all vpn tips

1d52ac9

Makes several improvements to the the VPN tips

c65665a

WIP

5429913

Code cleanup

0b7ab76

Code cleanup

5e67a21

Rolls back some unrelated changes

a695491

Rolls back an unnecessary change

c0885b6

diegoreymendez commented Oct 11, 2024

View reviewed changes

diegoreymendez added 2 commits October 11, 2024 11:23

Code cleanup

3e95e05

Code cleanup

7bb757f

diegoreymendez commented Oct 11, 2024

View reviewed changes

Code cleanup

fc2c5fb

diegoreymendez commented Oct 11, 2024

View reviewed changes

diegoreymendez added 4 commits October 11, 2024 12:12

Improved TipGroup support for older iOS versions

696c0aa

Further improvements to TipGroup

b05febb

Fixes a compilation warning

c83510e

Fixes some additional build errors

b8e8393

diegoreymendez commented Oct 11, 2024

View reviewed changes

diegoreymendez self-assigned this Oct 11, 2024

Some final minor fixes

f26b6eb

diegoreymendez requested a review from Bunn October 11, 2024 10:46

diegoreymendez marked this pull request as ready for review October 11, 2024 10:47

Merges the latest from main

20cbcda

diegoreymendez added 3 commits October 11, 2024 13:50

Wires in the remote feature flag

2e99922

Temporarily comments some Xcode 16-only code

89f2a21

Makes some changes to fix swiflint errors and document disabled code

ab8e06c

diegoreymendez commented Oct 11, 2024

View reviewed changes

kiruthikpurpose approved these changes Oct 12, 2024

View reviewed changes

Bunn approved these changes Oct 14, 2024

View reviewed changes

diegoreymendez added 6 commits October 15, 2024 14:39

Several changes to VPN tips

888b67a

Merge branch 'main' into diego/add-vpn-tips

dcc360c

Moves some TipKit code to BSK to share with macOS

953f864

Updated the VPN tip icons

5965ead

Standardized some names and identifiers

e8a3a96

Updates BSK

d6dfb0d

This was referenced Oct 17, 2024

Shared code for VPN onboarding tips duckduckgo/BrowserServicesKit#1024

Draft

Show VPN onboarding tips duckduckgo/macos-browser#3410

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show VPN onboarding tips #3429

Show VPN onboarding tips #3429

diegoreymendez commented Oct 11, 2024 •

edited

Loading

diegoreymendez Oct 11, 2024 •

edited

Loading

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024

diegoreymendez Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

diegoreymendez Oct 11, 2024

Bunn left a comment

Show VPN onboarding tips #3429

Are you sure you want to change the base?

Show VPN onboarding tips #3429

Conversation

diegoreymendez commented Oct 11, 2024 • edited Loading

Description

Testing

Debug helper option

Steps

Testing Variant: Older iOS versions support

Internal references:

diegoreymendez Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

diegoreymendez Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Oct 11, 2024 • edited Loading

diegoreymendez Oct 11, 2024

Choose a reason for hiding this comment

Bunn left a comment

Choose a reason for hiding this comment

diegoreymendez commented Oct 11, 2024 •

edited

Loading

diegoreymendez Oct 11, 2024 •

edited

Loading

diegoreymendez Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading