Add create epic form

This is a standalone form to create Epic with all the available options.

- Missing labels and tests

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

+<script>
+import { GlButton, GlForm, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import createEpic from '../queries/createEpic.mutation.graphql';
+
+export default {
+  components: {
+    GlButton,
+    GlForm,
+    GlFormCheckbox,
+    GlFormInput,
+    MarkdownField,
+  },
+  props: {
+    groupPath: {
+      type: String,
+      required: true,
+    },
+    groupEpicsPath: {
+      type: String,
+      required: true,
+    },
+    previewMarkdownPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      labelIds: [],
+      confidential: false,
+      description: '',
+      title: '',
+      loading: false,
+    };
+  },
+  methods: {
+    save() {
+      this.loading = true;
+
+      this.$apollo
+        .mutate({
+          mutation: createEpic,
+          variables: {
+            input: {
+              addLabelIds: this.labels,
+              groupPath: this.groupPath,
+              title: this.title,
+              description: this.description,
+              confidential: this.confidential,
+            },
+          },
+        })
+        .then(({ data }) => {
+          const { errors, epic } = data.createEpic;
+          if (errors?.length > 0) {
+            createFlash(errors[0]);
+            return;
+          }
+
+          visitUrl(epic.webUrl);
+        })
+        .catch(() => {
+          createFlash(__('Unable to save epic. Please try again'));
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3 class="page-title">{{ __('New Epic') }}</h3>
+    <hr />
+    <gl-form class="common-note-form">
+      <div class="form-group row">
+        <div class="col-form-label col-sm-2">
+          <label for="epic-title">{{ __('Title') }}</label>
+        </div>
+        <div class="col-sm-8">
+          <gl-form-input
+            id="epic-title"
+            v-model="title"
+            :placeholder="__('Title')"
+            autocomplete="off"
+            autofocus
+          />
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <div class="col-form-label col-sm-2">
+          <label for="epic-description">{{ __('Description') }}</label>
+        </div>
+        <div class="col-sm-10">
+          <markdown-field
+            :markdown-preview-path="previewMarkdownPath"
+            :enable-autocomplete="true"
+            label="Description"
+            :textarea-value="description"
+            markdown-docs-path="/help/user/markdown"
+            quick-actions-docs-path="/help/user/project/quick_actions"
+            :add-spacing-classes="false"
+            class="md-area"
+          >
+            <template #textarea>
+              <textarea
+                id="epic-description"
+                v-model="description"
+                class="note-textarea js-gfm-input js-autosize markdown-area"
+                dir="auto"
+                data-supports-quick-actions="true"
+                :placeholder="__('Write a comment or drag your files here…')"
+                :aria-label="__('Description')"
+              >
+              </textarea>
+            </template>
+          </markdown-field>
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <div class="col-sm-10 offset-sm-2">
+          <gl-form-checkbox v-model="confidential">{{
+            __(
+              'This epic and any containing child epics are confidential and should only be visible to team members with at least Reporter access.',
+            )
+          }}</gl-form-checkbox>
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <div class="col-form-label col-sm-2">
+          <label for="epic-title">{{ __('Labels') }}</label>
+        </div>
+        <div class="col-sm-8"></div>
+      </div>
+    </gl-form>
+
+    <div class="form-actions gl-display-flex">
+      <gl-button :loading="loading" data-testid="save-epic" variant="success" @click="save">
+        {{ __('Create epic') }}
+      </gl-button>
+      <gl-button class="ml-auto" data-testid="cancel-epic" :href="groupEpicsPath">{{
+        __('Cancel')
+      }}</gl-button>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/epic/new_epic_bundle.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import EpicForm from './components/epic_form.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export function initEpicForm() {
+  const el = document.querySelector('.js-epic-new');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createElement) {
+      return createElement(EpicForm, {
+        props: {
+          groupPath: el.dataset.groupFullPath,
+          groupEpicsPath: el.dataset.groupEpicsPath,
+          markdownPreviewPath: el.dataset.markdownPreviewPath,
+          markdownDocsPath: el.dataset.markdownDocsPath,
+        },
+      });
+    },
+  });
+}
+
+export default {};

ee/app/assets/javascripts/epic/queries/createEpic.mutation.graphql

+mutation createEpic($input: CreateEpicInput!) {
+  createEpic(input: $input) {
+    epic {
+      webUrl
+    }
+    errors
+  }
+}

ee/app/assets/javascripts/pages/groups/epics/new/index.js

+import { initEpicForm } from 'ee/epic/new_epic_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initEpicForm();
+});

ee/app/controllers/groups/epics_controller.rb

@@ -10,10 +10,10 @@ class Groups::EpicsController < Groups::ApplicationController
   include DescriptionDiffActions
 
   before_action :check_epics_available!
-  before_action :epic, except: [:index, :create, :bulk_update]
+  before_action :epic, except: [:index, :create, :new, :bulk_update]
   before_action :set_issuables_index, only: :index
   before_action :authorize_update_issuable!, only: :update
-  before_action :authorize_create_epic!, only: [:create]
+  before_action :authorize_create_epic!, only: [:create, :new]
   before_action :verify_group_bulk_edit_enabled!, only: [:bulk_update]
 
   before_action do
@@ -21,6 +21,8 @@ class Groups::EpicsController < Groups::ApplicationController
     push_frontend_feature_flag(:confidential_epics, @group, default_enabled: true)
   end
 
+  def new; end
+
   def index
     @epics = @issuables
 

ee/app/views/groups/epics/new.html.haml

+- add_to_breadcrumbs _("Epics"), group_epics_path(@group)
+- breadcrumb_title _("New")
+- page_title _("New epic")
+
+.js-epic-new{ data: { group_full_path: @group.full_path, group_epics_path: group_epics_path(@group), preview_markdown_path: preview_markdown_path(@group) } }

locale/gitlab.pot

@@ -2408,6 +2408,9 @@ msgstr ""
 msgid "An empty GitLab User field will add the FogBugz user's full name (e.g. \"By John Smith\") in the description of all issues and comments. It will also associate and/or assign these issues and comments with the project creator."
 msgstr ""
 
+msgid "An empty date will inherit from milestone dates"
+msgstr ""
+
 msgid "An error has occurred"
 msgstr ""
 
@@ -23908,6 +23911,9 @@ msgstr ""
 msgid "This epic already has the maximum number of child epics."
 msgstr ""
 
+msgid "This epic and any containing child epics are confidential and should only be visible to team members with at least Reporter access."
+msgstr ""
+
 msgid "This epic and its child elements will only be visible to team members with at minimum Reporter access."
 msgstr ""
 
@@ -25085,6 +25091,9 @@ msgstr ""
 msgid "Unable to resolve"
 msgstr ""
 
+msgid "Unable to save epic. Please try again"
+msgstr ""
+
 msgid "Unable to save iteration. Please try again"
 msgstr ""