diff options
Diffstat (limited to 'app/assets/javascripts')
20 files changed, 844 insertions, 380 deletions
diff --git a/app/assets/javascripts/boards/boards_util.js b/app/assets/javascripts/boards/boards_util.js index fcd1440841b..93bd97e691b 100644 --- a/app/assets/javascripts/boards/boards_util.js +++ b/app/assets/javascripts/boards/boards_util.js @@ -1,4 +1,4 @@ -import { sortBy, cloneDeep, find } from 'lodash'; +import { sortBy, cloneDeep, find, inRange } from 'lodash'; import { TYPENAME_BOARD, TYPENAME_ITERATION, @@ -12,7 +12,7 @@ import { AssigneeFilterType, MilestoneFilterType, boardQuery, -} from './constants'; +} from 'ee_else_ce/boards/constants'; export function getMilestone() { return null; @@ -30,6 +30,17 @@ export function updateListPosition(listObj) { return { ...listObj, position }; } +export function calculateNewPosition(listPosition, initialPosition, targetPosition) { + if ( + listPosition === null || + !(inRange(listPosition, initialPosition, targetPosition) || listPosition === targetPosition) + ) { + return listPosition; + } + const offset = initialPosition < targetPosition ? -1 : 1; + return listPosition + offset; +} + export function formatBoardLists(lists) { return lists.nodes.reduce((map, list) => { return { diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue index ba4e3af79b5..a51e4ddc8f8 100644 --- a/app/assets/javascripts/boards/components/board_content.vue +++ b/app/assets/javascripts/boards/components/board_content.vue @@ -1,12 +1,19 @@ <script> import { GlAlert } from '@gitlab/ui'; import { sortBy } from 'lodash'; +import produce from 'immer'; import Draggable from 'vuedraggable'; import { mapState, mapActions } from 'vuex'; import eventHub from '~/boards/eventhub'; import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue'; import { defaultSortableOptions } from '~/sortable/constants'; -import { DraggableItemTypes, flashAnimationDuration } from 'ee_else_ce/boards/constants'; +import { + DraggableItemTypes, + flashAnimationDuration, + listsQuery, + updateListQueries, +} from 'ee_else_ce/boards/constants'; +import { calculateNewPosition } from 'ee_else_ce/boards/boards_util'; import BoardColumn from './board_column.vue'; export default { @@ -20,7 +27,15 @@ export default { EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'), GlAlert, }, - inject: ['canAdminList', 'isIssueBoard', 'isEpicBoard', 'disabled', 'isApolloBoard'], + inject: [ + 'boardType', + 'canAdminList', + 'isIssueBoard', + 'isEpicBoard', + 'disabled', + 'issuableType', + 'isApolloBoard', + ], props: { boardId: { type: String, @@ -117,6 +132,83 @@ export default { this.highlightedLists = this.highlightedLists.filter((id) => id !== listId); }, flashAnimationDuration); }, + updateListPosition({ + item: { + dataset: { listId: movedListId, draggableItemType }, + }, + newIndex, + to: { children }, + }) { + if (!this.isApolloBoard) { + this.moveList({ + item: { + dataset: { listId: movedListId, draggableItemType }, + }, + newIndex, + to: { children }, + }); + return; + } + + if (draggableItemType !== DraggableItemTypes.list) { + return; + } + + const displacedListId = children[newIndex].dataset.listId; + + if (movedListId === displacedListId) { + return; + } + const initialPosition = this.boardListsById[movedListId].position; + const targetPosition = this.boardListsById[displacedListId].position; + + try { + this.$apollo.mutate({ + mutation: updateListQueries[this.issuableType].mutation, + variables: { + listId: movedListId, + position: targetPosition, + }, + update: (store) => { + const sourceData = store.readQuery({ + query: listsQuery[this.issuableType].query, + variables: this.listQueryVariables, + }); + const data = produce(sourceData, (draftData) => { + // for current list, new position is already set by Apollo via automatic update + const affectedNodes = draftData[this.boardType].board.lists.nodes.filter( + (node) => node.id !== movedListId, + ); + affectedNodes.forEach((node) => { + // eslint-disable-next-line no-param-reassign + node.position = calculateNewPosition( + node.position, + initialPosition, + targetPosition, + ); + }); + }); + store.writeQuery({ + query: listsQuery[this.issuableType].query, + variables: this.listQueryVariables, + data, + }); + }, + optimisticResponse: { + updateBoardList: { + __typename: 'UpdateBoardListPayload', + errors: [], + list: { + ...this.boardListsApollo[movedListId], + position: targetPosition, + }, + }, + }, + }); + } catch { + // handle error + } + }, }, }; </script> @@ -136,7 +228,7 @@ export default { ref="list" v-bind="draggableOptions" class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-auto" - @end="moveList" + @end="updateListPosition" > <board-column v-for="(list, index) in boardListsToUse" @@ -173,6 +265,7 @@ export default { :filters="filterParams" :highlighted-lists="highlightedLists" @setActiveList="$emit('setActiveList', $event)" + @move-list="updateListPosition" > <board-add-new-column v-if="addColumnFormVisible" diff --git a/app/assets/javascripts/ci/runner/components/runner_form_fields.vue b/app/assets/javascripts/ci/runner/components/runner_form_fields.vue index 180c41e7ed6..d090a562ff7 100644 --- a/app/assets/javascripts/ci/runner/components/runner_form_fields.vue +++ b/app/assets/javascripts/ci/runner/components/runner_form_fields.vue @@ -74,11 +74,56 @@ export default { <template> <div> <h2 class="gl-font-size-h2 gl-my-5"> + {{ s__('Runners|Tags') }} + </h2> + <gl-skeleton-loader v-if="loading" :lines="12" /> + <template v-else-if="model"> + <gl-form-group :label="__('Tags')" label-for="runner-tags"> + <template #description> + <gl-sprintf + :message=" + s__('Runners|Multiple tags must be separated by a comma. For example, %{example}.') + " + > + <template #example> + <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> + <code>macos, shared</code> + </template> + </gl-sprintf> + </template> + <template #label-description> + <gl-sprintf + :message=" + s__( + 'Runners|Add tags for the types of jobs the runner processes to ensure that the runner only runs jobs that you intend it to. %{helpLinkStart}Learn more.%{helpLinkEnd}', + ) + " + > + <template #helpLink="{ content }"> + <gl-link :href="$options.HELP_LABELS_PAGE_PATH" target="_blank">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </template> + <gl-form-input id="runner-tags" v-model="model.tagList" name="tags" /> + </gl-form-group> + <gl-form-checkbox v-model="model.runUntagged" name="run-untagged"> + {{ __('Run untagged jobs') }} + <template #help> + {{ s__('Runners|Use the runner for jobs without tags in addition to tagged jobs.') }} + </template> + </gl-form-checkbox> + </template> + + <hr aria-hidden="true" /> + + <h2 class="gl-font-size-h2 gl-my-5"> {{ s__('Runners|Details') }} {{ __('(optional)') }} </h2> - <gl-skeleton-loader v-if="loading" :lines="9" /> + <gl-skeleton-loader v-if="loading" :lines="15" /> <template v-else-if="model"> <gl-form-group :label="s__('Runners|Runner description')" label-for="runner-description"> <gl-form-input id="runner-description" v-model="model.description" name="description" /> @@ -93,7 +138,7 @@ export default { {{ __('(optional)') }} </h2> - <gl-skeleton-loader v-if="loading" :lines="27" /> + <gl-skeleton-loader v-if="loading" :lines="15" /> <template v-else-if="model"> <div class="gl-mb-5"> <gl-form-checkbox v-model="model.paused" name="paused"> @@ -115,13 +160,6 @@ export default { </template> </gl-form-checkbox> - <gl-form-checkbox v-model="model.runUntagged" name="run-untagged"> - {{ __('Run untagged jobs') }} - <template #help> - {{ s__('Runners|Use the runner for jobs without tags in addition to tagged jobs.') }} - </template> - </gl-form-checkbox> - <gl-form-checkbox v-if="canBeLockedToProject" v-model="model.locked" name="locked"> {{ __('Lock to current projects') }} <gl-icon name="lock" /> <template #help> @@ -134,37 +172,6 @@ export default { </gl-form-checkbox> </div> - <gl-form-group :label="__('Tags')" label-for="runner-tags"> - <template #description> - <gl-sprintf - :message=" - s__('Runners|Multiple tags must be separated by a comma. For example, %{example}.') - " - > - <template #example> - <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> - <code>macos, shared</code> - </template> - </gl-sprintf> - </template> - <template #label-description> - <gl-sprintf - :message=" - s__( - 'Runners|Add tags for the types of jobs the runner processes to ensure that the runner only runs jobs that you intend it to. %{helpLinkStart}Learn more.%{helpLinkEnd}', - ) - " - > - <template #helpLink="{ content }"> - <gl-link :href="$options.HELP_LABELS_PAGE_PATH" target="_blank">{{ - content - }}</gl-link> - </template> - </gl-sprintf> - </template> - <gl-form-input id="runner-tags" v-model="model.tagList" name="tags" /> - </gl-form-group> - <gl-form-group :label="__('Maximum job timeout')" :label-description=" diff --git a/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue b/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue index ab2dc1b8ba3..d2836962a97 100644 --- a/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue +++ b/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue @@ -5,6 +5,16 @@ import FILTERED_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty- import { GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; +import { + I18N_GET_STARTED, + I18N_RUNNERS_ARE_AGENTS, + I18N_CREATE_RUNNER_LINK, + I18N_STILL_USING_REGISTRATION_TOKENS, + I18N_CONTACT_ADMIN_TO_REGISTER, + I18N_FOLLOW_REGISTRATION_INSTRUCTIONS, + I18N_NO_RESULTS, + I18N_EDIT_YOUR_SEARCH, +} from '~/ci/runner/constants'; export default { components: { @@ -38,9 +48,8 @@ export default { shouldShowCreateRunnerWorkflow() { // create_runner_workflow_for_admin or create_runner_workflow_for_namespace return ( - this.newRunnerPath && - (this.glFeatures?.createRunnerWorkflowForAdmin || - this.glFeatures?.createRunnerWorkflowForNamespace) + this.glFeatures?.createRunnerWorkflowForAdmin || + this.glFeatures?.createRunnerWorkflowForNamespace ); }, }, @@ -48,35 +57,59 @@ export default { svgHeight: 145, EMPTY_STATE_SVG_URL, FILTERED_SVG_URL, + + I18N_GET_STARTED, + I18N_RUNNERS_ARE_AGENTS, + I18N_CREATE_RUNNER_LINK, + I18N_STILL_USING_REGISTRATION_TOKENS, + I18N_CONTACT_ADMIN_TO_REGISTER, + I18N_FOLLOW_REGISTRATION_INSTRUCTIONS, + I18N_NO_RESULTS, + I18N_EDIT_YOUR_SEARCH, }; </script> <template> <gl-empty-state v-if="isSearchFiltered" - :title="s__('Runners|No results found')" + :title="$options.I18N_NO_RESULTS" :svg-path="$options.FILTERED_SVG_URL" :svg-height="$options.svgHeight" - :description="s__('Runners|Edit your search and try again')" + :description="$options.I18N_EDIT_YOUR_SEARCH" /> <gl-empty-state v-else - :title="s__('Runners|Get started with runners')" + :title="$options.I18N_GET_STARTED" :svg-path="$options.EMPTY_STATE_SVG_URL" :svg-height="$options.svgHeight" > - <template v-if="registrationToken" #description> + <template #description> + {{ $options.I18N_RUNNERS_ARE_AGENTS }} + <template v-if="shouldShowCreateRunnerWorkflow"> + <gl-sprintf v-if="newRunnerPath" :message="$options.I18N_CREATE_RUNNER_LINK"> + <template #link="{ content }"> + <gl-link :href="newRunnerPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + <template v-if="registrationToken"> + <br /> + <gl-link v-gl-modal="$options.modalId">{{ + $options.I18N_STILL_USING_REGISTRATION_TOKENS + }}</gl-link> + <runner-instructions-modal + :modal-id="$options.modalId" + :registration-token="registrationToken" + /> + </template> + <template v-if="!newRunnerPath && !registrationToken"> + {{ $options.I18N_CONTACT_ADMIN_TO_REGISTER }} + </template> + </template> <gl-sprintf - :message=" - s__( - 'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.', - ) - " + v-else-if="registrationToken" + :message="$options.I18N_FOLLOW_REGISTRATION_INSTRUCTIONS" > - <template v-if="shouldShowCreateRunnerWorkflow" #link="{ content }"> - <gl-link :href="newRunnerPath">{{ content }}</gl-link> - </template> - <template v-else #link="{ content }"> + <template #link="{ content }"> <gl-link v-gl-modal="$options.modalId">{{ content }}</gl-link> <runner-instructions-modal :modal-id="$options.modalId" @@ -84,13 +117,9 @@ export default { /> </template> </gl-sprintf> - </template> - <template v-else #description> - {{ - s__( - 'Runners|Runners are the agents that run your CI/CD jobs. To register new runners, please contact your administrator.', - ) - }} + <template v-else> + {{ $options.I18N_CONTACT_ADMIN_TO_REGISTER }} + </template> </template> </gl-empty-state> </template> diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js index 28263b5cfd9..395d9ac0d8e 100644 --- a/app/assets/javascripts/ci/runner/constants.js +++ b/app/assets/javascripts/ci/runner/constants.js @@ -102,6 +102,26 @@ export const I18N_CREATED_AT_BY_LABEL = s__('Runners|Created %{timeAgo} by %{ava export const I18N_SHOW_ONLY_INHERITED = s__('Runners|Show only inherited'); export const I18N_ADMIN = s__('Runners|Administrator'); +// No runners registered +export const I18N_GET_STARTED = s__('Runners|Get started with runners'); +export const I18N_RUNNERS_ARE_AGENTS = s__( + 'Runners|Runners are the agents that run your CI/CD jobs.', +); +export const I18N_CREATE_RUNNER_LINK = s__( + 'Runners|%{linkStart}Create a new runner%{linkEnd} to get started.', +); +export const I18N_STILL_USING_REGISTRATION_TOKENS = s__('Runners|Still using registration tokens?'); +export const I18N_CONTACT_ADMIN_TO_REGISTER = s__( + 'Runners|To register new runners, contact your administrator.', +); +export const I18N_FOLLOW_REGISTRATION_INSTRUCTIONS = s__( + 'Runners|Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.', +); + +// No runners found +export const I18N_NO_RESULTS = s__('Runners|No results found'); +export const I18N_EDIT_YOUR_SEARCH = s__('Runners|Edit your search and try again'); + // Runner details export const JOBS_ROUTE_PATH = '/jobs'; // vue-router route path diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index f2dac15a99e..8c8293eb09e 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -41,7 +41,7 @@ export default { viewType: { type: String, required: false, - default: 'child', + default: 'root', }, canCreatePipelineInTargetProject: { type: Boolean, diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue index 10ac4c5383b..3157653648b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue @@ -8,8 +8,10 @@ import { GlButton, GlFormCheckbox, GlLoadingIcon, + GlModal, + GlSprintf, } from '@gitlab/ui'; -import { last } from 'lodash'; +import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { __, s__ } from '~/locale'; import FileSha from '~/packages_and_registries/package_registry/components/details/file_sha.vue'; @@ -22,10 +24,22 @@ import { GRAPHQL_PACKAGE_FILES_PAGE_SIZE, REQUEST_DELETE_SELECTED_PACKAGE_FILE_TRACKING_ACTION, SELECT_PACKAGE_FILE_TRACKING_ACTION, + DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, + DELETE_PACKAGE_FILE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, TRACKING_LABEL_PACKAGE_ASSET, TRACKING_ACTION_EXPAND_PACKAGE_ASSET, + DELETE_PACKAGE_FILE_ERROR_MESSAGE, + DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, + DELETE_PACKAGE_FILES_ERROR_MESSAGE, + DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, + DELETE_PACKAGE_FILES_TRACKING_ACTION, + DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT, + DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT, } from '~/packages_and_registries/package_registry/constants'; import getPackageFilesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_files.query.graphql'; +import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql'; export default { name: 'PackageFiles', @@ -38,22 +52,25 @@ export default { GlFormCheckbox, GlButton, GlLoadingIcon, + GlModal, + GlSprintf, FileIcon, TimeAgoTooltip, FileSha, }, mixins: [Tracking.mixin()], + trackingActions: { + DELETE_PACKAGE_FILE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, + DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, + }, props: { canDelete: { type: Boolean, required: false, default: false, }, - isLoading: { - type: Boolean, - required: false, - default: false, - }, packageId: { type: String, required: true, @@ -62,6 +79,10 @@ export default { type: String, required: true, }, + projectPath: { + type: String, + required: true, + }, }, apollo: { packageFiles: { @@ -73,7 +94,7 @@ export default { return this.queryVariables; }, update(data) { - return data.package?.packageFiles?.nodes || []; + return data.package?.packageFiles ?? {}; }, error() { this.fetchPackageFilesError = true; @@ -83,29 +104,33 @@ export default { data() { return { fetchPackageFilesError: false, - packageFiles: [], + filesToDelete: [], + packageFiles: {}, + mutationLoading: false, selectedReferences: [], }; }, computed: { + files() { + return this.packageFiles?.nodes ?? []; + }, areFilesSelected() { return this.selectedReferences.length > 0; }, areAllFilesSelected() { - return this.packageFiles.length > 0 && this.packageFiles.every(this.isSelected); + return this.files.length > 0 && this.files.every(this.isSelected); }, filesTableRows() { - return this.packageFiles.map((pf) => ({ + return this.files.map((pf) => ({ ...pf, size: this.formatSize(pf.size), - pipeline: last(pf.pipelines), })); }, hasSelectedSomeFiles() { return this.areFilesSelected && !this.areAllFilesSelected; }, - loading() { - return this.$apollo.queries.packageFiles.loading || this.isLoading; + isLoading() { + return this.$apollo.queries.packageFiles.loading || this.mutationLoading; }, filesTableHeaderFields() { return [ @@ -148,6 +173,29 @@ export default { category: packageTypeToTrackCategory(this.packageType), }; }, + refetchQueriesData() { + return [ + { + query: getPackageFilesQuery, + variables: this.queryVariables, + }, + ]; + }, + modalAction() { + return this.hasOneItem(this.filesToDelete) + ? this.$options.modal.fileDeletePrimaryAction + : this.$options.modal.filesDeletePrimaryAction; + }, + modalTitle() { + return this.hasOneItem(this.filesToDelete) + ? this.$options.i18n.deleteFileModalTitle + : this.$options.i18n.deleteFilesModalTitle; + }, + modalDescription() { + return this.hasOneItem(this.filesToDelete) + ? this.$options.i18n.deleteFileModalContent + : this.$options.i18n.deleteFilesModalContent; + }, }, methods: { formatSize(size) { @@ -170,15 +218,97 @@ export default { }, handleFileDeleteSelected() { this.track(REQUEST_DELETE_SELECTED_PACKAGE_FILE_TRACKING_ACTION); - this.$emit('delete-files', this.selectedReferences); + this.handleFileDelete(this.selectedReferences); + }, + async deletePackageFiles(ids) { + this.mutationLoading = true; + try { + const { data } = await this.$apollo.mutate({ + mutation: destroyPackageFilesMutation, + variables: { + projectPath: this.projectPath, + ids, + }, + awaitRefetchQueries: true, + refetchQueries: this.refetchQueriesData, + }); + if (data?.destroyPackageFiles?.errors[0]) { + throw data.destroyPackageFiles.errors[0]; + } + createAlert({ + message: this.hasOneItem(ids) + ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE + : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, + variant: VARIANT_SUCCESS, + }); + } catch (error) { + createAlert({ + message: this.hasOneItem(ids) + ? DELETE_PACKAGE_FILE_ERROR_MESSAGE + : DELETE_PACKAGE_FILES_ERROR_MESSAGE, + variant: VARIANT_WARNING, + captureError: true, + error, + }); + } finally { + this.mutationLoading = false; + this.filesToDelete = []; + this.selectedReferences = []; + } + }, + handleFileDelete(files) { + this.track(REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION); + if (files.length === this.files.length && !this.packageFiles?.pageInfo?.hasNextPage) { + this.$emit( + 'delete-all-files', + this.hasOneItem(files) + ? DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT + : DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT, + ); + } else { + this.filesToDelete = files; + this.$refs.deleteFilesModal.show(); + } + }, + hasOneItem(items) { + return items.length === 1; + }, + confirmFilesDelete() { + if (this.hasOneItem(this.filesToDelete)) { + this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION); + } else { + this.track(DELETE_PACKAGE_FILES_TRACKING_ACTION); + } + this.deletePackageFiles(this.filesToDelete.map((file) => file.id)); }, }, i18n: { - deleteFile: __('Delete asset'), + deleteFile: s__('PackageRegistry|Delete asset'), + deleteFileModalTitle: s__('PackageRegistry|Delete package asset'), + deleteFileModalContent: s__( + 'PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?', + ), + deleteFilesModalTitle: s__('PackageRegistry|Delete %{count} assets'), + deleteFilesModalContent: s__( + 'PackageRegistry|You are about to delete %{count} assets. This operation is irreversible.', + ), deleteSelected: s__('PackageRegistry|Delete selected'), moreActionsText: __('More actions'), fetchPackageFilesErrorMessage: FETCH_PACKAGE_FILES_ERROR_MESSAGE, }, + modal: { + fileDeletePrimaryAction: { + text: __('Delete'), + attributes: { variant: 'danger', category: 'primary' }, + }, + filesDeletePrimaryAction: { + text: s__('PackageRegistry|Permanently delete assets'), + attributes: { variant: 'danger', category: 'primary' }, + }, + cancelAction: { + text: __('Cancel'), + }, + }, }; </script> @@ -188,7 +318,7 @@ export default { <h3 class="gl-font-lg gl-mt-5">{{ __('Assets') }}</h3> <gl-button v-if="!fetchPackageFilesError && canDelete" - :disabled="loading || !areFilesSelected" + :disabled="isLoading || !areFilesSelected" category="secondary" variant="danger" data-testid="delete-selected" @@ -206,7 +336,7 @@ export default { </gl-alert> <gl-table v-else - :busy="loading" + :busy="isLoading" :fields="filesTableHeaderFields" :items="filesTableRows" show-empty @@ -255,7 +385,7 @@ export default { :href="item.downloadPath" class="gl-text-gray-500" data-testid="download-link" - @click="$emit('download-file')" + @click="track($options.trackingActions.DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION)" > <file-icon :file-name="item.fileName" @@ -279,7 +409,7 @@ export default { no-caret right > - <gl-dropdown-item data-testid="delete-file" @click="$emit('delete-files', [item])"> + <gl-dropdown-item data-testid="delete-file" @click="handleFileDelete([item])"> {{ $options.i18n.deleteFile }} </gl-dropdown-item> </gl-dropdown> @@ -300,5 +430,34 @@ export default { </div> </template> </gl-table> + + <gl-modal + ref="deleteFilesModal" + size="sm" + modal-id="delete-files-modal" + :action-primary="modalAction" + :action-cancel="$options.modal.cancelAction" + data-testid="delete-files-modal" + @primary="confirmFilesDelete" + @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" + > + <template #modal-title> + <gl-sprintf :message="modalTitle"> + <template #count> + {{ filesToDelete.length }} + </template> + </gl-sprintf> + </template> + + <gl-sprintf :message="modalDescription"> + <template #filename> + <strong>{{ filesToDelete[0].fileName }}</strong> + </template> + + <template #count> + {{ filesToDelete.length }} + </template> + </gl-sprintf> + </gl-modal> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index e5ef9265f3e..2a9cfb955a7 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql @@ -47,9 +47,6 @@ query getPackageDetails($id: PackagesPackageID!) { } } packageFiles(first: 100) { - pageInfo { - hasNextPage - } nodes { id size diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_files.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_files.query.graphql index 7851cd39200..e6f292ec1d3 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_files.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_files.query.graphql @@ -2,6 +2,9 @@ query getPackageFiles($id: PackagesPackageID!, $first: Int) { package(id: $id) { id packageFiles(first: $first) { + pageInfo { + hasNextPage + } nodes { id fileMd5 diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index 48a45956ef1..922886fa9cd 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -11,7 +11,7 @@ import { GlTabs, GlSprintf, } from '@gitlab/ui'; -import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert'; +import { createAlert } from '~/alert'; import { TYPENAME_PACKAGES_PACKAGE } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; @@ -33,27 +33,15 @@ import { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, - DELETE_PACKAGE_FILE_TRACKING_ACTION, - DELETE_PACKAGE_FILES_TRACKING_ACTION, - REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, REQUEST_FORWARDING_HELP_PAGE_PATH, - CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, SHOW_DELETE_SUCCESS_ALERT, FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, - DELETE_PACKAGE_FILE_ERROR_MESSAGE, - DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, - DELETE_PACKAGE_FILES_ERROR_MESSAGE, - DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, DELETE_PACKAGE_REQUEST_FORWARDING_MODAL_CONTENT, - DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, DELETE_MODAL_TITLE, DELETE_MODAL_CONTENT, - DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT, - DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT, GRAPHQL_PAGE_SIZE, } from '~/packages_and_registries/package_registry/constants'; -import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql'; import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql'; import getPackageVersionsQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql'; import Tracking from '~/tracking'; @@ -92,10 +80,6 @@ export default { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, - DELETE_PACKAGE_FILE_TRACKING_ACTION, - REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, - CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, - DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, }, data() { return { @@ -158,9 +142,6 @@ export default { isLoading() { return this.$apollo.queries.packageEntity.loading; }, - packageFilesMutationLoading() { - return this.mutationLoading; - }, isValidPackage() { return this.isLoading || Boolean(this.packageEntity.name); }, @@ -196,14 +177,6 @@ export default { PACKAGE_TYPE_PYPI, ].includes(this.packageType); }, - refetchQueriesData() { - return [ - { - query: getPackageDetails, - variables: this.queryVariables, - }, - ]; - }, refetchVersionsQueryData() { return [ { @@ -230,71 +203,9 @@ export default { window.location.replace(`${returnTo}?${modalQuery}`); }, - async deletePackageFiles(ids) { - this.mutationLoading = true; - try { - const { data } = await this.$apollo.mutate({ - mutation: destroyPackageFilesMutation, - variables: { - projectPath: this.projectPath, - ids, - }, - awaitRefetchQueries: true, - refetchQueries: this.refetchQueriesData, - }); - if (data?.destroyPackageFiles?.errors[0]) { - throw data.destroyPackageFiles.errors[0]; - } - createAlert({ - message: this.isLastItem(ids) - ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE - : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, - variant: VARIANT_SUCCESS, - }); - } catch (error) { - createAlert({ - message: this.isLastItem(ids) - ? DELETE_PACKAGE_FILE_ERROR_MESSAGE - : DELETE_PACKAGE_FILES_ERROR_MESSAGE, - variant: VARIANT_WARNING, - captureError: true, - error, - }); - } - this.mutationLoading = false; - }, - handleFileDelete(files) { - this.track(REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION); - if ( - files.length === this.packageFiles.length && - !this.packageEntity.packageFiles?.pageInfo?.hasNextPage - ) { - if (this.isLastItem(files)) { - this.deletePackageModalContent = DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT; - } else { - this.deletePackageModalContent = DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT; - } - this.$refs.deleteModal.show(); - } else { - this.filesToDelete = files; - if (this.isLastItem(files)) { - this.$refs.deleteFileModal.show(); - } else if (files.length > 1) { - this.$refs.deleteFilesModal.show(); - } - } - }, - isLastItem(items) { - return items.length === 1; - }, - confirmFilesDelete() { - if (this.isLastItem(this.filesToDelete)) { - this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION); - } else { - this.track(DELETE_PACKAGE_FILES_TRACKING_ACTION); - } - this.deletePackageFiles(this.filesToDelete.map((file) => file.id)); - this.filesToDelete = []; + handleAllFilesDelete(content) { + this.deletePackageModalContent = content; + this.$refs.deleteModal.show(); }, resetDeleteModalContent() { this.deletePackageModalContent = DELETE_MODAL_CONTENT; @@ -302,10 +213,6 @@ export default { }, i18n: { DELETE_MODAL_TITLE, - deleteFileModalTitle: s__(`PackageRegistry|Delete package asset`), - deleteFileModalContent: s__( - `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`, - ), otherVersionsTabTitle: s__('PackageRegistry|Other versions'), }, links: { @@ -374,11 +281,10 @@ export default { <package-files v-if="showFiles" :can-delete="packageEntity.canDestroy" - :is-loading="packageFilesMutationLoading" :package-id="packageEntity.id" :package-type="packageType" - @download-file="track($options.trackingActions.DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION)" - @delete-files="handleFileDelete" + :project-path="projectPath" + @delete-all-files="handleAllFilesDelete" /> </div> </gl-tab> @@ -471,51 +377,5 @@ export default { </gl-modal> </template> </delete-packages> - - <gl-modal - ref="deleteFileModal" - size="sm" - modal-id="delete-file-modal" - :action-primary="$options.modal.fileDeletePrimaryAction" - :action-cancel="$options.modal.cancelAction" - data-testid="delete-file-modal" - @primary="confirmFilesDelete" - @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" - > - <template #modal-title>{{ $options.i18n.deleteFileModalTitle }}</template> - <gl-sprintf v-if="isLastItem(filesToDelete)" :message="$options.i18n.deleteFileModalContent"> - <template #filename> - <strong>{{ filesToDelete[0].fileName }}</strong> - </template> - </gl-sprintf> - </gl-modal> - - <gl-modal - ref="deleteFilesModal" - size="sm" - modal-id="delete-files-modal" - :action-primary="$options.modal.filesDeletePrimaryAction" - :action-cancel="$options.modal.cancelAction" - data-testid="delete-files-modal" - @primary="confirmFilesDelete" - @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" - > - <template #modal-title>{{ - n__( - `PackageRegistry|Delete 1 asset`, - `PackageRegistry|Delete %d assets`, - filesToDelete.length, - ) - }}</template> - <span v-if="filesToDelete.length > 0"> - {{ - n__( - `PackageRegistry|You are about to delete 1 asset. This operation is irreversible.`, - `PackageRegistry|You are about to delete %d assets. This operation is irreversible.`, - filesToDelete.length, - ) - }} - </span> - </gl-modal> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipeline_details_header.vue b/app/assets/javascripts/pipelines/components/pipeline_details_header.vue index 7d4395dd579..3030a14d1d5 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_details_header.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_details_header.vue @@ -1,30 +1,61 @@ <script> -import { GlBadge, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { + GlAlert, + GlBadge, + GlButton, + GlIcon, + GlLink, + GlLoadingIcon, + GlModal, + GlModalDirective, + GlSprintf, + GlTooltipDirective, +} from '@gitlab/ui'; +import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated import { __, s__, sprintf } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; import SafeHtml from '~/vue_shared/directives/safe_html'; -import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants'; +import { + LOAD_FAILURE, + POST_FAILURE, + DELETE_FAILURE, + DEFAULT, + BUTTON_TOOLTIP_RETRY, + BUTTON_TOOLTIP_CANCEL, +} from '../constants'; +import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutation.graphql'; +import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql'; +import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql'; import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql'; import TimeAgo from './pipelines_list/time_ago.vue'; import { getQueryHeaders } from './graph/utils'; +const DELETE_MODAL_ID = 'pipeline-delete-modal'; const POLL_INTERVAL = 10000; export default { name: 'PipelineDetailsHeader', + BUTTON_TOOLTIP_RETRY, + BUTTON_TOOLTIP_CANCEL, + pipelineCancel: 'pipelineCancel', + pipelineRetry: 'pipelineRetry', finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'], components: { CiBadgeLink, ClipboardButton, + GlAlert, GlBadge, + GlButton, GlIcon, GlLink, GlLoadingIcon, + GlModal, GlSprintf, TimeAgo, }, directives: { + GlModal: GlModalDirective, GlTooltip: GlTooltipDirective, SafeHtml, }, @@ -51,6 +82,12 @@ export default { ), stuckBadgeText: s__('Pipelines|stuck'), stuckBadgeTooltip: s__('Pipelines|This pipeline is stuck'), + computeCreditsTooltip: s__('Pipelines|Total amount of compute credits used for the pipeline'), + totalJobsTooltip: s__('Pipelines|Total number of jobs for the pipeline'), + retryPipelineText: __('Retry'), + cancelPipelineText: __('Cancel pipeline'), + deletePipelineText: __('Delete'), + clipboardTooltip: __('Copy commit SHA'), }, errorTexts: { [LOAD_FAILURE]: __('We are currently unable to fetch data for the pipeline header.'), @@ -58,6 +95,22 @@ export default { [DELETE_FAILURE]: __('An error occurred while deleting the pipeline.'), [DEFAULT]: __('An unknown error occurred.'), }, + modal: { + id: DELETE_MODAL_ID, + title: __('Delete pipeline'), + deleteConfirmationText: __( + 'Are you sure you want to delete this pipeline? Doing so will expire all pipeline caches and delete all related objects, such as builds, logs, artifacts, and triggers. This action cannot be undone.', + ), + actionPrimary: { + text: __('Delete pipeline'), + attributes: { + variant: 'danger', + }, + }, + actionCancel: { + text: __('Cancel'), + }, + }, inject: { graphqlResourceEtag: { default: '', @@ -224,141 +277,306 @@ export default { queuedDuration: this.pipeline?.queuedDuration || 0, }); }, + canRetryPipeline() { + const { retryable, userPermissions } = this.pipeline; + + return retryable && userPermissions.updatePipeline; + }, + canCancelPipeline() { + const { cancelable, userPermissions } = this.pipeline; + + return cancelable && userPermissions.updatePipeline; + }, }, methods: { reportFailure(errorType, errorMessages = []) { this.failureType = errorType; this.failureMessages = errorMessages; }, + async postPipelineAction(name, mutation) { + try { + const { + data: { + [name]: { errors }, + }, + } = await this.$apollo.mutate({ + mutation, + variables: { id: this.pipeline.id }, + }); + + if (errors.length > 0) { + this.isRetrying = false; + + this.reportFailure(POST_FAILURE, errors); + } else { + await this.$apollo.queries.pipeline.refetch(); + if (!this.isFinished) { + this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL); + } + } + } catch { + this.isRetrying = false; + + this.reportFailure(POST_FAILURE); + } + }, + cancelPipeline() { + this.isCanceling = true; + this.postPipelineAction(this.$options.pipelineCancel, cancelPipelineMutation); + }, + retryPipeline() { + this.isRetrying = true; + this.postPipelineAction(this.$options.pipelineRetry, retryPipelineMutation); + }, + async deletePipeline() { + this.isDeleting = true; + this.$apollo.queries.pipeline.stopPolling(); + + try { + const { + data: { + pipelineDestroy: { errors }, + }, + } = await this.$apollo.mutate({ + mutation: deletePipelineMutation, + variables: { + id: this.pipeline.id, + }, + }); + + if (errors.length > 0) { + this.reportFailure(DELETE_FAILURE, errors); + this.isDeleting = false; + } else { + redirectTo(setUrlFragment(this.paths.pipelinesPath, 'delete_success')); // eslint-disable-line import/no-deprecated + } + } catch { + this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL); + this.reportFailure(DELETE_FAILURE); + this.isDeleting = false; + } + }, }, }; </script> <template> - <div class="gl-mt-3"> + <div class="gl-my-4"> + <gl-alert v-if="hasError" :title="failure.text" :variant="failure.variant" :dismissible="false"> + <div v-for="(failureMessage, index) in failureMessages" :key="`failure-message-${index}`"> + {{ failureMessage }} + </div> + </gl-alert> <gl-loading-icon v-if="loading" class="gl-text-left" size="lg" /> - <template v-else> - <h3 v-if="name" class="gl-mt-0 gl-mb-2" data-testid="pipeline-name">{{ name }}</h3> + <div v-else class="gl-display-flex gl-justify-content-space-between"> <div> - <ci-badge-link :status="detailedStatus" /> - <div class="gl-ml-2 gl-mb-2 gl-display-inline-block gl-h-6"> - <gl-sprintf :message="triggeredText"> - <template #link="{ content }"> - <gl-link - :href="userPath" - class="gl-text-gray-900 gl-font-weight-bold" - target="_blank" - > - {{ content }} - </gl-link> - </template> - </gl-sprintf> - <gl-link - :href="commitPath" - class="gl-bg-blue-50 gl-rounded-base gl-px-2 gl-mx-2" - data-testid="commit-link" + <h3 v-if="name" class="gl-mt-0 gl-mb-2" data-testid="pipeline-name">{{ name }}</h3> + <div> + <ci-badge-link :status="detailedStatus" /> + <div class="gl-ml-2 gl-mb-2 gl-display-inline-block gl-h-6"> + <gl-sprintf :message="triggeredText"> + <template #link="{ content }"> + <gl-link + :href="userPath" + class="gl-text-gray-900 gl-font-weight-bold" + target="_blank" + > + {{ content }} + </gl-link> + </template> + </gl-sprintf> + <gl-link + :href="commitPath" + class="gl-bg-blue-50 gl-rounded-base gl-px-2 gl-mx-2" + data-testid="commit-link" + > + {{ shortId }} + </gl-link> + <clipboard-button + :text="shortId" + category="tertiary" + :title="$options.i18n.clipboardTooltip" + size="small" + /> + <time-ago + v-if="isFinished" + :pipeline="pipeline" + class="gl-display-inline gl-mb-0" + :display-calendar-icon="false" + font-size="gl-font-md" + /> + </div> + </div> + <div v-safe-html="refText" class="gl-mb-2" data-testid="pipeline-ref-text"></div> + <div> + <gl-badge + v-if="badges.schedule" + v-gl-tooltip + :title="$options.i18n.scheduleBadgeTooltip" + variant="info" + size="sm" + > + {{ $options.i18n.scheduleBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.child" + v-gl-tooltip + :title="$options.i18n.childBadgeTooltip" + variant="info" + size="sm" + > + <gl-sprintf :message="$options.i18n.childBadgeText"> + <template #link="{ content }"> + <gl-link :href="paths.triggeredByPath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </gl-badge> + <gl-badge + v-if="badges.latest" + v-gl-tooltip + :title="$options.i18n.latestBadgeTooltip" + variant="success" + size="sm" + > + {{ $options.i18n.latestBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.mergeTrainPipeline" + v-gl-tooltip + :title="$options.i18n.mergeTrainBadgeTooltip" + variant="info" + size="sm" + > + {{ $options.i18n.mergeTrainBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.invalid" + v-gl-tooltip + :title="yamlErrors" + variant="danger" + size="sm" > - {{ shortId }} - </gl-link> - <clipboard-button - :text="shortId" - category="tertiary" - :title="__('Copy commit SHA')" - size="small" - /> - <time-ago + {{ $options.i18n.invalidBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.failed" + v-gl-tooltip + :title="failureReason" + variant="danger" + size="sm" + > + {{ $options.i18n.failedBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.autoDevops" + v-gl-tooltip + :title="$options.i18n.autoDevopsBadgeTooltip" + variant="info" + size="sm" + > + {{ $options.i18n.autoDevopsBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.detached" + v-gl-tooltip + :title="$options.i18n.detachedBadgeTooltip" + variant="info" + size="sm" + data-qa-selector="merge_request_badge_tag" + > + {{ $options.i18n.detachedBadgeText }} + </gl-badge> + <gl-badge + v-if="badges.stuck" + v-gl-tooltip + :title="$options.i18n.stuckBadgeTooltip" + variant="warning" + size="sm" + > + {{ $options.i18n.stuckBadgeText }} + </gl-badge> + <span + v-gl-tooltip + :title="$options.i18n.totalJobsTooltip" + class="gl-ml-2" + data-testid="total-jobs" + > + <gl-icon name="pipeline" /> + {{ totalJobsText }} + </span> + <span v-if="isFinished" - :pipeline="pipeline" - class="gl-display-inline gl-mb-0" - :display-calendar-icon="false" - font-size="gl-font-md" - /> + v-gl-tooltip + :title="$options.i18n.computeCreditsTooltip" + class="gl-ml-2" + data-testid="compute-credits" + > + <gl-icon name="quota" /> + {{ computeCredits }} + </span> + <span v-if="inProgress" class="gl-ml-2" data-testid="pipeline-running-text"> + <gl-icon name="timer" /> + {{ inProgressText }} + </span> </div> </div> - <div v-safe-html="refText" class="gl-mb-2" data-testid="pipeline-ref-text"></div> <div> - <gl-badge - v-if="badges.schedule" + <gl-button + v-if="canRetryPipeline" v-gl-tooltip - :title="$options.i18n.scheduleBadgeTooltip" - variant="info" + :aria-label="$options.BUTTON_TOOLTIP_RETRY" + :title="$options.BUTTON_TOOLTIP_RETRY" + :loading="isRetrying" + :disabled="isRetrying" + variant="confirm" + data-testid="retry-pipeline" + class="js-retry-button" + @click="retryPipeline()" > - {{ $options.i18n.scheduleBadgeText }} - </gl-badge> - <gl-badge - v-if="badges.child" - v-gl-tooltip - :title="$options.i18n.childBadgeTooltip" - variant="info" - > - <gl-sprintf :message="$options.i18n.childBadgeText"> - <template #link="{ content }"> - <gl-link :href="paths.triggeredByPath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </gl-badge> - <gl-badge - v-if="badges.latest" - v-gl-tooltip - :title="$options.i18n.latestBadgeTooltip" - variant="success" - > - {{ $options.i18n.latestBadgeText }} - </gl-badge> - <gl-badge - v-if="badges.mergeTrainPipeline" - v-gl-tooltip - :title="$options.i18n.mergeTrainBadgeTooltip" - variant="info" - > - {{ $options.i18n.mergeTrainBadgeText }} - </gl-badge> - <gl-badge v-if="badges.invalid" v-gl-tooltip :title="yamlErrors" variant="danger"> - {{ $options.i18n.invalidBadgeText }} - </gl-badge> - <gl-badge v-if="badges.failed" v-gl-tooltip :title="failureReason" variant="danger"> - {{ $options.i18n.failedBadgeText }} - </gl-badge> - <gl-badge - v-if="badges.autoDevops" - v-gl-tooltip - :title="$options.i18n.autoDevopsBadgeTooltip" - variant="info" - > - {{ $options.i18n.autoDevopsBadgeText }} - </gl-badge> - <gl-badge - v-if="badges.detached" + {{ $options.i18n.retryPipelineText }} + </gl-button> + + <gl-button + v-if="canCancelPipeline" v-gl-tooltip - :title="$options.i18n.detachedBadgeTooltip" - variant="info" - data-qa-selector="merge_request_badge_tag" + :aria-label="$options.BUTTON_TOOLTIP_CANCEL" + :title="$options.BUTTON_TOOLTIP_CANCEL" + :loading="isCanceling" + :disabled="isCanceling" + class="gl-ml-3" + variant="danger" + data-testid="cancel-pipeline" + @click="cancelPipeline()" > - {{ $options.i18n.detachedBadgeText }} - </gl-badge> - <gl-badge - v-if="badges.stuck" - v-gl-tooltip - :title="$options.i18n.stuckBadgeTooltip" - variant="warning" + {{ $options.i18n.cancelPipelineText }} + </gl-button> + + <gl-button + v-if="pipeline.userPermissions.destroyPipeline" + v-gl-modal="$options.modal.id" + :loading="isDeleting" + :disabled="isDeleting" + class="gl-ml-3" + variant="danger" + category="secondary" + data-testid="delete-pipeline" > - {{ $options.i18n.stuckBadgeText }} - </gl-badge> - <span class="gl-ml-2" data-testid="total-jobs"> - <gl-icon name="pipeline" /> - {{ totalJobsText }} - </span> - <span v-if="isFinished" class="gl-ml-2" data-testid="compute-credits"> - <gl-icon name="quota" /> - {{ computeCredits }} - </span> - <span v-if="inProgress" class="gl-ml-2" data-testid="pipeline-running-text"> - <gl-icon name="timer" /> - {{ inProgressText }} - </span> + {{ $options.i18n.deletePipelineText }} + </gl-button> </div> - </template> + </div> + <gl-modal + :modal-id="$options.modal.id" + :title="$options.modal.title" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" + @primary="deletePipeline()" + > + <p> + {{ $options.modal.deleteConfirmationText }} + </p> + </gl-modal> </div> </template> diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue index 4258332ed6e..25af4cc8082 100644 --- a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue +++ b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue @@ -9,6 +9,8 @@ import { TAGS, FETCH_CONTAINING_REFS_EVENT, FETCH_COMMIT_REFERENCES_ERROR, + BRANCHES_REF_TYPE, + TAGS_REF_TYPE, } from '../constants'; import RefsList from './refs_list.vue'; @@ -98,7 +100,9 @@ export default { tags: TAGS, errorMessage: FETCH_COMMIT_REFERENCES_ERROR, }, - fetchContainingRefsEvent: FETCH_CONTAINING_REFS_EVENT, + FETCH_CONTAINING_REFS_EVENT, + BRANCHES_REF_TYPE, + TAGS_REF_TYPE, }; </script> @@ -112,7 +116,8 @@ export default { :containing-refs="containingBranches" :namespace="$options.i18n.branches" :url-part="commitsUrlPart" - @[$options.fetchContainingRefsEvent]="fetchContainingBranches" + :ref-type="$options.BRANCHES_REF_TYPE" + @[$options.FETCH_CONTAINING_REFS_EVENT]="fetchContainingBranches" /> <refs-list v-if="hasTags" @@ -122,7 +127,8 @@ export default { :containing-refs="containingTags" :namespace="$options.i18n.tags" :url-part="commitsUrlPart" - @[$options.fetchContainingRefsEvent]="fetchContainingTags" + :ref-type="$options.TAGS_REF_TYPE" + @[$options.FETCH_CONTAINING_REFS_EVENT]="fetchContainingTags" /> </div> </template> diff --git a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue index 7e21040a3b1..8ceab9cb60b 100644 --- a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue +++ b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue @@ -16,6 +16,10 @@ export default { type: String, required: true, }, + refType: { + type: String, + required: true, + }, containingRefs: { type: Array, required: false, @@ -60,6 +64,9 @@ export default { this.toggleCollapse(); this.$emit(FETCH_CONTAINING_REFS_EVENT); }, + getRefUrl(ref) { + return `${this.urlPart}${ref}?ref_type=${this.refType}`; + }, }, i18n: { containingCommit: CONTAINING_COMMIT, @@ -73,7 +80,7 @@ export default { <gl-badge v-for="ref in tippingRefs" :key="ref" - :href="`${urlPart}${ref}`" + :href="getRefUrl(ref)" class="gl-mt-2 gl-mr-2" size="sm" >{{ ref }}</gl-badge @@ -94,7 +101,7 @@ export default { <gl-badge v-for="ref in containingRefs" :key="ref" - :href="`${urlPart}${ref}`" + :href="getRefUrl(ref)" class="gl-mt-3 gl-mr-2" size="sm" >{{ ref }}</gl-badge diff --git a/app/assets/javascripts/projects/commit_box/info/constants.js b/app/assets/javascripts/projects/commit_box/info/constants.js index f255d6c3877..4b74fbe19e1 100644 --- a/app/assets/javascripts/projects/commit_box/info/constants.js +++ b/app/assets/javascripts/projects/commit_box/info/constants.js @@ -17,3 +17,7 @@ export const FETCH_CONTAINING_REFS_EVENT = 'fetch-containing-refs'; export const FETCH_COMMIT_REFERENCES_ERROR = s__( 'Commit|There was an error fetching the commit references. Please try again later.', ); + +export const BRANCHES_REF_TYPE = 'heads'; + +export const TAGS_REF_TYPE = 'tags'; diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue index d57b3fda342..e7d97989195 100644 --- a/app/assets/javascripts/security_configuration/components/app.vue +++ b/app/assets/javascripts/security_configuration/components/app.vue @@ -164,7 +164,7 @@ export default { <gl-tabs content-class="gl-pt-0" - data-qa-selector="security_configuration_container" + data-testid="security-configuration-container" sync-active-tab-with-query-params lazy > @@ -196,12 +196,9 @@ export default { {{ $options.i18n.description }} </p> <p v-if="canViewCiHistory"> - <gl-link - data-testid="security-view-history-link" - data-qa-selector="security_configuration_history_link" - :href="gitlabCiHistoryPath" - >{{ $options.i18n.configurationHistory }}</gl-link - > + <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{ + $options.i18n.configurationHistory + }}</gl-link> </p> </template> diff --git a/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue b/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue index 315f676e659..c01df3573c5 100644 --- a/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue +++ b/app/assets/javascripts/security_configuration/components/auto_dev_ops_alert.vue @@ -28,7 +28,7 @@ export default { variant="info" :primary-button-link="autoDevopsPath" :primary-button-text="$options.i18n.primaryButtonText" - data-qa-selector="autodevops_container" + data-testid="autodevops-container" @dismiss="dismissMethod" > <gl-sprintf :message="$options.i18n.body"> diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue index d1b705fe2fc..a757657339b 100644 --- a/app/assets/javascripts/security_configuration/components/feature_card.vue +++ b/app/assets/javascripts/security_configuration/components/feature_card.vue @@ -122,7 +122,7 @@ export default { v-if="isNotSastIACTemporaryHack" :class="statusClasses" data-testid="feature-status" - :data-qa-selector="`${feature.type}_status`" + :data-qa-feature="`${feature.type}_${enabled}_status`" > <feature-card-badge v-if="hasBadge" @@ -164,7 +164,7 @@ export default { :href="feature.configurationPath" variant="confirm" :category="configurationButton.category" - :data-qa-selector="`${feature.type}_enable_button`" + :data-testid="`${feature.type}_enable_button`" class="gl-mt-5" > {{ configurationButton.text }} @@ -176,7 +176,7 @@ export default { variant="confirm" :category="manageViaMrButtonCategory" class="gl-mt-5" - :data-qa-selector="`${feature.type}_mr_button`" + :data-testid="`${feature.type}_mr_button`" @error="onError" /> diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index 7b5ded9348f..9023807eba3 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +import { GlBadge, GlTooltipDirective } from '@gitlab/ui'; import CiIcon from './ci_icon.vue'; /** * Renders CI Badge link with CI icon and status text based on @@ -26,8 +26,8 @@ import CiIcon from './ci_icon.vue'; export default { components: { - GlLink, CiIcon, + GlBadge, }, directives: { GlTooltip: GlTooltipDirective, @@ -42,6 +42,11 @@ export default { required: false, default: true, }, + badgeSize: { + type: String, + required: false, + default: 'md', + }, }, computed: { title() { @@ -51,27 +56,76 @@ export default { // For now, this can either come from graphQL with camelCase or REST API in snake_case return this.status.detailsPath || this.status.details_path; }, - cssClass() { - const className = this.status.group; - return className ? `ci-status ci-${className}` : 'ci-status'; + badgeStyles() { + switch (this.status.icon) { + case 'status_success': + return { + textColor: 'gl-text-green-700', + variant: 'success', + }; + case 'status_warning': + return { + textColor: 'gl-text-orange-700', + variant: 'warning', + }; + case 'status_failed': + return { + textColor: 'gl-text-red-700', + variant: 'danger', + }; + case 'status_running': + return { + textColor: 'gl-text-blue-700', + variant: 'info', + }; + case 'status_pending': + return { + textColor: 'gl-text-orange-700', + variant: 'warning', + }; + case 'status_canceled': + return { + textColor: 'gl-text-gray-700', + variant: 'neutral', + }; + case 'status_manual': + return { + textColor: 'gl-text-gray-700', + variant: 'neutral', + }; + // default covers the styles for the remainder of CI + // statuses that are not explicitly stated here + default: + return { + textColor: 'gl-text-gray-600', + variant: 'muted', + }; + } }, }, }; </script> <template> - <gl-link + <gl-badge v-gl-tooltip - class="gl-display-inline-flex gl-align-items-center gl-line-height-0 gl-px-3 gl-py-2 gl-rounded-base" - :class="cssClass" :title="title" - data-qa-selector="status_badge_link" :href="detailsPath" + :size="badgeSize" + :variant="badgeStyles.variant" + :data-testid="`ci-badge-${status.text}`" + data-qa-selector="status_badge_link" @click="$emit('ciStatusBadgeClick')" > <ci-icon :status="status" /> <template v-if="showText"> - <span class="gl-ml-2 gl-white-space-nowrap">{{ status.text }}</span> + <span + class="gl-ml-2 gl-white-space-nowrap" + :class="badgeStyles.textColor" + data-testid="ci-badge-text" + > + {{ status.text }} + </span> </template> - </gl-link> + </gl-badge> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue index faa50a50c69..3bb168e9051 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue @@ -131,7 +131,6 @@ export default { ref="search" :value="searchTerm" :placeholder="searchText" - class="js-dropdown-input-field" @input="setSearchTerm" /> </slot> diff --git a/app/assets/javascripts/vue_shared/components/user_select/user_select.vue b/app/assets/javascripts/vue_shared/components/user_select/user_select.vue index ac4d1517d52..4879baced0d 100644 --- a/app/assets/javascripts/vue_shared/components/user_select/user_select.vue +++ b/app/assets/javascripts/vue_shared/components/user_select/user_select.vue @@ -308,7 +308,7 @@ export default { <gl-search-box-by-type ref="search" :value="search" - class="js-dropdown-input-field" + data-testid="user-search-input" @input="debouncedSearchKeyUpdate" /> </template> |