Fix branch switcher for apollo 3 migration

The branch switcher in its current state was not
compatible with apollo 3. There were some issues
in the tests that were not supposed to occur. To
fix that, we remove the manual query execution
and instead rely solely on the smart query
execution. Since the query refire as soon
as variables are changed, we can then have
a much safer, automatic way for the smart
query to be fired whenever we need.

app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue

@@ -9,7 +9,6 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { produce } from 'immer';
-import { fetchPolicies } from '~/lib/graphql';
 import { historyPushState } from '~/lib/utils/common_utils';
 import { setUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -63,8 +62,6 @@ export default {
     return {
       availableBranches: [],
       branchSelected: null,
-      filteredBranches: [],
-      isSearchingBranches: false,
       pageLimit: this.paginationLimit,
       pageCounter: 0,
       searchTerm: '',
@@ -76,10 +73,9 @@ export default {
       query: getAvailableBranchesQuery,
       variables() {
         return {
-          limit: this.paginationLimit,
           offset: 0,
           projectFullPath: this.projectFullPath,
-          searchPattern: '*',
+          ...this.availableBranchesVariables,
         };
       },
       update(data) {
@@ -116,14 +112,24 @@ export default {
     },
   },
   computed: {
-    branches() {
-      return this.searchTerm.length > 0 ? this.filteredBranches : this.availableBranches;
+    availableBranchesVariables() {
+      if (this.searchTerm.length > 0) {
+        return {
+          limit: this.totalBranches,
+          searchPattern: `*${this.searchTerm}*`,
+        };
+      }
+
+      return {
+        limit: this.paginationLimit,
+        searchPattern: '*',
+      };
     },
     enableBranchSwitcher() {
-      return this.branches.length > 0 || this.searchTerm.length > 0;
+      return this.availableBranches.length > 0 || this.searchTerm.length > 0;
     },
     isBranchesLoading() {
-      return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches;
+      return this.$apollo.queries.availableBranches.loading;
     },
   },
   watch: {
@@ -134,38 +140,21 @@ export default {
     },
   },
   methods: {
-    availableBranchesQueryVars(varsOverride = {}) {
-      if (this.searchTerm.length > 0) {
-        return {
-          limit: this.totalBranches,
-          offset: 0,
-          projectFullPath: this.projectFullPath,
-          searchPattern: `*${this.searchTerm}*`,
-          ...varsOverride,
-        };
-      }
-
-      return {
-        limit: this.paginationLimit,
-        offset: this.pageCounter * this.paginationLimit,
-        projectFullPath: this.projectFullPath,
-        searchPattern: '*',
-        ...varsOverride,
-      };
-    },
     // if there is no searchPattern, paginate by {paginationLimit} branches
     fetchNextBranches() {
       if (
         this.isBranchesLoading ||
         this.searchTerm.length > 0 ||
-        this.branches.length >= this.totalBranches
+        this.availableBranches.length >= this.totalBranches
       ) {
         return;
       }
 
       this.$apollo.queries.availableBranches
         .fetchMore({
-          variables: this.availableBranchesQueryVars(),
+          variables: {
+            offset: this.pageCounter * this.paginationLimit,
+          },
           updateQuery(previousResult, { fetchMoreResult }) {
             const previousBranches = previousResult.project.repository.branchNames;
             const newBranches = fetchMoreResult.project.repository.branchNames;
@@ -204,23 +193,6 @@ export default {
     async setSearchTerm(newSearchTerm) {
       this.pageCounter = 0;
       this.searchTerm = newSearchTerm.trim();
-
-      if (this.searchTerm === '') {
-        this.pageLimit = this.paginationLimit;
-        return;
-      }
-
-      this.isSearchingBranches = true;
-      const fetchResults = await this.$apollo
-        .query({
-          query: getAvailableBranchesQuery,
-          fetchPolicy: fetchPolicies.NETWORK_ONLY,
-          variables: this.availableBranchesQueryVars(),
-        })
-        .catch(this.showFetchError);
-
-      this.isSearchingBranches = false;
-      this.filteredBranches = fetchResults?.data?.project?.repository?.branchNames || [];
     },
     showFetchError() {
       this.$emit('showError', {
@@ -255,14 +227,14 @@ export default {
     </gl-dropdown-section-header>
 
     <gl-infinite-scroll
-      :fetched-items="branches.length"
+      :fetched-items="availableBranches.length"
       :max-list-height="250"
       data-qa-selector="branch_menu_container"
       @bottomReached="fetchNextBranches"
     >
       <template #items>
         <gl-dropdown-item
-          v-for="branch in branches"
+          v-for="branch in availableBranches"
           :key="branch"
           :is-checked="currentBranch === branch"
           :is-check-item="true"