Update Idea Hub widget footer based on selected tab

Feature Description

In #3773 we moved the Idea Hub widget footer into the widget itself (rather than in the “body” of the component).

This brought the widget to be more consistent with others but left a few things to be addressed.

Other related points were raised in the bug bash which can be addressed here as well.

---

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

Acceptance criteria

The following changes all apply to the Idea Hub dashboard widget

• The “Updated every 2-3 days” text in the footer should only be displayed on the tab for new ideas as these are the only ideas that are refreshed from the API
• The footer should not be displayed for zero-idea states – except on the new ideas tab (as the previously mentioned message is still relevant)
• Pagination in the footer should not be shown for zero-idea states (only applies to new ideas per above)
• The height of the widget should not change based on the selected tab (#3723)
• The “This may take 24 hours” text should be removed in all cases
• The following changes/exceptions only apply to the zero total ideas state (no new/saved/draft ideas)
  • The widget tabs should not be displayed at all (as is currently)
  • The widget footer should not be displayed at all

Implementation Brief

• Once https://github.com/google/site-kit-wp/issues/3832 has been merged.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js,
  • Check if selectors have been resolved and there are no errors for each of the following selectors: getNewIdeas, getSavedIdeas and getDraftPostIdeas via the hasFinishedResolution and getErrorForSelector selectors.
  • WrappedFooter should be a variable, with null as an initial value instead of a function. The reason being we are passing a function as the value to the Footer prop of Widget which implies the prop is not null. Thus, even if the function returns null, an empty footer will be displayed.
  • Depending on the value of activeTab,
    • if it’s new-ideas, check if there are any errors for the getNewIdeas selector and if it has finished resolving, to assign WrapperFooter the Footer component, passing on the activeTab as value to the tab prop and footerText prop set to the translatable Updated every 2-3 days string.
    • if it’s saved-ideas or draft-ideas, check if there are any errors for the getSavedIdeas or getDraftPostIdeas selectors and if they have finished resolving to assign WrapperFooter the Footer component.
  • In all instances where the Footer component is used in the above bullet points, the tab prop should be the activeTab value.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• N/A

QA Brief

• Go to the dashboard and verify the following:
  • Updated every 2-3 days is shown only for the new ideas tab
  • the footer should be hidden for saved ideas and draft ideas tabs if there is no ideas for those lists
  • the This may take 24 hours message is deleted when there are no ideas in the new ideas list
• Double check that requirements from AC are met in the Idea Hub widget.

Changelog entry

• Show correct footer information based on Idea Hub tab.

[aaemnnosttv]

@wpdarren @tofumatt – it works correctly on tabs that are in a non-zero state, the height is not preserved in the zero state. I did not test all tabs in each state but I’m guessing this is the problem.

https://user-images.githubusercontent.com/1621608/130648456-6a1b68d6-8a21-49ba-a3eb-67949a32df6f.mp4

The problem is that the footer isn’t being rendered at all in this case (as intended visually) but this affects the height since there is one footer for the widget and 3 separate content areas.

I’ll see what I can do here.

[eugene-manuilov]

Yes, i can take care of it in this ticket.