Adds a global state to the pipeline editor section

Instead of relying on passing props data down to know
all about what is happening on a global level, we
write to apollo cache the global state of the app
that can then be consumed byy its children at any level
without needing extra layer of complexity.

app/assets/javascripts/ci_lint/components/ci_lint.vue

@@ -32,7 +32,7 @@ export default {
     return {
       content: '',
       loading: false,
-      valid: false,
+      isValid: false,
       errors: null,
       warnings: null,
       jobs: [],
@@ -61,7 +61,7 @@ export default {
         });
 
         this.showingResults = true;
-        this.valid = valid;
+        this.isValid = valid;
         this.errors = errors;
         this.warnings = warnings;
         this.jobs = jobs;
@@ -120,7 +120,7 @@ export default {
     <ci-lint-results
       v-if="showingResults"
       class="col-sm-12 gl-mt-5"
-      :valid="valid"
+      :is-valid="isValid"
       :jobs="jobs"
       :errors="errors"
       :warnings="warnings"

app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue

@@ -2,7 +2,6 @@
 import { GlAlert, GlIcon } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { __, s__ } from '~/locale';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
 import { DEFAULT, INVALID_CI_CONFIG } from '~/pipelines/constants';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
 
@@ -21,6 +20,10 @@ export default {
   },
   inject: ['ciConfigPath'],
   props: {
+    isValid: {
+      type: Boolean,
+      required: true,
+    },
     ciConfigData: {
       type: Object,
       required: true,
@@ -46,9 +49,6 @@ export default {
     hasError() {
       return this.failureType;
     },
-    isInvalidConfiguration() {
-      return this.ciConfigData.status === CI_CONFIG_STATUS_INVALID;
-    },
     mergedYaml() {
       return this.ciConfigData.mergedYaml;
     },
@@ -57,7 +57,7 @@ export default {
     ciConfigData: {
       immediate: true,
       handler() {
-        if (this.isInvalidConfiguration) {
+        if (!this.isValid) {
           this.reportFailure(INVALID_CI_CONFIG);
         } else if (this.hasError) {
           this.resetFailure();

app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue

@@ -31,18 +31,10 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
-    ciFileContent: {
-      type: String,
-      required: true,
-    },
     ciConfigData: {
       type: Object,
       required: true,
     },
-    isCiConfigDataLoading: {
-      type: Boolean,
-      required: true,
-    },
   },
   computed: {
     showPipelineStatus() {
@@ -61,11 +53,6 @@ export default {
 <template>
   <div class="gl-mb-5">
     <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" />
-    <validation-segment
-      :class="validationStyling"
-      :loading="isCiConfigDataLoading"
-      :ci-file-content="ciFileContent"
-      :ci-config="ciConfigData"
-    />
+    <validation-segment :class="validationStyling" :ci-config="ciConfigData" />
   </div>
 </template>

app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue

 <script>
 import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
+import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.graphql';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import { CI_CONFIG_STATUS_VALID } from '../../constants';
+import {
+  EDITOR_APP_STATUS_EMPTY,
+  EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_VALID,
+} from '../../constants';
 
 export const i18n = {
   empty: __(
@@ -29,47 +34,51 @@ export default {
     },
   },
   props: {
-    ciFileContent: {
-      type: String,
-      required: true,
-    },
     ciConfig: {
       type: Object,
       required: false,
       default: () => ({}),
     },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
+  },
+  apollo: {
+    appStatus: {
+      query: getAppStatus,
     },
   },
   computed: {
     isEmpty() {
-      return !this.ciFileContent;
+      return this.appStatus === EDITOR_APP_STATUS_EMPTY;
+    },
+    isLoading() {
+      return this.appStatus === EDITOR_APP_STATUS_LOADING;
     },
     isValid() {
-      return this.ciConfig?.status === CI_CONFIG_STATUS_VALID;
+      return this.appStatus === EDITOR_APP_STATUS_VALID;
     },
     icon() {
-      if (this.isValid || this.isEmpty) {
+      switch (this.appStatus) {
+        case EDITOR_APP_STATUS_EMPTY:
           return 'check';
-      }
+        case EDITOR_APP_STATUS_VALID:
+          return 'check';
+        default:
           return 'warning-solid';
+      }
     },
     message() {
-      if (this.isEmpty) {
+      const [reason] = this.ciConfig?.errors || [];
+
+      switch (this.appStatus) {
+        case EDITOR_APP_STATUS_EMPTY:
           return this.$options.i18n.empty;
-      } else if (this.isValid) {
+        case EDITOR_APP_STATUS_VALID:
           return this.$options.i18n.valid;
-      }
-
+        default:
           // Only display first error as a reason
-      const [reason] = this.ciConfig?.errors || [];
-      if (reason) {
-        return sprintf(this.$options.i18n.invalidWithReason, { reason }, false);
+          return this.ciConfig?.errors.length > 0
+            ? sprintf(this.$options.i18n.invalidWithReason, { reason }, false)
+            : this.$options.i18n.invalid;
       }
-      return this.$options.i18n.invalid;
     },
   },
 };
@@ -77,7 +86,7 @@ export default {
 
 <template>
   <div>
-    <template v-if="loading">
+    <template v-if="isLoading">
       <gl-loading-icon inline />
       {{ $options.i18n.loading }}
     </template>

app/assets/javascripts/pipeline_editor/components/lint/ci_lint.vue

 <script>
 import { flatten } from 'lodash';
-import { CI_CONFIG_STATUS_VALID } from '../../constants';
 import CiLintResults from './ci_lint_results.vue';
 
 export default {
@@ -13,15 +12,16 @@ export default {
     },
   },
   props: {
+    isValid: {
+      type: Boolean,
+      required: true,
+    },
     ciConfig: {
       type: Object,
       required: true,
     },
   },
   computed: {
-    isValid() {
-      return this.ciConfig?.status === CI_CONFIG_STATUS_VALID;
-    },
     stages() {
       return this.ciConfig?.stages || [];
     },
@@ -45,9 +45,9 @@ export default {
 
 <template>
   <ci-lint-results
-    :valid="isValid"
-    :jobs="jobs"
     :errors="ciConfig.errors"
+    :is-valid="isValid"
+    :jobs="jobs"
     :lint-help-page-path="lintHelpPagePath"
   />
 </template>

app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue

@@ -42,34 +42,34 @@ export default {
     CiLintResultsParam,
   },
   props: {
-    valid: {
-      type: Boolean,
-      required: true,
-    },
-    jobs: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     errors: {
       type: Array,
       required: false,
       default: () => [],
     },
-    warnings: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     dryRun: {
       type: Boolean,
       required: false,
       default: false,
     },
+    isValid: {
+      type: Boolean,
+      required: true,
+    },
+    jobs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     lintHelpPagePath: {
       type: String,
       required: true,
     },
+    warnings: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -78,7 +78,7 @@ export default {
   },
   computed: {
     status() {
-      return this.valid ? this.$options.correct : this.$options.incorrect;
+      return this.isValid ? this.$options.correct : this.$options.incorrect;
     },
     shouldShowTable() {
       return this.errors.length === 0;

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

@@ -4,12 +4,15 @@ 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_ERROR,
+  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';
@@ -52,17 +55,22 @@ 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;
+    },
+    isValid() {
+      return this.appStatus === EDITOR_APP_STATUS_VALID;
+    },
+    isLoading() {
+      return this.appStatus === EDITOR_APP_STATUS_LOADING;
     },
   },
   methods: {
@@ -91,7 +99,7 @@ export default {
       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
@@ -100,8 +108,8 @@ export default {
       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
       v-if="glFeatures.ciConfigMergedTab"
@@ -111,11 +119,16 @@ export default {
       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" />
+      <ci-config-merged-preview
+        v-else
+        :is-valid="isValid"
+        :ci-config-data="ciConfigData"
+        v-on="$listeners"
+      />
     </gl-tab>
   </gl-tabs>
 </template>

app/assets/javascripts/pipeline_editor/constants.js

-export const CI_CONFIG_STATUS_VALID = 'VALID';
+// Values for CI_CONFIG_STATUS_* comes from lint graphQL
 export const CI_CONFIG_STATUS_INVALID = 'INVALID';
+export const CI_CONFIG_STATUS_VALID = 'VALID';
+
+// Values for EDITOR_APP_STATUS_* are frontend specifics and
+// represent the global state of the pipeline editor app.
+export const EDITOR_APP_STATUS_EMPTY = 'EMPTY';
+export const EDITOR_APP_STATUS_ERROR = 'ERROR';
+export const EDITOR_APP_STATUS_INVALID = CI_CONFIG_STATUS_INVALID;
+export const EDITOR_APP_STATUS_LOADING = 'LOADING';
+export const EDITOR_APP_STATUS_VALID = CI_CONFIG_STATUS_VALID;
 
 export const COMMIT_FAILURE = 'COMMIT_FAILURE';
 export const COMMIT_SUCCESS = 'COMMIT_SUCCESS';

app/assets/javascripts/pipeline_editor/graphql/queries/client/app_status.graphql

+query getAppStatus {
+  appStatus @client
+}

app/assets/javascripts/pipeline_editor/index.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
+import { EDITOR_APP_STATUS_LOADING } from './constants';
 import { resolvers } from './graphql/resolvers';
 import typeDefs from './graphql/typedefs.graphql';
 import PipelineEditorApp from './pipeline_editor_app.vue';
@@ -45,6 +46,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     data: {
       currentBranch: initialBranchName || defaultBranch,
       commitSha,
+      status: EDITOR_APP_STATUS_LOADING,
     },
   });
 

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -6,9 +6,18 @@ import { __, s__ } from '~/locale';
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
 import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes_dialog.vue';
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
-import { COMMIT_FAILURE, COMMIT_SUCCESS, DEFAULT_FAILURE, LOAD_FAILURE_UNKNOWN } from './constants';
+import {
+  COMMIT_FAILURE,
+  COMMIT_SUCCESS,
+  DEFAULT_FAILURE,
+  EDITOR_APP_STATUS_EMPTY,
+  EDITOR_APP_STATUS_ERROR,
+  EDITOR_APP_STATUS_LOADING,
+  LOAD_FAILURE_UNKNOWN,
+} from './constants';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.graphql';
+import getAppStatus from './graphql/queries/client/app_status.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql';
 import PipelineEditorHome from './pipeline_editor_home.vue';
@@ -32,7 +41,6 @@ export default {
   data() {
     return {
       ciConfigData: {},
-      // Success and failure state
       failureType: null,
       failureReasons: [],
       showStartScreen: false,
@@ -77,8 +85,7 @@ export default {
     },
     ciConfigData: {
       query: getCiConfigData,
-      // If content is not loaded, we can't lint the data
-      skip: ({ currentCiFileContent }) => {
+      skip({ currentCiFileContent }) {
         return !currentCiFileContent;
       },
       variables() {
@@ -94,9 +101,20 @@ export default {
 
         return { ...ciConfig, stages };
       },
+      result({ data }) {
+        this.setAppStatus(data?.ciConfig?.status || EDITOR_APP_STATUS_ERROR);
+      },
       error() {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       },
+      watchLoading(isLoading) {
+        if (isLoading) {
+          this.setAppStatus(EDITOR_APP_STATUS_LOADING);
+        }
+      },
+    },
+    appStatus: {
+      query: getAppStatus,
     },
     currentBranch: {
       query: getCurrentBranch,
@@ -115,6 +133,9 @@ export default {
     isCiConfigDataLoading() {
       return this.$apollo.queries.ciConfigData.loading;
     },
+    isEmpty() {
+      return this.currentCiFileContent === '';
+    },
     failure() {
       switch (this.failureType) {
         case LOAD_FAILURE_UNKNOWN:
@@ -159,6 +180,13 @@ export default {
   successTexts: {
     [COMMIT_SUCCESS]: __('Your changes have been successfully committed.'),
   },
+  watch: {
+    isEmpty(flag) {
+      if (flag) {
+        this.setAppStatus(EDITOR_APP_STATUS_EMPTY);
+      }
+    },
+  },
   methods: {
     handleBlobContentError(error = {}) {
       const { networkError } = error;
@@ -170,6 +198,7 @@ export default {
         response?.status === httpStatusCodes.NOT_FOUND ||
         response?.status === httpStatusCodes.BAD_REQUEST
       ) {
+        this.setAppStatus(EDITOR_APP_STATUS_EMPTY);
         this.showStartScreen = true;
       } else {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
@@ -183,6 +212,8 @@ export default {
       this.showSuccessAlert = false;
     },
     reportFailure(type, reasons = []) {
+      this.setAppStatus(EDITOR_APP_STATUS_ERROR);
+
       window.scrollTo({ top: 0, behavior: 'smooth' });
       this.showFailureAlert = true;
       this.failureType = type;
@@ -196,6 +227,9 @@ export default {
     resetContent() {
       this.currentCiFileContent = this.lastCommittedContent;
     },
+    setAppStatus(appStatus) {
+      this.$apollo.getClient().writeQuery({ query: getAppStatus, data: { appStatus } });
+    },
     setNewEmptyCiConfigFile() {
       this.$apollo
         .getClient()
@@ -242,7 +276,6 @@ export default {
         </ul>
       </gl-alert>
       <pipeline-editor-home
-        :is-ci-config-data-loading="isCiConfigDataLoading"
         :ci-config-data="ciConfigData"
         :ci-file-content="currentCiFileContent"
         @commit="updateOnCommit"

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

@@ -19,10 +19,6 @@ export default {
       type: String,
       required: true,
     },
-    isCiConfigDataLoading: {
-      type: Boolean,
-      required: true,
-    },
   },
   data() {
     return {
@@ -44,15 +40,10 @@ export default {
 
 <template>
   <div>
-    <pipeline-editor-header
-      :ci-file-content="ciFileContent"
-      :ci-config-data="ciConfigData"
-      :is-ci-config-data-loading="isCiConfigDataLoading"
-    />
+    <pipeline-editor-header :ci-config-data="ciConfigData" />
     <pipeline-editor-tabs
       :ci-config-data="ciConfigData"
       :ci-file-content="ciFileContent"
-      :is-ci-config-data-loading="isCiConfigDataLoading"
       v-on="$listeners"
       @set-current-tab="setCurrentTab"
     />

spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js

@@ -3,7 +3,6 @@ import { shallowMount } from '@vue/test-utils';
 
 import { EDITOR_READY_EVENT } from '~/editor/constants';
 import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
 import { INVALID_CI_CONFIG } from '~/pipelines/constants';
 import { mockLintResponse, mockCiConfigPath } from '../../mock_data';
 
@@ -39,12 +38,11 @@ describe('Text editor component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when status is invalid', () => {
     beforeEach(() => {
-      createComponent({ props: { ciConfigData: { status: CI_CONFIG_STATUS_INVALID } } });
+      createComponent({ props: { isValid: false } });
     });
 
     it('show an error message', () => {
@@ -59,7 +57,7 @@ describe('Text editor component', () => {
 
   describe('when status is valid', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({ props: { isValid: true } });
     });
 
     it('shows an information message that the section is not editable', () => {

spec/frontend/pipeline_editor/components/header/validation_segment_spec.js

@@ -6,13 +6,19 @@ import { sprintf } from '~/locale';
 import ValidationSegment, {
   i18n,
 } from '~/pipeline_editor/components/header/validation_segment.vue';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import {
+  CI_CONFIG_STATUS_INVALID,
+  EDITOR_APP_STATUS_EMPTY,
+  EDITOR_APP_STATUS_INVALID,
+  EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_VALID,
+} from '~/pipeline_editor/constants';
 import { mockYmlHelpPagePath, mergeUnwrappedCiConfig, mockCiYml } from '../../mock_data';
 
 describe('Validation segment component', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = ({ props = {}, appStatus }) => {
     wrapper = extendedWrapper(
       shallowMount(ValidationSegment, {
         provide: {
@@ -21,9 +27,14 @@ describe('Validation segment component', () => {
         propsData: {
           ciConfig: mergeUnwrappedCiConfig(),
           ciFileContent: mockCiYml,
-          loading: false,
           ...props,
         },
+        // Simulate graphQL client query result
+        data() {
+          return {
+            appStatus,
+          };
+        },
       }),
     );
   };
@@ -34,18 +45,17 @@ describe('Validation segment component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('shows the loading state', () => {
-    createComponent({ loading: true });
+    createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
 
     expect(wrapper.text()).toBe(i18n.loading);
   });
 
   describe('when config is empty', () => {
     beforeEach(() => {
-      createComponent({ ciFileContent: '' });
+      createComponent({ appStatus: EDITOR_APP_STATUS_EMPTY });
     });
 
     it('has check icon', () => {
@@ -59,7 +69,7 @@ describe('Validation segment component', () => {
 
   describe('when config is valid', () => {
     beforeEach(() => {
-      createComponent({});
+      createComponent({ appStatus: EDITOR_APP_STATUS_VALID });
     });
 
     it('has check icon', () => {
@@ -79,12 +89,9 @@ describe('Validation segment component', () => {
   describe('when config is invalid', () => {
     beforeEach(() => {
       createComponent({
-        ciConfig: mergeUnwrappedCiConfig({
-          status: CI_CONFIG_STATUS_INVALID,
-        }),
+        appStatus: EDITOR_APP_STATUS_INVALID,
       });
     });
-
     it('has warning icon', () => {
       expect(findIcon().props('name')).toBe('warning-solid');
     });
@@ -93,43 +100,53 @@ describe('Validation segment component', () => {
       expect(findValidationMsg().text()).toBe(i18n.invalid);
     });
 
-    it('shows an invalid state with an error', () => {
+    it('shows the learn more link', () => {
+      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
+      expect(findLearnMoreLink().text()).toBe('Learn more');
+    });
+
+    describe('with multiple errors', () => {
       const firstError = 'First Error';
       const secondError = 'Second Error';
 
+      beforeEach(() => {
         createComponent({
+          props: {
             ciConfig: mergeUnwrappedCiConfig({
               status: CI_CONFIG_STATUS_INVALID,
               errors: [firstError, secondError],
             }),
+          },
         });
-
+      });
+      it('shows an invalid state with an error', () => {
         // Test the error is shown _and_ the string matches
         expect(findValidationMsg().text()).toContain(firstError);
         expect(findValidationMsg().text()).toBe(
           sprintf(i18n.invalidWithReason, { reason: firstError }),
         );
       });
+    });
 
-    it('shows an invalid state with an error while preventing XSS', () => {
+    describe('with XSS inside the error', () => {
       const evilError = '<script>evil();</script>';
 
+      beforeEach(() => {
         createComponent({
+          props: {
             ciConfig: mergeUnwrappedCiConfig({
               status: CI_CONFIG_STATUS_INVALID,
               errors: [evilError],
             }),
+          },
         });
-
+      });
+      it('shows an invalid state with an error while preventing XSS', () => {
         const { innerHTML } = findValidationMsg().element;
 
         expect(innerHTML).not.toContain(evilError);
         expect(innerHTML).toContain(escape(evilError));
       });
-
-    it('shows the learn more link', () => {
-      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
-      expect(findLearnMoreLink().text()).toBe('Learn more');
     });
   });
 });

spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js

@@ -7,7 +7,7 @@ import { mockJobs, mockErrors, mockWarnings } from '../../mock_data';
 describe('CI Lint Results', () => {
   let wrapper;
   const defaultProps = {
-    valid: true,
+    isValid: true,
     jobs: mockJobs,
     errors: [],
     warnings: [],
@@ -42,7 +42,6 @@ describe('CI Lint Results', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('Empty results', () => {
@@ -72,7 +71,7 @@ describe('CI Lint Results', () => {
 
   describe('Invalid results', () => {
     beforeEach(() => {
-      createComponent({ valid: false, errors: mockErrors, warnings: mockWarnings }, mount);
+      createComponent({ isValid: false, errors: mockErrors, warnings: mockWarnings }, mount);
     });
 
     it('does not display the table', () => {

spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js

 import { GlAlert, GlLink } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
 import { mergeUnwrappedCiConfig, mockLintHelpPagePath } from '../../mock_data';
 
 describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
   let wrapper;
 
-  const createComponent = (props = {}, mountFn = shallowMount) => {
+  const createComponent = ({ props, mountFn = shallowMount } = {}) => {
     wrapper = mountFn(CiLint, {
       provide: {
         lintHelpPagePath: mockLintHelpPagePath,
@@ -27,12 +26,11 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('Valid Results', () => {
     beforeEach(() => {
-      createComponent({}, mount);
+      createComponent({ props: { isValid: true }, mountFn: mount });
     });
 
     it('displays valid results', () => {
@@ -66,14 +64,7 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
     });
 
     it('displays invalid results', () => {
-      createComponent(
-        {
-          ciConfig: mergeUnwrappedCiConfig({
-            status: CI_CONFIG_STATUS_INVALID,
-          }),
-        },
-        mount,
-      );
+      createComponent({ props: { isValid: false }, mountFn: mount });
 
       expect(findAlert().text()).toMatch('Status: Syntax is incorrect.');
     });

spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js

@@ -4,8 +4,12 @@ import { nextTick } from 'vue';
 import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
+import {
+  EDITOR_APP_STATUS_ERROR,
+  EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_VALID,
+} from '~/pipeline_editor/constants';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
-
 import { mockLintResponse, mockCiYml } from '../mock_data';
 
 describe('Pipeline editor tabs component', () => {
@@ -20,14 +24,23 @@ describe('Pipeline editor tabs component', () => {
     },
   };
 
-  const createComponent = ({ props = {}, provide = {}, mountFn = shallowMount } = {}) => {
+  const createComponent = ({
+    props = {},
+    provide = {},
+    appStatus = EDITOR_APP_STATUS_VALID,
+    mountFn = shallowMount,
+  } = {}) => {
     wrapper = mountFn(PipelineEditorTabs, {
       propsData: {
         ciConfigData: mockLintResponse,
         ciFileContent: mockCiYml,
-        isCiConfigDataLoading: false,
         ...props,
       },
+      data() {
+        return {
+          appStatus,
+        };
+      },
       provide: { ...mockProvide, ...provide },
       stubs: {
         TextEditor: MockTextEditor,
@@ -49,7 +62,6 @@ describe('Pipeline editor tabs component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('editor tab', () => {
@@ -69,7 +81,7 @@ describe('Pipeline editor tabs component', () => {
     describe('with feature flag on', () => {
       describe('while loading', () => {
         beforeEach(() => {
-          createComponent({ props: { isCiConfigDataLoading: true } });
+          createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
         });
 
         it('displays a loading icon if the lint query is loading', () => {
@@ -108,7 +120,7 @@ describe('Pipeline editor tabs component', () => {
   describe('lint tab', () => {
     describe('while loading', () => {
       beforeEach(() => {
-        createComponent({ props: { isCiConfigDataLoading: true } });
+        createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
       });
 
       it('displays a loading icon if the lint query is loading', () => {
@@ -135,7 +147,7 @@ describe('Pipeline editor tabs component', () => {
     describe('with feature flag on', () => {
       describe('while loading', () => {
         beforeEach(() => {
-          createComponent({ props: { isCiConfigDataLoading: true } });
+          createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
         });
 
         it('displays a loading icon if the lint query is loading', () => {
@@ -143,9 +155,9 @@ describe('Pipeline editor tabs component', () => {
         });
       });
 
-      describe('when `mergedYaml` is undefined', () => {
+      describe('when there is a fetch error', () => {
         beforeEach(() => {
-          createComponent({ props: { ciConfigData: {} } });
+          createComponent({ appStatus: EDITOR_APP_STATUS_ERROR });
         });
 
         it('show an error message', () => {

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -72,7 +72,7 @@ describe('Pipeline editor app component', () => {
     });
   };
 
-  const createComponentWithApollo = ({ props = {}, provide = {} } = {}) => {
+  const createComponentWithApollo = async ({ props = {}, provide = {} } = {}) => {
     const handlers = [[getCiConfigData, mockCiConfigData]];
     const resolvers = {
       Query: {
@@ -94,6 +94,8 @@ describe('Pipeline editor app component', () => {
     };
 
     createComponent({ props, provide, options });
+
+    return waitForPromises();
   };
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
@@ -116,12 +118,14 @@ describe('Pipeline editor app component', () => {
     wrapper.destroy();
   });
 
+  describe('loading state', () => {
     it('displays a loading icon if the blob query is loading', () => {
       createComponent({ blobLoading: true });
 
       expect(findLoadingIcon().exists()).toBe(true);
       expect(findTextEditor().exists()).toBe(false);
     });
+  });
 
   describe('when queries are called', () => {
     beforeEach(() => {
@@ -131,9 +135,7 @@ describe('Pipeline editor app component', () => {
 
     describe('when file exists', () => {
       beforeEach(async () => {
-        createComponentWithApollo();
-
-        await waitForPromises();
+        await createComponentWithApollo();
       });
 
       it('shows pipeline editor home component', () => {
@@ -145,10 +147,6 @@ describe('Pipeline editor app component', () => {
       });
 
       it('ci config query is called with correct variables', async () => {
-        createComponentWithApollo();
-
-        await waitForPromises();
-
         expect(mockCiConfigData).toHaveBeenCalledWith({
           content: mockCiYml,
           projectPath: mockProjectFullPath,
@@ -164,9 +162,7 @@ describe('Pipeline editor app component', () => {
               status: httpStatusCodes.BAD_REQUEST,
             },
           });
-          createComponentWithApollo();
-
-          await waitForPromises();
+          await createComponentWithApollo();
 
           expect(findEmptyState().exists()).toBe(true);
           expect(findAlert().exists()).toBe(false);
@@ -181,9 +177,7 @@ describe('Pipeline editor app component', () => {
               status: httpStatusCodes.NOT_FOUND,
             },
           });
-          createComponentWithApollo();
-
-          await waitForPromises();
+          await createComponentWithApollo();
 
           expect(findEmptyState().exists()).toBe(true);
           expect(findAlert().exists()).toBe(false);
@@ -194,8 +188,7 @@ describe('Pipeline editor app component', () => {
       describe('because of a fetching error', () => {
         it('shows a unkown error message', async () => {
           mockBlobContentData.mockRejectedValueOnce(new Error('My error!'));
-          createComponentWithApollo();
-          await waitForPromises();
+          await createComponentWithApollo();
 
           expect(findEmptyState().exists()).toBe(false);
           expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[LOAD_FAILURE_UNKNOWN]);
@@ -212,7 +205,7 @@ describe('Pipeline editor app component', () => {
           },
         });
 
-        createComponentWithApollo({
+        await createComponentWithApollo({
           provide: {
             glFeatures: {
               pipelineEditorEmptyStateAction: true,
@@ -220,8 +213,6 @@ describe('Pipeline editor app component', () => {
           },
         });
 
-        await waitForPromises();
-
         expect(findEmptyState().exists()).toBe(true);
         expect(findTextEditor().exists()).toBe(false);
 
@@ -254,9 +245,9 @@ describe('Pipeline editor app component', () => {
       describe('and the commit mutation fails', () => {
         const commitFailedReasons = ['Commit failed'];
 
-        beforeEach(() => {
+        beforeEach(async () => {
           window.scrollTo = jest.fn();
-          createComponent();
+          await createComponentWithApollo();
 
           findEditorHome().vm.$emit('showError', {
             type: COMMIT_FAILURE,
@@ -278,9 +269,9 @@ describe('Pipeline editor app component', () => {
       describe('when an unknown error occurs', () => {
         const unknownReasons = ['Commit failed'];
 
-        beforeEach(() => {
+        beforeEach(async () => {
           window.scrollTo = jest.fn();
-          createComponent();
+          await createComponentWithApollo();
 
           findEditorHome().vm.$emit('showError', {
             type: COMMIT_FAILURE,

spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js

@@ -59,7 +59,10 @@ describe('pipeline graph component', () => {
   describe('with `VALID` status', () => {
     beforeEach(() => {
       wrapper = createComponent({
-        pipelineData: { status: CI_CONFIG_STATUS_VALID, stages: [{ name: 'hello', groups: [] }] },
+        pipelineData: {
+          status: CI_CONFIG_STATUS_VALID,
+          stages: [{ name: 'hello', groups: [] }],
+        },
       });
     });