Add latest changes from gitlab-org/gitlab@master

2 files changed, 31 insertions, 3 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/text_editor.vue
index 6ea25af45b3..a925077c906 100644
--- a/app/assets/javascripts/pipeline_editor/components/text_editor.vue
+++ b/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>
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index efc241937c4..50b946af456 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,8 +1,9 @@
 <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>