Add pipeline graph to editor page

This change adds the pipeline graph to the pipelien editor page in a
separate tab.

Users are able to see their pipeline represented visually or as text.

app/assets/javascripts/pipeline_editor/components/text_editor.vue

@@ -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>

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <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>

locale/gitlab.pot

@@ -19662,6 +19662,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 ""
 

spec/frontend/pipeline_editor/components/text_editor_spec.js

@@ -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);
+  });
 });

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

 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');
     });