diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
14 files changed, 100 insertions, 104 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue index dc766176617..68f4609f14d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue @@ -14,27 +14,25 @@ export default { }; </script> <template> - <table class="table m-0"> - <thead class="thead-white text-nowrap"> - <tr class="d-none d-sm-table-row"> - <th class="w-0"></th> - <th>{{ __('Artifact') }}</th> - <th class="w-50"></th> - <th>{{ __('Job') }}</th> - </tr> - </thead> + <div class="gl-pl-7"> + <table class="table m-0"> + <thead class="thead-white text-nowrap"> + <tr class="d-none d-sm-table-row"> + <th>{{ __('Artifact') }}</th> + <th>{{ __('Job') }}</th> + </tr> + </thead> - <tbody> - <tr v-for="item in artifacts" :key="item.text"> - <td class="w-0"></td> - <td> - <gl-link :href="item.url" target="_blank">{{ item.text }}</gl-link> - </td> - <td class="w-0"></td> - <td> - <gl-link :href="item.job_path">{{ item.job_name }}</gl-link> - </td> - </tr> - </tbody> - </table> + <tbody> + <tr v-for="item in artifacts" :key="item.text"> + <td> + <gl-link :href="item.url" target="_blank">{{ item.text }}</gl-link> + </td> + <td> + <gl-link :href="item.job_path">{{ item.job_name }}</gl-link> + </td> + </tr> + </tbody> + </table> + </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue index 410d2740e1d..bb1837399ed 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue @@ -136,7 +136,7 @@ export default { <template> <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading"> - <gl-loading-icon class="usage-info-load-spinner" />{{ + <gl-loading-icon size="sm" class="usage-info-load-spinner" />{{ s__('mrWidget|Loading deployment statistics') }} </p> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index 33809b953ee..0ac98f6c982 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -122,7 +122,7 @@ export default { </div> <div v-if="!isCollapsed" class="mr-widget-grouped-section"> <div v-if="isLoadingExpanded" class="report-block-container"> - <gl-loading-icon inline /> {{ __('Loading...') }} + <gl-loading-icon size="sm" inline /> {{ __('Loading...') }} </div> <smart-virtual-list v-else-if="fullData" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue index a619ae9c351..b75f2dce54e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue @@ -58,13 +58,13 @@ export default { <template v-else> <button - class="btn-blank btn s32 square gl-mr-3" + class="btn-blank btn s32 square" type="button" :aria-label="ariaLabel" :disabled="isLoading" @click="toggleCollapsed" > - <gl-loading-icon v-if="isLoading" /> + <gl-loading-icon v-if="isLoading" size="sm" /> <gl-icon v-else :name="arrowIconName" class="js-icon" /> </button> <template v-if="isCollapsed"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index f1230e2fdeb..5e401fc17e9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -1,16 +1,17 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlButton, GlDropdown, GlDropdownSectionHeader, GlDropdownItem, + GlLink, GlTooltipDirective, GlModalDirective, + GlSafeHtmlDirective as SafeHtml, + GlSprintf, } from '@gitlab/ui'; -import { escape } from 'lodash'; import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility'; -import { n__, s__, sprintf } from '~/locale'; +import { s__ } from '~/locale'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue'; @@ -27,10 +28,13 @@ export default { GlDropdown, GlDropdownSectionHeader, GlDropdownItem, + GlLink, + GlSprintf, }, directives: { GlTooltip: GlTooltipDirective, GlModalDirective, + SafeHtml, }, props: { mr: { @@ -42,19 +46,6 @@ export default { shouldShowCommitsBehindText() { return this.mr.divergedCommitsCount > 0; }, - commitsBehindText() { - return sprintf( - s__( - 'mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch', - ), - { - commitsBehindLinkStart: `<a href="${escape(this.mr.targetBranchPath)}">`, - commitsBehind: n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount), - commitsBehindLinkEnd: '</a>', - }, - false, - ); - }, branchNameClipboardData() { // This supports code in app/assets/javascripts/copy_to_clipboard.js that // works around ClipboardJS limitations to allow the context-specific @@ -100,10 +91,10 @@ export default { <strong> {{ s__('mrWidget|Request to merge') }} <tooltip-on-truncate + v-safe-html="mr.sourceBranchLink" :title="mr.sourceBranch" truncate-target="child" class="label-branch label-truncate js-source-branch" - v-html="mr.sourceBranchLink" /><clipboard-button data-testid="mr-widget-copy-clipboard" :text="branchNameClipboardData" @@ -119,11 +110,15 @@ export default { <a :href="mr.targetBranchTreePath" class="js-target-branch"> {{ mr.targetBranch }} </a> </tooltip-on-truncate> </strong> - <div - v-if="shouldShowCommitsBehindText" - class="diverged-commits-count" - v-html="commitsBehindText" - ></div> + <div v-if="shouldShowCommitsBehindText" class="diverged-commits-count"> + <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')"> + <template #link> + <gl-link :href="mr.targetBranchPath">{{ + n__('%d commit behind', '%d commits behind', mr.divergedCommitsCount) + }}</gl-link> + </template> + </gl-sprintf> + </div> </div> <div class="branch-actions d-flex"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 6c162a06161..9bb955c534f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -171,7 +171,7 @@ export default { <template v-else-if="!hasPipeline"> <gl-loading-icon size="md" /> <p - class="gl-flex-grow-1 gl-display-flex gl-ml-5 gl-mb-0" + class="gl-flex-grow-1 gl-display-flex gl-ml-3 gl-mb-0" data-testid="monitoring-pipeline-message" > {{ $options.monitoringPipelineText }} @@ -190,7 +190,7 @@ export default { </p> </template> <template v-else-if="hasPipeline"> - <a :href="status.details_path" class="align-self-start gl-mr-3"> + <a :href="status.details_path" class="gl-align-self-center gl-mr-3"> <ci-icon :status="status" :size="24" /> </a> <div class="ci-widget-container d-flex"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue index 0cd280c42d2..f99b825ff30 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue @@ -2,10 +2,10 @@ import { GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui'; import autoMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/auto_merge'; import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql'; +import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { __ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { deprecatedCreateFlash as Flash } from '../../../flash'; import { AUTO_MERGE_STRATEGIES } from '../../constants'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; @@ -109,7 +109,9 @@ export default { }) .catch(() => { this.isCancellingAutoMerge = false; - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); }); }, removeSourceBranch() { @@ -135,7 +137,9 @@ export default { }) .catch(() => { this.isRemovingSourceBranch = false; - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); }); }, }, @@ -173,7 +177,7 @@ export default { data-testid="cancelAutomaticMergeButton" @click.prevent="cancelAutomaticMerge" > - <gl-loading-icon v-if="isCancellingAutoMerge" inline class="gl-mr-1" /> + <gl-loading-icon v-if="isCancellingAutoMerge" size="sm" inline class="gl-mr-1" /> {{ cancelButtonText }} </a> </h4> @@ -196,7 +200,7 @@ export default { data-testid="removeSourceBranchButton" @click.prevent="removeSourceBranch" > - <gl-loading-icon v-if="isRemovingSourceBranch" inline class="gl-mr-1" /> + <gl-loading-icon v-if="isRemovingSourceBranch" size="sm" inline class="gl-mr-1" /> {{ s__('mrWidget|Delete source branch') }} </a> </p> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue index 5f8630bf7b3..1a764d3d091 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue @@ -63,7 +63,7 @@ export default { size="small" @click="refreshWidget" > - <gl-loading-icon v-if="isRefreshing" :inline="true" /> + <gl-loading-icon v-if="isRefreshing" size="sm" :inline="true" /> {{ s__('mrWidget|Refresh') }} </gl-button> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue index ee90d734ecb..5a93021978c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue @@ -112,7 +112,7 @@ export default { <div v-else class="media-body space-children gl-display-flex gl-align-items-center"> <span v-if="shouldBeRebased" class="bold"> {{ - s__(`mrWidget|Fast-forward merge is not possible. + s__(`mrWidget|Merge blocked: fast-forward merge is not possible. To merge this request, first rebase locally.`) }} </span> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue index 9da3bea9362..5177eab790b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue @@ -1,14 +1,13 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui'; -import { deprecatedCreateFlash as Flash } from '~/flash'; +import { GlLoadingIcon, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import createFlash from '~/flash'; import { s__, __ } from '~/locale'; import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants'; import modalEventHub from '~/projects/commit/event_hub'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import eventHub from '../../event_hub'; import MrWidgetAuthorTime from '../mr_widget_author_time.vue'; -import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetMerged', @@ -17,7 +16,7 @@ export default { }, components: { MrWidgetAuthorTime, - statusIcon, + GlIcon, ClipboardButton, GlLoadingIcon, GlButton, @@ -100,7 +99,9 @@ export default { }) .catch(() => { this.isMakingRequest = false; - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); }); }, openRevertModal() { @@ -114,7 +115,7 @@ export default { </script> <template> <div class="mr-widget-body media"> - <status-icon status="success" /> + <gl-icon name="merge" :size="24" class="gl-text-blue-500 gl-mr-3 gl-mt-1" /> <div class="media-body"> <div class="space-children"> <mr-widget-author-time @@ -129,7 +130,6 @@ export default { :title="revertTitle" size="small" category="secondary" - variant="warning" data-qa-selector="revert_button" @click="openRevertModal" > @@ -142,7 +142,6 @@ export default { :title="revertTitle" size="small" category="secondary" - variant="warning" data-method="post" > {{ revertLabel }} @@ -167,6 +166,15 @@ export default { > {{ cherryPickLabel }} </gl-button> + <gl-button + v-if="shouldShowRemoveSourceBranch" + :disabled="isMakingRequest" + size="small" + class="js-remove-branch-button" + @click="removeSourceBranch" + > + {{ s__('mrWidget|Delete source branch') }} + </gl-button> </div> <section class="mr-info-list" data-qa-selector="merged_status_content"> <p> @@ -194,19 +202,8 @@ export default { <p v-if="mr.sourceBranchRemoved"> {{ s__('mrWidget|The source branch has been deleted') }} </p> - <p v-if="shouldShowRemoveSourceBranch" class="space-children"> - <span>{{ s__('mrWidget|You can delete the source branch now') }}</span> - <gl-button - :disabled="isMakingRequest" - size="small" - class="js-remove-branch-button" - @click="removeSourceBranch" - > - {{ s__('mrWidget|Delete source branch') }} - </gl-button> - </p> <p v-if="shouldShowSourceBranchRemoving"> - <gl-loading-icon :inline="true" /> + <gl-loading-icon size="sm" :inline="true" /> <span> {{ s__('mrWidget|The source branch is being deleted') }} </span> </p> </section> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index a82a8a22873..22f41b43095 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -2,9 +2,9 @@ /* eslint-disable vue/no-v-html */ import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; import { escape } from 'lodash'; +import createFlash from '~/flash'; import { __, sprintf } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { deprecatedCreateFlash as Flash } from '../../../flash'; import simplePoll from '../../../lib/utils/simple_poll'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; @@ -87,9 +87,7 @@ export default { }, fastForwardMergeText() { return sprintf( - __( - 'Fast-forward merge is not possible. Rebase the source branch onto %{targetBranch} to allow this merge request to be merged.', - ), + __('Merge blocked: the source branch must be rebased onto the target branch.'), { targetBranch: `<span class="label-branch">${escape(this.targetBranch)}</span>`, }, @@ -113,7 +111,9 @@ export default { if (error.response && error.response.data && error.response.data.merge_error) { this.rebasingError = error.response.data.merge_error; } else { - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); } }); }, @@ -129,7 +129,9 @@ export default { if (res.merge_error && res.merge_error.length) { this.rebasingError = res.merge_error; - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); } eventHub.$emit('MRWidgetRebaseSuccess'); @@ -138,7 +140,9 @@ export default { }) .catch(() => { this.isMakingRequest = false; - Flash(__('Something went wrong. Please try again.')); + createFlash({ + message: __('Something went wrong. Please try again.'), + }); stopPolling(); }); }, @@ -187,9 +191,7 @@ export default { data-testid="rebase-message" data-qa-selector="no_fast_forward_message_content" >{{ - __( - 'Fast-forward merge is not possible. Rebase the source branch onto the target branch.', - ) + __('Merge blocked: the source branch must be rebased onto the target branch.') }}</span > <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{ diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 07de525b1fa..2d0b7fe46a6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -412,7 +412,6 @@ export default { // If state is merged we should update the widget and stop the polling eventHub.$emit('MRWidgetUpdateRequested'); eventHub.$emit('FetchActionsContent'); - MergeRequest.setStatusBoxToMerged(); MergeRequest.hideCloseButton(); MergeRequest.decreaseCounter(); stopPolling(); @@ -629,11 +628,9 @@ export default { input-id="squash-message-edit" squash > - <commit-message-dropdown - slot="header" - v-model="squashCommitMessage" - :commits="commits" - /> + <template #header> + <commit-message-dropdown v-model="squashCommitMessage" :commits="commits" /> + </template> </commit-edit> <commit-edit v-if="shouldShowMergeEdit" @@ -641,14 +638,16 @@ export default { :label="__('Merge commit message')" input-id="merge-message-edit" > - <label slot="checkbox"> - <input - id="include-description" - type="checkbox" - @change="updateMergeCommitMessage($event.target.checked)" - /> - {{ __('Include merge request description') }} - </label> + <template #checkbox> + <label> + <input + id="include-description" + type="checkbox" + @change="updateMergeCommitMessage($event.target.checked)" + /> + {{ __('Include merge request description') }} + </label> + </template> </commit-edit> </ul> </commits-header> diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index e9dcf494099..5fe04269e33 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -5,12 +5,12 @@ import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/ap import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service'; import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store'; import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps'; +import createFlash from '~/flash'; import { secondsToMilliseconds } from '~/lib/utils/datetime_utility'; import notify from '~/lib/utils/notify'; import { sprintf, s__, __ } from '~/locale'; import Project from '~/pages/projects/project'; import SmartInterval from '~/smart_interval'; -import createFlash from '../flash'; import { setFaviconOverlay } from '../lib/utils/favicon'; import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue'; import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue'; diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 4cc2f423d73..8e3160ce2f2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -1,10 +1,11 @@ -import { format } from 'timeago.js'; import getStateKey from 'ee_else_ce/vue_merge_request_widget/stores/get_state_key'; import { statusBoxState } from '~/issuable/components/status_box.vue'; -import { formatDate } from '../../lib/utils/datetime_utility'; +import { formatDate, getTimeago } from '~/lib/utils/datetime_utility'; import { MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY, MWPS_MERGE_STRATEGY } from '../constants'; import { stateKey } from './state_maps'; +const { format } = getTimeago(); + export default class MergeRequestStore { constructor(data) { this.sha = data.diff_head_sha; |