diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
16 files changed, 99 insertions, 108 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue index 8f4894a0bde..0308cd9c565 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue @@ -10,7 +10,6 @@ import { import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql'; import updateCurrentBranchMutation from '../../graphql/mutations/update_current_branch.mutation.graphql'; import updateLastCommitBranchMutation from '../../graphql/mutations/update_last_commit_branch.mutation.graphql'; -import getCommitSha from '../../graphql/queries/client/commit_sha.graphql'; import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql'; import getIsNewCiConfigFile from '../../graphql/queries/client/is_new_ci_config_file.graphql'; import getPipelineEtag from '../../graphql/queries/client/pipeline_etag.graphql'; @@ -37,6 +36,11 @@ export default { type: String, required: true, }, + commitSha: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -49,9 +53,6 @@ export default { isNewCiConfigFile: { query: getIsNewCiConfigFile, }, - commitSha: { - query: getCommitSha, - }, currentBranch: { query: getCurrentBranch, }, @@ -96,13 +97,7 @@ export default { lastCommitId: this.commitSha, }, update(store, { data }) { - const commitSha = data?.commitCreate?.commit?.sha; const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath; - - if (commitSha) { - store.writeQuery({ query: getCommitSha, data: { commitSha } }); - } - if (pipelineEtag) { store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } }); } @@ -117,6 +112,9 @@ export default { this.$emit('commit', { type: COMMIT_SUCCESS }); this.updateLastCommitBranch(targetBranch); this.updateCurrentBranch(targetBranch); + if (this.currentBranch === targetBranch) { + this.$emit('updateCommitSha'); + } } } catch (error) { this.$emit('showError', { type: COMMIT_FAILURE, reasons: [error?.message] }); diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue index 77ede396496..f2a0f474bc4 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue @@ -3,7 +3,6 @@ import { EDITOR_READY_EVENT } from '~/editor/constants'; import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext'; import SourceEditor from '~/vue_shared/components/source_editor.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import getCommitSha from '../../graphql/queries/client/commit_sha.graphql'; export default { components: { @@ -12,14 +11,11 @@ export default { mixins: [glFeatureFlagMixin()], inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'], inheritAttrs: false, - data() { - return { - commitSha: '', - }; - }, - apollo: { + props: { commitSha: { - query: getCommitSha, + type: String, + required: false, + default: '', }, }, methods: { diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue index 9a6eed50fbe..68065cc3c73 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue @@ -158,11 +158,9 @@ export default { const updatedPath = setUrlParams({ branch_name: newBranch }); historyPushState(updatedPath); - this.$emit('updateCommitSha', { newBranch }); - // refetching the content will cause a lot of components to re-render, // including the text editor which uses the commit sha to register the CI schema - // so we need to make sure the commit sha is updated first + // so we need to make sure the currentBranch (and consequently, the commitSha) are updated first await this.$nextTick(); this.$emit('refetchContent'); }, diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue index ebe73bdcec3..551a0430fbf 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue @@ -1,21 +1,14 @@ <script> -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import BranchSwitcher from './branch_switcher.vue'; export default { components: { BranchSwitcher, }, - mixins: [glFeatureFlagsMixin()], - computed: { - showBranchSwitcher() { - return this.glFeatures.pipelineEditorBranchSwitcher; - }, - }, }; </script> <template> <div class="gl-mb-4"> - <branch-switcher v-if="showBranchSwitcher" v-on="$listeners" /> + <branch-switcher v-on="$listeners" /> </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue index 24bca04e115..fcc31f087ff 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue @@ -33,6 +33,11 @@ export default { type: Object, required: true, }, + commitSha: { + type: String, + required: false, + default: '', + }, isNewCiConfigFile: { type: Boolean, required: true, @@ -54,7 +59,11 @@ export default { </script> <template> <div class="gl-mb-5"> - <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" /> + <pipeline-status + v-if="showPipelineStatus" + :commit-sha="commitSha" + :class="$options.pipelineStatusClasses" + /> <validation-segment :class="validationStyling" :ci-config="ciConfigData" /> </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue index 46f6f4a28c1..ec240854be5 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -3,7 +3,6 @@ import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { truncateSha } from '~/lib/utils/text_utility'; import { s__ } from '~/locale'; -import getCommitSha from '~/pipeline_editor/graphql/queries/client/commit_sha.graphql'; import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql'; import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql'; import { @@ -33,10 +32,14 @@ export default { GlSprintf, }, inject: ['projectFullPath'], - apollo: { + props: { commitSha: { - query: getCommitSha, + type: String, + required: false, + default: '', }, + }, + apollo: { pipelineEtag: { query: getPipelineEtag, }, @@ -51,7 +54,7 @@ export default { sha: this.commitSha, }; }, - update: (data) => { + update(data) { const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {}; return { @@ -60,6 +63,11 @@ export default { detailedStatus, }; }, + result(res) { + if (res.data?.project?.pipeline) { + this.hasError = false; + } + }, error() { this.hasError = true; }, @@ -68,7 +76,6 @@ export default { }, data() { return { - commitSha: '', hasError: false, }; }, @@ -84,7 +91,11 @@ export default { // (e.g. pipeline is null during fetch when the pipeline hasn't been // triggered yet), we can just show the loading state until the pipeline // details are ready to be fetched - return this.$apollo.queries.pipeline.loading || (!this.hasPipelineData && !this.hasError); + return ( + this.$apollo.queries.pipeline.loading || + this.commitSha.length === 0 || + (!this.hasPipelineData && !this.hasError) + ); }, shortSha() { return truncateSha(this.commitSha); diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue index e463fcf379d..f7c9f10ea46 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -69,6 +69,11 @@ export default { type: String, required: true, }, + commitSha: { + type: String, + required: false, + default: '', + }, }, apollo: { appStatus: { @@ -110,7 +115,7 @@ export default { @click="setCurrentTab($options.tabConstants.CREATE_TAB)" > <ci-editor-header /> - <text-editor :value="ciFileContent" v-on="$listeners" /> + <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" /> </editor-tab> <editor-tab class="gl-mb-3" diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue index 0ac4a40ff4a..fbb66231f16 100644 --- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue +++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue @@ -24,9 +24,6 @@ export default { }, }, computed: { - showFileNav() { - return this.glFeatures.pipelineEditorBranchSwitcher; - }, showCTAButton() { return this.glFeatures.pipelineEditorEmptyStateAction; }, @@ -40,7 +37,7 @@ export default { </script> <template> <div> - <pipeline-editor-file-nav v-if="showFileNav" v-on="$listeners" /> + <pipeline-editor-file-nav v-on="$listeners" /> <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11"> <img :src="emptyStateIllustrationPath" /> <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index d05b06d16db..bb03fa126a5 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -43,3 +43,5 @@ export const pipelineEditorTrackingOptions = { export const TEMPLATE_REPOSITORY_URL = 'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates'; + +export const COMMIT_SHA_POLL_INTERVAL = 1000; diff --git a/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql b/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql deleted file mode 100644 index dce17cad808..00000000000 --- a/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql +++ /dev/null @@ -1,3 +0,0 @@ -mutation updateCommitSha($commitSha: String) { - updateCommitSha(commitSha: $commitSha) @client -} diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql deleted file mode 100644 index 6c7635887ec..00000000000 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql +++ /dev/null @@ -1,3 +0,0 @@ -query getCommitSha { - commitSha @client -} diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql index 219c23bb22b..02d49507947 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql @@ -1,11 +1,10 @@ query getLatestCommitSha($projectPath: ID!, $ref: String) { project(fullPath: $projectPath) { - pipelines(ref: $ref) { - nodes { - id - sha - path - commitPath + repository { + tree(ref: $ref) { + lastCommit { + sha + } } } } diff --git a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js index 2bec2006e95..a34652b1495 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js +++ b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js @@ -1,6 +1,5 @@ import produce from 'immer'; import axios from '~/lib/utils/axios_utils'; -import getCommitShaQuery from './queries/client/commit_sha.graphql'; import getCurrentBranchQuery from './queries/client/current_branch.graphql'; import getLastCommitBranchQuery from './queries/client/last_commit_branch.query.graphql'; @@ -32,14 +31,6 @@ export const resolvers = { __typename: 'CiLintContent', })); }, - updateCommitSha: (_, { commitSha }, { cache }) => { - cache.writeQuery({ - query: getCommitShaQuery, - data: produce(cache.readQuery({ query: getCommitShaQuery }), (draftData) => { - draftData.commitSha = commitSha; - }), - }); - }, updateCurrentBranch: (_, { currentBranch }, { cache }) => { cache.writeQuery({ query: getCurrentBranchQuery, diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index e0f8d889cad..89b9091e6f9 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -4,7 +4,6 @@ import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { resetServiceWorkersPublicPath } from '../lib/utils/webpack'; import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants'; -import getCommitSha from './graphql/queries/client/commit_sha.graphql'; import getCurrentBranch from './graphql/queries/client/current_branch.graphql'; import getLastCommitBranchQuery from './graphql/queries/client/last_commit_branch.query.graphql'; import getPipelineEtag from './graphql/queries/client/pipeline_etag.graphql'; @@ -26,7 +25,6 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { const { // Add to apollo cache as it can be updated by future queries - commitSha, initialBranchName, pipelineEtag, // Add to provide/inject API for static values @@ -58,7 +56,11 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { Vue.use(VueApollo); const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(resolvers, { typeDefs, useGet: true }), + defaultClient: createDefaultClient(resolvers, { + typeDefs, + useGet: true, + assumeImmutableResults: true, + }), }); const { cache } = apolloProvider.clients.defaultClient; @@ -70,13 +72,6 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { }); cache.writeQuery({ - query: getCommitSha, - data: { - commitSha, - }, - }); - - cache.writeQuery({ query: getPipelineEtag, data: { pipelineEtag, diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 0e8a6805a59..e70417145ab 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -10,17 +10,16 @@ import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue'; import PipelineEditorMessages from './components/ui/pipeline_editor_messages.vue'; import { + COMMIT_SHA_POLL_INTERVAL, EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_ERROR, EDITOR_APP_STATUS_LOADING, LOAD_FAILURE_UNKNOWN, STARTER_TEMPLATE_NAME, } from './constants'; -import updateCommitShaMutation from './graphql/mutations/update_commit_sha.mutation.graphql'; import getBlobContent from './graphql/queries/blob_content.graphql'; import getCiConfigData from './graphql/queries/ci_config.graphql'; import getAppStatus from './graphql/queries/client/app_status.graphql'; -import getCommitSha from './graphql/queries/client/commit_sha.graphql'; import getCurrentBranch from './graphql/queries/client/current_branch.graphql'; import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql'; import getTemplate from './graphql/queries/get_starter_template.query.graphql'; @@ -50,6 +49,7 @@ export default { failureType: null, failureReasons: [], initialCiFileContent: '', + isFetchingCommitSha: false, isNewCiConfigFile: false, lastCommittedContent: '', currentCiFileContent: '', @@ -136,7 +136,7 @@ export default { update(data) { const { ciConfig } = data || {}; const stageNodes = ciConfig?.stages?.nodes || []; - const stages = unwrapStagesWithNeeds(stageNodes); + const stages = unwrapStagesWithNeeds(JSON.parse(JSON.stringify(stageNodes))); return { ...ciConfig, stages }; }, @@ -156,7 +156,25 @@ export default { query: getAppStatus, }, commitSha: { - query: getCommitSha, + query: getLatestCommitShaQuery, + variables() { + return { + projectPath: this.projectFullPath, + ref: this.currentBranch, + }; + }, + update(data) { + const latestCommitSha = data.project?.repository?.tree?.lastCommit?.sha; + + if (this.isFetchingCommitSha && latestCommitSha === this.commitSha) { + this.$apollo.queries.commitSha.startPolling(COMMIT_SHA_POLL_INTERVAL); + return this.commitSha; + } + + this.isFetchingCommitSha = false; + this.$apollo.queries.commitSha.stopPolling(); + return latestCommitSha; + }, }, currentBranch: { query: getCurrentBranch, @@ -257,37 +275,9 @@ export default { updateCiConfig(ciFileContent) { this.currentCiFileContent = ciFileContent; }, - async updateCommitSha({ newBranch }) { - let fetchResults; - - try { - fetchResults = await this.$apollo.query({ - query: getLatestCommitShaQuery, - variables: { - projectPath: this.projectFullPath, - ref: newBranch, - }, - }); - } catch { - this.showFetchError(); - return; - } - - if (fetchResults.errors?.length > 0) { - this.showFetchError(); - return; - } - - const pipelineNodes = fetchResults?.data?.project?.pipelines?.nodes ?? []; - if (pipelineNodes.length === 0) { - return; - } - - const commitSha = pipelineNodes[0].sha; - this.$apollo.mutate({ - mutation: updateCommitShaMutation, - variables: { commitSha }, - }); + updateCommitSha() { + this.isFetchingCommitSha = true; + this.$apollo.queries.commitSha.refetch(); }, updateOnCommit({ type }) { this.reportSuccess(type); @@ -336,6 +326,7 @@ export default { :ci-config-data="ciConfigData" :ci-file-content="currentCiFileContent" :is-new-ci-config-file="isNewCiConfigFile" + :commit-sha="commitSha" @commit="updateOnCommit" @resetContent="resetContent" @showError="showErrorAlert" diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index dfe9c82b912..4324c64ab3b 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -25,6 +25,11 @@ export default { type: String, required: true, }, + commitSha: { + type: String, + required: false, + default: '', + }, isNewCiConfigFile: { type: Boolean, required: true, @@ -56,15 +61,22 @@ export default { <pipeline-editor-file-nav v-on="$listeners" /> <pipeline-editor-header :ci-config-data="ciConfigData" + :commit-sha="commitSha" :is-new-ci-config-file="isNewCiConfigFile" /> <pipeline-editor-tabs :ci-config-data="ciConfigData" :ci-file-content="ciFileContent" + :commit-sha="commitSha" v-on="$listeners" @set-current-tab="setCurrentTab" /> - <commit-section v-if="showCommitForm" :ci-file-content="ciFileContent" v-on="$listeners" /> + <commit-section + v-if="showCommitForm" + :ci-file-content="ciFileContent" + :commit-sha="commitSha" + v-on="$listeners" + /> <pipeline-editor-drawer v-if="showPipelineDrawer" /> </div> </template> |