1 files changed, 59 insertions, 56 deletions

diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
index 13d80b5ae0b..a175af2f32e 100644
--- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
@@ -4,6 +4,8 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 
+const emptyDropdownText = s__('CompareRevisions|Select branch/tag');
+
 export default {
   components: {
     GlDropdown,
@@ -16,10 +18,6 @@ export default {
       type: String,
       required: true,
     },
-    revisionText: {
-      type: String,
-      required: true,
-    },
     paramsName: {
       type: String,
       required: true,
@@ -55,12 +53,24 @@ export default {
       return this.filteredTags.length;
     },
   },
+  watch: {
+    refsProjectPath(newRefsProjectPath, oldRefsProjectPath) {
+      if (newRefsProjectPath !== oldRefsProjectPath) {
+        this.fetchBranchesAndTags(true);
+      }
+    },
+  },
   mounted() {
     this.fetchBranchesAndTags();
   },
   methods: {
-    fetchBranchesAndTags() {
+    fetchBranchesAndTags(reset = false) {
       const endpoint = this.refsProjectPath;
+      this.loading = true;
+
+      if (reset) {
+        this.selectedRevision = this.getDefaultBranch();
+      }
 
       return axios
         .get(endpoint)
@@ -70,9 +80,9 @@ export default {
         })
         .catch(() => {
           createFlash({
-            message: `${s__(
-              'CompareRevisions|There was an error while updating the branch/tag list. Please try again.',
-            )}`,
+            message: s__(
+              'CompareRevisions|There was an error while loading the branch/tag list. Please try again.',
+            ),
           });
         })
         .finally(() => {
@@ -80,7 +90,7 @@ export default {
         });
     },
     getDefaultBranch() {
-      return this.paramsBranch || s__('CompareRevisions|Select branch/tag');
+      return this.paramsBranch || emptyDropdownText;
     },
     onClick(revision) {
       this.selectedRevision = revision;
@@ -93,53 +103,46 @@ export default {
 </script>
 
 <template>
-  <div class="form-group compare-form-group" :class="`js-compare-${paramsName}-dropdown`">
-    <div class="input-group inline-input-group">
-      <span class="input-group-prepend">
-        <div class="input-group-text">
-          {{ revisionText }}
-        </div>
-      </span>
-      <input type="hidden" :name="paramsName" :value="selectedRevision" />
-      <gl-dropdown
-        class="gl-flex-grow-1 gl-flex-basis-0 gl-min-w-0 gl-font-monospace"
-        toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0 gl-rounded-top-left-none! gl-rounded-bottom-left-none!"
-        :text="selectedRevision"
-        header-text="Select Git revision"
-        :loading="loading"
+  <div :class="`js-compare-${paramsName}-dropdown`">
+    <input type="hidden" :name="paramsName" :value="selectedRevision" />
+    <gl-dropdown
+      class="gl-w-full gl-font-monospace"
+      toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0"
+      :text="selectedRevision"
+      :header-text="s__('CompareRevisions|Select Git revision')"
+      :loading="loading"
+    >
+      <template #header>
+        <gl-search-box-by-type
+          v-model.trim="searchTerm"
+          :placeholder="s__('CompareRevisions|Filter by Git revision')"
+          @keyup.enter="onSearchEnter"
+        />
+      </template>
+      <gl-dropdown-section-header v-if="hasFilteredBranches">
+        {{ s__('CompareRevisions|Branches') }}
+      </gl-dropdown-section-header>
+      <gl-dropdown-item
+        v-for="(branch, index) in filteredBranches"
+        :key="`branch${index}`"
+        is-check-item
+        :is-checked="selectedRevision === branch"
+        @click="onClick(branch)"
+      >
+        {{ branch }}
+      </gl-dropdown-item>
+      <gl-dropdown-section-header v-if="hasFilteredTags">
+        {{ s__('CompareRevisions|Tags') }}
+      </gl-dropdown-section-header>
+      <gl-dropdown-item
+        v-for="(tag, index) in filteredTags"
+        :key="`tag${index}`"
+        is-check-item
+        :is-checked="selectedRevision === tag"
+        @click="onClick(tag)"
       >
-        <template #header>
-          <gl-search-box-by-type
-            v-model.trim="searchTerm"
-            :placeholder="s__('CompareRevisions|Filter by Git revision')"
-            @keyup.enter="onSearchEnter"
-          />
-        </template>
-        <gl-dropdown-section-header v-if="hasFilteredBranches">
-          {{ s__('CompareRevisions|Branches') }}
-        </gl-dropdown-section-header>
-        <gl-dropdown-item
-          v-for="(branch, index) in filteredBranches"
-          :key="`branch${index}`"
-          is-check-item
-          :is-checked="selectedRevision === branch"
-          @click="onClick(branch)"
-        >
-          {{ branch }}
-        </gl-dropdown-item>
-        <gl-dropdown-section-header v-if="hasFilteredTags">
-          {{ s__('CompareRevisions|Tags') }}
-        </gl-dropdown-section-header>
-        <gl-dropdown-item
-          v-for="(tag, index) in filteredTags"
-          :key="`tag${index}`"
-          is-check-item
-          :is-checked="selectedRevision === tag"
-          @click="onClick(tag)"
-        >
-          {{ tag }}
-        </gl-dropdown-item>
-      </gl-dropdown>
-    </div>
+        {{ tag }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>