Standardize the sync/suspend/edit buttons across WGE

[lasomethingsomething]

Objective

To provide a consistent user experience around the sync/suspend/resume buttons featured across various UI views.

User Stories

These apply to all views listed directly below except where noted.

• As WGE user, I would like to receive brief information about what happens to my reconciliation after I click the "suspend" button, so that I can find out if there are any issues.
• As a WGE user, I would like to see an "edit" button instead of a pencil icon whenever I've created my resource with a template, so that I know exactly when I can use that button.
• As a user of WGE's Applications Details view, I would like to be able to sync without my source with the click of a button, so that I can sync small changes to my application without syncing the entire source.

Location of the Change/Work

These are the views that will require the update/standardization:

• Applications > Details; needs "Edit" button
• Sources > Details; needs "Edit" button
• GitOpsSets > Details; needs "Edit" button
• Secrets > Details
• TF Objects > Details
• Pipelines > Details
• Matching WeGO OSS views where relevant

Acceptance Criteria

• Related explanatory text/tooltips is 2-5 words max.
• The "suspended" notification includes succinct information about any impact that "suspending" has had on my reconciliation, within the related healthcheck (first of three healthchecks in that view).
• The "sync" button on the Applications > Details view has a functioning counterpart, "sync without source."
• The "sync without source" button at the Applications > Details view does not obscure/cover up the healthcheck underneath, should it continue to appear below the "sync" button.
• The "sync without source" button at the Applications > Details view should not hang, but rather disappear with another click on the button (should it continue to appear below the "sync" button).
• The "edit" button should not appear on the view unless the user's resource was created by a template.
• The icon is enabled when the resource was created by a template, and the user is able to edit the template.

Design

We would like to adopt the Terraform Objects view presentation in the Views listed under "Location of the Change/Work", which features a sync+pause+play button layout:

The Terraform objects view also features tooltips that a user can access by hovering over the buttons. We want to keep those.

Notes

• The sync default for Applications will sync the source with all the underlying applications.
• The "sync without source" button syncs only your Helm Release or your Kustomization; it's not the usual case scenario. Use case: when making a change on artifact repository (like a change in my manifest).
• from @joshri: "We use a module called react-toastify in OSS for sync notifications but it is not fully hooked up in EE, resulting in no notifications for sync OR suspend."
• from @joshri: need to balance tooltips with clunkiness. "Some of these explanations might get a little bulky for the UI - if out docs were perfect maybe some of these just open a new tab to the relevant docs page."

[lasomethingsomething]

Also from @joshri: "I'd also like to get design feedback/approval on what those look like right now as I don't believe it's ever been cleared...as in - is this how we want to handle feedback? Are there other places we should be using these?" cc @mmoulian @alfaris, let's chat about this.

[jpellizzari]

Figma Design for Applications page (for refernce): https://www.figma.com/file/IVHnM9iyeFWpd11evtY8ux/Weave-GitOps?type=design&node-id=18344-211140&mode=design&t=sf9PoFsMTZg5Sdi8-0

Design System Buttons: https://www.figma.com/file/gnodK9xtoOahXBqa6ONsA5/WW-Design-System?type=design&node-id=2907-8713&mode=design&t=cD55EQcJ9jrFfqNy-0

[jpellizzari]

From triage: the behavior of the Sync button should be changed to default to "Sync without Source", the optionally "Sync with Source" via the dropdown.

@LappleApple Could you confirm ^^?

[lasomethingsomething]

@jpellizzari Answer is no, "sync without source" is the less typical scenario so we would not want that to be the default.

[opudrovs]

@LappleApple in this case, could you please elaborate what should be changed in the current app to implement user story #3 and meet related acceptance criteria?

User story:

As a user of WGE's Applications Details view, I would like to be able to sync without my source with the click of a button, so that I can sync small changes to my application without syncing the entire source.

Acceptance criteria:

• The "sync" button on the Applications > Details view has a functioning counterpart, "sync without source."
• The "sync without source" button at the Applications > Details view does not obscure/cover up the healthcheck underneath, should it continue to appear below the "sync" button.
• The "sync without source" button at the Applications > Details view should not hang, but rather disappear with another click on the button (should it continue to appear below the "sync" button).

Currently, on the Application detail pages we have a Sync button with a dropdown list which contains the only item Sync without Source:

So, how should the UI be changed for the user story and acceptance criteria? The Sync button already has the functioning counterpart, "sync without source", just as a dropdown list item. Or would you like to turn this dropdown item into a separate button next to the Sync button (I mean at the same level as the sync button, between the Sync button and Suspend/Resume buttons) and remove the dropdown completely?

Or should we only move healthcheck lower to prevent it from being obscured with the Sync without Source dropdown item (but it will either cause a gap between the heathcheck indicators and buttons or will force developers to use overcomplicated styling to make the healthcheck indicators jump down on dropdown opening, not sure it's feasible with our current UI setup). If yes, could you please provide a design for this? I mean we can render a gap element conditionally, but it will jump in an ugly way up and down. The current UI is not set up for smooth custom animations AFAIK.

The following item should not pose a problem:

• The "sync without source" button at the Applications > Details view should not hang, but rather disappear with another click on the button (should it continue to appear below the "sync" button).

[opudrovs]

@joshri WDYT, will it be easy or hard to implement healthcheck moving up and down nicely when the Sync without Source dropdown is open? Have we used similar animations in any other place? Mayeb we can change CSS position for the dropdown list to make it push other elements down. But I don't think it would look nice and according to UI conventions.

[lasomethingsomething]

@opudrovs I have a chat set up with Manuela and we'll produce a specific design.

[opudrovs]

@LappleApple great, thank you!

[mmoulian]

@LappleApple @jpellizzari @opudrovs I've thought about this idea of incorporating check buttons to choose what type of sync the user wants.

Sync.-with-without.mov