Add "New epic" button to epic pages

This adds a button that redirects to the new epic creation form.

It also updates the epic_header.vue specs to be able to provide feature
flags to the component.

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

@@ -7,6 +7,7 @@ import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import epicUtils from '../utils/epic_utils';
 import { statusType } from '../constants';
@@ -23,6 +24,7 @@ export default {
     GitlabTeamMemberBadge: () =>
       import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState([
       'sidebarCollapsed',
@@ -32,6 +34,7 @@ export default {
       'created',
       'canUpdate',
       'confidential',
+      'newEpicWebUrl',
     ]),
     ...mapGetters(['isEpicOpen']),
     statusIcon() {
@@ -51,6 +54,11 @@ export default {
     actionButtonText() {
       return this.isEpicOpen ? __('Close epic') : __('Reopen epic');
     },
+    canCreate() {
+      const { canCreate } = this.$store.state;
+
+      return canCreate && this.glFeatures.createEpicForm;
+    },
   },
   mounted() {
     /**
@@ -108,13 +116,22 @@ export default {
         </strong>
       </div>
     </div>
-    <div v-if="canUpdate" class="detail-page-header-actions js-issuable-actions">
+    <div class="detail-page-header-actions js-issuable-actions">
       <gl-deprecated-button
+        v-if="canUpdate"
         :loading="epicStatusChangeInProgress"
         :class="actionButtonClass"
         @click="toggleEpicStatus(isEpicOpen)"
         >{{ actionButtonText }}</gl-deprecated-button
       >
+
+      <gl-deprecated-button
+        v-if="canCreate"
+        class="btn btn-grouped btn-success btn-inverted js-new-epic-button"
+        :href="newEpicWebUrl"
+      >
+        {{ __('New epic') }}
+      </gl-deprecated-button>
     </div>
     <gl-deprecated-button
       :aria-label="__('Toggle sidebar')"

ee/app/assets/javascripts/epic/store/state.js

@@ -14,8 +14,10 @@ export default () => ({
   epicsWebUrl: '',
   labelsWebUrl: '',
   markdownDocsPath: '',
+  newEpicWebUrl: '',
 
   // Flags
+  canCreate: false,
   canUpdate: false,
   canDestroy: false,
   canAdmin: false,

ee/app/controllers/groups/epics_controller.rb

@@ -19,6 +19,7 @@ class Groups::EpicsController < Groups::ApplicationController
   before_action do
     push_frontend_feature_flag(:vue_issuable_epic_sidebar, @group)
     push_frontend_feature_flag(:confidential_epics, @group, default_enabled: true)
+    push_frontend_feature_flag(:create_epic_form, @group)
   end
 
   def new; end

ee/app/presenters/epic_presenter.rb

@@ -44,7 +44,8 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated
   def initial_data
     {
       labels: epic.labels,
-      subscribed: subscribed?
+      subscribed: subscribed?,
+      canCreate: can?(current_user, :create_epic, epic)
     }
   end
 
@@ -78,7 +79,8 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated
       labels_path: group_labels_path(group, format: :json, only_group_labels: true, include_ancestor_groups: true),
       toggle_subscription_path: toggle_subscription_group_epic_path(group, epic),
       labels_web_url: group_labels_path(group),
-      epics_web_url: group_epics_path(group)
+      epics_web_url: group_epics_path(group),
+      new_epic_web_url: new_group_epic_path(group)
     }
 
     paths[:todo_delete_path] = dashboard_todo_path(epic_pending_todo) if epic_pending_todo.present?