Refactor the architecture of the integration_form component
At the moment, the single component app/assets/javascripts/integrations/edit/components/integration_form.vue
is responsible for rendering all the integrations which are refactored to Vue. This, even though, might look convenient, unnecessarily overloads this component since different integrations might have slightly different logic in rendering, conditions, etc.
For example, even thought the form is supposed to be universal, we explicitly load Jira-specific components in it. We also have a special logic in the context of Extend Slack app to support notifications (&8670 - closed). These two points alone make me think that we should refactor the app so that we have re-usable component as a basis, but easily extendable for each particular integration should there be need.
Availability & Testing
We currently do have feature tests around every checking every integration in the integrations settings form, however we should aim to make sure saving the integration continues to send the same data to the backend. We have e2e tests around some integrations (Jira, Jenkins, Pipeline status emails), but are missing a bit of coverage in this space.
Suggestions to consider:
- Before the refactor, consider writing frontend component tests that populate the form for each integration and intercept the outgoing requests to the backend.
- Using these outgoing requests as the source of truth, use the component tests to assert that the requests after the refactor are the same.