Add support for querying epics with GraphQL

What does this MR do?

Allows one to query for epics using a Group GraphQL query.

Example

{
  group(fullPath: "h5bp") {
    id
    path
    fullPath
    epic(iid: 1) {
      id
      iid
      title
      path
      userPermissions {
        adminEpic
        createEpic
      }
      children {
        edges {
          node {
            id
            iid
            title
            state
            path
            reference(full: true)
            relationPath
            createdAt
            closedAt
            hasChildren
            hasIssues
            userPermissions {
              adminEpic
              createEpic
            }
            group {
              fullPath
            }
          }
        }
      }
      issues {
        edges {
          node {
            iid
            title
            closedAt
            state
            createdAt
            confidential
            webUrl
            dueDate
            weight
            path
            reference
            relationPath
            assignees {
              edges {
                node {
                  webUrl
                  name
                  username
                  avatarUrl
                }
              }
            }
            milestone {
              title
              startDate
              dueDate
            }
          }
        }
      }
    }
  }
}

This MR requires (and is based on) https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/13246. It has been extracted from https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/10999

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation created/updated or follow-up review issue created
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Performance and testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Closes #10795 (closed)

app/assets/javascripts/ide/components/ide.vue

 <script>
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import NewModal from './new_dropdown/modal.vue';
@@ -22,6 +23,8 @@ export default {
     FindFile,
     ErrorMessage,
     CommitEditorHeader,
+    GlButton,
+    GlLoadingIcon,
   },
   props: {
     rightPaneComponent: {
@@ -47,13 +50,15 @@ export default {
       'someUncommittedChanges',
       'isCommitModeActive',
       'allBlobs',
+      'emptyRepo',
+      'currentTree',
     ]),
   },
   mounted() {
     window.onbeforeunload = e => this.onBeforeUnload(e);
   },
   methods: {
-    ...mapActions(['toggleFileFinder']),
+    ...mapActions(['toggleFileFinder', 'openNewEntryModal']),
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
@@ -98,17 +103,40 @@ export default {
           <repo-editor :file="activeFile" class="multi-file-edit-pane-content" />
         </template>
         <template v-else>
-          <div v-once class="ide-empty-state">
+          <div class="ide-empty-state">
             <div class="row js-empty-state">
               <div class="col-12">
                 <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
               </div>
               <div class="col-12">
                 <div class="text-content text-center">
-                  <h4>Welcome to the GitLab IDE</h4>
-                  <p>
-                    Select a file from the left sidebar to begin editing. Afterwards, you'll be able
-                    to commit your changes.
+                  <h4>
+                    {{ __('Make and review changes in the browser with the Web IDE') }}
+                  </h4>
+                  <template v-if="emptyRepo">
+                    <p>
+                      {{
+                        __(
+                          "Create a new file as there are no files yet. Afterwards, you'll be able to commit your changes.",
+                        )
+                      }}
+                    </p>
+                    <gl-button
+                      variant="success"
+                      :title="__('New file')"
+                      :aria-label="__('New file')"
+                      @click="openNewEntryModal({ type: 'blob' })"
+                    >
+                      {{ __('New file') }}
+                    </gl-button>
+                  </template>
+                  <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
+                  <p v-else>
+                    {{
+                      __(
+                        "Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes.",
+                      )
+                    }}
                   </p>
                 </div>
               </div>