diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 01:45:44 +0000 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/vue_merge_request_widget/components | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) | |
download | gitlab-ce-85dc423f7090da0a52c73eb66faf22ddb20efff9.tar.gz |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components')
26 files changed, 303 insertions, 215 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue index 24cd9d6428d..55fa24fb51a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue @@ -1,11 +1,10 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; export default { components: { GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -35,7 +34,7 @@ export default { target="_blank" class="d-flex-center pl-1" > - <icon name="question" /> + <gl-icon name="question" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js index a7ab11290eb..66de4f8b682 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js @@ -11,3 +11,9 @@ export const CANCELED = 'canceled'; export const STOPPING = 'stopping'; export const DEPLOYING = 'deploying'; export const REDEPLOYING = 'redeploying'; + +export const ACT_BUTTON_ICONS = { + play: 'play', + repeat: 'repeat', + stop: 'stop', +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue index 7d74d5531b4..cc3efae565a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue @@ -1,12 +1,12 @@ <script> -import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import { RUNNING } from './constants'; export default { name: 'DeploymentActionButton', components: { - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -35,6 +35,10 @@ export default { required: false, default: '', }, + icon: { + type: String, + required: true, + }, }, computed: { isActionInProgress() { @@ -58,18 +62,19 @@ export default { </script> <template> - <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0"> - <gl-deprecated-button + <span v-gl-tooltip :title="actionInProgressTooltip" class="gl-display-inline-block" tabindex="0"> + <gl-button v-gl-tooltip + category="primary" + size="small" :title="buttonTitle" :loading="isLoading" :disabled="isActionInProgress" - :class="`btn btn-default btn-sm inline gl-ml-2 ${containerClasses}`" + :class="`inline gl-ml-2 ${containerClasses}`" + :icon="icon" @click="$emit('click')" > - <span class="d-inline-flex align-items-baseline"> - <slot> </slot> - </span> - </gl-deprecated-button> + <slot> </slot> + </gl-button> </span> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue index af0b4087d46..208df03b6a4 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue @@ -1,5 +1,4 @@ <script> -import { GlIcon } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { visitUrl } from '~/lib/utils/url_utility'; @@ -7,14 +6,22 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MRWidgetService from '../../services/mr_widget_service'; import DeploymentActionButton from './deployment_action_button.vue'; import DeploymentViewButton from './deployment_view_button.vue'; -import { MANUAL_DEPLOY, FAILED, SUCCESS, STOPPING, DEPLOYING, REDEPLOYING } from './constants'; +import { + MANUAL_DEPLOY, + FAILED, + SUCCESS, + STOPPING, + DEPLOYING, + REDEPLOYING, + ACT_BUTTON_ICONS, +} from './constants'; export default { name: 'DeploymentActions', + btnIcons: ACT_BUTTON_ICONS, components: { DeploymentActionButton, DeploymentViewButton, - GlIcon, }, mixins: [glFeatureFlagsMixin()], props: { @@ -151,10 +158,10 @@ export default { :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]" :computed-deployment-status="computedDeploymentStatus" + :icon="$options.btnIcons.play" container-classes="js-manual-deploy-action" @click="deployManually" > - <gl-icon name="play" /> <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span> </deployment-action-button> <deployment-action-button @@ -162,10 +169,10 @@ export default { :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]" :computed-deployment-status="computedDeploymentStatus" + :icon="$options.btnIcons.repeat" container-classes="js-manual-redeploy-action" @click="redeploy" > - <gl-icon name="repeat" /> <span>{{ $options.actionsConfiguration[constants.REDEPLOYING].buttonText }}</span> </deployment-action-button> <deployment-view-button @@ -181,10 +188,9 @@ export default { :computed-deployment-status="computedDeploymentStatus" :actions-configuration="$options.actionsConfiguration[constants.STOPPING]" :button-title="$options.actionsConfiguration[constants.STOPPING].buttonText" + :icon="$options.btnIcons.stop" container-classes="js-stop-env" @click="stopEnvironment" - > - <gl-icon name="stop" /> - </deployment-action-button> + /> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue index b12250d1d1c..157d6d60290 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue @@ -1,17 +1,23 @@ <script> -import { GlLink } from '@gitlab/ui'; -import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue'; +import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui'; +import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import ReviewAppLink from '../review_app_link.vue'; export default { name: 'DeploymentViewButton', components: { - FilteredSearchDropdown, + GlButtonGroup, + GlDropdown, + GlDropdownItem, GlLink, + GlSearchBoxByType, ReviewAppLink, VisualReviewAppLink: () => import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'), }, + directives: { + autofocusonshow, + }, props: { appButtonText: { type: Object, @@ -37,6 +43,9 @@ export default { }), }, }, + data() { + return { searchTerm: '' }; + }, computed: { deploymentExternalUrl() { if (this.deployment.changes && this.deployment.changes.length === 1) { @@ -47,44 +56,52 @@ export default { shouldRenderDropdown() { return this.deployment.changes && this.deployment.changes.length > 1; }, + filteredChanges() { + return this.deployment?.changes?.filter(change => change.path.includes(this.searchTerm)); + }, }, }; </script> - <template> <span> - <filtered-search-dropdown - v-if="shouldRenderDropdown" - class="js-mr-wigdet-deployment-dropdown inline" - :items="deployment.changes" - :main-action-link="deploymentExternalUrl" - filter-key="path" - > - <template #mainAction="{ className }"> - <review-app-link - :display="appButtonText" - :link="deploymentExternalUrl" - :css-class="`deploy-link js-deploy-url inline ${className}`" + <gl-button-group v-if="shouldRenderDropdown" size="small"> + <review-app-link + :display="appButtonText" + :link="deploymentExternalUrl" + size="small" + css-class="deploy-link js-deploy-url inline" + /> + <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown"> + <gl-search-box-by-type + v-model.trim="searchTerm" + v-autofocusonshow + autofocus + class="gl-m-3" /> - </template> - - <template #result="{ result }"> - <gl-link - :href="result.external_url" - target="_blank" - rel="noopener noreferrer nofollow" - class="js-deploy-url-menu-item menu-item" + <gl-dropdown-item + v-for="change in filteredChanges" + :key="change.path" + class="js-filtered-dropdown-result" > - <strong class="str-truncated-100 gl-mb-0 d-block">{{ result.path }}</strong> - - <p class="text-secondary str-truncated-100 gl-mb-0 d-block">{{ result.external_url }}</p> - </gl-link> - </template> - </filtered-search-dropdown> + <gl-link + :href="change.external_url" + target="_blank" + rel="noopener noreferrer nofollow" + class="js-deploy-url-menu-item menu-item" + > + <strong class="str-truncated-100 gl-mb-0 gl-display-block">{{ change.path }}</strong> + <p class="text-secondary str-truncated-100 gl-mb-0 d-block"> + {{ change.external_url }} + </p> + </gl-link> + </gl-dropdown-item> + </gl-dropdown> + </gl-button-group> <review-app-link v-else :display="appButtonText" :link="deploymentExternalUrl" + size="small" css-class="js-deploy-url deploy-link btn btn-default btn-sm inline" /> <visual-review-app-link 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 fe41a15979e..9b2cd41092e 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 @@ -1,5 +1,6 @@ <script> -import { sprintf, s__ } from '~/locale'; +import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; import statusCodes from '~/lib/utils/http_status'; import { bytesToMiB } from '~/lib/utils/number_utils'; import { backOff } from '~/lib/utils/common_utils'; @@ -10,6 +11,9 @@ export default { name: 'MemoryUsage', components: { MemoryGraph, + GlLoadingIcon, + GlSprintf, + GlLink, }, props: { metricsUrl: { @@ -47,45 +51,22 @@ export default { return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed; }, memoryChangeMessage() { - const messageProps = { - memoryFrom: this.memoryFrom, - memoryTo: this.memoryTo, - metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`, - metricsLinkEnd: '</a>', - emphasisStart: '<b>', - emphasisEnd: '</b>', - }; const memoryTo = Number(this.memoryTo); const memoryFrom = Number(this.memoryFrom); - let memoryUsageMsg = ''; if (memoryTo > memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } else if (memoryTo < memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, - ); - } else { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } - return memoryUsageMsg; + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', + ); }, }, mounted() { @@ -155,14 +136,23 @@ 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"> - <i class="fa fa-spinner fa-spin usage-info-load-spinner" aria-hidden="true"> </i - >{{ s__('mrWidget|Loading deployment statistics') }} + <gl-loading-icon class="usage-info-load-spinner" />{{ + s__('mrWidget|Loading deployment statistics') + }} + </p> + <p v-if="shouldShowMemoryGraph" class="usage-info js-usage-info"> + <gl-sprintf :message="memoryChangeMessage"> + <template #metricsLink="{ content }"> + <gl-link :href="metricsMonitoringUrl">{{ content }}</gl-link> + </template> + <template #emphasis="{content}"> + <strong>{{ content }}</strong> + </template> + <template #memoryFrom>{{ memoryFrom }}</template> + <template #memoryTo>{{ memoryTo }}</template> + </gl-sprintf> </p> - <p - v-if="shouldShowMemoryGraph" - class="usage-info js-usage-info" - v-html="memoryChangeMessage" - ></p> + <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed"> {{ s__('mrWidget|Failed to load deployment statistics') }} </p> 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 24174c29d51..b6b5b56e5aa 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 @@ -1,13 +1,12 @@ <script> -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { GlButton, GlLoadingIcon, - Icon, + GlIcon, }, props: { title: { @@ -66,7 +65,7 @@ export default { @click="toggleCollapsed" > <gl-loading-icon v-if="isLoading" /> - <icon v-else :name="arrowIconName" class="js-icon" /> + <gl-icon v-else :name="arrowIconName" class="js-icon" /> </button> <gl-button variant="link" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue index 19a222462b3..a2636ce52ad 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue @@ -1,13 +1,12 @@ <script> -import { GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlIcon } from '@gitlab/ui'; import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants'; export default { name: 'MrWidgetAlertMessage', components: { GlLink, - Icon, + GlIcon, }, props: { type: { @@ -40,7 +39,7 @@ export default { <div class="m-3 ml-7" :class="messageClass"> <slot></slot> <gl-link v-if="helpPath" :href="helpPath" target="_blank"> - <icon :size="16" name="question-o" class="align-middle" /> + <gl-icon :size="16" name="question-o" class="align-middle" /> </gl-link> </div> </template> 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 897f706290d..814d4e8341e 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,24 +1,33 @@ <script> +/* eslint-disable vue/no-v-html */ import Mousetrap from 'mousetrap'; import { escape } from 'lodash'; +import { + GlButton, + GlDropdown, + GlDropdownSectionHeader, + GlDropdownItem, + GlTooltipDirective, +} from '@gitlab/ui'; import { n__, s__, sprintf } from '~/locale'; import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import tooltip from '~/vue_shared/directives/tooltip'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import MrWidgetIcon from './mr_widget_icon.vue'; export default { name: 'MRWidgetHeader', components: { - Icon, clipboardButton, TooltipOnTruncate, MrWidgetIcon, + GlButton, + GlDropdown, + GlDropdownSectionHeader, + GlDropdownItem, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { mr: { @@ -124,62 +133,59 @@ export default { <div class="branch-actions d-flex"> <template v-if="mr.isOpen"> - <a + <span v-if="!mr.sourceBranchRemoved" - v-tooltip - :href="webIdePath" + v-gl-tooltip :title="ideButtonTitle" - :class="{ disabled: !mr.canPushToSourceBranch }" - class="btn btn-default js-web-ide d-none d-md-inline-block gl-mr-3" - data-placement="bottom" - tabindex="0" - role="button" - data-qa-selector="open_in_web_ide_button" + class="gl-display-none d-md-inline-block gl-mr-3" + :tabindex="!mr.canPushToSourceBranch ? 0 : null" > - {{ s__('mrWidget|Open in Web IDE') }} - </a> - <button + <gl-button + :href="webIdePath" + :disabled="!mr.canPushToSourceBranch" + class="js-web-ide" + tabindex="0" + role="button" + data-qa-selector="open_in_web_ide_button" + > + {{ s__('mrWidget|Open in Web IDE') }} + </gl-button> + </span> + <gl-button :disabled="mr.sourceBranchRemoved" data-target="#modal_merge_info" data-toggle="modal" - class="btn btn-default js-check-out-branch gl-mr-3" - type="button" + class="js-check-out-branch gl-mr-3" > {{ s__('mrWidget|Check out branch') }} - </button> + </gl-button> </template> - <span class="dropdown"> - <button - type="button" - class="btn dropdown-toggle qa-dropdown-toggle" - data-toggle="dropdown" - :aria-label="__('Download as')" - aria-haspopup="true" - aria-expanded="false" + <gl-dropdown + v-gl-tooltip + :title="__('Download as')" + :aria-label="__('Download as')" + icon="download" + right + data-qa-selector="download_dropdown" + > + <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header> + <gl-dropdown-item + :href="mr.emailPatchesPath" + class="js-download-email-patches" + download + data-qa-selector="download_email_patches" > - <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li> - <a - :href="mr.emailPatchesPath" - class="js-download-email-patches qa-download-email-patches" - download - > - {{ s__('mrWidget|Email patches') }} - </a> - </li> - <li> - <a - :href="mr.plainDiffPath" - class="js-download-plain-diff qa-download-plain-diff" - download - > - {{ s__('mrWidget|Plain diff') }} - </a> - </li> - </ul> - </span> + {{ s__('mrWidget|Email patches') }} + </gl-dropdown-item> + <gl-dropdown-item + :href="mr.plainDiffPath" + class="js-download-plain-diff" + download + data-qa-selector="download_plain_diff" + > + {{ s__('mrWidget|Plain diff') }} + </gl-dropdown-item> + </gl-dropdown> </div> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue index e1659d9a167..472df8e3110 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue @@ -1,8 +1,8 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { - components: { Icon }, + components: { GlIcon }, props: { name: { type: String, @@ -14,6 +14,6 @@ export default { <template> <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center"> - <icon :name="name" :size="24" /> + <gl-icon :name="name" :size="24" /> </div> </template> 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 7326bd0804d..5066a88b52b 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 @@ -1,8 +1,15 @@ <script> -/* eslint-disable vue/require-default-prop */ -import { GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +/* eslint-disable vue/require-default-prop, vue/no-v-html */ +import { + GlIcon, + GlLink, + GlLoadingIcon, + GlSprintf, + GlTooltip, + GlTooltipDirective, +} from '@gitlab/ui'; import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline'; -import { s__ } from '~/locale'; +import { s__, n__ } from '~/locale'; import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; @@ -15,6 +22,7 @@ export default { GlLoadingIcon, GlIcon, GlSprintf, + GlTooltip, PipelineStage, TooltipOnTruncate, LinkedPipelinesMiniList: () => @@ -33,6 +41,11 @@ export default { type: String, required: false, }, + buildsWithCoverage: { + type: Array, + required: false, + default: () => [], + }, // This prop needs to be camelCase, html attributes are case insensive // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case hasCi: { @@ -100,6 +113,16 @@ export default { } return ''; }, + pipelineCoverageJobNumberText() { + return n__('from %d job', 'from %d jobs', this.buildsWithCoverage.length); + }, + pipelineCoverageTooltipDescription() { + return n__( + 'Coverage value for this pipeline was calculated by the coverage value of %d job.', + 'Coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs.', + this.buildsWithCoverage.length, + ); + }, }, errorText: s__( 'Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation%{linkEnd}.', @@ -139,7 +162,7 @@ export default { > <gl-icon name="question" - :small="12" + :size="12" tabindex="0" role="text" :aria-label="__('Link to go to GitLab pipeline documentation')" @@ -189,14 +212,30 @@ export default { </div> <div v-if="pipeline.coverage" class="coverage" data-testid="pipeline-coverage"> {{ s__('Pipeline|Coverage') }} {{ pipeline.coverage }}% - <span v-if="pipelineCoverageDelta" :class="coverageDeltaClass" data-testid="pipeline-coverage-delta" + >({{ pipelineCoverageDelta }}%)</span > - ({{ pipelineCoverageDelta }}%) + + {{ pipelineCoverageJobNumberText }} + <span ref="pipelineCoverageQuestion"> + <gl-icon name="question" :size="12" /> </span> + <gl-tooltip + :target="() => $refs.pipelineCoverageQuestion" + data-testid="pipeline-coverage-tooltip" + > + {{ pipelineCoverageTooltipDescription }} + <div + v-for="(build, index) in buildsWithCoverage" + :key="`${build.name}-${index}`" + class="gl-mt-3 gl-text-left gl-px-4" + > + {{ build.name }} ({{ build.coverage }}%) + </div> + </gl-tooltip> </div> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue index 5c307b5ff0c..55efd7e7d3b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue @@ -77,6 +77,7 @@ export default { <mr-widget-pipeline :pipeline="pipeline" :pipeline-coverage-delta="mr.pipelineCoverageDelta" + :builds-with-coverage="mr.buildsWithCoverage" :ci-status="mr.ciStatus" :has-ci="mr.hasCI" :pipeline-must-succeed="mr.onlyAllowMergeIfPipelineSucceeds" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue index 1b3b589c32f..56a50b55f9d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { s__ } from '~/locale'; export default { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue index 936fdc9aff5..a9d148505e1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue @@ -108,7 +108,9 @@ export default { </div> </template> <div class="row"> - <div class="col-md-5 order-md-last col-12 gl-mt-5 mt-md-n1 pt-md-1 svg-content svg-225"> + <div + class="col-md-5 order-md-last col-12 gl-mt-5 gl-mt-md-n2! gl-pt-md-2 svg-content svg-225" + > <img data-testid="pipeline-image" :src="pipelineSvgPath" /> </div> <div class="col-md-7 order-md-first col-12"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue index c38c41f13b6..ebd2b5cd22d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue @@ -1,10 +1,10 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlButton, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -22,20 +22,26 @@ export default { type: String, required: true, }, + size: { + type: String, + required: false, + default: 'medium', + }, }, }; </script> <template> - <a + <gl-button v-gl-tooltip :title="display.tooltip" :href="link" + :size="size" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass" data-track-event="open_review_app" data-track-label="review_app" > - {{ display.text }} <icon class="fgray" name="external-link" /> - </a> + {{ display.text }} <gl-icon class="fgray" name="external-link" /> + </gl-button> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue index dab0540f44e..859f2c57598 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue @@ -1,5 +1,5 @@ <script> -import { GlSprintf } from '@gitlab/ui'; +import { GlIcon, GlSprintf } from '@gitlab/ui'; import tooltip from '../../vue_shared/directives/tooltip'; import { __ } from '../../locale'; @@ -9,6 +9,7 @@ export default { tooltipTitle: __('A user with write access to the source branch selected this option'), }, components: { + GlIcon, GlSprintf, }, directives: { @@ -26,12 +27,11 @@ export default { </template> </gl-sprintf> </span> - <i + <gl-icon v-tooltip :title="$options.i18n.tooltipTitle" :aria-label="$options.i18n.tooltipTitle" - class="fa fa-question-circle" - > - </i> + name="question-o" + /> </p> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue index d52e6d38ac6..bdcea9871ea 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue @@ -1,13 +1,12 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +/* eslint-disable vue/no-v-html */ +import { GlButton } from '@gitlab/ui'; import { escape } from 'lodash'; import { __, n__, sprintf, s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - Icon, - GlDeprecatedButton, + GlButton, }, props: { isSquashEnabled: { @@ -80,20 +79,19 @@ export default { class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2" @click="toggle()" > - <gl-deprecated-button + <gl-button :aria-label="ariaLabel" - variant="blank" - class="commit-edit-toggle square s24 gl-mr-3" + category="tertiary" + class="commit-edit-toggle gl-mr-3" + :icon="collapseIcon" @click.stop="toggle()" - > - <icon :name="collapseIcon" :size="16" /> - </gl-deprecated-button> + /> <span v-if="expanded">{{ __('Collapse') }}</span> <span v-else> <span class="vertical-align-middle" v-html="message"></span> - <gl-deprecated-button variant="link" class="modify-message-button"> + <gl-button variant="link" class="modify-message-button"> {{ modifyLinkMessage }} - </gl-deprecated-button> + </gl-button> </span> </div> <div v-show="expanded"><slot></slot></div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue index 9df0c045fe4..a5ec095b8ec 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue @@ -1,4 +1,5 @@ <script> +import { GlButton } from '@gitlab/ui'; import { n__ } from '~/locale'; import { stripHtml } from '~/lib/utils/text_utility'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -8,6 +9,7 @@ export default { name: 'MRWidgetFailedToMerge', components: { + GlButton, statusIcon, }, @@ -84,14 +86,14 @@ export default { <span v-else> {{ s__('mrWidget|Merge failed.') }} </span> <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span> </span> - <button - class="btn btn-default btn-sm js-refresh-button" + <gl-button + size="small" + data-testid="merge-request-failed-refresh-button" data-qa-selector="merge_request_error_content" - type="button" @click="refresh" > {{ s__('mrWidget|Refresh now') }} - </button> + </gl-button> </div> </template> </div> 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 166700dbcbf..58839251edc 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,6 +1,6 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton } from '@gitlab/ui'; import { deprecatedCreateFlash as Flash } from '~/flash'; import tooltip from '~/vue_shared/directives/tooltip'; import { s__, __ } from '~/locale'; @@ -19,6 +19,7 @@ export default { statusIcon, ClipboardButton, GlLoadingIcon, + GlButton, }, props: { mr: { @@ -112,48 +113,52 @@ export default { :date-title="mr.metrics.mergedAt" :date-readable="mr.metrics.readableMergedAt" /> - <a + <gl-button v-if="mr.canRevertInCurrentMR" v-tooltip :title="revertTitle" - class="btn btn-close btn-sm" + size="small" + category="secondary" + variant="warning" href="#modal-revert-commit" data-toggle="modal" data-container="body" > {{ revertLabel }} - </a> - <a + </gl-button> + <gl-button v-else-if="mr.revertInForkPath" v-tooltip :href="mr.revertInForkPath" :title="revertTitle" - class="btn btn-close btn-sm" + size="small" + category="secondary" + variant="warning" data-method="post" > {{ revertLabel }} - </a> - <a + </gl-button> + <gl-button v-if="mr.canCherryPickInCurrentMR" v-tooltip :title="cherryPickTitle" - class="btn btn-default btn-sm" + size="small" href="#modal-cherry-pick-commit" data-toggle="modal" data-container="body" > {{ cherryPickLabel }} - </a> - <a + </gl-button> + <gl-button v-else-if="mr.cherryPickInForkPath" v-tooltip :href="mr.cherryPickInForkPath" :title="cherryPickTitle" - class="btn btn-default btn-sm" + size="small" data-method="post" > {{ cherryPickLabel }} - </a> + </gl-button> </div> <section class="mr-info-list" data-qa-selector="merged_status_content"> <p> @@ -181,14 +186,14 @@ export default { </p> <p v-if="shouldShowRemoveSourceBranch" class="space-children"> <span>{{ s__('mrWidget|You can delete the source branch now') }}</span> - <button + <gl-button :disabled="isMakingRequest" - type="button" - class="btn btn-sm btn-default js-remove-branch-button" + size="small" + class="js-remove-branch-button" @click="removeSourceBranch" > {{ s__('mrWidget|Delete source branch') }} - </button> + </gl-button> </p> <p v-if="shouldShowSourceBranchRemoving"> <gl-loading-icon :inline="true" /> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue index 8f38ca69453..83783528cc1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue @@ -1,4 +1,5 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -9,6 +10,7 @@ export default { tooltip, }, components: { + GlIcon, statusIcon, }, props: { @@ -50,7 +52,7 @@ export default { <span class="bold js-branch-text"> <span class="capitalize"> {{ missingBranchName }} </span> {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }} - <i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i> + <gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" /> </span> </div> </div> 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 794c994bffe..ec0934c5b4b 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 @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlLoadingIcon } from '@gitlab/ui'; import { escape } from 'lodash'; import simplePoll from '../../../lib/utils/simple_poll'; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue index 4d7d49398eb..14a29483d3c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import emptyStateSVG from 'icons/_mr_widget_empty_state.svg'; export default { 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 930a2b68d8e..240bab58297 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 @@ -1,6 +1,7 @@ <script> +/* eslint-disable vue/no-v-html */ import { isEmpty } from 'lodash'; -import { GlIcon, GlDeprecatedButton, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlIcon, GlButton, GlSprintf, GlLink } from '@gitlab/ui'; import successSvg from 'icons/_icon_status_success.svg'; import warningSvg from 'icons/_icon_status_warning.svg'; import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge'; @@ -37,7 +38,7 @@ export default { GlIcon, GlSprintf, GlLink, - GlDeprecatedButton, + GlButton, MergeTrainHelperText: () => import('ee_component/vue_merge_request_widget/components/merge_train_helper_text.vue'), MergeImmediatelyConfirmationDialog: () => @@ -297,16 +298,16 @@ export default { <div class="media-body"> <div class="mr-widget-body-controls media space-children"> <span class="btn-group"> - <gl-deprecated-button - size="sm" + <gl-button + size="medium" + category="primary" class="qa-merge-button accept-merge-request" :variant="mergeButtonVariant" :disabled="isMergeButtonDisabled" :loading="isMakingRequest" @click="handleMergeButtonClick(isAutoMergeAvailable)" + >{{ mergeButtonText }}</gl-button > - {{ mergeButtonText }} - </gl-deprecated-button> <button v-if="shouldShowMergeImmediatelyDropdown" :disabled="isMergeButtonDisabled" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue index 3cf7dc3c4d1..6608381f348 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue @@ -1,11 +1,11 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import { __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { tooltip, @@ -62,7 +62,7 @@ export default { rel="noopener noreferrer nofollow" data-container="body" > - <icon name="question" /> + <gl-icon name="question" /> </a> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue index 44668170fe4..61cc950f058 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue @@ -55,13 +55,15 @@ export default { }, methods: { removeWipMutation() { + const { mergeRequestQueryVariables } = this; + this.isMakingRequest = true; this.$apollo .mutate({ mutation: removeWipMutation, variables: { - ...this.mergeRequestQueryVariables, + ...mergeRequestQueryVariables, wip: false, }, update( @@ -83,14 +85,14 @@ export default { const data = store.readQuery({ query: getStateQuery, - variables: this.mergeRequestQueryVariables, + variables: mergeRequestQueryVariables, }); data.project.mergeRequest.workInProgress = workInProgress; data.project.mergeRequest.title = title; store.writeQuery({ query: getStateQuery, data, - variables: this.mergeRequestQueryVariables, + variables: mergeRequestQueryVariables, }); }, optimisticResponse: { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue index c7d9453a5c9..4de41dd5887 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue @@ -1,5 +1,5 @@ <script> -import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui'; +import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui'; import { n__ } from '~/locale'; import axios from '~/lib/utils/axios_utils'; import MrWidgetExpanableSection from '../mr_widget_expandable_section.vue'; |