Add basic attempt at Resync verisons button

[ericholscher]

This is a bit hacky but works for me locally. Could use some UI/UX feedback to make it work better, I mostly just copied what was being used in other places.

Fixes https://github.com/readthedocs/ext-theme/issues/65

[ericholscher]

I've updated this to put it in the activate a new version page. It basically just spins for a second, and then goes back to the same button. I removed the reload since the UI here is using an API-driven addition workflow, so it should update automatically without a reload.

Not sure the best pattern here -- would be nice actually to do this inline and have a way to do a notification when the sync is finished with results, but this seems like a reasonable first step?

[agjohnson]

I would reserve that placeholder space for onboarding content. All other views use this space to point the user to more information in our docs/etc, and the button feels quite prominent for what it's function is -- manually resyncing is great to have in our UI but it is still an outlier in UX.

I'd instead reuse the existing pattern from the repository listing I pointed out above

https://github.com/readthedocs/ext-theme/blob/8239442a87d657aa0ac82aff9de92a73e556c838/readthedocsext/theme/templates/projects/partials/project_create_automatic.html#L101-L112

You'd use something like:

<div class="ui small bottom attached center aligned message">
  {% trans "Are your repository branches out of date?" %}
  <readthedocs-button-sync-versions>
    <button class="ui mini black basic compact right aligned button"> 
      {% trans "Resync repository" %}
    </button>
  </readthedocs-button-sync-versions>
</div>

[ericholscher]

Something like this:

[agjohnson]

That's pretty close, but looks like you added the element inside the .ui.placeholder.segment still. I'd check out that example from above, it shows the structure of the .ui.bottom.attached.message, but also the preceding elements:

https://github.com/readthedocs/ext-theme/blob/8239442a87d657aa0ac82aff9de92a73e556c838/readthedocsext/theme/templates/projects/partials/project_create_automatic.html#L101-L112

In that, the .ui.bottom.attached.message is sibling to the outer .ui.basic.segment > .ui.placeholder.segment, but the .ui.basic.segment is only for hiding this placeholder block anyways.

[ericholscher]

This class structure is super finicky... I don't feel like I'm really learning anything about why it should actually work this way, and it's just futzing with stuff without any real direction. Is there any context for this structure?

[agjohnson]

The example I've linked to had the structure we want to replicate and copy. It uses two divs, summarized as:

<div class="ui top attached segment"></div>
<div class="ui bottom attached segment"></div>

This gives two attached segments -- these have no spacing between them and they have a border separating them.

You can read about this here:

https://fomantic-ui.com/elements/segment.html#attached

Your last attempt was, summarized:

<div class="ui top attached segment">
  <div class="ui placeholder segment">
    <div class="ui bottom attached segment">
    </div>
  </div>
</div>

This will render the bottom attached segment inside the placeholder segment, which has its own separate padding and border. The two attached segments need to be sibling elements instead.

Placeholder segments are described here:

https://fomantic-ui.com/elements/segment.html#placeholder-segment

[agjohnson]

What was here was close, but needed e9a17d8

With that, it renders correctly, and matches the repository listing UI:

[ericholscher]

The example I've linked to had the structure we want to replicate and copy. It uses two divs, summarized as:

<div class="ui top attached segment"></div>
<div class="ui bottom attached segment"></div>

This gives two attached segments -- these have no spacing between them and they have a border separating them.

You can read about this here:

https://fomantic-ui.com/elements/segment.html#attached

Your last attempt was, summarized:

<div class="ui top attached segment">
  <div class="ui placeholder segment">
    <div class="ui bottom attached segment">
    </div>
  </div>
</div>

This will render the bottom attached segment inside the placeholder segment, which has its own separate padding and border. The two attached segments need to be sibling elements instead.

Placeholder segments are described here:

https://fomantic-ui.com/elements/segment.html#placeholder-segment

Nice -- we should drop this in the frontend docs somewhere, it's useful context 💯

[humitos]

I think we should add some kind of feedback or message to the user once you press the button. It shows the spinner and it stops immediately. I'd say that we should probably put a time for 2 or 3 seconds, and add a message saying "Synced, your version should appear in the list now" or similar.