[Pipelines UI] Add Icon that shows promotion progress

[joshri]

Followup to #3428

• Determine criteria for the stages of the icon
• Ideally icon can be used in both cases seen here:

[LappleApple]

@joshri Do we need to discuss?

[joshri]

We need to determine the criteria for the different stages of progress for promotion so I can know what to look for

[LappleApple]

Hi @mmoulian and @joshri: These buttons should operate as either/or, yes/no, succeeded/not-succeeded-yet, instead of as markers tracking progress. So the behavior for now should be that the button remains light green until the promotion has succeeded, then switches dark green to indicate that the promotion has succeeded. Does that help?

[mmoulian]

If needed, I can prototype this behavior in Figma

[LappleApple]

Please do @mmoulian

[mmoulian]

@LappleApple and @joshri This is an initial prototype showing the behavior of the buttons and icon, maybe a little naive. It should be reviewed with someone with technical knowledge...

Actions:
-The user clicks the button to Approve promotion.
-While the promotion is taking place, we show a progress indicator (flashing circle animation)
-When the promotion ends, the progress icon will appear in the circle and the text "Pull request merge"

-The user clicks the button to Approve promotion in the STG column
-While the promotion is taking place, we show a progress indicator (flashing circle animation)
-When the promotion is notified, the progress icon appears in the circle and the text "Notification sent"

-While the promotion is completed, we show a progress indicator (flashing circle animation)
-When the promotion is complete, a full circle icon and the text "Promotion completed" will appear

Pipeline.behavior.mov

[LappleApple]

@mmoulian Heya, thanks for working on this. However, it should behave exactly as I wrote earlier. The button should either be light green (promotion not successful yet) or green (promotion is successful).

[mmoulian]

@LappleApple Sorry, I'm a little confused about it. I understand that in design we have two areas of interaction.

1. to do the action (button)
2. to receive feedback.
   Typically, a button only has three states (enable, disable, active).
   So I guess the second area (feedback) has to change.

Then in the feedback area:
-The circle should be light green and put the text "the promotion has not yet been successful."
-Or green and put the text “successful promotion”
It is right?

Does it happen in the first development column?

What happens in the Stg column?

[LappleApple]

Hi @mmoulian and @joshri: spent some time this afternoon digging into this one. Here's the Miro mockup with requested changes:

• Pipelines status tab: https://miro.com/app/board/uXjVMFiEhxc=/?moveToWidget=3458764566496135169&cot=14
• One minor related change on the new create/edit pipelines view: https://miro.com/app/board/uXjVMFiEhxc=/?moveToWidget=3458764566500249683&cot=14

As the mockup shows, behavior in the middle area between envs gets a bit busier now. We want to enable a few different prompts around the green promotion button, based on whether there's manual or automated approvals or whether there's a PR or notification strategy. I can explain in person if necessary.

[mmoulian]

@LappleApple and @joshri. I did a couple of prototype tests trying to follow Laurie's notes.
It is an Automated Pull Request pipeline. I worked the first step between Dev and Stg.

1. With a progress indicator (circular animation)
2. Without progress indicator.
   @LappleApple Let me know if I'm on the right track

AUTOMATED.WITH.PROGRESS.INDICATOR.mov

AUTOMATED.PR.mov

[LappleApple]

@mmoulian I like the first one because it suggests "things are happening right now"

[mmoulian]

@LappleApple @joshri I made an example of manual approval behavior...

pipeline.behavior.-.manual.approvals.mov

[mmoulian]

In the event that we have an error in the PR... the message disappears after a few seconds and the user can start again... wdyt?

Pipeline.behavior-.manual.fail.mov

[LappleApple]

@mmoulian Button progress is on the right track. :)

Next for the manual approval option, we'll want (repeating what's in the Miro, but moving over here):

• to see the PR number (hyperlinked) so users can know that the PR exists and go directly to it. It would look like this: "PR CREATED #123."
• A prompt UNSUCCESSFUL—TO RETRY by the button for situations like an inability to reach GitHub or a notification that doesn’t go through.

[mmoulian]

@LappleApple Please, check these movies:

-Manual approval: The PR is created (shows the link)
-Manual approval: PR failed (a message shows the error)
-Manual approval: The PR is not successful and is retried (not sure if it should be manual in this case)

Manual.Approval.-.Created.mov

Manual.Approval.-.Fail.mov

Manual.Approval.-.Retrying.mov

[LappleApple]

@mmoulian Thanks much -- all good except one nit. We need the hyphen in the prompt, so that it says:
UNSUCCESSFUL—TO RETRY

If that messes up the design, then this could work:
UNSUCCESSFUL: TO RETRY

[mmoulian]

Fixed it

Manual.Approval.UNSUCCESSFUL-.TO.RETRY.v2.mov

[LappleApple]

Blocked by weaveworks/pipeline-controller#197