Implement Idea Hub setup UI

While the Idea Hub module does not have any settings for now (see #3521), it still needs to have a setup screen, for now with just a note about privacy and terms of service of this API that the user has to acknowledge.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Idea Hub module should have its basic information (in Idea_Hub::setup_info) updated:
  • The description should be: _ Idea Hub suggests what you can write about next, based on searches that haven’t been answered yet_
  • The homepage should be entirely removed.
• The Idea Hub module should have a new setting tosAccepted which expects a boolean. The module should only consider itself connected (via Idea_Hub::is_connected) if the value in that settings is true.
• The Idea Hub module should have a setup screen via a SetupMain component in assets/js/modules/idea-hub/components/setup/SetupMain.js.
  • It should follow the design in the Figma file, with two exceptions:
    • Instead of the first sentence below the Idea Hub heading, the same description that is present above should be used (taken directly from the Idea Hub module’s data).
    • Instead of “Done”, the submit button should say “Continue”, for consistency with e.g. the AdSense setup.
  • The checkbox on that screen should control the above tosAccepted setting. Until the checkbox is clicked, the submit button should be disabled.

Implementation Brief

• Using includes/Modules/Idea_Hub.php,
  • Update the description in the setup_info method as per the AC and remove homepage.
  • Add the tosAccepted to the $required_keys array of the is_connected method.
• Using includes/Modules/Idea_Hub/Settings.php,
  • Add tosAccepted to the array found in get_default, with false as default value.
• Using assets/js/modules/idea-hub/datastore/base.js,
  • Add tosAccepted to the settingSlugs array when calling the createModuleStore function.
• Create assets/js/modules/idea-hub/components/setup/SetupMain.js with exports the SetupMain functional component with the following details:
  • The component should be rendered as per the designs in Figma.
  • Most of the code can be taken from the Optimize SetupMain component assets/js/modules/optimize/components/setup/SetupMain.js with the following changes:
    • SVG for the logo can be found here: assets/svg/idea-hub.svg
• Create assets/js/modules/idea-hub/components/setup/SetupForm.js which exports the SetupForm functional component with the following details:
  • The component will be responsible for rendering the content between the logo and the cancel button and styled as per the designs in Figma.
  • The submit button should be “Continue” instead of “Done” as per the AC.
  • The SetupForm of other modules (Optimize) can be taken as example.
  • To get the module description, query the core/modules data store via the getModule selector, passing idea-hub as the module slug and then accessing the description property of the result.
  • Get the value of the tosAccepted setting via the getTosAccepted selector of the module’s data store.
  • The Checkbox component is used to render the checkbox with the label as per the designs in Figma.
    • The value prop should be 1.
    • The checked prop should be dependent of the tosAccepted value.
    • Upon change, the setTosAccepted action of the module’s data store should be dispatched with the checked state of the checkbox.
  • The Continue button should be disabled if tosAccepted is false.
• Create assets/sass/components/idea-hub/_googlesitekit-idea-hub-setup.scss which will contain all the styles for above components, namely:
  • The notice found in SetupForm (“Idea Hub is only available in the US for now”).

Storybook coverage

• Add Storybook coverage for the two components under assets/js/modules/idea-hub/components/setup/Setup.stories.js
• Use Modules/Idea Hub/Setup/SetupForm as the title

Test Coverage

• No tests to be added.

Visual Regression Changes

• N/A

QA Brief

Already done

• Enable the ideaHubModule feature flag.
• You should see the Idea Hub CTA widget on the main Site Kit dashboard.
• Click the ‘set up’ button, and the setup form should be rendered.
• Verify that the submit button is disabled unless the checkbox is checked.
• Checking the checkbox and hitting the submit button should connect Idea Hub and return you to the Site Kit dashboard.
• Verify that the components match the Figma design (there is a Story as well).

Follow-up

• Activate the Idea Hub module and verify that you can complete the module setup as expected.

Changelog entry

• Add Idea Hub setup UI.

[marrrmarrr]

I like the updated first clause, I’d just replace the “should” with a different modal verb – we can’t really tell them what to do (: So, combining the two, we have: Idea Hub suggests what you can write about next, based on searches that haven’t been answered yet

[felixarntz]

@johnPhillips @wpdarren @Pratheep-lab Following up here on my end: Points 1., 3., and 4. are good to go for now as is.

Only point 2. should be re-examined. I haven’t been able to replicate it, for me the checkbox is disabled initially. I wonder whether it is because somehow the setting value still persisted from before?

Moving back to QA to double-check on point 2.