Idea hub, loading indicator to show "Creating new draft"

Feature Description

This is in reference to the comment on this issue: https://github.com/google/site-kit-wp/issues/3357#issuecomment-841365269

Objective: To show a loading indicator when the user clicks the “Start a draft” button on the idea hub widget.

Proposed solution:

1. User clicks on the “Start a draft” button
2. An overlay appears on this idea row - (Grey area in the screenshot below)
3. Overlay shows a standard loading spinner or an illustration with these copies:

“Creating draft post for you”, then the copy changes to "Draft post created",

1. As a nice to have, the number on the “Drafts” tab does a subtle animation to show that it increased.

---

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

Acceptance criteria

• When creating an Idea Hub draft post via the widget, the current state of the progress should be indicated:
  • While the API request is happening, it should say “Creating draft” (in italic) instead of the three icons on the right - essentially the text should display in the same spot where it for ideas with a draft post has the “View draft” link.
  • Once the API request is completed, the idea should not immediately disappear from the current tab; instead the text above should change to “Draft created” for 2 seconds. After those 2 seconds, the whole idea item should disappear (since anyway its new place now is in the “Drafts” tab).

Implementation Brief

• Using assets/js/modules/idea-hub/datastore/draft-ideas.js,
  • Add a new action which removes an idea from the list of newIdeas and savedIdeas state variables.
  • Update reducerCallback to remove the code where newIdeas and savedIdeas are updated.
• Using assets/js/modules/idea-hub/datastore/constants.js,
  • Add 3 constants, ACTIVITY_IS_PROCESSING, ACTIVITY_CREATING_DRAFT, ACTIVITY_DRAFT_CREATED, each having the same values.
• Using assets/js/modules/idea-hub/datastore/idea-state.js,
  • Add activities to the initial state with an empty object as default value.
  • Add the setActivity action which has 2 parameters:
    • key: string which will be the idea name
    • value: string which will store the current activity of the idea, i.e whether a draft is being created or has been created.
  • The setActivity will add the key and value to the activities object.
  • Add the removeActivity action which as a single parameter:
    • key: string, which is the idea name.
  • removeActivity will remove the item with the specified key from the activities object.
  • Add the getActivity selector which will return the activity of an idea based on the key from the activities object.
  • The above implementation should be inspired by the core/ui data store.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js,
  • Update the handleCreate function to dispatch the setActivity action, with the idea name as key and the value set to ACTIVITY_CREATING_DRAFT. This should be done before createIdeaDraftPost is called.
  • After createIdeaDraftPost has been called,
    • call setActivity with the value set to ACTIVITY_DRAFT_CREATED and idea name as key.
    • After another 2 seconds, dispatch the removeActivity action and then the newly created action created as per the first bullets point of the IB should be called, to remove the idea from the list.
  • Get the activity of the idea via the getActivity selector passing the idea name as key. Based on the value returned by the selector,
    • Update the conditions to display the buttons in the googlesitekit-idea-hub__idea--actions container if getActivity is ACTIVITY_CREATING_DRAFT. If it’s the case, then the buttons are not rendered and the text as per the AC should be rendered, in italic and right aligned, similar to the “View Draft” text.
    • A small spinner should be prepended to the text when a draft is being created. The CircularProgress component, imported from @material-ui/core can be used. The size of the CircularProgress should be 10, with a margin right of 8px from the text.
    • Update the conditions to display the buttons in the googlesitekit-idea-hub__idea--actions container if getActivity is ACTIVITY_DRAFT_CREATED. If it’s the case, then the buttons are not rendered and the text as per the AC should be rendered when a draft has been created, in italic and right aligned, similar to the “View Draft” text.
    • Remove the isProcessing state variable and instead use the getActivity state variable and set the value to ACTIVITY_IS_PROCESSING where isProcessing was originall set to true. Where it was set to false, use removeActivity.
    • Update the disabled logic for buttons to check for when getActivity is ACTIVITY_IS_PROCESSING.

Test Coverage

• Tests to be added for the new actions and selectors.

Visual Regression Changes

• N/A

QA Brief

• See screenshot in AC. Click on button to start a draft for a few ideas
• Verify that animation happens as per AC

Changelog entry

• Add loading indicator to the Idea Hub widget when a new draft is being created

[eugene-manuilov]

@danielgent could you please create a follow-up PR to adjust styles for the loading text to display it without line breaks?

[wpdarren]

QA Update: ⚠️

@danielgent In the AC it doesn’t mention the loading icon which appears to the right hand side of the Creating draft text. The icon does shift the text a little further over to the left so doesn’t align with the Draft created text when that appears… Not sure if this icon should be there?

https://user-images.githubusercontent.com/73545194/125090645-dc12be00-e0cf-11eb-9efc-68f8e8ef3995.mp4