Add `headerTitle` prop for container header string

2 files changed, 23 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
index 4200d1e8473..34a07f33a23 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
@@ -1,5 +1,14 @@
 <script>
+import { __ } from '~/locale';
+
 export default {
+  props: {
+    headerTitle: {
+      type: String,
+      required: false,
+      default: () => __('Create new label'),
+    },
+  },
   created() {
     this.suggestedColors = gon.suggested_label_colors;
   },
@@ -21,7 +30,7 @@ export default {
         >
         </i>
       </button>
-      {{ __('Create new label') }}
+      {{ headerTitle }}
       <button
         type="button"
         class="dropdown-title-button dropdown-menu-close"
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
index f07aefb2f87..5cb4bb6fea6 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
@@ -6,10 +6,12 @@ import { mockSuggestedColors } from './mock_data';
 
 import mountComponent from '../../../../helpers/vue_mount_component_helper';
 
-const createComponent = () => {
+const createComponent = (headerTitle) => {
   const Component = Vue.extend(dropdownCreateLabelComponent);
 
-  return mountComponent(Component);
+  return mountComponent(Component, {
+    headerTitle,
+  });
 };
 
 describe('DropdownCreateLabelComponent', () => {
@@ -41,11 +43,19 @@ describe('DropdownCreateLabelComponent', () => {
       expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null);
     });
 
-    it('renders component header element', () => {
+    it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => {
       const headerEl = vm.$el.querySelector('.dropdown-title');
       expect(headerEl.innerText.trim()).toContain('Create new label');
     });
 
+    it('renders component header element with value of `headerTitle` prop', () => {
+      const headerTitle = 'Create project label';
+      const vmWithHeaderTitle = createComponent(headerTitle);
+      const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title');
+      expect(headerEl.innerText.trim()).toContain(headerTitle);
+      vmWithHeaderTitle.$destroy();
+    });
+
     it('renders `Close` button on component header', () => {
       const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
       expect(closeButtonEl).not.toBe(null);