Skip to content

G
gitlab-ce
Commit 96ea81ae authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '347702-refactor-all-scalar-values-at-apollo-root-level-part2' into 'master' 

Restructure client queries in Pipeline editor

See merge request gitlab-org/gitlab!76795
parents e7df7f46 5c9c86a3
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 121 deletions
app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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/current_branch.query.graphql
View file @ 96ea81ae
query getCurrentBranch {
currentBranch @client
workBranches @client {
current {
name
}
}
}
app/assets/javascripts/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql
View file @ 96ea81ae
query getLastCommitBranchQuery {
lastCommitBranch @client
workBranches @client {
lastCommit {
name
}
}
}
app/assets/javascripts/pipeline_editor/graphql/resolvers.js
View file @ 96ea81ae
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
View file @ 96ea81ae
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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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
View file @ 96ea81ae
......@@ -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);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7