Load correct data when switching branches in pipeline editor

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

@@ -44,6 +44,20 @@ export default {
       return this.branches?.length > 0;
     },
   },
+  methods: {
+    async selectBranch(newBranch) {
+      if (newBranch === this.currentBranch) {
+        return;
+      }
+
+      await this.$apollo.getClient().writeQuery({
+        query: getCurrentBranch,
+        data: { currentBranch: newBranch },
+      });
+
+      this.$emit('refetchContent');
+    },
+  },
 };
 </script>
 
@@ -57,6 +71,7 @@ export default {
       :key="branch.name"
       :is-checked="currentBranch === branch.name"
       :is-check-item="true"
+      @click="selectBranch(branch.name)"
     >
       <gl-icon name="check" class="gl-visibility-hidden" />
       {{ branch.name }}

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { fetchPolicies } from '~/lib/graphql';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -51,8 +52,8 @@ export default {
       failureType: null,
       failureReasons: [],
       showStartScreen: false,
-      isNewCiConfigFile: false,
       initialCiFileContent: '',
+      isNewCiConfigFile: false,
       lastCommittedContent: '',
       currentCiFileContent: '',
       showFailureAlert: false,
@@ -64,6 +65,7 @@ export default {
 
   apollo: {
     initialCiFileContent: {
+      fetchPolicy: fetchPolicies.NETWORK,
       query: getBlobContent,
       // If it's a brand new file, we don't want to fetch the content.
       // Then when the user commits the first time, the query would run
@@ -91,6 +93,11 @@ export default {
       error(error) {
         this.handleBlobContentError(error);
       },
+      watchLoading(isLoading) {
+        if (isLoading) {
+          this.setAppStatus(EDITOR_APP_STATUS_LOADING);
+        }
+      },
     },
     ciConfigData: {
       query: getCiConfigData,
@@ -223,6 +230,10 @@ export default {
     dismissSuccess() {
       this.showSuccessAlert = false;
     },
+    async refetchContent() {
+      this.$apollo.queries.initialCiFileContent.skip = false;
+      await this.$apollo.queries.initialCiFileContent.refetch();
+    },
     reportFailure(type, reasons = []) {
       this.setAppStatus(EDITOR_APP_STATUS_ERROR);
 
@@ -324,6 +335,7 @@ export default {
         @commit="updateOnCommit"
         @resetContent="resetContent"
         @showError="showErrorAlert"
+        @refetchContent="refetchContent"
         @updateCiConfig="updateCiConfig"
       />
       <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />

spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js

@@ -120,4 +120,35 @@ describe('Pipeline editor branch switcher', () => {
       ]);
     });
   });
+
+  describe('when switching branches', () => {
+    beforeEach(async () => {
+      mockAvailableBranchQuery.mockResolvedValue(mockProjectBranches);
+      createComponentWithApollo();
+      await waitForPromises();
+    });
+
+    it('emits the refetchContent event when selecting a different branch', async () => {
+      const branch = findDropdownItems().at(1);
+
+      expect(branch.text()).not.toBe(mockDefaultBranch);
+      expect(wrapper.emitted('refetchContent')).toBeUndefined();
+
+      await branch.vm.$emit('click');
+
+      expect(wrapper.emitted('refetchContent')).toBeDefined();
+      expect(wrapper.emitted('refetchContent')).toHaveLength(1);
+    });
+
+    it('does not emit the refetchContent event when selecting the current branch', async () => {
+      const branch = findDropdownItems().at(0);
+
+      expect(branch.text()).toBe(mockDefaultBranch);
+      expect(wrapper.emitted('refetchContent')).toBeUndefined();
+
+      await branch.vm.$emit('click');
+
+      expect(wrapper.emitted('refetchContent')).toBeUndefined();
+    });
+  });
 });

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -92,6 +92,11 @@ describe('Pipeline editor app component', () => {
 
     const options = {
       localVue,
+      data() {
+        return {
+          currentBranch: mockDefaultBranch,
+        };
+      },
       mocks: {},
       apolloProvider: mockApollo,
     };
@@ -116,9 +121,6 @@ describe('Pipeline editor app component', () => {
   });
 
   afterEach(() => {
-    mockBlobContentData.mockReset();
-    mockCiConfigData.mockReset();
-
     wrapper.destroy();
   });
 
@@ -337,4 +339,22 @@ describe('Pipeline editor app component', () => {
       });
     });
   });
+
+  describe('when refetching content', () => {
+    beforeEach(async () => {
+      await createComponentWithApollo();
+
+      jest
+        .spyOn(wrapper.vm.$apollo.queries.initialCiFileContent, 'refetch')
+        .mockImplementation(jest.fn());
+    });
+
+    it('refetches blob content', async () => {
+      expect(wrapper.vm.$apollo.queries.initialCiFileContent.refetch).toHaveBeenCalledTimes(0);
+
+      await wrapper.vm.refetchContent();
+
+      expect(wrapper.vm.$apollo.queries.initialCiFileContent.refetch).toHaveBeenCalledTimes(1);
+    });
+  });
 });