From d703818fb0170779c1ee3aa93a529e3e69193e8f Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 24 Dec 2020 03:10:17 +0000
Subject: [PATCH] Add latest changes from gitlab-org/gitlab@master

---
 .../components/ui/editor_tab.vue              | 68 ++++++++++++++
 .../pipeline_editor/pipeline_editor_app.vue   | 31 +++----
 .../blob/viewers/_gitlab_ci_yml.html.haml     |  6 +-
 .../viewers/_gitlab_ci_yml_loading.html.haml  |  4 +-
 locale/gitlab.pot                             |  9 ++
 .../components/ui/editor_tab_spec.js          | 91 +++++++++++++++++++
 .../pipeline_editor_app_spec.js               | 44 ++++-----
 7 files changed, 207 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
 create mode 100644 spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js

diff --git a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
new file mode 100644
index 00000000000..b0acd3ca2ee
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlTab } from '@gitlab/ui';
+
+/**
+ * Wrapper of <gl-tab> to optionally lazily render this tab's content
+ * when its shown **without dismounting after its hidden**.
+ *
+ * Usage:
+ *
+ * API is the same as <gl-tab>, for example:
+ *
+ * <gl-tabs>
+ *   <editor-tab title="Tab 1" :lazy="true">
+ *     lazily mounted content (gets mounted if this is first tab)
+ *   </editor-tab>
+ *   <editor-tab title="Tab 2" :lazy="true">
+ *     lazily mounted content
+ *   </editor-tab>
+ *   <editor-tab title="Tab 3">
+ *      eagerly mounted content
+ *   </editor-tab>
+ * </gl-tabs>
+ *
+ * Once the tab is selected it is permanently set as "not-lazy"
+ * so it's contents are not dismounted.
+ *
+ * lazy is "false" by default, as in <gl-tab>.
+ */
+
+export default {
+  components: {
+    GlTab,
+    // Use a small renderless component to know when the tab content mounts because:
+    // - gl-tab always gets mounted, even if lazy is `true`. See:
+    // https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/tabs/tab.js#L180
+    // - we cannot listen to events on <slot />
+    MountSpy: {
+      render: () => null,
+    },
+  },
+  inheritAttrs: false,
+  props: {
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isLazy: this.lazy,
+    };
+  },
+  methods: {
+    onContentMounted() {
+      // When a child is first mounted make the entire tab
+      // permanently mounted by setting 'lazy' to false.
+      this.isLazy = false;
+    },
+  },
+};
+</script>
+<template>
+  <gl-tab :lazy="isLazy" v-bind="$attrs" v-on="$listeners">
+    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <mount-spy @hook:mounted="onContentMounted" />
+  </gl-tab>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index a533721a057..b1ca7dcf89d 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -7,6 +7,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import CiLint from './components/lint/ci_lint.vue';
 import CommitForm from './components/commit/commit_form.vue';
+import EditorTab from './components/ui/editor_tab.vue';
 import TextEditor from './components/text_editor.vue';
 
 import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql';
@@ -28,9 +29,9 @@ export default {
   components: {
     CommitForm,
     CiLint,
+    EditorTab,
     GlAlert,
     GlLoadingIcon,
-    GlTab,
     GlTabs,
     PipelineGraph,
     TextEditor,
@@ -66,8 +67,6 @@ export default {
       content: '',
       contentModel: '',
       lastCommitSha: this.commitSha,
-      currentTabIndex: 0,
-      editorIsReady: false,
       isSaving: false,
 
       // Success and failure state
@@ -128,9 +127,6 @@ export default {
     isCiConfigDataLoading() {
       return this.$apollo.queries.ciConfigData.loading;
     },
-    isVisualizeTabActive() {
-      return this.currentTabIndex === 1;
-    },
     defaultCommitMessage() {
       return sprintf(this.$options.i18n.defaultCommitMessage, { sourcePath: this.ciConfigPath });
     },
@@ -305,33 +301,30 @@ export default {
     <div class="gl-mt-4">
       <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
       <div v-else class="file-editor gl-mb-3">
-        <gl-tabs v-model="currentTabIndex">
-          <!-- 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 -->
+        <gl-tabs>
+          <editor-tab :lazy="true" :title="$options.i18n.tabEdit">
             <text-editor
               v-model="contentModel"
               :ci-config-path="ciConfigPath"
               :commit-sha="lastCommitSha"
               :project-path="projectPath"
-              @editor-ready="editorIsReady = true"
             />
-          </gl-tab>
-
-          <gl-tab
+          </editor-tab>
+          <editor-tab
             v-if="glFeatures.ciConfigVisualizationTab"
+            :lazy="true"
             :title="$options.i18n.tabGraph"
-            :lazy="!isVisualizeTabActive"
+            :title-link-attributes="{ 'data-testid': 'visualization-tab-btn' }"
             data-testid="visualization-tab"
           >
             <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
             <pipeline-graph v-else :pipeline-data="ciConfigData" />
-          </gl-tab>
+          </editor-tab>
 
-          <gl-tab :title="$options.i18n.tabLint">
+          <editor-tab :title="$options.i18n.tabLint">
             <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
             <ci-lint v-else :ci-config="ciConfigData" />
-          </gl-tab>
+          </editor-tab>
         </gl-tabs>
       </div>
       <commit-form
diff --git a/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml b/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml
index 3326cded42a..d8d27c3330b 100644
--- a/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml
+++ b/app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml
@@ -1,9 +1,9 @@
 - if viewer.valid?(project: @project, sha: @commit.sha, user: @current_user)
   = sprite_icon('check')
-  This GitLab CI configuration is valid.
+  = s_('Pipelines|This GitLab CI configuration is valid.')
 - else
   = sprite_icon('warning-solid')
-  This GitLab CI configuration is invalid:
+  = s_('Pipelines|This GitLab CI configuration is invalid:')
   = viewer.validation_message(project: @project, sha: @commit.sha, user: @current_user)
 
-= link_to 'Learn more', help_page_path('ci/yaml/README')
+= link_to _('Learn more'), help_page_path('ci/yaml/README')
diff --git a/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml b/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml
index 379a6c3084a..b1c8e110493 100644
--- a/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml
+++ b/app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml
@@ -1,4 +1,4 @@
 = loading_icon(css_class: "gl-vertical-align-text-bottom mr-1")
-Validating GitLab CI configuration…
+= s_('Pipelines|Validating GitLab CI configuration…')
 
-= link_to 'Learn more', help_page_path('ci/yaml/README')
+= link_to _('Learn more'), help_page_path('ci/yaml/README')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index cf660bf6868..7e04a9acc68 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -20611,6 +20611,12 @@ msgstr ""
 msgid "Pipelines|There was an error fetching the pipelines. Try again in a few moments or contact your support team."
 msgstr ""
 
+msgid "Pipelines|This GitLab CI configuration is invalid:"
+msgstr ""
+
+msgid "Pipelines|This GitLab CI configuration is valid."
+msgstr ""
+
 msgid "Pipelines|This is a child pipeline within the parent pipeline"
 msgstr ""
 
@@ -20626,6 +20632,9 @@ msgstr ""
 msgid "Pipelines|Trigger user has insufficient permissions to project"
 msgstr ""
 
+msgid "Pipelines|Validating GitLab CI configuration…"
+msgstr ""
+
 msgid "Pipelines|Visualize"
 msgstr ""
 
diff --git a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
new file mode 100644
index 00000000000..d3d9bf08209
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
@@ -0,0 +1,91 @@
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { GlTabs } from '@gitlab/ui';
+
+import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
+
+const mockContent1 = 'MOCK CONTENT 1';
+const mockContent2 = 'MOCK CONTENT 2';
+
+describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
+  let wrapper;
+  let mockChildMounted = jest.fn();
+
+  const MockChild = {
+    props: ['content'],
+    template: '<div>{{content}}</div>',
+    mounted() {
+      mockChildMounted(this.content);
+    },
+  };
+
+  const MockTabbedContent = {
+    components: {
+      EditorTab,
+      GlTabs,
+      MockChild,
+    },
+    template: `
+        <gl-tabs>
+          <editor-tab :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
+            <mock-child content="${mockContent1}"/>
+          </editor-tab>
+          <editor-tab :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true">
+            <mock-child content="${mockContent2}"/>
+          </editor-tab>
+        </gl-tabs>
+      `,
+  };
+
+  const createWrapper = () => {
+    wrapper = mount(MockTabbedContent);
+  };
+
+  beforeEach(() => {
+    mockChildMounted = jest.fn();
+  });
+
+  it('tabs are mounted lazily', async () => {
+    createWrapper();
+
+    expect(mockChildMounted).toHaveBeenCalledTimes(0);
+  });
+
+  it('first tab is only mounted after nextTick', async () => {
+    createWrapper();
+
+    await nextTick();
+
+    expect(mockChildMounted).toHaveBeenCalledTimes(1);
+    expect(mockChildMounted).toHaveBeenCalledWith(mockContent1);
+  });
+
+  describe('user interaction', () => {
+    const clickTab = async (testid) => {
+      wrapper.find(`[data-testid="${testid}"]`).trigger('click');
+      await nextTick();
+    };
+
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('mounts a tab once after selecting it', async () => {
+      await clickTab('tab2-btn');
+
+      expect(mockChildMounted).toHaveBeenCalledTimes(2);
+      expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
+      expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
+    });
+
+    it('mounts each tab once after selecting each', async () => {
+      await clickTab('tab2-btn');
+      await clickTab('tab1-btn');
+      await clickTab('tab2-btn');
+
+      expect(mockChildMounted).toHaveBeenCalledTimes(2);
+      expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
+      expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
index 116d86cfa48..ba16c875f7c 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
@@ -1,14 +1,6 @@
 import { nextTick } from 'vue';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
-import {
-  GlAlert,
-  GlButton,
-  GlFormInput,
-  GlFormTextarea,
-  GlLoadingIcon,
-  GlTabs,
-  GlTab,
-} from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormInput, GlFormTextarea, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
@@ -28,6 +20,7 @@ import {
 
 import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue';
 import getCiConfigData from '~/pipeline_editor/graphql/queries/ci_config.graphql';
+import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
 import TextEditor from '~/pipeline_editor/components/text_editor.vue';
@@ -139,7 +132,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findAlert = () => wrapper.find(GlAlert);
-  const findTabAt = (i) => wrapper.findAll(GlTab).at(i);
+  const findTabAt = i => wrapper.findAll(EditorTab).at(i);
   const findVisualizationTab = () => wrapper.find('[data-testid="visualization-tab"]');
   const findTextEditor = () => wrapper.find(TextEditor);
   const findEditorLite = () => wrapper.find(MockEditorLite);
@@ -172,22 +165,14 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
   describe('tabs', () => {
     describe('editor tab', () => {
-      beforeEach(() => {
-        createComponent();
-      });
+      it('displays editor only after the tab is mounted', async () => {
+        createComponent({ mountFn: mount });
 
-      it('displays the tab and its content', async () => {
-        expect(findTabAt(0).find(TextEditor).exists()).toBe(true);
-      });
-
-      it('displays tab lazily, until editor is ready', async () => {
-        expect(findTabAt(0).attributes('lazy')).toBe('true');
-
-        findTextEditor().vm.$emit('editor-ready');
+        expect(findTabAt(0).find(TextEditor).exists()).toBe(false);
 
         await nextTick();
 
-        expect(findTabAt(0).attributes('lazy')).toBe(undefined);
+        expect(findTabAt(0).find(TextEditor).exists()).toBe(true);
       });
     });
 
@@ -207,6 +192,21 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
           expect(findLoadingIcon().exists()).toBe(true);
           expect(findPipelineGraph().exists()).toBe(false);
         });
+
+        it('displays the graph only after the tab is mounted and selected', async () => {
+          createComponent({ mountFn: mount });
+
+          expect(findTabAt(1).find(PipelineGraph).exists()).toBe(false);
+
+          await nextTick();
+
+          // Select visualization tab
+          wrapper.find('[data-testid="visualization-tab-btn"]').trigger('click');
+
+          await nextTick();
+
+          expect(findTabAt(1).find(PipelineGraph).exists()).toBe(true);
+        });
       });
 
       describe('with feature flag off', () => {