1 files changed, 53 insertions, 38 deletions

diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index b4a818e2472..c1168979e9f 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,19 +1,16 @@
 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { __, s__, sprintf } from '~/locale';
+import { __, s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
 import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes_dialog.vue';
-import {
-  COMMIT_FAILURE,
-  COMMIT_SUCCESS,
-  DEFAULT_FAILURE,
-  LOAD_FAILURE_NO_FILE,
-  LOAD_FAILURE_UNKNOWN,
-} from './constants';
+import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
+import { COMMIT_FAILURE, COMMIT_SUCCESS, DEFAULT_FAILURE, LOAD_FAILURE_UNKNOWN } from './constants';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.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';
 
 export default {
@@ -21,15 +18,13 @@ export default {
     ConfirmUnsavedChangesDialog,
     GlAlert,
     GlLoadingIcon,
+    PipelineEditorEmptyState,
     PipelineEditorHome,
   },
   inject: {
     ciConfigPath: {
       default: '',
     },
-    defaultBranch: {
-      default: null,
-    },
     projectFullPath: {
       default: '',
     },
@@ -40,6 +35,8 @@ export default {
       // Success and failure state
       failureType: null,
       failureReasons: [],
+      showStartScreen: false,
+      isNewCiConfigFile: false,
       initialCiFileContent: '',
       lastCommittedContent: '',
       currentCiFileContent: '',
@@ -51,11 +48,18 @@ export default {
   apollo: {
     initialCiFileContent: {
       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
+      // to get the initial file content, but we already have it in `lastCommitedContent`
+      // so we skip the loading altogether.
+      skip({ isNewCiConfigFile, lastCommittedContent }) {
+        return isNewCiConfigFile || lastCommittedContent;
+      },
       variables() {
         return {
           projectPath: this.projectFullPath,
           path: this.ciConfigPath,
-          ref: this.defaultBranch,
+          ref: this.currentBranch,
         };
       },
       update(data) {
@@ -94,6 +98,12 @@ export default {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       },
     },
+    currentBranch: {
+      query: getCurrentBranch,
+    },
+    isNewCiConfigFile: {
+      query: getIsNewCiConfigFile,
+    },
   },
   computed: {
     hasUnsavedChanges() {
@@ -102,21 +112,11 @@ export default {
     isBlobContentLoading() {
       return this.$apollo.queries.initialCiFileContent.loading;
     },
-    isBlobContentError() {
-      return this.failureType === LOAD_FAILURE_NO_FILE;
-    },
     isCiConfigDataLoading() {
       return this.$apollo.queries.ciConfigData.loading;
     },
     failure() {
       switch (this.failureType) {
-        case LOAD_FAILURE_NO_FILE:
-          return {
-            text: sprintf(this.$options.errorTexts[LOAD_FAILURE_NO_FILE], {
-              filePath: this.ciConfigPath,
-            }),
-            variant: 'danger',
-          };
         case LOAD_FAILURE_UNKNOWN:
           return {
             text: this.$options.errorTexts[LOAD_FAILURE_UNKNOWN],
@@ -154,9 +154,6 @@ export default {
   errorTexts: {
     [COMMIT_FAILURE]: s__('Pipelines|The GitLab CI configuration could not be updated.'),
     [DEFAULT_FAILURE]: __('Something went wrong on our end.'),
-    [LOAD_FAILURE_NO_FILE]: s__(
-      'Pipelines|There is no %{filePath} file in this repository, please add one and visit the Pipeline Editor again.',
-    ),
     [LOAD_FAILURE_UNKNOWN]: s__('Pipelines|The CI configuration was not loaded, please try again.'),
   },
   successTexts: {
@@ -173,7 +170,7 @@ export default {
         response?.status === httpStatusCodes.NOT_FOUND ||
         response?.status === httpStatusCodes.BAD_REQUEST
       ) {
-        this.reportFailure(LOAD_FAILURE_NO_FILE);
+        this.showStartScreen = true;
       } else {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       }
@@ -186,17 +183,25 @@ export default {
       this.showSuccessAlert = false;
     },
     reportFailure(type, reasons = []) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
       this.showFailureAlert = true;
       this.failureType = type;
       this.failureReasons = reasons;
     },
     reportSuccess(type) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
       this.showSuccessAlert = true;
       this.successType = type;
     },
     resetContent() {
       this.currentCiFileContent = this.lastCommittedContent;
     },
+    setNewEmptyCiConfigFile() {
+      this.$apollo
+        .getClient()
+        .writeQuery({ query: getIsNewCiConfigFile, data: { isNewCiConfigFile: true } });
+      this.showStartScreen = false;
+    },
     showErrorAlert({ type, reasons = [] }) {
       this.reportFailure(type, reasons);
     },
@@ -205,6 +210,12 @@ export default {
     },
     updateOnCommit({ type }) {
       this.reportSuccess(type);
+
+      if (this.isNewCiConfigFile) {
+        this.$apollo
+          .getClient()
+          .writeQuery({ query: getIsNewCiConfigFile, data: { isNewCiConfigFile: false } });
+      }
       // Keep track of the latest commited content to know
       // if the user has made changes to the file that are unsaved.
       this.lastCommittedContent = this.currentCiFileContent;
@@ -214,18 +225,22 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mt-4">
-    <gl-alert v-if="showSuccessAlert" :variant="success.variant" @dismiss="dismissSuccess">
-      {{ success.text }}
-    </gl-alert>
-    <gl-alert v-if="showFailureAlert" :variant="failure.variant" @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>
+  <div class="gl-mt-4 gl-relative">
     <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
-    <div v-else-if="!isBlobContentError" class="gl-mt-4">
+    <pipeline-editor-empty-state
+      v-else-if="showStartScreen"
+      @createEmptyConfigFile="setNewEmptyCiConfigFile"
+    />
+    <div v-else>
+      <gl-alert v-if="showSuccessAlert" :variant="success.variant" @dismiss="dismissSuccess">
+        {{ success.text }}
+      </gl-alert>
+      <gl-alert v-if="showFailureAlert" :variant="failure.variant" @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
         :is-ci-config-data-loading="isCiConfigDataLoading"
         :ci-config-data="ciConfigData"
@@ -235,7 +250,7 @@ export default {
         @showError="showErrorAlert"
         @updateCiConfig="updateCiConfig"
       />
+      <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />
     </div>
-    <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />
   </div>
 </template>