Merge branch 'master' into 'fix-btn-alignment'fix-btn-alignment

# Conflicts:
#   app/views/projects/merge_requests/_nav_btns.html.haml

16 files changed, 177 insertions, 137 deletions

diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js
index 1c379e9bb67..7ac9dcd1112 100644
--- a/app/assets/javascripts/gpg_badges.js
+++ b/app/assets/javascripts/gpg_badges.js
@@ -1,12 +1,14 @@
 export default class GpgBadges {
   static fetch() {
+    const badges = $('.js-loading-gpg-badge');
     const form = $('.commits-search-form');
 
+    badges.html('<i class="fa fa-spinner fa-spin"></i>');
+
     $.get({
       url: form.data('signatures-path'),
       data: form.serialize(),
     }).done((response) => {
-      const badges = $('.js-loading-gpg-badge');
       response.signatures.forEach((signature) => {
         badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
       });
diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
deleted file mode 100644
index c827b7402dc..00000000000
--- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Vue from 'vue';
-import Cookies from 'js-cookie';
-import Translate from '../../vue_shared/translate';
-import illustrationSvg from '../icons/intro_illustration.svg';
-
-Vue.use(Translate);
-
-const cookieKey = 'pipeline_schedules_callout_dismissed';
-
-export default {
-  name: 'PipelineSchedulesCallout',
-  data() {
-    return {
-      docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
-      illustrationSvg,
-      calloutDismissed: Cookies.get(cookieKey) === 'true',
-    };
-  },
-  methods: {
-    dismissCallout() {
-      this.calloutDismissed = true;
-      Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
-    },
-  },
-  template: `
-    <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
-      <div class="bordered-box landing content-block">
-        <button
-          id="dismiss-callout-btn"
-          class="btn btn-default close"
-          @click="dismissCallout">
-          <i class="fa fa-times"></i>
-        </button>
-        <div class="svg-container" v-html="illustrationSvg"></div>
-        <div class="user-callout-copy">
-          <h4>{{ __('Scheduling Pipelines') }}</h4>
-          <p>
-              {{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }}
-          </p>
-          <p> {{ __('Learn more in the') }}
-            <a
-              :href="docsUrl"
-              target="_blank"
-              rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period -->
-          </p>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue
new file mode 100644
index 00000000000..6e0bc2d697a
--- /dev/null
+++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue
@@ -0,0 +1,59 @@
+<script>
+  import Vue from 'vue';
+  import Cookies from 'js-cookie';
+  import Translate from '../../vue_shared/translate';
+  import illustrationSvg from '../icons/intro_illustration.svg';
+
+  Vue.use(Translate);
+
+  const cookieKey = 'pipeline_schedules_callout_dismissed';
+
+  export default {
+    name: 'PipelineSchedulesCallout',
+    data() {
+      return {
+        docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
+        calloutDismissed: Cookies.get(cookieKey) === 'true',
+      };
+    },
+    methods: {
+      dismissCallout() {
+        this.calloutDismissed = true;
+        Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
+      },
+    },
+    created() {
+      this.illustrationSvg = illustrationSvg;
+    },
+  };
+</script>
+<template>
+  <div
+    v-if="!calloutDismissed"
+    class="pipeline-schedules-user-callout user-callout">
+    <div class="bordered-box landing content-block">
+      <button
+        id="dismiss-callout-btn"
+        class="btn btn-default close"
+        @click="dismissCallout">
+        <i
+          aria-hidden="true"
+          class="fa fa-times">
+        </i>
+      </button>
+      <div class="svg-container" v-html="illustrationSvg"></div>
+      <div class="user-callout-copy">
+        <h4>{{ __('Scheduling Pipelines') }}</h4>
+        <p>
+            {{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }}
+        </p>
+        <p> {{ __('Learn more in the') }}
+          <a
+            :href="docsUrl"
+            target="_blank"
+            rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period -->
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
index 6584549ad06..a6c945e22b0 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
+import PipelineSchedulesCallout from './components/pipeline_schedules_callout.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#pipeline-schedules-callout',
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index 2944689a5a7..7695b04db74 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -48,6 +48,27 @@
         return `${this.job.name} - ${this.job.status.label}`;
       },
     },
+
+    methods: {
+      /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+      stopDropdownClickPropagation() {
+        $(this.$el.querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
+          .on('click', (e) => {
+            e.stopPropagation();
+          });
+      },
+    },
+
+    mounted() {
+      this.stopDropdownClickPropagation();
+    },
   };
 </script>
 <template>
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index e954fd38fc9..f47b6c33fa2 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -29,12 +29,10 @@ export default {
     editMode() {
       if (this.editMode) {
         $('.project-refs-form').addClass('disabled');
-        $('.fa-long-arrow-right').show();
-        $('.project-refs-target-form').show();
+        $('.js-tree-ref-target-holder').show();
       } else {
         $('.project-refs-form').removeClass('disabled');
-        $('.fa-long-arrow-right').hide();
-        $('.project-refs-target-form').hide();
+        $('.js-tree-ref-target-holder').hide();
       }
     },
   },
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index d8de022335b..2200754cbef 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -4,7 +4,7 @@ import Store from '../stores/repo_store';
 export default {
   data: () => Store,
   mounted() {
-    $(this.$el).find('.file-content').syntaxHighlight();
+    this.highlightFile();
   },
   computed: {
     html() {
@@ -12,10 +12,16 @@ export default {
     },
   },
 
+  methods: {
+    highlightFile() {
+      $(this.$el).find('.file-content').syntaxHighlight();
+    },
+  },
+
   watch: {
     html() {
       this.$nextTick(() => {
-        $(this.$el).find('.file-content').syntaxHighlight();
+        this.highlightFile();
       });
     },
   },
@@ -24,9 +30,23 @@ export default {
 
 <template>
 <div>
-  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
-  <div v-if="activeFile.render_error" class="vertical-center render-error">
-    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  <div
+    v-if="!activeFile.render_error"
+    v-html="activeFile.html">
+  </div>
+  <div
+    v-else-if="activeFile.tooLarge"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
+  </div>
+  <div
+    v-else
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
   </div>
 </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index d6d832efc49..0d4f8c6635e 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -33,32 +33,30 @@ const RepoSidebar = {
       });
     },
 
-    linkClicked(clickedFile) {
-      let url = '';
+    fileClicked(clickedFile) {
       let file = clickedFile;
-      if (typeof file === 'object') {
-        file.loading = true;
-        if (file.type === 'tree' && file.opened) {
-          file = Store.removeChildFilesOfTree(file);
-          file.loading = false;
-        } else {
-          url = file.url;
-          Service.url = url;
-          // I need to refactor this to do the `then` here.
-          // Not a callback. For now this is good enough.
-          // it works.
-          Helper.getContent(file, () => {
+
+      file.loading = true;
+      if (file.type === 'tree' && file.opened) {
+        file = Store.removeChildFilesOfTree(file);
+        file.loading = false;
+      } else {
+        Service.url = file.url;
+        Helper.getContent(file)
+          .then(() => {
             file.loading = false;
             Helper.scrollTabsRight();
-          });
-        }
-      } else if (typeof file === 'string') {
-        // go back
-        url = file;
-        Service.url = url;
-        Helper.getContent(null, () => Helper.scrollTabsRight());
+          })
+          .catch(Helper.loadingError);
       }
     },
+
+    goToPreviousDirectoryClicked(prevURL) {
+      Service.url = prevURL;
+      Helper.getContent(null)
+        .then(() => Helper.scrollTabsRight())
+        .catch(Helper.loadingError);
+    },
   },
 };
 
@@ -82,7 +80,7 @@ export default RepoSidebar;
       <repo-previous-directory
         v-if="isRoot"
         :prev-url="prevURL"
-        @linkclicked="linkClicked(prevURL)"/>
+        @linkclicked="goToPreviousDirectoryClicked(prevURL)"/>
       <repo-loading-file
         v-for="n in 5"
         :key="n"
@@ -94,7 +92,7 @@ export default RepoSidebar;
         :key="file.id"
         :file="file"
         :is-mini="isMini"
-        @linkclicked="linkClicked(file)"
+        @linkclicked="fileClicked(file)"
         :is-tree="isTree"
         :has-files="!!files.length"
         :active-file="activeFile"/>
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 712d64c236f..fc66a8ea953 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -10,6 +10,12 @@ const RepoTab = {
   },
 
   computed: {
+    closeLabel() {
+      if (this.tab.changed) {
+        return `${this.tab.name} changed`;
+      }
+      return `Close ${this.tab.name}`;
+    },
     changedClass() {
       const tabChangedObj = {
         'fa-times': !this.tab.changed,
@@ -34,12 +40,24 @@ export default RepoTab;
 
 <template>
 <li>
-  <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
-    <i class="fa" :class="changedClass"></i>
+  <a
+    href="#0"
+    class="close"
+    @click.prevent="xClicked(tab)"
+    :aria-label="closeLabel">
+    <i
+      class="fa"
+      :class="changedClass"
+      aria-hidden="true">
+    </i>
   </a>
 
-  <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
-
-  <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
+  <a
+    href="#"
+    class="repo-tab"
+    :title="tab.url"
+    @click.prevent="tabClicked(tab)">
+    {{tab.name}}
+  </a>
 </li>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue
index 907a03e1601..bbd60d9d793 100644
--- a/app/assets/javascripts/repo/components/repo_tabs.vue
+++ b/app/assets/javascripts/repo/components/repo_tabs.vue
@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import Store from '../stores/repo_store';
 import RepoTab from './repo_tab.vue';
 import RepoMixin from '../mixins/repo_mixin';
@@ -14,29 +13,19 @@ const RepoTabs = {
   data: () => Store,
 
   methods: {
-    isOverflow() {
-      return this.$el.scrollWidth > this.$el.offsetWidth;
-    },
-
     xClicked(file) {
       Store.removeFromOpenedFiles(file);
     },
   },
-
-  watch: {
-    openedFiles() {
-      Vue.nextTick(() => {
-        this.tabsOverflow = this.isOverflow();
-      });
-    },
-  },
 };
 
 export default RepoTabs;
 </script>
 
 <template>
-<ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
+<ul
+  v-if="isMini"
+  id="tabs">
   <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked"/>
   <li class="tabs-divider" />
 </ul>
diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js
index 8ee2df5c879..c1a0e80f8f3 100644
--- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js
+++ b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js
@@ -10,7 +10,10 @@ function repoEditorLoader() {
       Store.monaco = monaco;
       Store.monacoLoading = false;
       resolve(RepoEditor);
-    }, reject);
+    }, () => {
+      Store.monacoLoading = false;
+      reject();
+    });
   });
 }
 
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index fee98c12592..17aaa0e1584 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -33,12 +33,16 @@ const RepoHelper = {
   ? window.performance
   : Date,
 
+  getFileExtension(fileName) {
+    return fileName.split('.').pop();
+  },
+
   getBranch() {
     return $('button.dropdown-menu-toggle').attr('data-ref');
   },
 
   getLanguageIDForFile(file, langs) {
-    const ext = file.name.split('.').pop();
+    const ext = RepoHelper.getFileExtension(file.name);
     const foundLang = RepoHelper.findLanguage(ext, langs);
 
     return foundLang ? foundLang.id : 'plaintext';
@@ -135,21 +139,19 @@ const RepoHelper = {
     return isRoot;
   },
 
-  getContent(treeOrFile, cb) {
+  getContent(treeOrFile) {
     let file = treeOrFile;
     // const loadingData = RepoHelper.setLoading(true);
     return Service.getContent()
     .then((response) => {
       const data = response.data;
       // RepoHelper.setLoading(false, loadingData);
-      if (cb) cb();
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
         Store.binary = data.binary;
 
         if (data.binary) {
-          Store.binaryMimeType = data.mime_type;
           // file might be undefined
           RepoHelper.setBinaryDataAsBase64(data);
           Store.setViewToPreview();
@@ -188,9 +190,8 @@ const RepoHelper = {
   setFile(data, file) {
     const newFile = data;
 
-    newFile.url = file.url || location.pathname;
     newFile.url = file.url;
-    if (newFile.render_error === 'too_large') {
+    if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') {
       newFile.tooLarge = true;
     }
     newFile.newContent = '';
@@ -199,10 +200,6 @@ const RepoHelper = {
     Store.setActiveFiles(newFile);
   },
 
-  toFA(icon) {
-    return `fa-${icon}`;
-  },
-
   serializeBlob(blob) {
     const simpleBlob = RepoHelper.serializeRepoEntity('blob', blob);
     simpleBlob.lastCommitMessage = blob.last_commit.message;
@@ -226,7 +223,7 @@ const RepoHelper = {
       type,
       name,
       url,
-      icon: RepoHelper.toFA(icon),
+      icon: `fa-${icon}`,
       level: 0,
       loading: false,
     };
@@ -244,7 +241,7 @@ const RepoHelper = {
     setTimeout(() => {
       const tabs = document.getElementById('tabs');
       if (!tabs) return;
-      tabs.scrollLeft = 12000;
+      tabs.scrollLeft = tabs.scrollWidth;
     }, 200);
   },
 
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 67c03680fca..3e37da1726e 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -7,8 +7,7 @@ import RepoEditButton from './components/repo_edit_button.vue';
 import Translate from '../vue_shared/translate';
 
 function initDropdowns() {
-  $('.project-refs-target-form').hide();
-  $('.fa-long-arrow-right').hide();
+  $('.js-tree-ref-target-holder').hide();
 }
 
 function addEventsForNonVueEls() {
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index 8fba928e456..17578f3bbf3 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -2,6 +2,7 @@
 import axios from 'axios';
 import Store from '../stores/repo_store';
 import Api from '../../api';
+import Helper from '../helpers/repo_helper';
 
 const RepoService = {
   url: '',
@@ -22,6 +23,7 @@ const RepoService = {
 
   getRaw(url) {
     return axios.get(url, {
+      // Stop Axios from parsing a JSON file into a JS object
       transformResponse: [res => res],
     });
   },
@@ -36,7 +38,7 @@ const RepoService = {
   },
 
   urlIsRichBlob(url = this.url) {
-    const extension = url.split('.').pop();
+    const extension = Helper.getFileExtension(url);
 
     return this.richExtensionRegExp.test(extension);
   },
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 06ca391ed0c..bb605540aad 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -3,13 +3,10 @@ import Helper from '../helpers/repo_helper';
 import Service from '../services/repo_service';
 
 const RepoStore = {
-  ideEl: {},
   monaco: {},
   monacoLoading: false,
   monacoInstance: {},
   service: '',
-  editor: '',
-  sidebar: '',
   editMode: false,
   isTree: false,
   isRoot: false,
@@ -17,19 +14,10 @@ const RepoStore = {
   projectId: '',
   projectName: '',
   projectUrl: '',
-  trees: [],
-  blobs: [],
-  submodules: [],
   blobRaw: '',
-  blobRendered: '',
   currentBlobView: 'repo-preview',
   openedFiles: [],
-  tabSize: 100,
-  defaultTabSize: 100,
-  minTabSize: 30,
-  tabsOverflow: 41,
   submitCommitsLoading: false,
-  binaryLoaded: false,
   dialog: {
     open: false,
     title: '',
@@ -45,9 +33,6 @@ const RepoStore = {
   currentBranch: '',
   targetBranch: 'new-branch',
   commitMessage: '',
-  binaryMimeType: '',
-  // scroll bar space for windows
-  scrollWidth: 0,
   binaryTypes: {
     png: false,
     md: false,
@@ -58,7 +43,6 @@ const RepoStore = {
     tree: false,
     blob: false,
   },
-  readOnly: true,
 
   resetBinaryTypes() {
     Object.keys(RepoStore.binaryTypes).forEach((key) => {
@@ -96,7 +80,6 @@ const RepoStore = {
 
     if (file.binary) {
       RepoStore.blobRaw = file.base64;
-      RepoStore.binaryMimeType = file.mime_type;
     } else if (file.newContent || file.plain) {
       RepoStore.blobRaw = file.newContent || file.plain;
     } else {
@@ -238,4 +221,5 @@ const RepoStore = {
     return RepoStore.currentBlobView === 'repo-preview';
   },
 };
+
 export default RepoStore;
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 422c02c7b7e..cfacba09fad 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -71,7 +71,7 @@ export default {
       />
       <div v-if="!isConfidential" class="no-value confidential-value">
         <i class="fa fa-eye is-not-confidential"></i>
-        None
+        This issue is not confidential
       </div>
       <div v-else class="value confidential-value hide-collapsed">
         <i aria-hidden="true" data-hidden="true" class="fa fa-eye-slash is-confidential"></i>