Add latest changes from gitlab-org/gitlab@master

4 files changed, 162 insertions, 75 deletions

diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
index 655243eee30..d2263fa815d 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,5 +1,7 @@
 import MirrorRepos from '~/mirrors/mirror_repos';
 import mountBranchRules from '~/projects/settings/repository/branch_rules/mount_branch_rules';
+import mountDefaultBranchSelector from '~/projects/settings/mount_default_branch_selector';
+
 import initForm from '../form';
 
 initForm();
@@ -8,3 +10,4 @@ const mirrorReposContainer = document.querySelector('.js-mirror-settings');
 if (mirrorReposContainer) new MirrorRepos(mirrorReposContainer).init();
 
 mountBranchRules(document.getElementById('js-branch-rules'));
+mountDefaultBranchSelector(document.querySelector('.js-select-default-branch'));
diff --git a/app/assets/javascripts/projects/settings/components/default_branch_selector.vue b/app/assets/javascripts/projects/settings/components/default_branch_selector.vue
new file mode 100644
index 00000000000..fee2f591216
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/components/default_branch_selector.vue
@@ -0,0 +1,38 @@
+<script>
+import RefSelector from '~/ref/components/ref_selector.vue';
+import { REF_TYPE_BRANCHES } from '~/ref/constants';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    RefSelector,
+  },
+  props: {
+    persistedDefaultBranch: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: String,
+      required: true,
+    },
+  },
+  refTypes: [REF_TYPE_BRANCHES],
+  i18n: {
+    dropdownHeader: __('Select default branch'),
+    searchPlaceholder: __('Search branch'),
+  },
+};
+</script>
+<template>
+  <ref-selector
+    :value="persistedDefaultBranch"
+    class="gl-w-full"
+    :project-id="projectId"
+    :enabled-ref-types="$options.refTypes"
+    :translations="$options.i18n"
+    name="project[default_branch]"
+    data-testid="default-branch-dropdown"
+    data-qa-selector="default_branch_dropdown"
+  />
+</template>
diff --git a/app/assets/javascripts/projects/settings/mount_default_branch_selector.js b/app/assets/javascripts/projects/settings/mount_default_branch_selector.js
new file mode 100644
index 00000000000..611561e38f2
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/mount_default_branch_selector.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import DefaultBranchSelector from './components/default_branch_selector.vue';
+
+export default (el) => {
+  if (!el) {
+    return null;
+  }
+
+  const { projectId, defaultBranch } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(DefaultBranchSelector, {
+        props: {
+          persistedDefaultBranch: defaultBranch,
+          projectId,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index 1343ad8246c..b75958e2ced 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -29,6 +29,7 @@ export default {
     GlLoadingIcon,
     RefResultsSection,
   },
+  inheritAttrs: false,
   props: {
     enabledRefTypes: {
       type: Array,
@@ -70,6 +71,15 @@ export default {
       required: false,
       default: true,
     },
+
+    /* Underlying form field name for scenarios where ref_selector
+     * is used as part of submitting an HTML form
+     */
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -213,89 +223,103 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
-    :header-text="i18n.dropdownHeader"
-    :toggle-class="toggleButtonClass"
-    :text="buttonText"
-    class="ref-selector"
-    v-bind="$attrs"
-    v-on="$listeners"
-    @shown="focusSearchBox"
-  >
-    <template #header>
-      <gl-search-box-by-type
-        ref="searchBox"
-        v-model.trim="query"
-        :placeholder="i18n.searchPlaceholder"
-        autocomplete="off"
-        @input="onSearchBoxInput"
-        @keydown.enter.prevent="onSearchBoxEnter"
-      />
-    </template>
+  <div>
+    <gl-dropdown
+      :header-text="i18n.dropdownHeader"
+      :toggle-class="toggleButtonClass"
+      :text="buttonText"
+      class="ref-selector gl-w-full"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @shown="focusSearchBox"
+    >
+      <template #header>
+        <gl-search-box-by-type
+          ref="searchBox"
+          v-model.trim="query"
+          :placeholder="i18n.searchPlaceholder"
+          autocomplete="off"
+          data-qa-selector="ref_selector_searchbox"
+          @input="onSearchBoxInput"
+          @keydown.enter.prevent="onSearchBoxEnter"
+        />
+      </template>
 
-    <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-3" />
+      <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-3" />
 
-    <div v-else-if="showNoResults" class="gl-text-center gl-mx-3 gl-py-3" data-testid="no-results">
-      <gl-sprintf v-if="lastQuery" :message="i18n.noResultsWithQuery">
-        <template #query>
-          <b class="gl-word-break-all">{{ lastQuery }}</b>
-        </template>
-      </gl-sprintf>
+      <div
+        v-else-if="showNoResults"
+        class="gl-text-center gl-mx-3 gl-py-3"
+        data-testid="no-results"
+      >
+        <gl-sprintf v-if="lastQuery" :message="i18n.noResultsWithQuery">
+          <template #query>
+            <b class="gl-word-break-all">{{ lastQuery }}</b>
+          </template>
+        </gl-sprintf>
 
-      <span v-else>{{ i18n.noResults }}</span>
-    </div>
+        <span v-else>{{ i18n.noResults }}</span>
+      </div>
 
-    <template v-else>
-      <template v-if="showBranchesSection">
-        <ref-results-section
-          :section-title="i18n.branches"
-          :total-count="matches.branches.totalCount"
-          :items="matches.branches.list"
-          :selected-ref="selectedRef"
-          :error="matches.branches.error"
-          :error-message="i18n.branchesErrorMessage"
-          :show-header="showSectionHeaders"
-          data-testid="branches-section"
-          data-qa-selector="branches_section"
-          @selected="selectRef($event)"
-        />
+      <template v-else>
+        <template v-if="showBranchesSection">
+          <ref-results-section
+            :section-title="i18n.branches"
+            :total-count="matches.branches.totalCount"
+            :items="matches.branches.list"
+            :selected-ref="selectedRef"
+            :error="matches.branches.error"
+            :error-message="i18n.branchesErrorMessage"
+            :show-header="showSectionHeaders"
+            data-testid="branches-section"
+            data-qa-selector="branches_section"
+            @selected="selectRef($event)"
+          />
 
-        <gl-dropdown-divider v-if="showTagsSection || showCommitsSection" />
-      </template>
+          <gl-dropdown-divider v-if="showTagsSection || showCommitsSection" />
+        </template>
 
-      <template v-if="showTagsSection">
-        <ref-results-section
-          :section-title="i18n.tags"
-          :total-count="matches.tags.totalCount"
-          :items="matches.tags.list"
-          :selected-ref="selectedRef"
-          :error="matches.tags.error"
-          :error-message="i18n.tagsErrorMessage"
-          :show-header="showSectionHeaders"
-          data-testid="tags-section"
-          @selected="selectRef($event)"
-        />
+        <template v-if="showTagsSection">
+          <ref-results-section
+            :section-title="i18n.tags"
+            :total-count="matches.tags.totalCount"
+            :items="matches.tags.list"
+            :selected-ref="selectedRef"
+            :error="matches.tags.error"
+            :error-message="i18n.tagsErrorMessage"
+            :show-header="showSectionHeaders"
+            data-testid="tags-section"
+            @selected="selectRef($event)"
+          />
 
-        <gl-dropdown-divider v-if="showCommitsSection" />
-      </template>
+          <gl-dropdown-divider v-if="showCommitsSection" />
+        </template>
 
-      <template v-if="showCommitsSection">
-        <ref-results-section
-          :section-title="i18n.commits"
-          :total-count="matches.commits.totalCount"
-          :items="matches.commits.list"
-          :selected-ref="selectedRef"
-          :error="matches.commits.error"
-          :error-message="i18n.commitsErrorMessage"
-          :show-header="showSectionHeaders"
-          data-testid="commits-section"
-          @selected="selectRef($event)"
-        />
+        <template v-if="showCommitsSection">
+          <ref-results-section
+            :section-title="i18n.commits"
+            :total-count="matches.commits.totalCount"
+            :items="matches.commits.list"
+            :selected-ref="selectedRef"
+            :error="matches.commits.error"
+            :error-message="i18n.commitsErrorMessage"
+            :show-header="showSectionHeaders"
+            data-testid="commits-section"
+            @selected="selectRef($event)"
+          />
+        </template>
       </template>
-    </template>
 
-    <template #footer>
-      <slot name="footer" v-bind="footerSlotProps"></slot>
-    </template>
-  </gl-dropdown>
+      <template #footer>
+        <slot name="footer" v-bind="footerSlotProps"></slot>
+      </template>
+    </gl-dropdown>
+    <input
+      v-if="name"
+      data-testid="selected-ref-form-field"
+      type="hidden"
+      :value="selectedRef"
+      :name="name"
+    />
+  </div>
 </template>