Commit bf590ebf authored by David O'Regan's avatar David O'Regan

Merge branch '263141-ci-cd-home-mvc-pipeline-graph' into 'master'

Add pipeline graph to editor page

See merge request gitlab-org/gitlab!46580
parents 8c83e8a5 99e35d34
......@@ -16,6 +16,11 @@ export default {
</script>
<template>
<div class="gl-border-solid gl-border-gray-100 gl-border-1">
<editor-lite v-model="value" file-name="*.yml" :editor-options="{ readOnly: true }" />
<editor-lite
v-model="value"
file-name="*.yml"
:editor-options="{ readOnly: true }"
@editor-ready="$emit('editor-ready')"
/>
</div>
</template>
<script>
import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
import { GlLoadingIcon, GlAlert, GlTabs, GlTab } from '@gitlab/ui';
import { __, s__, sprintf } from '~/locale';
import TextEditor from './components/text_editor.vue';
import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
import getBlobContent from './graphql/queries/blob_content.graphql';
......@@ -10,7 +11,10 @@ export default {
components: {
GlLoadingIcon,
GlAlert,
GlTabs,
GlTab,
TextEditor,
PipelineGraph,
},
props: {
projectPath: {
......@@ -31,6 +35,7 @@ export default {
return {
error: null,
content: '',
editorIsReady: false,
};
},
apollo: {
......@@ -66,10 +71,16 @@ export default {
const reason = networkReason ?? generalReason ?? this.$options.i18n.unknownError;
return sprintf(this.$options.i18n.errorMessageWithReason, { reason });
},
pipelineData() {
// Note data will loaded as part of https://gitlab.com/gitlab-org/gitlab/-/issues/263141
return {};
},
},
i18n: {
unknownError: __('Unknown Error'),
errorMessageWithReason: s__('Pipelines|CI file could not be loaded: %{reason}'),
tabEdit: s__('Pipelines|Write pipeline configuration'),
tabGraph: s__('Pipelines|Visualize'),
},
};
</script>
......@@ -79,7 +90,19 @@ export default {
<gl-alert v-if="error" :dismissible="false" variant="danger">{{ errorMessage }}</gl-alert>
<div class="gl-mt-4">
<gl-loading-icon v-if="loading" size="lg" />
<text-editor v-else v-model="content" />
<div v-else class="file-editor">
<gl-tabs>
<!-- editor should be mounted when its tab is visible, so the container has a size -->
<gl-tab :title="$options.i18n.tabEdit" :lazy="!editorIsReady">
<!-- editor should be mounted only once, when the tab is displayed -->
<text-editor v-model="content" @editor-ready="editorIsReady = true" />
</gl-tab>
<gl-tab :title="$options.i18n.tabGraph">
<pipeline-graph :pipeline-data="pipelineData" />
</gl-tab>
</gl-tabs>
</div>
</div>
</div>
</template>
......@@ -19668,6 +19668,12 @@ msgstr ""
msgid "Pipelines|Trigger user has insufficient permissions to project"
msgstr ""
msgid "Pipelines|Visualize"
msgstr ""
msgid "Pipelines|Write pipeline configuration"
msgstr ""
msgid "Pipelines|invalid"
msgstr ""
......
......@@ -32,4 +32,10 @@ describe('~/pipeline_editor/components/text_editor.vue', () => {
expect(findEditor().props('editorOptions')).toEqual({ readOnly: true });
expect(findEditor().props('fileName')).toBe('*.yml');
});
it('bubbles up editor-ready event', () => {
findEditor().vm.$emit('editor-ready');
expect(wrapper.emitted('editor-ready')).toHaveLength(1);
});
});
import { nextTick } from 'vue';
import { mount, shallowMount } from '@vue/test-utils';
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { GlAlert, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
import { mockProjectPath, mockDefaultBranch, mockCiConfigPath, mockCiYml } from './mock_data';
import TextEditor from '~/pipeline_editor/components/text_editor.vue';
import EditorLite from '~/vue_shared/components/editor_lite.vue';
import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
let wrapper;
const createComponent = ({ props = {}, loading = false } = {}, mountFn = shallowMount) => {
const createComponent = (
{ props = {}, data = {}, loading = false } = {},
mountFn = shallowMount,
) => {
wrapper = mountFn(PipelineEditorApp, {
propsData: {
projectPath: mockProjectPath,
......@@ -18,7 +22,11 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
ciConfigPath: mockCiConfigPath,
...props,
},
data() {
return data;
},
stubs: {
GlTabs,
TextEditor,
},
mocks: {
......@@ -35,23 +43,59 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findAlert = () => wrapper.find(GlAlert);
const findEditor = () => wrapper.find(EditorLite);
const findTabAt = i => wrapper.findAll(GlTab).at(i);
const findEditorLite = () => wrapper.find(EditorLite);
it('displays content', async () => {
beforeEach(() => {
createComponent();
wrapper.setData({ content: mockCiYml });
await nextTick();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('displays content', () => {
createComponent({ data: { content: mockCiYml } });
expect(findLoadingIcon().exists()).toBe(false);
expect(findEditor().props('value')).toBe(mockCiYml);
expect(findEditorLite().props('value')).toBe(mockCiYml);
});
it('displays a loading icon if the query is loading', async () => {
it('displays a loading icon if the query is loading', () => {
createComponent({ loading: true });
expect(findLoadingIcon().exists()).toBe(true);
});
describe('tabs', () => {
it('displays tabs and their content', () => {
createComponent({ data: { content: mockCiYml } });
expect(
findTabAt(0)
.find(EditorLite)
.exists(),
).toBe(true);
expect(
findTabAt(1)
.find(PipelineGraph)
.exists(),
).toBe(true);
});
it('displays editor tab lazily, until editor is ready', async () => {
createComponent({ data: { content: mockCiYml } });
expect(findTabAt(0).attributes('lazy')).toBe('true');
findEditorLite().vm.$emit('editor-ready');
await nextTick();
expect(findTabAt(0).attributes('lazy')).toBe(undefined);
});
});
describe('when in error state', () => {
class MockError extends Error {
constructor(message, data) {
......@@ -64,24 +108,18 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
}
}
beforeEach(() => {
createComponent(mount);
});
it('shows a generic error', async () => {
wrapper.setData({ error: new MockError('An error message') });
await nextTick();
it('shows a generic error', () => {
const error = new MockError('An error message');
createComponent({ data: { error } });
expect(findAlert().text()).toBe('CI file could not be loaded: An error message');
});
it('shows a ref missing error state', async () => {
it('shows a ref missing error state', () => {
const error = new MockError('Ref missing!', {
error: 'ref is missing, ref is empty',
});
wrapper.setData({ error });
await nextTick();
createComponent({ data: { error } });
expect(findAlert().text()).toMatch(
'CI file could not be loaded: ref is missing, ref is empty',
......@@ -93,8 +131,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
message: 'file not found',
});
wrapper.setData({ error });
await nextTick();
await wrapper.setData({ error });
expect(findAlert().text()).toMatch('CI file could not be loaded: file not found');
});
......
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