Restructure client queries in Pipeline editor

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -60,6 +60,9 @@ export default {
   apollo: {
     currentBranch: {
       query: getCurrentBranch,
+      update(data) {
+        return data.workBranches.current.name;
+      },
     },
   },
   computed: {

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

@@ -20,8 +20,8 @@ import {
 } from '~/pipeline_editor/constants';
 import updateCurrentBranchMutation from '~/pipeline_editor/graphql/mutations/client/update_current_branch.mutation.graphql';
 import getAvailableBranchesQuery from '~/pipeline_editor/graphql/queries/available_branches.query.graphql';
-import getCurrentBranchQuery from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql';
-import getLastCommitBranchQuery from '~/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql';
+import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql';
+import getLastCommitBranch from '~/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql';
 
 export default {
   i18n: {
@@ -61,8 +61,8 @@ export default {
   },
   data() {
     return {
-      branchSelected: null,
       availableBranches: [],
+      branchSelected: null,
       filteredBranches: [],
       isSearchingBranches: false,
       pageLimit: this.paginationLimit,
@@ -93,15 +93,25 @@ export default {
       },
     },
     currentBranch: {
-      query: getCurrentBranchQuery,
+      query: getCurrentBranch,
+      update(data) {
+        return data.workBranches.current.name;
+      },
     },
     lastCommitBranch: {
-      query: getLastCommitBranchQuery,
-      result({ data: { lastCommitBranch } }) {
-        if (lastCommitBranch === '' || this.availableBranches.includes(lastCommitBranch)) {
-          return;
+      query: getLastCommitBranch,
+      update(data) {
+        return data.workBranches.lastCommit.name;
+      },
+      result({ data }) {
+        if (data) {
+          const { name: lastCommitBranch } = data.workBranches.lastCommit;
+          if (lastCommitBranch === '' || this.availableBranches.includes(lastCommitBranch)) {
+            return;
+          }
+
+          this.availableBranches.unshift(lastCommitBranch);
         }
-        this.availableBranches.unshift(lastCommitBranch);
       },
     },
   },
@@ -109,12 +119,12 @@ export default {
     branches() {
       return this.searchTerm.length > 0 ? this.filteredBranches : this.availableBranches;
     },
-    isBranchesLoading() {
-      return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches;
-    },
     enableBranchSwitcher() {
       return this.branches.length > 0 || this.searchTerm.length > 0;
     },
+    isBranchesLoading() {
+      return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches;
+    },
   },
   watch: {
     shouldLoadNewBranch(flag) {

app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue

@@ -48,6 +48,9 @@ export default {
   apollo: {
     pipelineEtag: {
       query: getPipelineEtag,
+      update(data) {
+        return data.etags.pipeline;
+      },
     },
     pipeline: {
       context() {

app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue

@@ -43,6 +43,9 @@ export default {
   apollo: {
     appStatus: {
       query: getAppStatus,
+      update(data) {
+        return data.app.status;
+      },
     },
   },
   computed: {

app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue

@@ -91,6 +91,9 @@ export default {
   apollo: {
     appStatus: {
       query: getAppStatus,
+      update(data) {
+        return data.app.status;
+      },
     },
   },
   computed: {

app/assets/javascripts/pipeline_editor/graphql/queries/client/app_status.query.graphql

 query getAppStatus {
-  appStatus @client
+  app @client {
+    status
+  }
 }

app/assets/javascripts/pipeline_editor/graphql/queries/client/current_branch.query.graphql

 query getCurrentBranch {
-  currentBranch @client
+  workBranches @client {
+    current {
+      name
+    }
+  }
 }

app/assets/javascripts/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql

 query getLastCommitBranchQuery {
-  lastCommitBranch @client
+  workBranches @client {
+    lastCommit {
+      name
+    }
+  }
 }

app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql

 query getPipelineEtag {
-  pipelineEtag @client
+  etags @client {
+    pipeline
+  }
 }

app/assets/javascripts/pipeline_editor/graphql/resolvers.js

 import axios from '~/lib/utils/axios_utils';
 import getAppStatus from './queries/client/app_status.query.graphql';
-import getCurrentBranchQuery from './queries/client/current_branch.query.graphql';
-import getLastCommitBranchQuery from './queries/client/last_commit_branch.query.graphql';
+import getCurrentBranch from './queries/client/current_branch.query.graphql';
+import getLastCommitBranch from './queries/client/last_commit_branch.query.graphql';
 import getPipelineEtag from './queries/client/pipeline_etag.query.graphql';
 
 export const resolvers = {
@@ -35,25 +35,51 @@ export const resolvers = {
     updateAppStatus: (_, { appStatus }, { cache }) => {
       cache.writeQuery({
         query: getAppStatus,
-        data: { appStatus },
+        data: {
+          app: {
+            __typename: 'PipelineEditorApp',
+            status: appStatus,
+          },
+        },
       });
     },
     updateCurrentBranch: (_, { currentBranch }, { cache }) => {
       cache.writeQuery({
-        query: getCurrentBranchQuery,
-        data: { currentBranch },
+        query: getCurrentBranch,
+        data: {
+          workBranches: {
+            __typename: 'BranchList',
+            current: {
+              __typename: 'WorkBranch',
+              name: currentBranch,
+            },
+          },
+        },
       });
     },
     updateLastCommitBranch: (_, { lastCommitBranch }, { cache }) => {
       cache.writeQuery({
-        query: getLastCommitBranchQuery,
-        data: { lastCommitBranch },
+        query: getLastCommitBranch,
+        data: {
+          workBranches: {
+            __typename: 'BranchList',
+            lastCommit: {
+              __typename: 'WorkBranch',
+              name: lastCommitBranch,
+            },
+          },
+        },
       });
     },
     updatePipelineEtag: (_, { pipelineEtag }, { cache }) => {
       cache.writeQuery({
         query: getPipelineEtag,
-        data: { pipelineEtag },
+        data: {
+          etags: {
+            __typename: 'EtagValues',
+            pipeline: pipelineEtag,
+          },
+        },
       });
     },
   },

app/assets/javascripts/pipeline_editor/graphql/typedefs.graphql

-type BlobContent {
-  rawData: String!
+type PipelineEditorApp {
+  status: String!
+}
+
+type BranchList {
+  current: WorkBranch!
+  lastCommit: WorkBranch!
+}
+
+type EtagValues {
+  pipeline: String!
+}
+
+type WorkBranch {
+  name: String!
+  commit: String
 }
 
 extend type Query {
-  blobContent: BlobContent
+  app: PipelineEditorApp
+  etags: EtagValues
+  workBranches: BranchList
 }

app/assets/javascripts/pipeline_editor/index.js

@@ -7,7 +7,7 @@ import { EDITOR_APP_STATUS_LOADING } from './constants';
 import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants';
 import getCurrentBranch from './graphql/queries/client/current_branch.query.graphql';
 import getAppStatus from './graphql/queries/client/app_status.query.graphql';
-import getLastCommitBranchQuery from './graphql/queries/client/last_commit_branch.query.graphql';
+import getLastCommitBranch from './graphql/queries/client/last_commit_branch.query.graphql';
 import getPipelineEtag from './graphql/queries/client/pipeline_etag.query.graphql';
 import { resolvers } from './graphql/resolvers';
 import typeDefs from './graphql/typedefs.graphql';
@@ -68,28 +68,46 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   cache.writeQuery({
     query: getAppStatus,
     data: {
-      appStatus: EDITOR_APP_STATUS_LOADING,
+      app: {
+        __typename: 'PipelineEditorApp',
+        status: EDITOR_APP_STATUS_LOADING,
+      },
     },
   });
 
   cache.writeQuery({
     query: getCurrentBranch,
     data: {
-      currentBranch: initialBranchName || defaultBranch,
+      workBranches: {
+        __typename: 'BranchList',
+        current: {
+          __typename: 'WorkBranch',
+          name: initialBranchName || defaultBranch,
+        },
+      },
     },
   });
 
   cache.writeQuery({
-    query: getPipelineEtag,
+    query: getLastCommitBranch,
     data: {
-      pipelineEtag,
+      workBranches: {
+        __typename: 'BranchList',
+        lastCommit: {
+          __typename: 'WorkBranch',
+          name: '',
+        },
+      },
     },
   });
 
   cache.writeQuery({
-    query: getLastCommitBranchQuery,
+    query: getPipelineEtag,
     data: {
-      lastCommitBranch: '',
+      etags: {
+        __typename: 'EtagValues',
+        pipeline: pipelineEtag,
+      },
     },
   });
 

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -160,6 +160,9 @@ export default {
     },
     appStatus: {
       query: getAppStatus,
+      update(data) {
+        return data.app.status;
+      },
     },
     commitSha: {
       query: getLatestCommitShaQuery,
@@ -184,6 +187,9 @@ export default {
     },
     currentBranch: {
       query: getCurrentBranch,
+      update(data) {
+        return data.workBranches.current.name;
+      },
     },
     starterTemplate: {
       query: getTemplate,

spec/features/projects/ci/editor_spec.rb

@@ -51,6 +51,17 @@ RSpec.describe 'Pipeline Editor', :js do
         expect(page).not_to have_content(default_branch)
       end
     end
+
+    it 'displays new branch as selected after commiting on a new branch' do
+      find('#target-branch-field').set('new_branch', clear: :backspace)
+
+      click_button 'Commit changes'
+
+      page.within('[data-testid="branch-selector"]') do
+        expect(page).to have_content('new_branch')
+        expect(page).not_to have_content(default_branch)
+      end
+    end
   end
 
   context 'Editor content' do

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

@@ -22,7 +22,6 @@ import {
   mockTotalBranches,
   mockTotalBranchResults,
   mockTotalSearchResults,
-  mockNewBranch,
 } from '../../mock_data';
 
 const localVue = createLocalVue();
@@ -32,18 +31,14 @@ describe('Pipeline editor branch switcher', () => {
   let wrapper;
   let mockApollo;
   let mockAvailableBranchQuery;
-  let mockCurrentBranchQuery;
-  let mockLastCommitBranchQuery;
-
-  const createComponent = (
-    { currentBranch, isQueryLoading, mountFn, options, props } = {
-      currentBranch: mockDefaultBranch,
-      hasUnsavedChanges: false,
-      isQueryLoading: false,
-      mountFn: shallowMount,
-      options: {},
-    },
-  ) => {
+
+  const createComponent = ({
+    currentBranch = mockDefaultBranch,
+    isQueryLoading = false,
+    mountFn = shallowMount,
+    options = {},
+    props = {},
+  } = {}) => {
     wrapper = mountFn(BranchSwitcher, {
       propsData: {
         ...props,
@@ -74,17 +69,7 @@ describe('Pipeline editor branch switcher', () => {
 
   const createComponentWithApollo = ({ mountFn = shallowMount, props = {} } = {}) => {
     const handlers = [[getAvailableBranchesQuery, mockAvailableBranchQuery]];
-    const resolvers = {
-      Query: {
-        currentBranch() {
-          return mockCurrentBranchQuery();
-        },
-        lastCommitBranch() {
-          return mockLastCommitBranchQuery();
-        },
-      },
-    };
-    mockApollo = createMockApollo(handlers, resolvers);
+    mockApollo = createMockApollo(handlers);
 
     createComponent({
       mountFn,
@@ -104,22 +89,12 @@ describe('Pipeline editor branch switcher', () => {
   const findInfiniteScroll = () => wrapper.findComponent(GlInfiniteScroll);
   const defaultBranchInDropdown = () => findDropdownItems().at(0);
 
-  const setMockResolvedValues = ({ availableBranches, currentBranch, lastCommitBranch }) => {
-    if (availableBranches) {
-      mockAvailableBranchQuery.mockResolvedValue(availableBranches);
-    }
-
-    if (currentBranch) {
-      mockCurrentBranchQuery.mockResolvedValue(currentBranch);
-    }
-
-    mockLastCommitBranchQuery.mockResolvedValue(lastCommitBranch || '');
+  const setAvailableBranchesMock = (availableBranches) => {
+    mockAvailableBranchQuery.mockResolvedValue(availableBranches);
   };
 
   beforeEach(() => {
     mockAvailableBranchQuery = jest.fn();
-    mockCurrentBranchQuery = jest.fn();
-    mockLastCommitBranchQuery = jest.fn();
   });
 
   afterEach(() => {
@@ -148,10 +123,7 @@ describe('Pipeline editor branch switcher', () => {
 
   describe('after querying', () => {
     beforeEach(async () => {
-      setMockResolvedValues({
-        availableBranches: mockProjectBranches,
-        currentBranch: mockDefaultBranch,
-      });
+      setAvailableBranchesMock(mockProjectBranches);
       createComponentWithApollo({ mountFn: mount });
       await waitForPromises();
     });
@@ -180,10 +152,7 @@ describe('Pipeline editor branch switcher', () => {
 
   describe('on fetch error', () => {
     beforeEach(async () => {
-      setMockResolvedValues({
-        availableBranches: new Error(),
-        currentBranch: mockDefaultBranch,
-      });
+      setAvailableBranchesMock(new Error());
       createComponentWithApollo();
       await waitForPromises();
     });
@@ -200,10 +169,7 @@ describe('Pipeline editor branch switcher', () => {
   describe('when switching branches', () => {
     beforeEach(async () => {
       jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
-      setMockResolvedValues({
-        availableBranches: mockProjectBranches,
-        currentBranch: mockDefaultBranch,
-      });
+      setAvailableBranchesMock(mockProjectBranches);
       createComponentWithApollo({ mountFn: mount });
       await waitForPromises();
     });
@@ -271,10 +237,7 @@ describe('Pipeline editor branch switcher', () => {
 
   describe('when searching', () => {
     beforeEach(async () => {
-      setMockResolvedValues({
-        availableBranches: mockProjectBranches,
-        currentBranch: mockDefaultBranch,
-      });
+      setAvailableBranchesMock(mockProjectBranches);
       createComponentWithApollo({ mountFn: mount });
       await waitForPromises();
     });
@@ -374,10 +337,7 @@ describe('Pipeline editor branch switcher', () => {
 
   describe('when scrolling to the bottom of the list', () => {
     beforeEach(async () => {
-      setMockResolvedValues({
-        availableBranches: mockProjectBranches,
-        currentBranch: mockDefaultBranch,
-      });
+      setAvailableBranchesMock(mockProjectBranches);
       createComponentWithApollo();
       await waitForPromises();
     });
@@ -433,35 +393,4 @@ describe('Pipeline editor branch switcher', () => {
       });
     });
   });
-
-  describe('when committing a new branch', () => {
-    const createNewBranch = async () => {
-      setMockResolvedValues({
-        currentBranch: mockNewBranch,
-        lastCommitBranch: mockNewBranch,
-      });
-      await wrapper.vm.$apollo.queries.currentBranch.refetch();
-      await wrapper.vm.$apollo.queries.lastCommitBranch.refetch();
-    };
-
-    beforeEach(async () => {
-      setMockResolvedValues({
-        availableBranches: mockProjectBranches,
-        currentBranch: mockDefaultBranch,
-      });
-      createComponentWithApollo({ mountFn: mount });
-      await waitForPromises();
-      await createNewBranch();
-    });
-
-    it('sets new branch as current branch', () => {
-      expect(defaultBranchInDropdown().text()).toBe(mockNewBranch);
-      expect(defaultBranchInDropdown().props('isChecked')).toBe(true);
-    });
-
-    it('adds new branch to branch switcher', () => {
-      expect(defaultBranchInDropdown().text()).toBe(mockNewBranch);
-      expect(findDropdownItems()).toHaveLength(mockTotalBranchResults + 1);
-    });
-  });
 });