Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

3 files changed, 117 insertions, 4 deletions

diff --git a/app/assets/javascripts/branches/branch_sort_dropdown.js b/app/assets/javascripts/branches/branch_sort_dropdown.js
new file mode 100644
index 00000000000..9914ce05a95
--- /dev/null
+++ b/app/assets/javascripts/branches/branch_sort_dropdown.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import SortDropdown from './components/sort_dropdown.vue';
+
+const mountDropdownApp = (el) => {
+  const { mode, projectBranchesFilteredPath, sortOptions } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'SortBranchesDropdownApp',
+    components: {
+      SortDropdown,
+    },
+    provide: {
+      mode,
+      projectBranchesFilteredPath,
+      sortOptions: JSON.parse(sortOptions),
+    },
+    render: (createElement) => createElement(SortDropdown),
+  });
+};
+
+export default () => {
+  const el = document.getElementById('js-branches-sort-dropdown');
+  return el ? mountDropdownApp(el) : null;
+};
diff --git a/app/assets/javascripts/branches/components/sort_dropdown.vue b/app/assets/javascripts/branches/components/sort_dropdown.vue
new file mode 100644
index 00000000000..ddb4c5c0015
--- /dev/null
+++ b/app/assets/javascripts/branches/components/sort_dropdown.vue
@@ -0,0 +1,88 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
+import { mergeUrlParams, visitUrl, getParameterValues } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
+
+const OVERVIEW_MODE = 'overview';
+
+export default {
+  i18n: {
+    searchPlaceholder: s__('Branches|Filter by branch name'),
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlSearchBoxByClick,
+  },
+  inject: ['projectBranchesFilteredPath', 'sortOptions', 'mode'],
+  data() {
+    return {
+      selectedKey: 'updated_desc',
+      searchTerm: '',
+    };
+  },
+  computed: {
+    shouldShowDropdown() {
+      return this.mode !== OVERVIEW_MODE;
+    },
+    selectedSortMethodName() {
+      return this.sortOptions[this.selectedKey];
+    },
+  },
+  created() {
+    const sortValue = getParameterValues('sort');
+    const searchValue = getParameterValues('search');
+
+    if (sortValue.length > 0) {
+      [this.selectedKey] = sortValue;
+    }
+
+    if (searchValue.length > 0) {
+      [this.searchTerm] = searchValue;
+    }
+  },
+  methods: {
+    isSortMethodSelected(sortKey) {
+      return sortKey === this.selectedKey;
+    },
+    visitUrlFromOption(sortKey) {
+      this.selectedKey = sortKey;
+      const urlParams = {};
+
+      if (this.mode !== OVERVIEW_MODE) {
+        urlParams.sort = sortKey;
+      }
+
+      urlParams.search = this.searchTerm.length > 0 ? this.searchTerm : null;
+
+      const newUrl = mergeUrlParams(urlParams, this.projectBranchesFilteredPath);
+      visitUrl(newUrl);
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-pr-4">
+    <gl-search-box-by-click
+      v-model="searchTerm"
+      :placeholder="$options.i18n.searchPlaceholder"
+      class="gl-pr-4"
+      data-testid="branch-search"
+      @submit="visitUrlFromOption(selectedKey)"
+    />
+    <gl-dropdown
+      v-if="shouldShowDropdown"
+      :text="selectedSortMethodName"
+      data-testid="branches-dropdown"
+    >
+      <gl-dropdown-item
+        v-for="(value, key) in sortOptions"
+        :key="key"
+        :is-checked="isSortMethodSelected(key)"
+        is-check-item
+        @click="visitUrlFromOption(key)"
+        >{{ value }}</gl-dropdown-item
+      >
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/branches/divergence_graph.js b/app/assets/javascripts/branches/divergence_graph.js
index ca019bc4178..66e8d982113 100644
--- a/app/assets/javascripts/branches/divergence_graph.js
+++ b/app/assets/javascripts/branches/divergence_graph.js
@@ -4,13 +4,13 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import DivergenceGraph from './components/divergence_graph.vue';
 
-export function createGraphVueApp(el, data, maxCommits) {
+export function createGraphVueApp(el, data, maxCommits, defaultBranch) {
   return new Vue({
     el,
     render(h) {
       return h(DivergenceGraph, {
         props: {
-          defaultBranch: 'master',
+          defaultBranch,
           distance: data.distance ? parseInt(data.distance, 10) : null,
           aheadCount: parseInt(data.ahead, 10),
           behindCount: parseInt(data.behind, 10),
@@ -21,7 +21,7 @@ export function createGraphVueApp(el, data, maxCommits) {
   });
 }
 
-export default (endpoint) => {
+export default (endpoint, defaultBranch) => {
   const names = [...document.querySelectorAll('.js-branch-item')].map(
     ({ dataset }) => dataset.name,
   );
@@ -47,7 +47,7 @@ export default (endpoint) => {
 
         if (!el) return;
 
-        createGraphVueApp(el, val, maxCommits);
+        createGraphVueApp(el, val, maxCommits, defaultBranch);
       });
     })
     .catch(() =>