diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
index 853e839a7abbd54730afd6dedb8e806efc328680..73c91839f04895bd8c1d0ff7da7e8d20a7f2e2c7 100644
--- a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
+++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
@@ -1,18 +1,27 @@
<script>
-import { GlIcon } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf, GlIcon } from '@gitlab/ui';
import { uniqueId } from 'lodash';
+import { helpPagePath } from '~/helpers/help_page_helper';
import { s__ } from '~/locale';
import SourceEditor from '~/vue_shared/components/source_editor.vue';
+import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
export default {
i18n: {
viewOnlyMessage: s__('Pipelines|Merged YAML is view only'),
+ unavailableDefaultTitle: s__('Pipelines|Merged YAML unavailable'),
+ unavailableDefaultText: s__(
+ 'Pipelines|The merged YAML view is only available for the default branch. %{linkStart}Learn more.%{linkEnd}',
+ ),
},
components: {
SourceEditor,
+ GlAlert,
GlIcon,
+ GlLink,
+ GlSprintf,
},
- inject: ['ciConfigPath'],
+ inject: ['ciConfigPath', 'defaultBranch'],
props: {
ciConfigData: {
type: Object,
@@ -24,6 +33,15 @@ export default {
failureType: null,
};
},
+ // This is not the best practice, don't copy me (@samdbeckham)
+ // This is a temporary workaround to unblock a release.
+ // See this comment for more information on this approach
+ // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65972#note_626095648
+ apollo: {
+ currentBranch: {
+ query: getCurrentBranch,
+ },
+ },
computed: {
fileGlobalId() {
return `${this.ciConfigPath}-${uniqueId()}`;
@@ -31,24 +49,44 @@ export default {
mergedYaml() {
return this.ciConfigData.mergedYaml;
},
+ isOnDefaultBranch() {
+ return this.currentBranch === this.defaultBranch;
+ },
+ expandedConfigHelpPath() {
+ return helpPagePath('ci/pipeline_editor/index', { anchor: 'view-expanded-configuration' });
+ },
},
};
</script>
<template>
<div>
- <div class="gl-display-flex gl-align-items-center">
- <gl-icon :size="16" name="lock" class="gl-text-gray-500 gl-mr-3" />
- {{ $options.i18n.viewOnlyMessage }}
- </div>
- <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
- <source-editor
- ref="editor"
- :value="mergedYaml"
- :file-name="ciConfigPath"
- :file-global-id="fileGlobalId"
- :editor-options="{ readOnly: true }"
- v-on="$listeners"
- />
+ <div v-if="isOnDefaultBranch">
+ <div class="gl-display-flex gl-align-items-center">
+ <gl-icon :size="16" name="lock" class="gl-text-gray-500 gl-mr-3" />
+ {{ $options.i18n.viewOnlyMessage }}
+ </div>
+ <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
+ <source-editor
+ ref="editor"
+ :value="mergedYaml"
+ :file-name="ciConfigPath"
+ :file-global-id="fileGlobalId"
+ :editor-options="{ readOnly: true }"
+ v-on="$listeners"
+ />
+ </div>
</div>
+ <gl-alert
+ v-else
+ variant="info"
+ :dismissible="false"
+ :title="$options.i18n.unavailableDefaultTitle"
+ >
+ <gl-sprintf :message="$options.i18n.unavailableDefaultText">
+ <template #link="{ content }">
+ <gl-link :href="expandedConfigHelpPath" target="_blank">{{ content }}</gl-link>
+ </template>
+ </gl-sprintf>
+ </gl-alert>
</div>
</template>
diff --git a/doc/ci/pipeline_editor/index.md b/doc/ci/pipeline_editor/index.md
index 6e0ba8fa33feebd025da44dce2879d7a3fd4ed9b..949cfeb319d6bb270d0188a1b5648c115e23928b 100644
--- a/doc/ci/pipeline_editor/index.md
+++ b/doc/ci/pipeline_editor/index.md
@@ -85,6 +85,9 @@ where:
[extended configuration merged into the job](../yaml/index.md#merge-details).
- YAML anchors are [replaced with the linked configuration](../yaml/index.md#anchors).
+NOTE:
+You can only see the expanded view when editing the [default branch](../../user/project/repository/branches/default.md).
+
## Commit changes to CI configuration
The commit form appears at the bottom of each tab in the editor so you can commit
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4645aeb1abba912eb8642f11376d0c42957ea1d7..eee9af5f627b94325525dd39c3589c974d3c76fd 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -24221,6 +24221,9 @@ msgstr ""
msgid "Pipelines|Merged YAML is view only"
msgstr ""
+msgid "Pipelines|Merged YAML unavailable"
+msgstr ""
+
msgid "Pipelines|More Information"
msgstr ""
@@ -24257,6 +24260,9 @@ msgstr ""
msgid "Pipelines|The GitLab CI configuration could not be updated."
msgstr ""
+msgid "Pipelines|The merged YAML view is only available for the default branch. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
msgid "Pipelines|There are currently no finished pipelines."
msgstr ""
diff --git a/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js b/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
index 7dd8a77d055756e90a5943109b80197a6aee2751..b797a664b751cab82167428fb463d5ae86da6293 100644
--- a/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
+++ b/spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
@@ -1,10 +1,12 @@
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { EDITOR_READY_EVENT } from '~/editor/constants';
import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
import { mockLintResponse, mockCiConfigPath } from '../../mock_data';
+const DEFAULT_BRANCH = 'main';
+
describe('Text editor component', () => {
let wrapper;
@@ -16,7 +18,7 @@ describe('Text editor component', () => {
},
};
- const createComponent = ({ props = {} } = {}) => {
+ const createComponent = ({ props = {}, currentBranch = DEFAULT_BRANCH } = {}) => {
wrapper = shallowMount(CiConfigMergedPreview, {
propsData: {
ciConfigData: mockLintResponse,
@@ -24,20 +26,45 @@ describe('Text editor component', () => {
},
provide: {
ciConfigPath: mockCiConfigPath,
+ defaultBranch: DEFAULT_BRANCH,
},
stubs: {
SourceEditor: MockSourceEditor,
},
+ data() {
+ return {
+ currentBranch,
+ };
+ },
});
};
const findIcon = () => wrapper.findComponent(GlIcon);
+ const findAlert = () => wrapper.findComponent(GlAlert);
const findEditor = () => wrapper.findComponent(MockSourceEditor);
afterEach(() => {
wrapper.destroy();
});
+ // This is testing a temporary feature.
+ // It may be slightly hacky code that doesn't follow best practice.
+ // See the related MR for more information.
+ // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65972#note_626095644
+ describe('on a non-default branch', () => {
+ beforeEach(() => {
+ createComponent({ currentBranch: 'feature' });
+ });
+
+ it('does not load the editor', () => {
+ expect(findEditor().exists()).toBe(false);
+ });
+
+ it('renders an informational alert', () => {
+ expect(findAlert().exists()).toBe(true);
+ });
+ });
+
describe('when status is valid', () => {
beforeEach(() => {
createComponent();