Utilize `convertObjectPropsToCamelCase` util for delete validation blob
<!--IssueSummary start-->
<details>
<summary>
Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards.
</summary>
- [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=337558)
</details>
<!--IssueSummary end-->
The following discussion from !66585 should be addressed:
- [ ] @sming-gitlab started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/66585#note_635905438): (+4 comments)
> **Suggestion:** WDYT of making use of the `convertObjectPropsToCamelCase` util and then creating a computed prop that returns the converted object.
```diff
diff --git a/app/assets/javascripts/repository/components/delete_blob_modal.vue b/app/assets/javascripts/repository/components/delete_blob_modal.vue
index 394f1e7995a..b274e0dd478 100644
--- a/app/assets/javascripts/repository/components/delete_blob_modal.vue
+++ b/app/assets/javascripts/repository/components/delete_blob_modal.vue
@@ -1,5 +1,6 @@
<script>
import { GlModal, GlFormGroup, GlFormInput, GlFormTextarea, GlToggle, GlForm } from '@gitlab/ui';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import csrf from '~/lib/utils/csrf';
import { __ } from '~/locale';
import validation from '~/vue_shared/directives/validation';
@@ -111,14 +112,15 @@ export default {
],
};
},
- /* eslint-disable dot-notation */
+ formFields() {
+ return convertObjectPropsToCamelCase(this.form.fields);
+ },
showCreateNewMrToggle() {
- return this.canPushCode && this.form.fields['branch_name'].value !== this.originalBranch;
+ return this.canPushCode && this.formFields.branchName.value !== this.originalBranch;
},
formCompleted() {
- return this.form.fields['commit_message'].value && this.form.fields['branch_name'].value;
+ return this.formFields.commitMessage.value && this.formFields.branchName.value;
},
- /* eslint-enable dot-notation */
},
methods: {
submitForm(e) {
@@ -163,13 +165,13 @@ export default {
<gl-form-group
:label="$options.i18n.COMMIT_LABEL"
label-for="commit_message"
- :invalid-feedback="form.fields['commit_message'].feedback"
+ :invalid-feedback="formFields.commitMessage.feedback"
>
<gl-form-textarea
- v-model="form.fields['commit_message'].value"
+ v-model="formFields.commitMessage.value"
v-validation:[form.showValidation]
name="commit_message"
- :state="form.fields['commit_message'].state"
+ :state="formFields.commitMessage.state"
:disabled="loading"
required
/>
@@ -178,12 +180,12 @@ export default {
v-if="canPushCode"
:label="$options.i18n.TARGET_BRANCH_LABEL"
label-for="branch_name"
- :invalid-feedback="form.fields['branch_name'].feedback"
+ :invalid-feedback="formFields.branchName.feedback"
>
<gl-form-input
- v-model="form.fields['branch_name'].value"
+ v-model="formFields.branchName.value"
v-validation:[form.showValidation]
- :state="form.fields['branch_name'].state"
+ :state="formFields.branchName.state"
:disabled="loading"
name="branch_name"
required
```
issue