Sync facility data - Sync and Register buttons UX issues

[pcenov]

Observed behavior

Currently there's a mini scrollbar displayed in the Sync facility section of the Data tab and when I click the Options button I see a Sync button. If I've previously registered the facility in KDP then there's a Register button displayed to the right of it.

Expected behavior

Previously both Register and Sync buttons were displayed and the Register button would get disabled once the facility had been registered successfully. So the current expected behavior should be further clarified.

Steps to reproduce the issue

1. Install the following build: https://buildkite.com/learningequality/kolibri-windows/builds/3136#308b9948-f6b3-466a-a661-162ed2f97d63
2. Go to Faclity>Data and scroll down to the 'Sync facility data' section

Screenshots

Usage Details

Windows 10, Ubuntu - Chrome

[pcenov]

@radinamatic

[radinamatic]

There is no scrollbar in Firefox on Linux, but the there is this weird interplay between buttons...

Why is the second button hidden at all in this situation? There is enough space for both 😕
cc @jtamiace

[radinamatic]

@marcellamaki I'd say it's impacting the UX, but it's not broken per-se, so I've put P1. Not sure if we can address for 0.15.1.

[marcellamaki]

@radinamatic -- so this was an intentional change I made in #8753, per feedback from @jamalex, that came out of the syncing work and was updated in #7672. But, it's veryyy possible I either didn't accurately implement what he was thinking, or that there could be some design improvements (@jtamiace). I think tagging a change on 0.15.2 would be better, just so we have time get that design feedback of how to make it better 😊

[jtamiace]

Changes to make based on this Slack thread:

Locations in the app:

1. Facility > Data tab
2. Device > Facilities tab

Behaviors:

• The Sync button should always show as a raised secondary button
• The Register action should always be hidden in an options dropdown menu that appears below the icon button, not beside it
• On clicking Sync, they should have the option to pick between KDP and their local network.
  • If they select KDP, and the facility is not yet registered according to its local state, present the modal to register with a project token.
  • From the registration modal, they can enter the project token, skip, or cancel.
  • If they skip registration, it still allows them to sync the facility to KDP