diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
4 files changed, 23 insertions, 28 deletions
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 4398ba67d47..1f8ddae3696 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 @@ -237,7 +237,7 @@ export default { v-for="branch in availableBranches" :key="branch" :is-checked="currentBranch === branch" - :is-check-item="true" + is-check-item data-qa-selector="branch_menu_item_button" @click="selectBranch(branch)" > diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue index 7beabcfe403..feadc60a22a 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue @@ -1,6 +1,6 @@ <script> import { __ } from '~/locale'; -import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; +import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue'; import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql'; import { PIPELINE_FAILURE } from '../../constants'; @@ -10,8 +10,6 @@ export default { }, components: { PipelineMiniGraph, - LinkedPipelinesMiniList: () => - import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'), }, inject: ['projectFullPath'], props: { @@ -47,9 +45,6 @@ export default { downstreamPipelines() { return this.linkedPipelines?.downstream?.nodes || []; }, - hasDownstreamPipelines() { - return this.downstreamPipelines.length > 0; - }, hasPipelineStages() { return this.pipelineStages.length > 0; }, @@ -87,23 +82,11 @@ export default { </script> <template> - <div + <pipeline-mini-graph v-if="hasPipelineStages" - class="gl-align-items-center gl-display-inline-flex gl-flex-wrap stage-cell gl-mr-5" - > - <linked-pipelines-mini-list - v-if="upstreamPipeline" - :triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ - upstreamPipeline, - ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" - data-testid="pipeline-editor-mini-graph-upstream" - /> - <pipeline-mini-graph :stages="pipelineStages" /> - <linked-pipelines-mini-list - v-if="hasDownstreamPipelines" - :triggered="downstreamPipelines" - :pipeline-path="pipelinePath" - data-testid="pipeline-editor-mini-graph-downstream" - /> - </div> + :downstream-pipelines="downstreamPipelines" + :pipeline-path="pipelinePath" + :stages="pipelineStages" + :upstream-pipeline="upstreamPipeline" + /> </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 4b9c98135ec..137dfca68d6 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -174,7 +174,7 @@ export default { <div class="gl-display-flex gl-flex-wrap"> <pipeline-editor-mini-graph :pipeline="pipeline" v-on="$listeners" /> <gl-button - class="gl-mt-2 gl-md-mt-0" + class="gl-ml-3" category="secondary" variant="confirm" :href="status.detailsPath" diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 3fd31edec2c..548769eb214 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -47,6 +47,7 @@ export default { currentCiFileContent: '', failureType: null, failureReasons: [], + hasBranchLoaded: false, initialCiFileContent: '', isFetchingCommitSha: false, isLintUnavailable: false, @@ -234,7 +235,7 @@ export default { return this.lastCommittedContent !== this.currentCiFileContent; }, isBlobContentLoading() { - return this.$apollo.queries.initialCiFileContent.loading; + return !this.hasBranchLoaded || this.$apollo.queries.initialCiFileContent.loading; }, isCiConfigDataLoading() { return this.$apollo.queries.ciConfigData.loading; @@ -243,7 +244,7 @@ export default { return this.currentCiFileContent === ''; }, shouldSkipBlobContentQuery() { - return this.isNewCiConfigFile || this.lastCommittedContent || !this.currentBranch; + return this.isNewCiConfigFile || this.lastCommittedContent || !this.hasBranchLoaded; }, shouldSkipCiConfigQuery() { return !this.currentCiFileContent || !this.commitSha; @@ -264,6 +265,17 @@ export default { }, }, watch: { + currentBranch: { + immediate: true, + handler(branch) { + // currentBranch is a client query so it starts off undefined. In the index.js, + // write to the apollo cache. Once that operation is done, we can safely do operations + // that require the branch to have loaded. + if (branch) { + this.hasBranchLoaded = true; + } + }, + }, isEmpty(flag) { if (flag) { this.setAppStatus(EDITOR_APP_STATUS_EMPTY); |