Commit 0b9b0e64 authored by Sam Beckham's avatar Sam Beckham Committed by Miguel Rincon

When a non-default branch is selected, the merged YAML result is

potentially incorrect. This issue is being addressed elsewhere, but this
solution hides the tab when editing on the non-default branch.

It's a temporary solution that should be reverted as soon as the merged
YAML functionality works correctly across multiple branches.
parent 16c21707
<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>
......@@ -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
......
......@@ -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 ""
......
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();
......
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