Parent #13267

⚠️ The designs below are just an FYI of the latest exploration that @osullivanchris did on this screen. In the end, the team decided NOT to go with them and instead reuse the Activity Log design and screen to build this Backup screen.

⚠️ When it comes to design you will notice the below two differences on the Backup screen, compared to the Activity Log screen, those are:

1. The Backup screen doesn't have the Activity Type filter chip, and
2. The Backup screen doesn't have items in the list that are not rewindable (those without the ellipsis menu item on their right).

⚠️ As far as the Back Details screen in concerned, which actually will end up being the redesign Activity Log Details screen, the team decided NOT to go with the redesign on this screen for this iteration. The only change that occurred on this details screen is with the RESTORE button flow, which now goes through the new flow.

Design

TBD

Tasks

My Site Tab

• Add feature flag for the Backups screen. Jetpack Section: Backup Screen - Introduce Feature Flag #13709
• Add Backup menu item as an entry point that displays the Backups screen. Jetpack Section: Backup Screen - Introduce Feature Flag #13709
• Fine-tune the Backup menu icon. Jetpack Section: Optimize My Site Menu Items #13969 Jetpack Section: Update My Site Menu Items Strings #13982

FluxC (Network + Persistence)

• Add rewindable only flag for the Backups screen. WordPress-Flux-Android#1834
• Option.1: (⚠️ - Scoped out for now!)
  • Update /sites/$site/activity/ API with a new isRewindable parameter. (⚙️ - Internal P2 link: pcdRpT-cB)
• Option.2: (ℹ️ - If Option.1 is not ready)
  • Update ACTIVITY_LOG_PAGE_SIZE to 100. WordPress-Flux-Android#1863 Jetpack Section: Update FluxC for Activity Log Page Size #13975

Backups Screen

• Option.1:
  • Investigate requirements, concerns (⚠️) and suggestions (✅ + ❌ ) for reusing Activity Log screen. Jetpack Section: Backup Screen #13629 (comment)
  • Reuse Activity Log screen, reuse Activity Log endpoint, filtered by Rewindable items, and to show the Backups screen. Jetpack Section: Backup Screen - Introduce Backup Screen #13762
  • Improve scrolling behavior (⚠️ - Scoped out for now!)
• Option.2: (⚠️ - Scoped out for now!)
  • Add Backups screen.
  • Add Backups skeleton screen (Activity, Fragment, ViewModel, Tests, etc).
  • Introduce Backups endpoint.
  • Add Backups UI.
  • Bind Backups UI with endpoint (UiStates).
  • Show Loading screen while the backups are being fetched.
  • Show Empty screen if the backups is empty.
  • Show Error with Retry screen if fetching the backups fails.
  • Bind Backup item click with navigation (to Backup Details).
  • Add Menu Item per Backup Item and bind actions. (❓).
• Polish the UI
  • Fine-tune icons: include dp width in the icon file names, color resources from colors.xml.
  • Fine-tune buttons (apply style based on whether button is secondary or not).
  • ...and more!

Backup Details Screen (⚠️ - Scoped out for now!)

• Add Backup Details skeleton screen (Activity, Fragment, ViewModel, Tests, etc).
• Add Backup Details UI.
• Bind Backup Details UI with endpoint (UiStates).
• Show Loading screen while the backup details is being fetched. (❓)
• Show Error with Retry screen if fetching the backup details fails. (❓)
• Bind Restore to this point button click with action (Rewind action).
• Bind Download backup button click with navigation (to Backup Download screen).

Tracks

• Add tracking. Jetpack Section: Backup Screen Tracking Events #13956

Finishing Touches

• Rename feature flags: BackupFeatureFlag to BackupDownloadFeatureFlag and BackupsFeatureFlag to BackupScreenFeatureFlag. Jetpack Section: Backup Screen #13629
• Check accessibility.
• Check small devices.
• Check RTL languages.
• Design review.

After design is finalized add remainder of tasks.