Implement Jetpack Module Settings

[oskosk]

We're a implementing Jetpack Module Settings in Calypso’s site settings page/tabs.

More tasks related to this are being tracked in #11676

Currently these are the data-related tasks that we can do before implementing the UI.

State tasks

API related tasks

• Define an authorization mechanism for making requests to a site’s REST API from Calypso on behalf of a local user. Jetpack Signatures will be used resembling the auth flow of XML-RPC requests.
• Implement the defined authorization mechanism on the Jetpack Plugin side - @roccotripaldi REST API: Add Authentication method based on Jetpack Signatures jetpack#5418
• Implement the Jetpack REST API client in .com - @roccotripaldi - D3527-code
• Implement the endpoint in the .com side - @tyxla, @roccotripaldi - D3588-code
• Implement a Jetpack REST API endpoint for reading Jumpstart - @tyxla - Add Jumpstart status REST API endpoint jetpack#5813
• Update the /settings readable JSON API endpoint to retrieve all settings - @tyxla - JSON API: Add all module settings to the /settings readable endpoint jetpack#6002
• Add a specific parameter for triggering Jetpack WP REST API authentication - @nylen - D3926-code

Calypso API-client tasks

• Have a wpcom.js method for reading and updating Jumpstart status
  • getJetpackJumpstart and updateJetpackJumpstart which use the site’s REST API are introduced in Jetpack Settings: Add actions, reducer, selectors and query components for Jumpstart #9868 (@tyxla)
  • Do a final test after D3588-code, D3926-code and Add Jumpstart status REST API endpoint jetpack#5813 are merged; remove the TODO comment - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for activating a Jetpack module - jetpackModulesActivate() works. But uses the XML-RPC API.
  • jetpackModuleActivate() does it via the site’s REST API - Jetpack Settings: Use the Jetpack site REST API for module activation #10075 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for deactivating a Jetpack module - jetpackModulesDeactivate() works. But uses the XML-RPC API.
  • jetpackModuleDeactivate() does it via the site’s REST API - Jetpack Settings: Use the Jetpack site REST API for module deactivation #10076 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for reading a Jetpack module's activation state - jetpackModules() works. But uses the XML-RPC API.
  • getJetpackModules() does it via the site’s REST API - Jetpack Settings: Use the Jetpack site REST API for retrieving module data #10077 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for bulk reading Jetpack module settings - fetchJetpackSettings() does it via the site’s REST API - Jetpack Settings: Implement bulk settings management into Redux #10123 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for bulk updating Jetpack module settings - updateJetpackSettings() does it via the site’s REST API - Jetpack Settings: Implement bulk settings management into Redux #10123 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)
• Have a wpcom.js method for retrieving Jetpack connection data - getJetpackConnectionStatus() does it via the site’s REST API - Jetpack Settings: Add actions, reducer, selectors and query components for connection status #10002 - @tyxla
  • Do a final test after D3588-code, D3926-code and REST API: Add Authentication method based on Jetpack Signatures jetpack#5418 are merged; remove the TODO comment. - Undocumented: Remove @TODO from Jetpack REST API methods #10612 (@tyxla)

Module activation/deactivation tasks

• Create action types, action creators, and reducer for activating a Jetpack module - @oskosk - Jetpack Settings: Add jetpack module activation reducers, actions types, action creators and selectors #9245
• Create action types, action creators and reducer for deactivating a Jetpack module - @tyxla - Jetpack Settings: Add module deactivation actions, reducer and selectors #9418
• Create action types , action creators and reducer for reading Jetpack modules activation state - @oskosk - Jetpack Settings: Add module list fetching actions, reducer and selectors #9440
• Implement notices on module activation and deactivation - @tyxla - Jetpack Settings: Add notices for (de)activating Jetpack modules #10583

Module general tasks

• Create a QueryJetpackModules query component - @tyxla - Components: Add QueryJetpackModules query component #9659
• Create selectors for retrieving general module data - @tyxla - Jetpack Settings: Add selectors for retrieving general module data #9661

Module settings & Jumpstart tasks

• Create action types, action creators and reducer for updating a jetpack module setting. - @tyxla - Jetpack Settings: Add actions, reducer, selectors and query components for module settings #9847 (deleted in favor of bulk settings)
• Create action types, action creators and reducer for jumpstarting a site. - @tyxla - Jetpack Settings: Add actions, reducer, selectors and query components for Jumpstart #9868
• Be able to read current module settings - @tyxla - Jetpack Settings: Add actions, reducer, selectors and query components for module settings #9847 (deleted in favor of bulk settings)
• Create action types, action creators and reducer for bulk reading module settings. - @tyxla - Jetpack Settings: Implement bulk settings management into Redux #10123
• Create action types, action creators and reducer for bulk updating module settings. - @tyxla - Jetpack Settings: Implement bulk settings management into Redux #10123
• Create reducer and selectors for settings saving - @tyxla - State: Add reducer and selectors for Jetpack settings save status #10694
• Create a mechanism to normalize and sanitize fields - @tyxla - Jetpack Settings: Sanitize and normalize when fetching and updating settings #10776
• Implement Post by Email action, reducer and selectors - @tyxla - State: Implement Post by Email into Jetpack Settings redux state #10811
• Revert Jetpack Settings: Map Jetpack module options from the modules state branch into the settings state branch on fetch #10891 once Jetpack 4.6 lands. Won't do as we considered its best to keep this syncing code in place anyways.

UI tasks

These tasks and notes are based on what's specified by p6TEKc-HQ-p2

Some notes on UI behavior

• When a module is disabled (via a clear toggle like Carousel), hide module options. Not necessary, but could be nice.
• When a toggle is used, it should immediately enable that thing and show a global notice to show status of enabling that thing.
• When checkboxes are used, clicking a save settings button is required.
• A user can click a save settings button at any time even if not needed (though not when a setting is being applied). Try the buttons in Calypso to see how they work.

General tasks

• Introduce an <InfoLink /> component for linking to module descriptions next to the module activation toggle - Proposed here - @oskosk - Add InfoLink component #10036.
• Introduce a <JetpackModuleToggle /> component to allow easy toggling of modules - @tyxla - Site Settings: Introduce JetpackModuleToggle component #10429
• Make wrapSettingsForm compatible with Jetpack Settings so we can use it for the UI cards - @tyxla - Site Settings: Make wrapSettingsForm compatible with Jetpack Settings #10697

General tab

• Replace checkboxes with toggles for consistency - @tyxla - Site Settings: Convert checkboxes to toggles in the General tab #10229

Writing Tab

• Move current Writing settings into separate cards - Site Settings: Use separate cards for settings within the Writing tab #9977 - @tyxla
• Update the card for Custom Content Types to the new layout - Jetpack Settings: Introduce an updated custom content types card #11096 - @tyxla
• Implement Card for Media settings - Jetpack Settings: Add Media Settings card under Writing Settings for sites with Jetpack >= 4.5 #9802.
  • Implement toggle for Speed up your images and photon with Photon. Has description: Enabling Photon is required to use Tiled Galleries.
  • Implement toggle for Transform image galleries into full-screen slideshows.
    • Implement checkbox for Show photo metadata (Exif) in carousel, when available.
    • Implement select for Background color
• Implement Card for Theme enhancements settings - Jetpack Settings: Add Theme Enhancements card under Writing Settings for Jetpack sites #10083 - @tyxla
  • Implement toggle for Add support for infinite scroll to your theme.
    • Implement checkbox for Scroll infinitely (Shows 7 posts on each load).
    • Implement checkbox for Track each infinite Scroll post load as a page view in Google Analytics.
  • Implement toggle for Optimize your site with a phone-friendly theme.
    • Implement checkbox for Use excerpts instead of full posts on front page and archive pages.
    • Implement checkbox for Hide all featured images.
    • Implement checkbox for Show an ad for the WordPress mobile apps in the footer of the mobile theme.
• Implement Card for Publishing tools settings. - Jetpack Settings: Introduce a Publishing Tools card under Writing #10663 - @tyxla
  • Prepare Press This for embedding within another card - Site Settings: Move Press This in a separate component #10659 - @tyxla
  • Implement toggle for Publish posts by email, using any device and email client.
    • Implement read-only input with copy button for Email Address.
    • Implement button for Regenerate Address.
    • Move Press This settings into this card

Discussion Tab

• Move current Discussion settings into separate cards - @ryelle - Site Settings: Update the discussion tab to use separate cards #10167
• Implement the Card for Article settings
  • Includes the three existing settings for Default article settings but as toggles.
• Implement the Card for Subscriptions settings - @tyxla - Jetpack Settings: Introduce a card for Subscriptions #10815
  • Implement toggle for Allow users to subscribe to your posts and comments and receive notifications via email.
  • Implement the checkbox for Show a "follow blog" option in the comment form.
  • Implement the checkbox for Show a "follow comments" option in the comment form.

Things to have in mind (and related tasks)

• Take in account those modules that should be disabled if the site’s is in dev mode.
  • Make the development mode accessible in the Redux tree - Jetpack Settings: Add actions, reducer, selectors and query components for connection status #10002 - @tyxla
• Take in account we should probably not modify live settings when site is in staging.
  • Make the staging mode accessible in the Redux tree - Jetpack Settings: Add actions, reducer, selectors and query components for connection status #10002 - @tyxla
• Take in account features that are only available in some of the plans.

Notes

• Every time the word setting is used here, remember that it maps to either:
  • A single WP option.
  • A key inside a serialized object saved in a WP option

[oskosk]

Closing as every task listed here is already complete. Opened a new task list as issue #11676 as a follow-up to this