Utilize convertObjectPropsToCamelCase util for delete validation blob

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

• Close this issue

The following discussion from !66585 (merged) should be addressed:

• @sming-gitlab started a discussion: (+4 comments)

Suggestion: WDYT of making use of the convertObjectPropsToCamelCase util and then creating a computed prop that returns the converted object.

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