diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue | 91 |
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> |