Refactor CI variable modal
What does this MR do?
This MR refactors app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue to not mutate Vuex state directly with v-model. But instead set up two-way computed properties to dispatch actions to mutate the state via a Vuex mutation.
This MR also changes how varibleBeingEdited state acts, instead of storing the variable being edited, we now will store just a boolean. The variable being edited will be stored under the variable Vuex state. Which simplifies the logic here.
Since some of this state is shared between components I decided to take the Vuex route of mutating state with form handling. Code gets way out of hand if we try to pass data via props and make copies of that data. Or is we use the route of binding value and listening for changes on @change or @input. This route felt the best for readability and maintainability.
Closes: #214638 (closed)
Screenshots
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team