Skip to content

Conversation

nbradbury
Copy link
Contributor

@nbradbury nbradbury commented Jul 31, 2025

Closes #CMM-641

This PR implements the UI for the Rest-based Jetpack connection flow. Note there is no networking logic here - that will come later - and there are a number of TODOs. This is being merged into a feature branch so end users won't see it until the feature branch is eventually merged.

For now, when the main activity starts I automatically show the connection flow. This will be removed before merging.

To test

  • Start the app and verify the UI for the connection flow looks fine
  • Restart the app and hit the close icon before the flow completes and verify you're ask whether to cancel
  • Change the code at the end of JetpackConnectionViewModel.startStep so that one of the steps fails (code snippet below), verify that it fails and a Retry button appears, and when tapped the button restarts the failed step.
       // TODO this is just to test the UI
        delay(STEP_DELAY_MS)
        if (step == ConnectionStep.InstallJetpack) {
            updateStepStatus(step, ConnectionStatus.Failed)
        } else {
            updateStepStatus(step, ConnectionStatus.Completed)
        }
ui.mp4

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces a new Jetpack connection UI that guides users through the process of connecting their self-hosted WordPress site to Jetpack. The implementation includes a step-by-step connection flow with visual status indicators and error handling.

  • Adds a complete Jetpack connection UI with ViewModel, Activity, and Compose screen
  • Implements a multi-step connection process with status tracking and error handling
  • Provides user feedback through animated UI states and confirmation dialogs

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
strings.xml Adds localized strings for the Jetpack connection UI
WPMainActivity.java Temporarily launches the new Jetpack connection activity for testing
JetpackConnectionViewModel.kt Implements the connection logic and state management
JetpackConnectionScreen.kt Provides the Compose UI for the connection flow
JetpackConnectionActivity.kt Activity that hosts the connection screen
ScreenWithTopAppBarM3.kt Reusable Compose component for screens with top app bars
AndroidManifest.xml Registers the new JetpackConnectionActivity

Copy link

sonarqubecloud bot commented Aug 2, 2025

@nbradbury nbradbury changed the base branch from trunk to feature/jetpack-connection-feature-branch August 4, 2025 10:53
@nbradbury nbradbury marked this pull request as ready for review August 4, 2025 11:39
@nbradbury nbradbury requested a review from adalpari August 4, 2025 11:39
Copy link
Contributor

@adalpari adalpari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@nbradbury nbradbury merged commit 9e9bbad into feature/jetpack-connection-feature-branch Aug 5, 2025
29 checks passed
@nbradbury nbradbury deleted the feature/jetpack-connection-ui branch August 5, 2025 16:05
nbradbury added a commit that referenced this pull request Aug 8, 2025
* Jetpack connection UI (#22079)

* Added shell for JetpackConnectionViewModel

* Added shell for JetpackConnectionScreen

* Fleshed out JetpackConnectionScreen

* Minor tweaks

* Added canInitiateJetpackConnection

* Updated comment

* Renamed const

* Removed wpApiClient

* Added activity shell

* Added activity to manifest

* Handle close

* Pass states rather than the view model

* Pass states rather than the view model,p2

* Dummy code to simulate login

* Dummy code to simulate login, p2

* Added done button

* Animate Done button, added Failed status

* Use light MaterialTheme.colorScheme.error color background for failed steps

* Animate changes to ConnectionStepItem

* Added startNextStep

* Added startNextStep, p2

* Added startNextStep, p3

* Fixed UI testing

* Fixed UI testing, p2

* Changed color for completed and in-progress cards

* Changed color for completed and in-progress cards again

* Removed elevation and changed card to column

* First pass at Retry

* Second pass at Retry

* Third pass at Retry

* Added error states

* Combined states

* Fixed Detekt errors

* Replaced hard-coded hex color values

* Minor formatting changes

* Minor formatting changes, p2

* Minor formatting changes, p3

* Updated preview to use JetpackConnectionScreen

* Simplified ConnectionStepItem

* Moved Screen to ScreenWithTopAppBarM3

* Added modifier

* Changed two icons

* Fix the done/retry button to the bottom

* Removed the heading and changed the screen title

* Increase elevation of in-progress step, remove elevation animation

* First pass at confirming cancellation

* Second pass at confirming cancellation

* Fixed detekt warnings

* Fixed detekt warnings

* Changed fun name

* Fixed isActive check

* Use ErrorEvent instead of a string

* Fixed new Detekt warnings

* Renamed variable

* Retry starts at the failed step

* Moved getNextStep to its own fun

* Simplified retrying from step

* Added optional message to ErrorType

* Updated wp.com error message

* Moved color constants to color resources

* Use existing color resources for in-progress step

* Don't use !! for selected site

* Replaced throwing exception with error() to resolve Detekt warning

* Simplified JetpackConnectionViewModel

* Simplified JetpackConnectionScreen

* Simplified JetpackConnectionActivity

* Added Jetpack Connection feature flag

* Jetpack Connection cleanup (#22104)

* Rely on isUsingSelfHostedRestApi to determine whether we can use the new JP REST connection

* Removed starting the flow from the main activity

* Launch the new flow from stats if available

* Simplified canInitiateJetpackConnection

* Renamed feature to Experimental Jetpack *REST* Connection to avoid confusion with existing web-based flow

* Fixed Detekt line length warnings

* Add "Simulated" to screen title to make it clear there's nothing happening

* Renamed experimental key

* Jetpack connect start button (#22110)

* Fixed title casing

* Added start button

* Wired up start button

* Reset uiEvent when starting flow, removed unused init
nbradbury added a commit that referenced this pull request Aug 12, 2025
* Jetpack connection UI (#22079)

* Added shell for JetpackConnectionViewModel

* Added shell for JetpackConnectionScreen

* Fleshed out JetpackConnectionScreen

* Minor tweaks

* Added canInitiateJetpackConnection

* Updated comment

* Renamed const

* Removed wpApiClient

* Added activity shell

* Added activity to manifest

* Handle close

* Pass states rather than the view model

* Pass states rather than the view model,p2

* Dummy code to simulate login

* Dummy code to simulate login, p2

* Added done button

* Animate Done button, added Failed status

* Use light MaterialTheme.colorScheme.error color background for failed steps

* Animate changes to ConnectionStepItem

* Added startNextStep

* Added startNextStep, p2

* Added startNextStep, p3

* Fixed UI testing

* Fixed UI testing, p2

* Changed color for completed and in-progress cards

* Changed color for completed and in-progress cards again

* Removed elevation and changed card to column

* First pass at Retry

* Second pass at Retry

* Third pass at Retry

* Added error states

* Combined states

* Fixed Detekt errors

* Replaced hard-coded hex color values

* Minor formatting changes

* Minor formatting changes, p2

* Minor formatting changes, p3

* Updated preview to use JetpackConnectionScreen

* Simplified ConnectionStepItem

* Moved Screen to ScreenWithTopAppBarM3

* Added modifier

* Changed two icons

* Fix the done/retry button to the bottom

* Removed the heading and changed the screen title

* Increase elevation of in-progress step, remove elevation animation

* First pass at confirming cancellation

* Second pass at confirming cancellation

* Fixed detekt warnings

* Fixed detekt warnings

* Changed fun name

* Fixed isActive check

* Use ErrorEvent instead of a string

* Fixed new Detekt warnings

* Renamed variable

* Retry starts at the failed step

* Moved getNextStep to its own fun

* Simplified retrying from step

* Added optional message to ErrorType

* Updated wp.com error message

* Moved color constants to color resources

* Use existing color resources for in-progress step

* Don't use !! for selected site

* Replaced throwing exception with error() to resolve Detekt warning

* Simplified JetpackConnectionViewModel

* Simplified JetpackConnectionScreen

* Simplified JetpackConnectionActivity

* Added Jetpack Connection feature flag

* Jetpack Connection cleanup (#22104)

* Rely on isUsingSelfHostedRestApi to determine whether we can use the new JP REST connection

* Removed starting the flow from the main activity

* Launch the new flow from stats if available

* Simplified canInitiateJetpackConnection

* Renamed feature to Experimental Jetpack *REST* Connection to avoid confusion with existing web-based flow

* Fixed Detekt line length warnings

* Add "Simulated" to screen title to make it clear there's nothing happening

* Renamed experimental key

* Fixed title casing

* Added start button

* Wired up start button

* Reset uiEvent when starting flow, removed unused init

* Removed code for steps other than Step 1 (login to wp.com)

* Removed code for steps other than Step 1 (login to wp.com), p2

* First attempt at wp.com login

* Remove automatic step completion

* Use correct discovery url

* Added error type for discovery failure

* First pass at launching and awaiting password flow

* Retain when waiting for password flow

* First pass at switching from app password to wp.com login (broken)

* Second pass at switching from app password to wp.com login (broken)

* Use showSignInForResultWpComOnly

* Check for account token

* Add sign-in flow for JP rest connect

* Added error type for login wp.com failure, minor code reformatting

* Don't show "Failed" status for errors, only show error message

* Removed unused account store and deleted commented code

* Added comment to LoginActivity

* Added comment to loginWpCom

* Fixed Detekt warning

* Added comment to ActivityLauncher and shortened function name

* Don't expose isWaitingForWPComLogin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants