Add latest changes from gitlab-org/gitlab@master

2 files changed, 15 insertions, 2 deletions

diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
new file mode 100644
index 00000000000..70bab8092c0
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -0,0 +1,2 @@
+export const CI_CONFIG_STATUS_VALID = 'VALID';
+export const CI_CONFIG_STATUS_INVALID = 'INVALID';
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 8a57c9b1970..96dc782964b 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -2,6 +2,7 @@
 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import CommitForm from './components/commit/commit_form.vue';
@@ -31,6 +32,7 @@ export default {
     PipelineGraph,
     TextEditor,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     projectPath: {
       type: String,
@@ -115,6 +117,9 @@ export default {
     isBlobContentLoading() {
       return this.$apollo.queries.content.loading;
     },
+    isVisualizationTabLoading() {
+      return this.$apollo.queries.ciConfigData.loading;
+    },
     isVisualizeTabActive() {
       return this.currentTabIndex === 1;
     },
@@ -266,8 +271,14 @@ export default {
             <text-editor v-model="contentModel" @editor-ready="editorIsReady = true" />
           </gl-tab>
 
-          <gl-tab :title="$options.i18n.tabGraph" :lazy="!isVisualizeTabActive">
-            <pipeline-graph :pipeline-data="ciConfigData" />
+          <gl-tab
+            v-if="glFeatures.ciConfigVisualizationTab"
+            :title="$options.i18n.tabGraph"
+            :lazy="!isVisualizeTabActive"
+            data-testid="visualization-tab"
+          >
+            <gl-loading-icon v-if="isVisualizationTabLoading" size="lg" class="gl-m-3" />
+            <pipeline-graph v-else :pipeline-data="ciConfigData" />
           </gl-tab>
         </gl-tabs>
       </div>