diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components')
9 files changed, 73 insertions, 64 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue index 905a5f2d271..9f82d4a5395 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue @@ -73,7 +73,7 @@ export default { }); }, onReset() { - this.$emit('cancel'); + this.$emit('resetContent'); }, scrollIntoView() { this.$el.scrollIntoView({ behavior: 'smooth' }); @@ -86,7 +86,7 @@ export default { startMergeRequest: __('Start a %{new_merge_request} with these changes'), newMergeRequest: __('new merge request'), commitChanges: __('Commit changes'), - cancel: __('Cancel'), + resetContent: __('Reset'), }, }; </script> @@ -148,7 +148,7 @@ export default { {{ $options.i18n.commitChanges }} </gl-button> <gl-button type="reset" category="secondary" class="gl-mr-3"> - {{ $options.i18n.cancel }} + {{ $options.i18n.resetContent }} </gl-button> </div> </gl-form> diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue index 14c11099756..54c9688d88f 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue @@ -8,10 +8,10 @@ import { COMMIT_SUCCESS, } from '../../constants'; import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql'; -import updateCurrentBranchMutation from '../../graphql/mutations/update_current_branch.mutation.graphql'; -import updateLastCommitBranchMutation from '../../graphql/mutations/update_last_commit_branch.mutation.graphql'; -import updatePipelineEtag from '../../graphql/mutations/update_pipeline_etag.mutation.graphql'; -import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql'; +import updateCurrentBranchMutation from '../../graphql/mutations/client/update_current_branch.mutation.graphql'; +import updateLastCommitBranchMutation from '../../graphql/mutations/client/update_last_commit_branch.mutation.graphql'; +import updatePipelineEtag from '../../graphql/mutations/client/update_pipeline_etag.mutation.graphql'; +import getCurrentBranch from '../../graphql/queries/client/current_branch.query.graphql'; import CommitForm from './commit_form.vue'; @@ -60,6 +60,9 @@ export default { apollo: { currentBranch: { query: getCurrentBranch, + update(data) { + return data.workBranches.current.name; + }, }, }, computed: { @@ -87,7 +90,7 @@ export default { try { const { data: { - commitCreate: { errors }, + commitCreate: { errors, commitPipelinePath: pipelineEtag }, }, } = await this.$apollo.mutate({ mutation: commitCIFile, @@ -101,14 +104,12 @@ export default { content: this.ciFileContent, lastCommitId: this.commitSha, }, - update(_, { data }) { - const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath; - if (pipelineEtag) { - this.$apollo.mutate({ mutation: updatePipelineEtag, variables: pipelineEtag }); - } - }, }); + if (pipelineEtag) { + this.updatePipelineEtag(pipelineEtag); + } + if (errors?.length) { this.$emit('showError', { type: COMMIT_FAILURE, reasons: errors }); } else if (openMergeRequest) { @@ -127,9 +128,6 @@ export default { this.isSaving = false; } }, - onCommitCancel() { - this.$emit('resetContent'); - }, updateCurrentBranch(currentBranch) { this.$apollo.mutate({ mutation: updateCurrentBranchMutation, @@ -142,6 +140,9 @@ export default { variables: { lastCommitBranch }, }); }, + updatePipelineEtag(pipelineEtag) { + this.$apollo.mutate({ mutation: updatePipelineEtag, variables: { pipelineEtag } }); + }, }, }; </script> @@ -153,7 +154,6 @@ export default { :is-saving="isSaving" :scroll-to-commit-form="scrollToCommitForm" v-on="$listeners" - @cancel="onCommitCancel" @submit="onCommitSubmit" /> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue index d7594fb318a..7bc096ce2c8 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue @@ -90,7 +90,7 @@ export default { <local-storage-sync v-model="isExpanded" :storage-key="$options.localDrawerKey" as-json> <aside aria-live="polite" - class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-3 gl-overflow-y-auto" + class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-200 gl-overflow-y-auto" :style="rootStyle" > <gl-button @@ -98,6 +98,7 @@ export default { class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex" :class="buttonClass" :title="__('Toggle sidebar')" + data-qa-selector="toggle_sidebar_collapse_button" @click="toggleDrawer" > <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text"> @@ -105,7 +106,12 @@ export default { </span> <gl-icon data-testid="toggle-icon" :name="buttonIconName" /> </gl-button> - <div v-if="isExpanded" class="gl-h-full gl-p-5" data-testid="drawer-content"> + <div + v-if="isExpanded" + class="gl-h-full gl-p-5" + data-testid="drawer-content" + data-qa-selector="drawer_content" + > <getting-started-card class="gl-mb-4" /> <first-pipeline-card class="gl-mb-4" /> <visualize-and-lint-card class="gl-mb-4" /> diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue index 7b8e97b573e..92fa411d5af 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue @@ -19,7 +19,7 @@ export default { if (this.glFeatures.schemaLinting) { const editorInstance = this.$refs.editor.getEditor(); - editorInstance.use(new CiSchemaExtension({ instance: editorInstance })); + editorInstance.use({ definition: CiSchemaExtension }); editorInstance.registerCiSchema(); } }, diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue index baf1d17b233..4f79a81d539 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue @@ -18,10 +18,10 @@ import { BRANCH_SEARCH_DEBOUNCE, DEFAULT_FAILURE, } from '~/pipeline_editor/constants'; -import updateCurrentBranchMutation from '~/pipeline_editor/graphql/mutations/update_current_branch.mutation.graphql'; -import getAvailableBranchesQuery from '~/pipeline_editor/graphql/queries/available_branches.graphql'; -import getCurrentBranchQuery from '~/pipeline_editor/graphql/queries/client/current_branch.graphql'; -import getLastCommitBranchQuery from '~/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql'; +import updateCurrentBranchMutation from '~/pipeline_editor/graphql/mutations/client/update_current_branch.mutation.graphql'; +import getAvailableBranchesQuery from '~/pipeline_editor/graphql/queries/available_branches.query.graphql'; +import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql'; +import getLastCommitBranch from '~/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql'; export default { i18n: { @@ -61,8 +61,8 @@ export default { }, data() { return { - branchSelected: null, availableBranches: [], + branchSelected: null, filteredBranches: [], isSearchingBranches: false, pageLimit: this.paginationLimit, @@ -93,15 +93,25 @@ export default { }, }, currentBranch: { - query: getCurrentBranchQuery, + query: getCurrentBranch, + update(data) { + return data.workBranches.current.name; + }, }, lastCommitBranch: { - query: getLastCommitBranchQuery, - result({ data: { lastCommitBranch } }) { - if (lastCommitBranch === '' || this.availableBranches.includes(lastCommitBranch)) { - return; + query: getLastCommitBranch, + update(data) { + return data.workBranches.lastCommit.name; + }, + result({ data }) { + if (data) { + const { name: lastCommitBranch } = data.workBranches.lastCommit; + if (lastCommitBranch === '' || this.availableBranches.includes(lastCommitBranch)) { + return; + } + + this.availableBranches.unshift(lastCommitBranch); } - this.availableBranches.unshift(lastCommitBranch); }, }, }, @@ -109,12 +119,12 @@ export default { branches() { return this.searchTerm.length > 0 ? this.filteredBranches : this.availableBranches; }, - isBranchesLoading() { - return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches; - }, enableBranchSwitcher() { return this.branches.length > 0 || this.searchTerm.length > 0; }, + isBranchesLoading() { + return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches; + }, }, watch: { shouldLoadNewBranch(flag) { @@ -247,6 +257,7 @@ export default { <gl-infinite-scroll :fetched-items="branches.length" :max-list-height="250" + data-qa-selector="branch_menu_container" @bottomReached="fetchNextBranches" > <template #items> @@ -255,7 +266,7 @@ export default { :key="branch" :is-checked="currentBranch === branch" :is-check-item="true" - data-qa-selector="menu_branch_button" + data-qa-selector="branch_menu_item_button" @click="selectBranch(branch)" > {{ branch }} diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue index 6fe1459c80c..16ad648afca 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -3,8 +3,8 @@ import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { truncateSha } from '~/lib/utils/text_utility'; import { s__ } from '~/locale'; -import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql'; -import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql'; +import getPipelineQuery from '~/pipeline_editor/graphql/queries/pipeline.query.graphql'; +import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql'; import { getQueryHeaders, toggleQueryPollingByVisibility, @@ -21,9 +21,6 @@ export const i18n = { ), viewBtn: s__('Pipeline|View pipeline'), viewCommit: s__('Pipeline|View commit'), - pipelineNotTriggeredMsg: s__( - 'Pipeline|No pipeline was triggered for the latest changes due to the current CI/CD configuration.', - ), }; export default { @@ -51,6 +48,9 @@ export default { apollo: { pipelineEtag: { query: getPipelineEtag, + update(data) { + return data.etags.pipeline; + }, }, pipeline: { context() { @@ -79,22 +79,16 @@ export default { result(res) { if (res.data?.project?.pipeline) { this.hasError = false; - } else { - this.hasError = true; - this.pipelineNotTriggered = true; } }, error() { this.hasError = true; - this.networkError = true; }, pollInterval: POLL_INTERVAL, }, }, data() { return { - networkError: false, - pipelineNotTriggered: false, hasError: false, }; }, @@ -148,16 +142,8 @@ export default { </div> </template> <template v-else-if="hasError"> - <div v-if="networkError"> - <gl-icon class="gl-mr-auto" name="warning-solid" /> - <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> - </div> - <div v-else> - <gl-icon class="gl-mr-auto" name="information-o" /> - <span data-testid="pipeline-not-triggered-error-msg"> - {{ $options.i18n.pipelineNotTriggeredMsg }} - </span> - </div> + <gl-icon class="gl-mr-auto" name="warning-solid" /> + <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> </template> <template v-else> <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1"> diff --git a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue index 611b78b3c5e..833d784f940 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue @@ -1,8 +1,8 @@ <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 getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_LOADING, @@ -43,6 +43,9 @@ export default { apollo: { appStatus: { query: getAppStatus, + update(data) { + return data.app.status; + }, }, }, computed: { diff --git a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue index 7f6dce05b6e..13e254f138a 100644 --- a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue +++ b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlLink, GlSprintf, GlTable } from '@gitlab/ui'; +import { GlAlert, GlLink, GlSprintf, GlTableLite } from '@gitlab/ui'; import { __ } from '~/locale'; import CiLintResultsParam from './ci_lint_results_param.vue'; import CiLintResultsValue from './ci_lint_results_value.vue'; @@ -36,7 +36,7 @@ export default { GlAlert, GlLink, GlSprintf, - GlTable, + GlTableLite, CiLintWarnings, CiLintResultsValue, CiLintResultsParam, @@ -129,7 +129,7 @@ export default { @dismiss="isWarningDismissed = true" /> - <gl-table + <gl-table-lite v-if="shouldShowTable" :items="jobs" :fields="$options.fields" @@ -142,6 +142,6 @@ export default { <template #cell(value)="{ item }"> <ci-lint-results-value :item="item" :dry-run="dryRun" /> </template> - </gl-table> + </gl-table-lite> </div> </template> 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 0cd0d17d944..3f50a1225d8 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -17,7 +17,7 @@ import { TABS_INDEX, VISUALIZE_TAB, } from '../constants'; -import getAppStatus from '../graphql/queries/client/app_status.graphql'; +import getAppStatus from '../graphql/queries/client/app_status.query.graphql'; import CiConfigMergedPreview from './editor/ci_config_merged_preview.vue'; import CiEditorHeader from './editor/ci_editor_header.vue'; import TextEditor from './editor/text_editor.vue'; @@ -91,6 +91,9 @@ export default { apollo: { appStatus: { query: getAppStatus, + update(data) { + return data.app.status; + }, }, }, computed: { |