diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
6 files changed, 89 insertions, 46 deletions
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 f2a0f474bc4..7b8e97b573e 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue @@ -9,15 +9,8 @@ export default { SourceEditor, }, mixins: [glFeatureFlagMixin()], - inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'], + inject: ['ciConfigPath'], inheritAttrs: false, - props: { - commitSha: { - type: String, - required: false, - default: '', - }, - }, methods: { onCiConfigUpdate(content) { this.$emit('updateCiConfig', content); @@ -27,11 +20,7 @@ export default { const editorInstance = this.$refs.editor.getEditor(); editorInstance.use(new CiSchemaExtension({ instance: editorInstance })); - editorInstance.registerCiSchema({ - projectPath: this.projectPath, - projectNamespace: this.projectNamespace, - ref: this.commitSha || this.defaultBranch, - }); + editorInstance.registerCiSchema(); } }, }, 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 new file mode 100644 index 00000000000..75b1398a3c2 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue @@ -0,0 +1,49 @@ +<script> +import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; + +export default { + components: { + PipelineMiniGraph, + }, + props: { + pipeline: { + type: Object, + required: true, + }, + }, + computed: { + pipelinePath() { + return this.pipeline.detailedStatus?.detailsPath || ''; + }, + pipelineStages() { + const stages = this.pipeline.stages?.edges; + if (!stages) { + return []; + } + + return stages.map(({ node }) => { + const { name, detailedStatus } = node; + return { + // TODO: fetch dropdown_path from graphql when available + // see https://gitlab.com/gitlab-org/gitlab/-/issues/342585 + dropdown_path: `${this.pipelinePath}/stage.json?stage=${name}`, + name, + path: `${this.pipelinePath}#${name}`, + status: { + details_path: `${this.pipelinePath}#${name}`, + has_details: detailedStatus.hasDetails, + ...detailedStatus, + }, + title: `${name}: ${detailedStatus.text}`, + }; + }); + }, + }, +}; +</script> + +<template> + <div v-if="pipelineStages.length > 0" class="stage-cell gl-mr-5"> + <pipeline-mini-graph class="gl-display-inline" :stages="pipelineStages" /> + </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 ec240854be5..a1fa2147994 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -10,6 +10,8 @@ import { toggleQueryPollingByVisibility, } from '~/pipelines/components/graph/utils'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue'; const POLL_INTERVAL = 10000; export const i18n = { @@ -30,7 +32,9 @@ export default { GlLink, GlLoadingIcon, GlSprintf, + PipelineEditorMiniGraph, }, + mixins: [glFeatureFlagMixin()], inject: ['projectFullPath'], props: { commitSha: { @@ -55,12 +59,15 @@ export default { }; }, update(data) { - const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {}; + const { id, commitPath = '', detailedStatus = {}, stages, status } = + data.project?.pipeline || {}; return { id, commitPath, detailedStatus, + stages, + status, }; }, result(res) { @@ -111,9 +118,7 @@ export default { </script> <template> - <div - class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-white-space-nowrap gl-max-w-full" - > + <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap"> <template v-if="showLoadingState"> <div> <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" /> @@ -129,19 +134,12 @@ export default { <template v-else> <div> <a :href="status.detailsPath" class="gl-mr-auto"> - <ci-icon :status="status" :size="16" /> + <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" /> </a> <span class="gl-font-weight-bold"> <gl-sprintf :message="$options.i18n.pipelineInfo"> <template #id="{ content }"> - <gl-link - :href="status.detailsPath" - class="pipeline-id gl-font-weight-normal pipeline-number" - target="_blank" - data-testid="pipeline-id" - > - {{ content }}{{ pipelineId }}</gl-link - > + <span data-testid="pipeline-id"> {{ content }}{{ pipelineId }} </span> </template> <template #status>{{ status.text }}</template> <template #commit> @@ -157,8 +155,13 @@ export default { </gl-sprintf> </span> </div> - <div> + <div class="gl-display-flex gl-flex-wrap"> + <pipeline-editor-mini-graph + v-if="glFeatures.pipelineEditorMiniGraph" + :pipeline="pipeline" + /> <gl-button + class="gl-mt-2 gl-md-mt-0" target="_blank" category="secondary" variant="confirm" 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 fbb66231f16..dcd08c9de8d 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 @@ -2,7 +2,6 @@ import { GlButton, GlSprintf } from '@gitlab/ui'; import { __ } from '~/locale'; import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { @@ -17,17 +16,11 @@ export default { ), btnText: __('Create new CI/CD pipeline'), }, - mixins: [glFeatureFlagsMixin()], inject: { emptyStateIllustrationPath: { default: '', }, }, - computed: { - showCTAButton() { - return this.glFeatures.pipelineEditorEmptyStateAction; - }, - }, methods: { createEmptyConfigFile() { this.$emit('createEmptyConfigFile'); @@ -48,12 +41,7 @@ export default { </template> </gl-sprintf> </p> - <gl-button - v-if="showCTAButton" - variant="confirm" - class="gl-mt-3" - @click="createEmptyConfigFile" - > + <gl-button variant="confirm" class="gl-mt-3" @click="createEmptyConfigFile"> {{ $options.i18n.btnText }} </gl-button> </div> diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql index d3a7387ad2d..0c3653a2880 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql @@ -11,6 +11,25 @@ query getPipeline($fullPath: ID!, $sha: String!) { group text } + stages { + edges { + node { + id + name + status + detailedStatus { + detailsPath + group + hasDetails + icon + id + label + text + tooltip + } + } + } + } } } } diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 4324c64ab3b..ba567023946 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -1,5 +1,4 @@ <script> -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CommitSection from './components/commit/commit_section.vue'; import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue'; import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue'; @@ -15,7 +14,6 @@ export default { PipelineEditorHeader, PipelineEditorTabs, }, - mixins: [glFeatureFlagMixin()], props: { ciConfigData: { type: Object, @@ -44,9 +42,6 @@ export default { showCommitForm() { return TABS_WITH_COMMIT_FORM.includes(this.currentTab); }, - showPipelineDrawer() { - return this.glFeatures.pipelineEditorDrawer; - }, }, methods: { setCurrentTab(tabName) { @@ -77,6 +72,6 @@ export default { :commit-sha="commitSha" v-on="$listeners" /> - <pipeline-editor-drawer v-if="showPipelineDrawer" /> + <pipeline-editor-drawer /> </div> </template> |