Add relevancy thumbs feedback to the panel #13337

Feature Description

The hub is only as good as the features it puts in front of a user, and the one group of people who can say whether a feature is worth their while are the users looking at it. The detail panel (#13330) is where they consider that question, so its footer is where we ask it: a thumbs up / thumbs down against the feature they're reading about.

This issue adds that control, and the follow-up a thumbs-down asks for. A vote is recorded against the user for that specific feature, so the answers say which features are landing and which aren't — one of the PRD's success measures.

Site Kit already has this thumbs control, so it's reused. It needs three additions to work here: a thumbs-up confirmed by a toast, following Site Kit's existing toast behaviour; a thumbs-down that asks why straight away, in a small "Help us improve" menu of reasons — the same menu What's new?'s dismiss control will offer (#13357), with the reasons that suit this question; and remembering a vote already given, so that a user who returns to a feature's panel sees the answer they gave rather than being asked again.

The detail panel shell (#13330) already leaves the footer space for this control.

For reference, see the Feedback: dismiss reasons & relevancy section in the design doc, and the relevancy feedback and feedback confirmation designs in Figma.

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

Acceptance criteria

• The detail panel's footer (Build the feature detail panel shell (FeatureDetailPanel) #13330) carries a thumbs-up and a thumbs-down control, alongside the prompt "Is this service relevant to you? Let us know to help us improve our tailored suggestions". It appears on every feature's panel, opened from either tab.
• Clicking either thumb records that vote for that feature against the user, through Site Kit's survey pipeline, as vote:feature_relevancy_{slug}:up or vote:feature_relevancy_{slug}:down — where {slug} identifies the feature.
• A thumbs-up is confirmed with a toast reading "Thanks for the feedback!", shown in the panel directly above the control, as the design places it.
• That toast is the same black toast Site Goals uses for its confirmations, as shown in the feedback
  confirmation design. It has a close button that dismisses it, and it closes on its own after 4 seconds.
• A thumbs-down asks why straight away: a menu headed "Help us improve" opens in the panel above the control, offering four reasons:
  • It's not relevant to my site goals
  • I'm already using another tool
  • Setup seems complex
  • Something else
• Choosing a reason records it for that feature against the user, through the same survey pipeline, as:
  • It's not relevant to my site goals — feedback:feature_relevancy_{slug}:not_relevant
  • I'm already using another tool — feedback:feature_relevancy_{slug}:already_using
  • Setup seems complex — feedback:feature_relevancy_{slug}:too_complicated
  • Something else — feedback:feature_relevancy_{slug}:something_else
• Choosing a reason, clicking outside the menu, or pressing Escape closes the menu.
• The menu can be navigated and used with the keyboard alone, and its options are announced to screen readers.
• The thumb the user chose is shown as chosen, and their vote is remembered: reopening that feature's panel — including in a later session — shows the panel with that thumb already selected.
• Site Kit's existing thumbs control is reused, and everywhere it's already used its appearance and behaviour are unchanged.
• The control matches the Figma design.

Implementation Brief

• In assets/js/googlesitekit/datastore/feature-discovery/constants.ts
  • Add a SOMETHING_ELSE = 'something_else' to FEATURE_RELEVANCY_REASONS (Add the dismiss-with-feedback menu #13357).
• In assets/js/components/surveys/ThumbsSurveyTrigger.tsx
  • Add props:
    • hasToast?: boolean
    • voteDirection?: VoteDirection
    • feedbackOptions?: { [VOTE_DIRECTION_DOWN]?: FeedbackOption[], [VOTE_DIRECTION_UP]?: FeedbackOption[] } (Add the dismiss-with-feedback menu #13357).
    • onSelectFeedback?: ( value: string ) => {}
  • Pass the voteDirection as the default value for selectedDirection.
  • Track showToast as state, defaulting to false.
  • Track whether the feedback menu is open as state, defaulting to false.
  • Define a callback for closing the feedback menu that sets the menu state to closed.
  • Define a callback for selecting feedback that sets the menu state to closed and calls any onSelectFeedback callback.
  • In handleVote:
    • Set showToast to true if the vote direction is VOTE_DIRECTION_UP.
    • Call setAnchorElement() with null on an upvote if hasToast.
    • Set the feedback menu to open if the vote direction is VOTE_DIRECTION_DOWN.
  • Render a <ToastNotice /> if hasToast and showToast:
    • Pass an onDismiss() callback that sets showToast to false.
    • Pass 'Thanks for the feedback!' as the title
  • Render <FeedbackMenu /> if feedbackOptions is passed with values options by the selected vote direction:
    • id – An ID generated with useInstanceId().
    • isOpen – The feedback menu open state.
    • onClose – The feedback menu close callback.
    • onSelect – The feedback select callback.
    • options – Pass through feedbackOptions.
• In assets/js/components/feature-discovery/detail/FeatureDetailPanel/PanelFooter.tsx
  • Define a list of feedbackOptions as an array of FeedbackMenuOption for each FEATURE_RELEVANCY_REASONS shown in the design.
    • id – The FEATURE_RELEVANCY_REASONS value.
    • label – The corresponding label from the design.
    • triggerID – Pass the feature slug and relevancy reason to the trigger ID builder (Add the dismiss-with-feedback menu #13357).
  • Add <ThumbsSurveyTrigger /> in the reserved space, passing:
    • hasToast
    • voteID – feature_relevancy_${slug}.
    • voteDirection:
      • VOTE_DIRECTION_UP if isItemDismissed( `feature-discovery-relevancy-${slug}-up` )
      • VOTE_DIRECTION_DOWN if isItemDismissed( `feature-discovery-relevancy-${slug}-down` )
    • onSelectFeedback – A callback that receives the selected feedback option value and calls triggerSurvey() with it.
    • onVote – A callback that calls dismissItem() with the item slug for the selected vote, and removeDismissedItems() with the slug of the opposite vote.
    • feedbackOptions – { [VOTE_DIRECTION_DOWN]: feedbackOptions }
  • Use <P size={ SIZE_SMALL } /> for the "Is this service relevant?" label.
• In assets/sass/components/surveys/_googlesitekit-thumbs-survey-trigger.scss
  • Style the toast notice to be positioned absolute above and left-aligned to the controls.
• In assets/sass/components/feature-discovery/_googlesitekit-feature-details-panel.scss
  • Style the layout of the relevancy controls and their label and adjust the positioning of the feedback menu if necessary.

Test Coverage

• Add VRT stories for ThumbsSurveyTrigger with the toast notices and feedback menus shown.
• Add unit test coverage to ThumbsSurveyTrigger for passing a default vote and the behaviour of the toast and feedback menu on downvote.
• Add unit test coverage to FeatureDetailPanel for setting and persisting the selected vote.

QA Brief

• Enable the featureDiscoveryHub feature flag in tester settings.
• Navigate to Site Kit > Add Features.
• Click Read More on a feature. In the panel that appears thumbs up and down controls should be visible.
• Clicking thumbs up should show a Thanks for the feedback! popover.
• Clicking thumbs down should show the Help us improve feedback menu. Selecting a feedback option should close the menu and show the Thanks for the feedback! popover.
• When the feedback menu is open, clicking outside it should close the feedback menu while persisting the downvote.
• Clicking outside the feature details panel entirely should close the entire side sheet.
• Pressing escape while focus is on the thumb controls or feedback menu while the feedback menu or confirmation are open closes the feedback menu and confirmation message without closing the entire sheet.
• Pressing escape while neither the feedback menu or confirmation message are visible closes the sheet.
• Votes should persist when refreshing the page, navigating away from the features hub and back, and switching between features, so that the previously selected vote is highlighted.
• Viewing the features hub as a different user should show that user's votes or lack of votes, and not votes by other users.
• In the Network tab of the browser's developer tools, clicking a thumb should result in 3 requests:
  • A request to survey-trigger with vote:feature_relevancy_ads:(up|down)
  • A request to dismiss-item with feature-discovery-relevancy-ads-(up|down) where the direction is the selected vote. This persists the vote.
  • A request to dismissed-items with feature-discovery-relevancy-ads-(up|down) where the direction is the opposite vote. This removes any previous vote for the other direction.
  • Selecting a feedback option on downvote should send an additional request to survey-trigger with feedback:feature_relevancy_ads:(reason).
  • Clicking outside the feedback menu to close it without selecting an option should not send a request.

Changelog entry

• Add relevancy feedback controls to the Feature Discovery Hub's feature detail panel.