Move Idea Hub widget footer into Widget.Footer prop

Feature Description

In #3723, we made the Idea Hub widget’s height consistent across all of the tabs. As a result, the layout of the widget looks somewhat off compared to other widgets because the footer content is not flush against the bottom of the widget.

The “updated every 2-3 days” line/component should be moved into a new Footer component that is rendered as a prop to Widget.Footer. It should still change based on the selected tab as it does today, but rendered in a different place.

---

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

Acceptance criteria

• The Idea Hub DashboardIdeasWidget should be updated to render footer content for the selected tab into its Widget.Footer prop rather than as part of the tab-specific tab content component.
• The passing of the prop should be conditional based on the selected tab – e.g. for no new/saved/draft ideas, the zero state should look the same as today (with no footer)

Implementation Brief

• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Pagination.js
  • Remove the existing total, page, ideasPerPage, handlePrev and handleNext props.
  • Add a new prop tab, string having new-ideas as default value.
  • Query the core/ui data store via the getValue selector and passing a key which contains the tab value (for e.g idea-hub-page-${ tab }) to get the current page the user is on. The value should be assigned to the page constant. If the selector returns undefined, page should be 1, meaning we are on the first page by default.
  • Get the total for each tabs by querying the MODULES_IDEA_HUB data store via the getNewIdeas, getSavedIdeas and getDraftPostIdeas selectors.
  • Then based on the value of the tab, assign the result of above selector call to the total variable.
  • Add 2 new functions, handlePrev and handleNext using the same logic as in NewIdeas but instead of using setPage, use the setValue action from core/ui, passing the unique key, for e.g idea-hub-page-${ tab }, as key and the appropriate value.
  • Replace ideasPerPage references by the IDEA_HUB_IDEAS_PER_PAGE constant.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Footer.js,
  • Remove the existing totalIdeas, page, handlePrev and handleNext props.
  • Add a new prop tab, string having new-ideas as default value.
  • Pass on the tab prop only to the Pagination component.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/NewIdeas.js,
  • Remove the page state variable. Instead grab the page for the new ideas tab by quering the core/ui data store via the getValue selector and passing the appropriate key, for e.g idea-hub-page-new-ideas
  • Remove the handlePrev and handleNext functions.
  • Remove the Footer component.
  • Repeat steps above for the SavedIdeas and DraftIdeas components.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js,
  • Add the Footer prop to the Widget component, having the Footer component as value and passing activeTab as value for the tab prop.
• Update the styles for .googlesitekit-idea-hub__footer to remove the padding and box-shadow.
• Tweak the styles for .googlesitekit-widget--ideaHubIdeas .googlesitekit-widget__footer to that the borders of the footer align with adjacent widgets.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• N/A

QA Brief

• Check the Idea Hub widget on the Site Kit Dashboard
• Tabs should work as before. Specifically
  • Changing tabs
  • Pagination on all tabs
  • Totals

Changelog entry

• Update the Idea Hub widget to display its footer in the Widget.Footer prop.

[tofumatt]

The CSS solution is clever, but the React one seems straightforward as well so I’d rather we do it that way 🙂 . If it were more complicated and this was a shipping bug I’d see the value in the quick-fix solution, but I don’t think either are the case here so let’s do it “properly”. I’ll admit though: that’s a slick CSS-only solution, nice one @asvinb 👍🏻

Let’s go with the React version. IB ✅

(I’ve commented out the CSS-only version as to not confuse anyone else looking at the issue, but it’s still in the issue text as a comment if needed for reference.)

[wpdarren]

QA Update: Pass ✅

• Confirmed that the Tabs should work as before, i.e. changing tabs.
• Pagination works but now only appears on tabs with ideas.
• The totals display as expected.

Notes: there is an issue that the footer still displays on tabs with no ideas. This will be picked up by another ticket. Also note that I was unable to test while connected elasticpress.io for the new API because no ideas were appearing.