Refactor mirroring settings into Vue

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

• BE weight:
• FE weight: 6

---

Problem to solve

The UI that we have to add/update mirroring settings is clunky and frustrating as you can't edit the options once you've setup a mirror.

Further details

Benefits

The experience of the current implementation is awful by forcing users to remove the mirror in order to edit an option.

Refactoring this to vue will make the configuration of this much easier to update and see.

Proposal

From @iamphill investigation on https://gitlab.com/gitlab-org/gitlab-ee/issues/10247:

Obvious components are the form & the table/table items.

We could split up each form field to a new component, but apart from the making the main form component template smaller I don't think there is much benefit there. So we could discuss this if the form component gets out of hand.

The table itself is a few components:

• Table
  • Table row
  • Action buttons
    • Edit button
    • Delete button
    • Update button

The action buttons themselves can just trigger some Vuex actions:

• Edit button simply sets the form data with an ID for that row.
• Delete button sends delete request & removes from the array, relatively straight forward.
• Update button
  • Start request to force an update
  • Show spinner whilst updating
  • Show the result, whether it be an error or success.

Ideally we should do the update button without reloading the page & the status could get polled to check if it has succeeded or not. Currently the user needs to refresh the page to check the status. The error also gets displayed in a weird way, a tooltip:

So some UX to improve this would be amazing!

These 2 main components sort of need to talk to each other so that we can allow for editing. With Vuex, this should be relatively straight forward. The only difference between the 2 is that when we are in edit mode, we could just store an ID (or whatever the backend uses to represent each item) of the mirror we are editing.

I kind of want to say lets convert this into GraphQL, apart from moving as much as we can to GraphQL I don't see much benefit to this. I also can't see a public API available, so if we need to do backend work for this, is it easier to do in GraphQL? 🤷

We also need to take into account the differences between EE & CE. If I remember correctly, EE allows for pull mirror as well as push whereas CE only allows for push mirroring. There may be some UI differences, but data wise I think they are the same.

Plan on how to tackle this

I think its a given that this must be done behind a feature flag.

With the feature flag, we can easily do this in super small merge requests, 1 per component.

If we go Vuex, which I think we should as it might be the easiest route, then again we do the store in small merge requests.

What does success look like, and how can we measure that?

Easier to add and edit settings of mirrors.

For measuring I'd say additions of mirrors should go down, as "fake removals/additions" would decrease.

Links / references