Add latest changes from gitlab-org/gitlab@master

5 files changed, 34 insertions, 11 deletions

diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index eb720f5380b..54d1ee18545 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -14,6 +14,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
     imageUrl: {
       type: String,
       required: true,
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index df74eb2c2f7..2212bfec116 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
@@ -16,6 +16,8 @@ export default {
     Badge,
     LoadingButton,
     GlLoadingIcon,
+    GlFormInput,
+    GlFormGroup,
   },
   props: {
     isEditing: {
@@ -64,6 +66,18 @@ export default {
     renderedLinkUrl() {
       return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : '';
     },
+    name: {
+      get() {
+        return this.badge ? this.badge.name : '';
+      },
+      set(name) {
+        const badge = this.badge || createEmptyBadge();
+        this.updateBadgeInForm({
+          ...badge,
+          name,
+        });
+      },
+    },
     imageUrl: {
       get() {
         return this.badge ? this.badge.imageUrl : '';
@@ -154,6 +168,10 @@ export default {
     novalidate
     @submit.prevent.stop="onSubmit"
   >
+    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
+      <gl-form-input id="badge-name" v-model="name" />
+    </gl-form-group>
+
     <div class="form-group">
       <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
       <p v-html="helpText"></p>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index cad5611c8c5..35d735a2cfd 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -43,13 +43,14 @@ export default {
     <badge
       :image-url="badge.renderedImageUrl"
       :link-url="badge.renderedLinkUrl"
-      class="table-section section-40"
+      class="table-section section-30"
     />
-    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
-    <div class="table-section section-15">
+    <div class="table-section section-30">
+      <label class="label-bold str-truncated mb-0">{{ badge.name }}</label>
       <span class="badge badge-pill">{{ badgeKindText }}</span>
     </div>
-    <div class="table-section section-15 table-button-footer">
+    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
+    <div class="table-section section-10 table-button-footer">
       <div v-if="canEditBadge" class="table-action-buttons">
         <button
           :disabled="badge.isDeleting"
diff --git a/app/assets/javascripts/badges/empty_badge.js b/app/assets/javascripts/badges/empty_badge.js
index 49a9b5e1be8..527f233bb33 100644
--- a/app/assets/javascripts/badges/empty_badge.js
+++ b/app/assets/javascripts/badges/empty_badge.js
@@ -1,4 +1,5 @@
 export default () => ({
+  name: '',
   imageUrl: '',
   isDeleting: false,
   linkUrl: '',
diff --git a/app/assets/javascripts/badges/store/actions.js b/app/assets/javascripts/badges/store/actions.js
index 5542278b3e0..806c2423e7e 100644
--- a/app/assets/javascripts/badges/store/actions.js
+++ b/app/assets/javascripts/badges/store/actions.js
@@ -1,13 +1,9 @@
 import axios from '~/lib/utils/axios_utils';
 import types from './mutation_types';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export const transformBackendBadge = badge => ({
-  id: badge.id,
-  imageUrl: badge.image_url,
-  kind: badge.kind,
-  linkUrl: badge.link_url,
-  renderedImageUrl: badge.rendered_image_url,
-  renderedLinkUrl: badge.rendered_link_url,
+  ...convertObjectPropsToCamelCase(badge, true),
   isDeleting: false,
 });
 
@@ -27,6 +23,7 @@ export default {
     dispatch('requestNewBadge');
     return axios
       .post(endpoint, {
+        name: newBadge.name,
         image_url: newBadge.imageUrl,
         link_url: newBadge.linkUrl,
       })
@@ -141,6 +138,7 @@ export default {
     dispatch('requestUpdatedBadge');
     return axios
       .put(endpoint, {
+        name: badge.name,
         image_url: badge.imageUrl,
         link_url: badge.linkUrl,
       })