Bacport FE changes from Closing Epics

Backport of js and vue files from closing epics

app/assets/javascripts/issue_show/components/app.vue

@@ -293,6 +293,7 @@
         :show-delete-button="showDeleteButton"
         :can-attach-file="canAttachFile"
         :enable-autocomplete="enableAutocomplete"
+        :issuable-type="issuableType"
       />
 
       <recaptcha-modal

app/assets/javascripts/issue_show/components/edit_actions.vue

 <script>
+  import { __, sprintf } from '~/locale';
   import updateMixin from '../mixins/update';
   import eventHub from '../event_hub';
 
+  const issuableTypes = {
+    issue: __('Issue'),
+    epic: __('Epic'),
+  };
+
   export default {
     mixins: [updateMixin],
     props: {
@@ -18,6 +24,10 @@
         required: false,
         default: true,
       },
+      issuableType: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -37,8 +47,11 @@
         eventHub.$emit('close.form');
       },
       deleteIssuable() {
+        const confirmMessage = sprintf(__('%{issuableType} will be removed! Are you sure?'), {
+          issuableType: issuableTypes[this.issuableType],
+        });
         // eslint-disable-next-line no-alert
-        if (window.confirm('Issue will be removed! Are you sure?')) {
+        if (window.confirm(confirmMessage)) {
           this.deleteLoading = true;
 
           eventHub.$emit('delete.issuable');

app/assets/javascripts/issue_show/components/form.vue

@@ -27,6 +27,10 @@
         required: false,
         default: () => [],
       },
+      issuableType: {
+        type: String,
+        required: true,
+      },
       markdownPreviewPath: {
         type: String,
         required: true,
@@ -110,6 +114,7 @@
       :form-state="formState"
       :can-destroy="canDestroy"
       :show-delete-button="showDeleteButton"
+      :issuable-type="issuableType"
     />
   </form>
 </template>

locale/gitlab.pot

@@ -107,6 +107,9 @@ msgstr ""
 msgid "%{group_docs_link_start}Groups%{group_docs_link_end} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects."
 msgstr ""
 
+msgid "%{issuableType} will be removed! Are you sure?"
+msgstr ""
+
 msgid "%{loadingIcon} Started"
 msgstr ""
 
@@ -2553,6 +2556,9 @@ msgstr ""
 msgid "Environments|You don't have any environments right now."
 msgstr ""
 
+msgid "Epic"
+msgstr ""
+
 msgid "Error"
 msgstr ""
 
@@ -3293,6 +3299,9 @@ msgstr ""
 msgid "Invite"
 msgstr ""
 
+msgid "Issue"
+msgstr ""
+
 msgid "Issue Boards"
 msgstr ""
 

spec/javascripts/issue_show/components/edit_actions_spec.js

@@ -21,6 +21,7 @@ describe('Edit Actions components', () => {
       propsData: {
         canDestroy: true,
         formState: store.formState,
+        issuableType: 'issue',
       },
     }).$mount();
 

spec/javascripts/issue_show/components/form_spec.js

@@ -15,6 +15,7 @@ describe('Inline edit form component', () => {
           description: 'a',
           lockedWarningVisible: false,
         },
+        issuableType: 'issue',
         markdownPreviewPath: '/',
         markdownDocsPath: '/',
         projectPath: '/',