Skip to content

Use a button and a post request instead of UJS links - part 1 - Environments

Filipa Lacerda requested to merge 20450-fix-ujs-actions into master

What does this MR do?

Part 1 of a set of MRs to remove UJS from Vue components:

1 - Uses a button and a post request instead of UJS links in Environments:

  • Stop environment Button
  • Manual Actions Dropdown
  • Rollback/Retry Button

Architecture decisions:

Provide the service to each button component:

  • ⬆ Allows managing the state of each component in it's own scope: show a loading while request is being made, hide it when it finishes;
  • ⬆ Allows reusing the same function;
  • ⬆ Use the same instance of the Service class instead of creating a new one for each rendered component - which can be a LOT;
  • ⬇ Need to provide the service as a prop.

Use event emitter to tell the parent component to refresh the table without refreshing the page:

  • ⬆ Child component just needs to emit an event
  • ⬆ Child component doesn't need to be provided a function as a prop to update the parent table.

Decisions match Vue's documentation: Data goes down, events go up. https://vuejs.org/v2/guide/components.html#Composing-Components https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

2 - Updates require statements to import ones.

3 - Improves HTML a11y by adding aria-hidden and title attributes to buttons with only icons

Screenshots

When the user clicks in a button in the environments table, instead of being redirect to another page, should see a loading spinner while the request is being made: button

Does this MR meet the acceptance criteria?

What are the relevant issue numbers?

#20450 (closed) #28535 (closed) /cc @dimitrieh

Merge request reports