1 files changed, 55 insertions, 20 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
index 3bdcf383bee..5acb3355b23 100644
--- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -1,15 +1,20 @@
 <script>
-import { GlAlert, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
-  CI_CONFIG_STATUS_INVALID,
   CREATE_TAB,
+  EDITOR_APP_STATUS_EMPTY,
+  EDITOR_APP_STATUS_ERROR,
+  EDITOR_APP_STATUS_INVALID,
+  EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_VALID,
   LINT_TAB,
   MERGED_TAB,
   VISUALIZE_TAB,
 } from '../constants';
+import getAppStatus from '../graphql/queries/client/app_status.graphql';
 import CiConfigMergedPreview from './editor/ci_config_merged_preview.vue';
 import TextEditor from './editor/text_editor.vue';
 import CiLint from './lint/ci_lint.vue';
@@ -21,6 +26,17 @@ export default {
     tabGraph: s__('Pipelines|Visualize'),
     tabLint: s__('Pipelines|Lint'),
     tabMergedYaml: s__('Pipelines|View merged YAML'),
+    empty: {
+      visualization: s__(
+        'PipelineEditor|The pipeline visualization is displayed when the CI/CD configuration file has valid syntax.',
+      ),
+      lint: s__(
+        'PipelineEditor|The CI/CD configuration is continuously validated. Errors and warnings are displayed when the CI/CD configuration file is not empty.',
+      ),
+      merge: s__(
+        'PipelineEditor|The merged YAML view is displayed when the CI/CD configuration file has valid syntax.',
+      ),
+    },
   },
   errorTexts: {
     loadMergedYaml: s__('Pipelines|Could not load merged YAML content'),
@@ -37,7 +53,6 @@ export default {
     EditorTab,
     GlAlert,
     GlLoadingIcon,
-    GlTab,
     GlTabs,
     PipelineGraph,
     TextEditor,
@@ -52,17 +67,28 @@ export default {
       type: String,
       required: true,
     },
-    isCiConfigDataLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
+  },
+  apollo: {
+    appStatus: {
+      query: getAppStatus,
     },
   },
   computed: {
-    hasMergedYamlLoadError() {
-      return (
-        !this.ciConfigData?.mergedYaml && this.ciConfigData.status !== CI_CONFIG_STATUS_INVALID
-      );
+    hasAppError() {
+      // Not an invalid config and with `mergedYaml` data missing
+      return this.appStatus === EDITOR_APP_STATUS_ERROR;
+    },
+    isEmpty() {
+      return this.appStatus === EDITOR_APP_STATUS_EMPTY;
+    },
+    isInvalid() {
+      return this.appStatus === EDITOR_APP_STATUS_INVALID;
+    },
+    isValid() {
+      return this.appStatus === EDITOR_APP_STATUS_VALID;
+    },
+    isLoading() {
+      return this.appStatus === EDITOR_APP_STATUS_LOADING;
     },
   },
   methods: {
@@ -83,39 +109,48 @@ export default {
     >
       <text-editor :value="ciFileContent" v-on="$listeners" />
     </editor-tab>
-    <gl-tab
+    <editor-tab
       v-if="glFeatures.ciConfigVisualizationTab"
       class="gl-mb-3"
+      :empty-message="$options.i18n.empty.visualization"
+      :is-empty="isEmpty"
+      :is-invalid="isInvalid"
       :title="$options.i18n.tabGraph"
       lazy
       data-testid="visualization-tab"
       @click="setCurrentTab($options.tabConstants.VISUALIZE_TAB)"
     >
-      <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
+      <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" />
       <pipeline-graph v-else :pipeline-data="ciConfigData" />
-    </gl-tab>
+    </editor-tab>
     <editor-tab
       class="gl-mb-3"
+      :empty-message="$options.i18n.empty.lint"
+      :is-empty="isEmpty"
       :title="$options.i18n.tabLint"
       data-testid="lint-tab"
       @click="setCurrentTab($options.tabConstants.LINT_TAB)"
     >
-      <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
-      <ci-lint v-else :ci-config="ciConfigData" />
+      <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" />
+      <ci-lint v-else :is-valid="isValid" :ci-config="ciConfigData" />
     </editor-tab>
-    <gl-tab
+    <editor-tab
       v-if="glFeatures.ciConfigMergedTab"
       class="gl-mb-3"
+      :empty-message="$options.i18n.empty.merge"
+      :keep-component-mounted="false"
+      :is-empty="isEmpty"
+      :is-invalid="isInvalid"
       :title="$options.i18n.tabMergedYaml"
       lazy
       data-testid="merged-tab"
       @click="setCurrentTab($options.tabConstants.MERGED_TAB)"
     >
-      <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
-      <gl-alert v-else-if="hasMergedYamlLoadError" variant="danger" :dismissible="false">
+      <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" />
+      <gl-alert v-else-if="hasAppError" variant="danger" :dismissible="false">
         {{ $options.errorTexts.loadMergedYaml }}
       </gl-alert>
       <ci-config-merged-preview v-else :ci-config-data="ciConfigData" v-on="$listeners" />
-    </gl-tab>
+    </editor-tab>
   </gl-tabs>
 </template>