Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

4 files changed, 119 insertions, 0 deletions

diff --git a/app/assets/javascripts/ref/components/ambiguous_ref_modal.vue b/app/assets/javascripts/ref/components/ambiguous_ref_modal.vue
new file mode 100644
index 00000000000..d17144669fe
--- /dev/null
+++ b/app/assets/javascripts/ref/components/ambiguous_ref_modal.vue
@@ -0,0 +1,80 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { GlModal, GlButton, GlSprintf } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { REF_TYPE_PARAM_NAME, TAG_REF_TYPE, BRANCH_REF_TYPE } from '../constants';
+
+export default {
+  i18n: {
+    title: s__('AmbiguousRef|Which reference do you want to view?'),
+    description: sprintf(
+      s__('AmbiguousRef|There is a branch and a tag with the same name of %{ref}.'),
+    ),
+    secondaryDescription: s__('AmbiguousRef|Which reference would you like to view?'),
+    viewTagButton: s__('AmbiguousRef|View tag'),
+    viewBranchButton: s__('AmbiguousRef|View branch'),
+  },
+  tagRefType: TAG_REF_TYPE,
+  branchRefType: BRANCH_REF_TYPE,
+  components: {
+    GlModal,
+    GlButton,
+    GlSprintf,
+  },
+
+  props: {
+    refName: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    this.$refs.ambiguousRefModal.show();
+  },
+  methods: {
+    navigate(refType) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(REF_TYPE_PARAM_NAME, refType);
+
+      visitUrl(url.toString());
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="ambiguousRefModal"
+    modal-id="ambiguous-ref"
+    :title="$options.i18n.title"
+    @primary="navigate"
+  >
+    <p class="gl-mb-0">
+      <gl-sprintf :message="$options.i18n.description">
+        <template #ref
+          ><code>{{ refName }}</code></template
+        >
+      </gl-sprintf>
+    </p>
+
+    <p>
+      {{ $options.i18n.secondaryDescription }}
+    </p>
+
+    <template #modal-footer>
+      <gl-button
+        category="secondary"
+        variant="confirm"
+        @click="() => navigate($options.tagRefType)"
+        >{{ $options.i18n.viewTagButton }}</gl-button
+      >
+      <gl-button
+        category="secondary"
+        variant="confirm"
+        @click="() => navigate($options.branchRefType)"
+        >{{ $options.i18n.viewBranchButton }}</gl-button
+      >
+    </template>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index e5f5800c99c..ed9fd521e67 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -11,6 +11,10 @@ import {
   REF_TYPE_BRANCHES,
   REF_TYPE_TAGS,
   REF_TYPE_COMMITS,
+  TAG_REF_TYPE,
+  BRANCH_REF_TYPE,
+  TAG_REF_TYPE_ICON,
+  BRANCH_REF_TYPE_ICON,
 } from '../constants';
 import createStore from '../stores';
 import { formatListBoxItems, formatErrors } from '../format_refs';
@@ -159,6 +163,17 @@ export default {
           })
         : this.i18n.noResults;
     },
+    dropdownIcon() {
+      let icon;
+
+      if (this.selectedRef.includes(`refs/${TAG_REF_TYPE}`)) {
+        icon = TAG_REF_TYPE_ICON;
+      } else if (this.selectedRef.includes(`refs/${BRANCH_REF_TYPE}`)) {
+        icon = BRANCH_REF_TYPE_ICON;
+      }
+
+      return icon;
+    },
   },
   watch: {
     // Keep the Vuex store synchronized if the parent
@@ -246,6 +261,7 @@ export default {
       :search-placeholder="i18n.searchPlaceholder"
       :toggle-class="extendedToggleButtonClass"
       :toggle-text="buttonText"
+      :icon="dropdownIcon"
       v-bind="$attrs"
       v-on="$listeners"
       @hidden="$emit('hide')"
diff --git a/app/assets/javascripts/ref/constants.js b/app/assets/javascripts/ref/constants.js
index 4b5b18cf6c1..5fd4660b8e3 100644
--- a/app/assets/javascripts/ref/constants.js
+++ b/app/assets/javascripts/ref/constants.js
@@ -7,6 +7,9 @@ export const REF_TYPE_COMMITS = 'REF_TYPE_COMMITS';
 export const ALL_REF_TYPES = Object.freeze([REF_TYPE_BRANCHES, REF_TYPE_TAGS, REF_TYPE_COMMITS]);
 export const BRANCH_REF_TYPE = 'heads';
 export const TAG_REF_TYPE = 'tags';
+export const TAG_REF_TYPE_ICON = 'tag';
+export const BRANCH_REF_TYPE_ICON = 'branch';
+export const REF_TYPE_PARAM_NAME = 'ref_type';
 
 export const X_TOTAL_HEADER = 'x-total';
 
diff --git a/app/assets/javascripts/ref/init_ambiguous_ref_modal.js b/app/assets/javascripts/ref/init_ambiguous_ref_modal.js
new file mode 100644
index 00000000000..00fb8f10401
--- /dev/null
+++ b/app/assets/javascripts/ref/init_ambiguous_ref_modal.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { getParameterByName } from '~/lib/utils/url_utility';
+import AmbiguousRefModal from './components/ambiguous_ref_modal.vue';
+import { REF_TYPE_PARAM_NAME, TAG_REF_TYPE, BRANCH_REF_TYPE } from './constants';
+
+export default (el = document.querySelector('#js-ambiguous-ref-modal')) => {
+  const refType = getParameterByName(REF_TYPE_PARAM_NAME);
+  const isRefTypeSet = refType === TAG_REF_TYPE || refType === BRANCH_REF_TYPE; // if ref_type is already set in the URL, we don't want to display the modal
+  if (!el || isRefTypeSet || !parseBoolean(el.dataset.ambiguous)) return false;
+
+  const { ref } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(AmbiguousRefModal, { props: { refName: ref } });
+    },
+  });
+};