1 files changed, 42 insertions, 104 deletions

diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index e0fb38004ec..79a2a51cebc 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,21 +1,15 @@
 <script>
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { fetchPolicies } from '~/lib/graphql';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
-import CodeSnippetAlert from './components/code_snippet_alert/code_snippet_alert.vue';
-import {
-  CODE_SNIPPET_SOURCE_URL_PARAM,
-  CODE_SNIPPET_SOURCES,
-} from './components/code_snippet_alert/constants';
+
 import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes_dialog.vue';
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
+import PipelineEditorMessages from './components/ui/pipeline_editor_messages.vue';
 import {
-  COMMIT_FAILURE,
-  COMMIT_SUCCESS,
-  DEFAULT_FAILURE,
   EDITOR_APP_STATUS_EMPTY,
   EDITOR_APP_STATUS_ERROR,
   EDITOR_APP_STATUS_LOADING,
@@ -31,11 +25,10 @@ import PipelineEditorHome from './pipeline_editor_home.vue';
 export default {
   components: {
     ConfirmUnsavedChangesDialog,
-    GlAlert,
     GlLoadingIcon,
     PipelineEditorEmptyState,
     PipelineEditorHome,
-    CodeSnippetAlert,
+    PipelineEditorMessages,
   },
   inject: {
     ciConfigPath: {
@@ -50,20 +43,20 @@ export default {
       ciConfigData: {},
       failureType: null,
       failureReasons: [],
-      showStartScreen: false,
-      isNewCiConfigFile: false,
       initialCiFileContent: '',
+      isNewCiConfigFile: false,
       lastCommittedContent: '',
       currentCiFileContent: '',
-      showFailureAlert: false,
-      showSuccessAlert: false,
       successType: null,
-      codeSnippetCopiedFrom: '',
+      showStartScreen: false,
+      showSuccess: false,
+      showFailure: false,
     };
   },
 
   apollo: {
     initialCiFileContent: {
+      fetchPolicy: fetchPolicies.NETWORK,
       query: getBlobContent,
       // If it's a brand new file, we don't want to fetch the content.
       // Then when the user commits the first time, the query would run
@@ -87,10 +80,21 @@ export default {
 
         this.lastCommittedContent = fileContent;
         this.currentCiFileContent = fileContent;
+
+        // make sure to reset the start screen flag during a refetch
+        // e.g. when switching branches
+        if (fileContent.length) {
+          this.showStartScreen = false;
+        }
       },
       error(error) {
         this.handleBlobContentError(error);
       },
+      watchLoading(isLoading) {
+        if (isLoading) {
+          this.setAppStatus(EDITOR_APP_STATUS_LOADING);
+        }
+      },
     },
     ciConfigData: {
       query: getCiConfigData,
@@ -145,50 +149,12 @@ export default {
     isEmpty() {
       return this.currentCiFileContent === '';
     },
-    failure() {
-      switch (this.failureType) {
-        case LOAD_FAILURE_UNKNOWN:
-          return {
-            text: this.$options.errorTexts[LOAD_FAILURE_UNKNOWN],
-            variant: 'danger',
-          };
-        case COMMIT_FAILURE:
-          return {
-            text: this.$options.errorTexts[COMMIT_FAILURE],
-            variant: 'danger',
-          };
-        default:
-          return {
-            text: this.$options.errorTexts[DEFAULT_FAILURE],
-            variant: 'danger',
-          };
-      }
-    },
-    success() {
-      switch (this.successType) {
-        case COMMIT_SUCCESS:
-          return {
-            text: this.$options.successTexts[COMMIT_SUCCESS],
-            variant: 'info',
-          };
-        default:
-          return null;
-      }
-    },
   },
   i18n: {
     tabEdit: s__('Pipelines|Write pipeline configuration'),
     tabGraph: s__('Pipelines|Visualize'),
     tabLint: s__('Pipelines|Lint'),
   },
-  errorTexts: {
-    [COMMIT_FAILURE]: s__('Pipelines|The GitLab CI configuration could not be updated.'),
-    [DEFAULT_FAILURE]: __('Something went wrong on our end.'),
-    [LOAD_FAILURE_UNKNOWN]: s__('Pipelines|The CI configuration was not loaded, please try again.'),
-  },
-  successTexts: {
-    [COMMIT_SUCCESS]: __('Your changes have been successfully committed.'),
-  },
   watch: {
     isEmpty(flag) {
       if (flag) {
@@ -196,9 +162,6 @@ export default {
       }
     },
   },
-  created() {
-    this.parseCodeSnippetSourceParam();
-  },
   methods: {
     handleBlobContentError(error = {}) {
       const { networkError } = error;
@@ -216,24 +179,27 @@ export default {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       }
     },
-
-    dismissFailure() {
-      this.showFailureAlert = false;
+    hideFailure() {
+      this.showFailure = false;
+    },
+    hideSuccess() {
+      this.showSuccess = false;
     },
-    dismissSuccess() {
-      this.showSuccessAlert = false;
+    async refetchContent() {
+      this.$apollo.queries.initialCiFileContent.skip = false;
+      await this.$apollo.queries.initialCiFileContent.refetch();
     },
     reportFailure(type, reasons = []) {
       this.setAppStatus(EDITOR_APP_STATUS_ERROR);
 
       window.scrollTo({ top: 0, behavior: 'smooth' });
-      this.showFailureAlert = true;
+      this.showFailure = true;
       this.failureType = type;
       this.failureReasons = reasons;
     },
     reportSuccess(type) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
-      this.showSuccessAlert = true;
+      this.showSuccess = true;
       this.successType = type;
     },
     resetContent() {
@@ -266,20 +232,6 @@ export default {
       // if the user has made changes to the file that are unsaved.
       this.lastCommittedContent = this.currentCiFileContent;
     },
-    parseCodeSnippetSourceParam() {
-      const [codeSnippetCopiedFrom] = getParameterValues(CODE_SNIPPET_SOURCE_URL_PARAM);
-      if (codeSnippetCopiedFrom && CODE_SNIPPET_SOURCES.includes(codeSnippetCopiedFrom)) {
-        this.codeSnippetCopiedFrom = codeSnippetCopiedFrom;
-        window.history.replaceState(
-          {},
-          document.title,
-          removeParams([CODE_SNIPPET_SOURCE_URL_PARAM]),
-        );
-      }
-    },
-    dismissCodeSnippetAlert() {
-      this.codeSnippetCopiedFrom = '';
-    },
   },
 };
 </script>
@@ -290,33 +242,18 @@ export default {
     <pipeline-editor-empty-state
       v-else-if="showStartScreen"
       @createEmptyConfigFile="setNewEmptyCiConfigFile"
+      @refetchContent="refetchContent"
     />
     <div v-else>
-      <code-snippet-alert
-        v-if="codeSnippetCopiedFrom"
-        :source="codeSnippetCopiedFrom"
-        class="gl-mb-5"
-        @dismiss="dismissCodeSnippetAlert"
+      <pipeline-editor-messages
+        :failure-type="failureType"
+        :failure-reasons="failureReasons"
+        :show-failure="showFailure"
+        :show-success="showSuccess"
+        :success-type="successType"
+        @hide-success="hideSuccess"
+        @hide-failure="hideFailure"
       />
-      <gl-alert
-        v-if="showSuccessAlert"
-        :variant="success.variant"
-        class="gl-mb-5"
-        @dismiss="dismissSuccess"
-      >
-        {{ success.text }}
-      </gl-alert>
-      <gl-alert
-        v-if="showFailureAlert"
-        :variant="failure.variant"
-        class="gl-mb-5"
-        @dismiss="dismissFailure"
-      >
-        {{ failure.text }}
-        <ul v-if="failureReasons.length" class="gl-mb-0">
-          <li v-for="reason in failureReasons" :key="reason">{{ reason }}</li>
-        </ul>
-      </gl-alert>
       <pipeline-editor-home
         :ci-config-data="ciConfigData"
         :ci-file-content="currentCiFileContent"
@@ -324,6 +261,7 @@ export default {
         @commit="updateOnCommit"
         @resetContent="resetContent"
         @showError="showErrorAlert"
+        @refetchContent="refetchContent"
         @updateCiConfig="updateCiConfig"
       />
       <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />