Auto-focus "New epic" text box, fix "Add epic" placeholder

Closes #37005, #37028

ee/app/assets/javascripts/epic/components/epic_create.vue

@@ -4,12 +4,16 @@ import { GlButton } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
 export default {
   components: {
     GlButton,
     LoadingButton,
   },
+  directives: {
+    autofocusonshow,
+  },
   props: {
     alignRight: {
       type: Boolean,
@@ -38,27 +42,20 @@ export default {
   },
   methods: {
     ...mapActions(['setEpicCreateTitle', 'createEpic']),
-    focusInput() {
-      this.$nextTick(() => this.$refs.epicTitleInput.focus());
-    },
   },
 };
 </script>
 
 <template>
   <div class="dropdown epic-create-dropdown">
-    <gl-button
-      variant="success"
-      class="qa-new-epic-button"
-      data-toggle="dropdown"
-      @click="focusInput"
-    >
+    <gl-button variant="success" class="qa-new-epic-button" data-toggle="dropdown">
       {{ __('New epic') }}
     </gl-button>
     <div :class="{ 'dropdown-menu-right': alignRight }" class="dropdown-menu">
       <input
         ref="epicTitleInput"
         v-model="epicTitle"
+        v-autofocusonshow
         :disabled="epicCreateInProgress"
         :placeholder="__('Title')"
         type="text"

ee/app/assets/javascripts/related_issues/constants.js

@@ -9,7 +9,7 @@ export const issuableTypesMap = {
 export const autoCompleteTextMap = {
   true: {
     [issuableTypesMap.ISSUE]: __(' or <#issue id>'),
-    [issuableTypesMap.EPIC]: __(' or <#epic id>'),
+    [issuableTypesMap.EPIC]: __(' or <&epic id>'),
     [issuableTypesMap.MERGE_REQUEST]: __(' or <!merge request id>'),
   },
   false: {

ee/changelogs/unreleased/37028-epic-placeholder-text.yml

+---
+title: Auto-focus title text box when creating new epics
+merge_request: 21516
+author: Jan Beckmann
+type: fixed

locale/gitlab.pot

@@ -53,10 +53,10 @@ msgstr ""
 msgid " or <!merge request id>"
 msgstr ""
 
-msgid " or <#epic id>"
+msgid " or <#issue id>"
 msgstr ""
 
-msgid " or <#issue id>"
+msgid " or <&epic id>"
 msgstr ""
 
 msgid " or references (e.g. path/to/project!merge_request_id)"