Add latest changes from gitlab-org/gitlab@master

11 files changed, 75 insertions, 239 deletions

diff --git a/app/assets/javascripts/issuable_type_selector/components/info_popover.vue b/app/assets/javascripts/issuable_type_selector/components/info_popover.vue
new file mode 100644
index 00000000000..3a20ccba814
--- /dev/null
+++ b/app/assets/javascripts/issuable_type_selector/components/info_popover.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlIcon, GlPopover } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  i18n: {
+    issueTypes: __('Issue types'),
+    issue: __('Issue'),
+    incident: __('Incident'),
+    issueHelpText: __('For general work'),
+    incidentHelpText: __('For investigating IT service disruptions or outages'),
+  },
+  components: {
+    GlIcon,
+    GlPopover,
+  },
+};
+</script>
+
+<template>
+  <span id="popovercontainer">
+    <gl-icon id="issuable-type-info" name="question-o" class="gl-ml-5 gl-text-gray-500" />
+    <gl-popover
+      target="issuable-type-info"
+      container="popovercontainer"
+      :title="$options.i18n.issueTypes"
+      triggers="focus hover"
+    >
+      <ul class="gl-list-style-none gl-p-0 gl-m-0">
+        <li class="gl-mb-3">
+          <div class="gl-font-weight-bold">{{ $options.i18n.issue }}</div>
+          <span>{{ $options.i18n.issueHelpText }}</span>
+        </li>
+        <li>
+          <div class="gl-font-weight-bold">{{ $options.i18n.incident }}</div>
+          <span>{{ $options.i18n.incidentHelpText }}</span>
+        </li>
+      </ul>
+    </gl-popover>
+  </span>
+</template>
diff --git a/app/assets/javascripts/issuable_type_selector/index.js b/app/assets/javascripts/issuable_type_selector/index.js
new file mode 100644
index 00000000000..433a62d1ae8
--- /dev/null
+++ b/app/assets/javascripts/issuable_type_selector/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import InfoPopover from './components/info_popover.vue';
+
+export default function initIssuableTypeSelector() {
+  const el = document.getElementById('js-type-popover');
+
+  return new Vue({
+    el,
+    components: {
+      InfoPopover,
+    },
+    render(h) {
+      return h(InfoPopover);
+    },
+  });
+}
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
deleted file mode 100644
index 05f2f15fa9a..00000000000
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import $ from 'jquery';
-import { deprecatedCreateFlash as flash } from './flash';
-import axios from './lib/utils/axios_utils';
-import { __ } from './locale';
-
-/**
- * In each pipelines table we have a mini pipeline graph for each pipeline.
- *
- * When we click in a pipeline stage, we need to make an API call to get the
- * builds list to render in a dropdown.
- *
- * The container should be the table element.
- *
- * The stage icon clicked needs to have the following HTML structure:
- * <div class="dropdown">
- *   <button class="dropdown js-builds-dropdown-button" data-toggle="dropdown"></button>
- *   <div class="js-builds-dropdown-container dropdown-menu"></div>
- * </div>
- */
-
-export default class MiniPipelineGraph {
-  constructor(opts = {}) {
-    this.container = opts.container || '';
-    this.dropdownListSelector = '.js-builds-dropdown-container';
-    this.getBuildsList = this.getBuildsList.bind(this);
-  }
-
-  /**
-   * Adds the event listener when the dropdown is opened.
-   * All dropdown events are fired at the .dropdown-menu's parent element.
-   */
-  bindEvents() {
-    $(document)
-      .off('shown.bs.dropdown', this.container)
-      .on('shown.bs.dropdown', this.container, this.getBuildsList);
-  }
-
-  /**
-   * 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() {
-    $(document).on(
-      'click',
-      `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`,
-      (e) => {
-        e.stopPropagation();
-      },
-    );
-  }
-
-  /**
-   * For the clicked stage, renders the given data in the dropdown list.
-   *
-   * @param  {HTMLElement} stageContainer
-   * @param  {Object} data
-   */
-  renderBuildsList(stageContainer, data) {
-    const dropdownContainer = stageContainer.parentElement.querySelector(
-      `${this.dropdownListSelector} .js-builds-dropdown-list ul`,
-    );
-
-    dropdownContainer.innerHTML = data;
-  }
-
-  /**
-   * For the clicked stage, gets the list of builds.
-   *
-   * All dropdown events have a relatedTarget property,
-   * whose value is the toggling anchor element.
-   *
-   * @param  {Object} e bootstrap dropdown event
-   * @return {Promise}
-   */
-  getBuildsList(e) {
-    const button = e.relatedTarget;
-    const endpoint = button.dataset.stageEndpoint;
-
-    this.renderBuildsList(button, '');
-    this.toggleLoading(button);
-
-    axios
-      .get(endpoint)
-      .then(({ data }) => {
-        this.toggleLoading(button);
-        this.renderBuildsList(button, data.html);
-        this.stopDropdownClickPropagation();
-      })
-      .catch(() => {
-        this.toggleLoading(button);
-        if ($(button).parent().hasClass('open')) {
-          $(button).dropdown('toggle');
-        }
-        flash(__('An error occurred while fetching the builds.'), 'alert');
-      });
-  }
-
-  /**
-   * Toggles the visibility of the loading icon.
-   *
-   * @param  {HTMLElement} stageContainer
-   * @return {type}
-   */
-  toggleLoading(stageContainer) {
-    stageContainer.parentElement
-      .querySelector(`${this.dropdownListSelector} .js-builds-dropdown-loading`)
-      .classList.toggle('hidden');
-  }
-}
diff --git a/app/assets/javascripts/pages/projects/issues/form.js b/app/assets/javascripts/pages/projects/issues/form.js
index 4e35f28ab06..c0da0069a99 100644
--- a/app/assets/javascripts/pages/projects/issues/form.js
+++ b/app/assets/javascripts/pages/projects/issues/form.js
@@ -5,6 +5,7 @@ import IssuableForm from 'ee_else_ce/issuable_form';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
 import initSuggestions from '~/issuable_suggestions';
+import initIssuableTypeSelector from '~/issuable_type_selector';
 import LabelsSelect from '~/labels_select';
 import MilestoneSelect from '~/milestone_select';
 import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
@@ -20,4 +21,5 @@ export default () => {
   });
 
   initSuggestions();
+  initIssuableTypeSelector();
 };
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue
index 05372010d0f..2b33467e948 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div data-testid="widget-mini-pipeline-graph">
+  <div data-testid="pipeline-mini-graph">
     <div
       v-for="stage in stages"
       :key="stage.name"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index ef50b7652c5..f14a582d731 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -313,6 +313,7 @@ export default {
     </div>
 
     <pipelines-filtered-search
+      v-if="stateToRender !== $options.stateMap.emptyState"
       :project-id="projectId"
       :params="validatedParams"
       @filterPipelines="filterPipelines"
diff --git a/app/assets/javascripts/projects/commit_box/info/index.js b/app/assets/javascripts/projects/commit_box/info/index.js
index 17c63ecf66b..69fe2d30489 100644
--- a/app/assets/javascripts/projects/commit_box/info/index.js
+++ b/app/assets/javascripts/projects/commit_box/info/index.js
@@ -1,27 +1,17 @@
 import { fetchCommitMergeRequests } from '~/commit_merge_requests';
-import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
 import { initCommitPipelineMiniGraph } from './init_commit_pipeline_mini_graph';
 import { initDetailsButton } from './init_details_button';
 import { loadBranches } from './load_branches';
 
-export const initCommitBoxInfo = (containerSelector = '.js-commit-box-info') => {
-  const containerEl = document.querySelector(containerSelector);
-
+export const initCommitBoxInfo = () => {
   // Display commit related branches
-  loadBranches(containerEl);
+  loadBranches();
 
   // Related merge requests to this commit
   fetchCommitMergeRequests();
 
   // Display pipeline mini graph for this commit
-  // Feature flag ci_commit_pipeline_mini_graph_vue
-  if (gon.features.ciCommitPipelineMiniGraphVue) {
-    initCommitPipelineMiniGraph();
-  } else {
-    new MiniPipelineGraph({
-      container: '.js-commit-pipeline-graph',
-    }).bindEvents();
-  }
+  initCommitPipelineMiniGraph();
 
   initDetailsButton();
 };
diff --git a/app/assets/javascripts/projects/commit_box/info/load_branches.js b/app/assets/javascripts/projects/commit_box/info/load_branches.js
index 8a0b2c30abe..d1136817cb3 100644
--- a/app/assets/javascripts/projects/commit_box/info/load_branches.js
+++ b/app/assets/javascripts/projects/commit_box/info/load_branches.js
@@ -2,7 +2,8 @@ import axios from 'axios';
 import { sanitize } from '~/lib/dompurify';
 import { __ } from '~/locale';
 
-export const loadBranches = (containerEl) => {
+export const loadBranches = (containerSelector = '.js-commit-box-info') => {
+  const containerEl = document.querySelector(containerSelector);
   if (!containerEl) {
     return;
   }
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
index 535b659cc5f..f6055054cb0 100644
--- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
@@ -54,12 +54,7 @@ export default {
       :file-name="fileName"
       :editor-options="{ readOnly: true }"
     />
-    <div
-      v-else
-      class="file-content code js-syntax-highlight"
-      data-qa-selector="file_content"
-      :class="$options.userColorScheme"
-    >
+    <div v-else class="file-content code js-syntax-highlight" :class="$options.userColorScheme">
       <div class="line-numbers">
         <a
           v-for="line in lineNumbers"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
deleted file mode 100644
index 98190d716c9..00000000000
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script>
-import {
-  GlFilteredSearchToken,
-  GlFilteredSearchSuggestion,
-  GlDropdownDivider,
-  GlLoadingIcon,
-} from '@gitlab/ui';
-import { debounce } from 'lodash';
-
-import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { __ } from '~/locale';
-
-import { DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants';
-import { stripQuotes } from '../filtered_search_utils';
-
-export default {
-  components: {
-    GlFilteredSearchToken,
-    GlFilteredSearchSuggestion,
-    GlDropdownDivider,
-    GlLoadingIcon,
-  },
-  props: {
-    config: {
-      type: Object,
-      required: true,
-    },
-    value: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      emojis: this.config.initialEmojis || [],
-      defaultEmojis: this.config.defaultEmojis || [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY],
-      loading: true,
-    };
-  },
-  computed: {
-    currentValue() {
-      return this.value.data.toLowerCase();
-    },
-    activeEmoji() {
-      return this.emojis.find(
-        (emoji) => emoji.name.toLowerCase() === stripQuotes(this.currentValue),
-      );
-    },
-  },
-  methods: {
-    fetchEmojiBySearchTerm(searchTerm) {
-      this.loading = true;
-      this.config
-        .fetchEmojis(searchTerm)
-        .then((res) => {
-          this.emojis = Array.isArray(res) ? res : res.data;
-        })
-        .catch(() => createFlash(__('There was a problem fetching emojis.')))
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    searchEmojis: debounce(function debouncedSearch({ data }) {
-      this.fetchEmojiBySearchTerm(data);
-    }, DEBOUNCE_DELAY),
-  },
-};
-</script>
-
-<template>
-  <gl-filtered-search-token
-    :config="config"
-    v-bind="{ ...$props, ...$attrs }"
-    v-on="$listeners"
-    @input="searchEmojis"
-  >
-    <template #view="{ inputValue }">
-      <gl-emoji v-if="activeEmoji" :data-name="activeEmoji.name" />
-      <span v-else>{{ inputValue }}</span>
-    </template>
-    <template #suggestions>
-      <gl-filtered-search-suggestion
-        v-for="emoji in defaultEmojis"
-        :key="emoji.value"
-        :value="emoji.value"
-      >
-        {{ emoji.value }}
-      </gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="defaultEmojis.length" />
-      <gl-loading-icon v-if="loading" />
-      <template v-else>
-        <gl-filtered-search-suggestion
-          v-for="emoji in emojis"
-          :key="emoji.name"
-          :value="emoji.name"
-        >
-          <div class="gl-display-flex">
-            <gl-emoji :data-name="emoji.name" />
-            <span class="gl-ml-3">{{ emoji.name }}</span>
-          </div>
-        </gl-filtered-search-suggestion>
-      </template>
-    </template>
-  </gl-filtered-search-token>
-</template>
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 7b66b61ff36..1d0333d1e2f 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -60,3 +60,11 @@ pre {
 a[href]::after {
   content: none !important;
 }
+
+.with-performance-bar .layout-page {
+  margin-top: 0;
+}
+
+.content-wrapper {
+  margin-top: 0;
+}