diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
commit | 48aff82709769b098321c738f3444b9bdaa694c6 (patch) | |
tree | e00c7c43e2d9b603a5a6af576b1685e400410dee /app/assets/javascripts/vue_merge_request_widget | |
parent | 879f5329ee916a948223f8f43d77fba4da6cd028 (diff) | |
download | gitlab-ce-48aff82709769b098321c738f3444b9bdaa694c6.tar.gz |
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
16 files changed, 110 insertions, 90 deletions
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 208df03b6a4..b90cbfd1a1a 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 @@ -74,9 +74,6 @@ export default { canBeManuallyRedeployed() { return this.computedDeploymentStatus === FAILED && Boolean(this.redeployPath); }, - shouldShowManualButtons() { - return this.glFeatures.deployFromFooter; - }, hasExternalUrls() { return Boolean(this.deployment.external_url && this.deployment.external_url_formatted); }, @@ -154,7 +151,7 @@ export default { <template> <div> <deployment-action-button - v-if="shouldShowManualButtons && canBeManuallyDeployed" + v-if="canBeManuallyDeployed" :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]" :computed-deployment-status="computedDeploymentStatus" @@ -165,7 +162,7 @@ export default { <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span> </deployment-action-button> <deployment-action-button - v-if="shouldShowManualButtons && canBeManuallyRedeployed" + v-if="canBeManuallyRedeployed" :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]" :computed-deployment-status="computedDeploymentStatus" 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 157d6d60290..e3c0b7935d7 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 @@ -72,12 +72,7 @@ export default { 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" - /> + <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus /> <gl-dropdown-item v-for="change in filteredChanges" :key="change.path" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue index 6b3007fce51..c762922d890 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue @@ -1,5 +1,5 @@ <script> -import tooltip from '~/vue_shared/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab/ui'; import MrWidgetAuthor from './mr_widget_author.vue'; export default { @@ -8,7 +8,7 @@ export default { MrWidgetAuthor, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { actionText: { @@ -34,6 +34,7 @@ export default { <h4 class="js-mr-widget-author"> {{ actionText }} <mr-widget-author :author="author" /> - <time v-tooltip :title="dateTitle" data-container="body"> {{ dateReadable }} </time> + <span class="sr-only">{{ dateReadable }} ({{ dateTitle }})</span> + <time v-gl-tooltip.hover aria-hidden :title="dateTitle"> {{ dateReadable }} </time> </h4> </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 814d4e8341e..eb8989adb2a 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 @@ -111,9 +111,10 @@ export default { v-html="mr.sourceBranchLink" /><clipboard-button ref="copyBranchNameButton" + data-testid="mr-widget-copy-clipboard" :text="branchNameClipboardData" :title="__('Copy branch name')" - css-class="btn-default btn-transparent btn-clipboard" + category="tertiary" /> {{ s__('mrWidget|into') }} <tooltip-on-truncate 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 859f2c57598..c917b69953f 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,6 +1,5 @@ <script> -import { GlIcon, GlSprintf } from '@gitlab/ui'; -import tooltip from '../../vue_shared/directives/tooltip'; +import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '../../locale'; export default { @@ -13,7 +12,7 @@ export default { GlSprintf, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, }; </script> @@ -28,7 +27,7 @@ export default { </gl-sprintf> </span> <gl-icon - v-tooltip + v-gl-tooltip.hover :title="$options.i18n.tooltipTitle" :aria-label="$options.i18n.tooltipTitle" name="question-o" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue index 7ddcdd49df5..29c26f4fb3e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue @@ -1,9 +1,11 @@ <script> +import { GlButton } from '@gitlab/ui'; import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetArchived', components: { + GlButton, statusIcon, }, }; @@ -12,9 +14,9 @@ export default { <div class="mr-widget-body media"> <div class="space-children"> <status-icon status="warning" /> - <button type="button" class="btn btn-success btn-sm" disabled="true"> + <gl-button category="secondary" variant="success" :disabled="true"> {{ s__('mrWidget|Merge') }} - </button> + </gl-button> </div> <div class="media-body"> <span class="bold"> 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 83e7d6db9fa..30da9947859 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 @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton } from '@gitlab/ui'; import eventHub from '../../event_hub'; import statusIcon from '../mr_widget_status_icon.vue'; @@ -8,6 +8,7 @@ export default { components: { statusIcon, GlLoadingIcon, + GlButton, }, props: { mr: { @@ -33,20 +34,21 @@ export default { <template> <div class="mr-widget-body media"> <status-icon status="warning" /> - <div class="media-body space-children"> + <div class="media-body space-children gl-display-flex gl-flex-wrap gl-align-items-center"> <span class="bold"> <template v-if="mr.mergeError">{{ mr.mergeError }}</template> {{ s__('mrWidget|This merge request failed to be merged automatically') }} </span> - <button + <gl-button :disabled="isRefreshing" - type="button" - class="btn btn-sm btn-default" + category="secondary" + variant="default" + size="small" @click="refreshWidget" > <gl-loading-icon v-if="isRefreshing" :inline="true" /> {{ s__('mrWidget|Refresh') }} - </button> + </gl-button> </div> </div> </template> 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 58839251edc..17cd740ddd9 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,8 +1,7 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLoadingIcon, GlButton } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { deprecatedCreateFlash as Flash } from '~/flash'; -import tooltip from '~/vue_shared/directives/tooltip'; import { s__, __ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import MrWidgetAuthorTime from '../mr_widget_author_time.vue'; @@ -12,7 +11,7 @@ import eventHub from '../../event_hub'; export default { name: 'MRWidgetMerged', directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { MrWidgetAuthorTime, @@ -115,7 +114,7 @@ export default { /> <gl-button v-if="mr.canRevertInCurrentMR" - v-tooltip + v-gl-tooltip.hover :title="revertTitle" size="small" category="secondary" @@ -128,7 +127,7 @@ export default { </gl-button> <gl-button v-else-if="mr.revertInForkPath" - v-tooltip + v-gl-tooltip.hover :href="mr.revertInForkPath" :title="revertTitle" size="small" @@ -140,7 +139,7 @@ export default { </gl-button> <gl-button v-if="mr.canCherryPickInCurrentMR" - v-tooltip + v-gl-tooltip.hover :title="cherryPickTitle" size="small" href="#modal-cherry-pick-commit" @@ -151,7 +150,7 @@ export default { </gl-button> <gl-button v-else-if="mr.cherryPickInForkPath" - v-tooltip + v-gl-tooltip.hover :href="mr.cherryPickInForkPath" :title="cherryPickTitle" size="small" @@ -177,7 +176,9 @@ export default { <clipboard-button :title="__('Copy commit SHA')" :text="mr.mergeCommitSha" - css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha" + css-class="js-mr-merged-copy-sha" + category="tertiary" + size="small" /> </template> </p> 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 83783528cc1..6489569cf68 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,13 +1,12 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; -import tooltip from '~/vue_shared/directives/tooltip'; import statusIcon from '../mr_widget_status_icon.vue'; export default { name: 'MRWidgetMissingBranch', directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { GlIcon, @@ -52,7 +51,7 @@ export default { <span class="bold js-branch-text"> <span class="capitalize"> {{ missingBranchName }} </span> {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }} - <gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" /> + <gl-icon v-gl-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 ec0934c5b4b..14c2e9fa828 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,6 +1,6 @@ <script> /* eslint-disable vue/no-v-html */ -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import { escape } from 'lodash'; import simplePoll from '../../../lib/utils/simple_poll'; import eventHub from '../../event_hub'; @@ -12,7 +12,7 @@ export default { name: 'MRWidgetRebase', components: { statusIcon, - GlLoadingIcon, + GlButton, }, props: { mr: { @@ -109,29 +109,29 @@ export default { <div class="rebase-state-find-class-convention media media-body space-children"> <template v-if="mr.rebaseInProgress || isMakingRequest"> - <span class="bold">{{ __('Rebase in progress') }}</span> + <span class="bold" data-testid="rebase-message">{{ __('Rebase in progress') }}</span> </template> <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch"> - <span class="bold" v-html="fastForwardMergeText"></span> + <span class="bold" data-testid="rebase-message" v-html="fastForwardMergeText"></span> </template> <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest"> <div class="accept-merge-holder clearfix js-toggle-container accept-action media space-children" > - <button - :disabled="isMakingRequest" - type="button" - class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button" + <gl-button + :loading="isMakingRequest" + variant="success" + class="qa-mr-rebase-button" @click="rebase" > - <gl-loading-icon v-if="isMakingRequest" />{{ __('Rebase') }} - </button> - <span v-if="!rebasingError" class="bold">{{ + {{ __('Rebase') }} + </gl-button> + <span v-if="!rebasingError" class="bold" data-testid="rebase-message">{{ __( 'Fast-forward merge is not possible. Rebase the source branch onto the target branch.', ) }}</span> - <span v-else class="bold danger">{{ rebasingError }}</span> + <span v-else class="bold danger" data-testid="rebase-message">{{ rebasingError }}</span> </div> </template> </div> 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 240bab58297..835f7b9e9a9 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,12 +1,9 @@ <script> -/* eslint-disable vue/no-v-html */ import { isEmpty } from 'lodash'; 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'; import simplePoll from '~/lib/utils/simple_poll'; -import { __, sprintf } from '~/locale'; +import { __ } from '~/locale'; import MergeRequest from '../../../merge_request'; import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import { deprecatedCreateFlash as Flash } from '../../../flash'; @@ -59,8 +56,6 @@ export default { commitMessage: this.mr.commitMessage, squashBeforeMerge: this.mr.squashIsSelected, isSquashReadOnly: this.mr.squashIsReadonly, - successSvg, - warningSvg, squashCommitMessage: this.mr.squashCommitMessage, }; }, @@ -147,16 +142,7 @@ export default { return !this.mr.ffOnlyEnabled; }, shaMismatchLink() { - const href = this.mr.mergeRequestDiffsPath; - - return sprintf( - __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}'), - { - linkStart: `<a href="${href}">`, - linkEnd: '</a>', - }, - false, - ); + return this.mr.mergeRequestDiffsPath; }, }, methods: { @@ -331,7 +317,7 @@ export default { @click.prevent="handleMergeButtonClick(true)" > <span class="media"> - <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span> + <gl-icon name="status_success" class="merge-opt-icon" aria-hidden="true" /> <span class="media-body merge-opt-title">{{ autoMergeText }}</span> </span> </a> @@ -349,7 +335,7 @@ export default { @click.prevent="handleMergeImmediatelyButtonClick" > <span class="media"> - <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span> + <gl-icon name="status_warning" class="merge-opt-icon" aria-hidden="true" /> <span class="media-body merge-opt-title">{{ __('Merge immediately') }}</span> </span> </a> @@ -400,7 +386,17 @@ export default { </div> <div v-if="mr.isSHAMismatch" class="d-flex align-items-center mt-2 js-sha-mismatch"> <gl-icon name="warning-solid" class="text-warning mr-1" /> - <span class="text-warning" v-html="shaMismatchLink"></span> + <span class="text-warning"> + <gl-sprintf + :message=" + __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}') + " + > + <template #link="{ content }"> + <gl-link :href="mr.mergeRequestDiffsPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </span> </div> </div> </div> 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 6608381f348..ff0d065c71d 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,14 +1,16 @@ <script> -import { GlIcon } from '@gitlab/ui'; -import tooltip from '~/vue_shared/directives/tooltip'; -import { __ } from '~/locale'; +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { SQUASH_BEFORE_MERGE } from '../../i18n'; export default { components: { GlIcon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, + }, + i18n: { + ...SQUASH_BEFORE_MERGE, }, props: { value: { @@ -28,7 +30,10 @@ export default { }, computed: { tooltipTitle() { - return this.isDisabled ? __('Required in this project.') : false; + return this.isDisabled ? this.$options.i18n.tooltipTitle : null; + }, + tooltipFocusable() { + return this.isDisabled ? '0' : null; }, }, }; @@ -37,10 +42,11 @@ export default { <template> <div class="inline"> <label - v-tooltip + v-gl-tooltip :class="{ 'gl-text-gray-400': isDisabled }" + :tabindex="tooltipFocusable" data-testid="squashLabel" - :data-title="tooltipTitle" + :title="tooltipTitle" > <input :checked="value" @@ -50,19 +56,20 @@ export default { class="qa-squash-checkbox js-squash-checkbox" @change="$emit('input', $event.target.checked)" /> - {{ __('Squash commits') }} + {{ $options.i18n.checkboxLabel }} </label> <a v-if="helpPath" - v-tooltip + v-gl-tooltip :href="helpPath" - data-title="About this feature" - data-placement="bottom" + :title="$options.i18n.helpLabel" target="_blank" rel="noopener noreferrer nofollow" - data-container="body" > <gl-icon name="question" /> + <span class="sr-only"> + {{ $options.i18n.helpLabel }} + </span> </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 61cc950f058..eba3d50fdc9 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 @@ -3,13 +3,13 @@ import $ from 'jquery'; import { GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import MergeRequest from '~/merge_request'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import getStateQuery from '../../queries/get_state.query.graphql'; import workInProgressQuery from '../../queries/states/work_in_progress.query.graphql'; import removeWipMutation from '../../queries/toggle_wip.mutation.graphql'; import StatusIcon from '../mr_widget_status_icon.vue'; -import tooltip from '../../../vue_shared/directives/tooltip'; import eventHub from '../../event_hub'; export default { @@ -18,9 +18,6 @@ export default { StatusIcon, GlButton, }, - directives: { - tooltip, - }, mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin], apollo: { userPermissions: { @@ -128,8 +125,7 @@ export default { .then(res => res.data) .then(data => { eventHub.$emit('UpdateWidgetData', data); - createFlash(__('The merge request can now be merged.'), 'notice'); - $('.merge-request .detail-page-description .title').text(this.mr.title); + MergeRequest.toggleDraftStatus(this.mr.title, true); }) .catch(() => { this.isMakingRequest = false; diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js new file mode 100644 index 00000000000..e8e522a01e9 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js @@ -0,0 +1,7 @@ +import { __ } from '~/locale'; + +export const SQUASH_BEFORE_MERGE = { + tooltipTitle: __('Required in this project.'), + checkboxLabel: __('Squash commits'), + helpLabel: __('What is squashing?'), +}; 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 43ce748b41d..46749fc5e87 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 @@ -4,6 +4,7 @@ import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_ import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service'; import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue'; import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps'; +import { GlSafeHtmlDirective } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import Project from '~/pages/projects/project'; import SmartInterval from '~/smart_interval'; @@ -45,12 +46,16 @@ import GroupedTestReportsApp from '../reports/components/grouped_test_reports_ap import { setFaviconOverlay } from '../lib/utils/common_utils'; import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue'; import getStateQuery from './queries/get_state.query.graphql'; +import { isExperimentEnabled } from '~/lib/utils/experimentation'; export default { el: '#js-vue-mr-widget', // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 // eslint-disable-next-line @gitlab/require-i18n-strings name: 'MRWidget', + directives: { + SafeHtml: GlSafeHtmlDirective, + }, components: { Loading, 'mr-widget-header': WidgetHeader, @@ -85,6 +90,7 @@ export default { TerraformPlan, GroupedAccessibilityReportsApp, MrWidgetApprovals, + SecurityReportsApp: () => import('~/vue_shared/security_reports/security_reports_app.vue'), }, apollo: { state: { @@ -148,7 +154,7 @@ export default { }, shouldSuggestPipelines() { return ( - gon.features?.suggestPipeline && + isExperimentEnabled('suggestPipeline') && !this.mr.hasCI && this.mr.mergeRequestAddCiConfigPath && !this.mr.isDismissedSuggestPipeline @@ -178,6 +184,9 @@ export default { this.mr.mergePipelinesEnabled && this.mr.sourceProjectId !== this.mr.targetProjectId, ); }, + shouldRenderSecurityReport() { + return Boolean(window.gon?.features?.coreSecurityMrWidget && this.mr.pipeline.id); + }, mergeError() { let { mergeError } = this.mr; @@ -455,6 +464,13 @@ export default { :codequality-help-path="mr.codequalityHelpPath" /> + <security-reports-app + v-if="shouldRenderSecurityReport" + :pipeline-id="mr.pipeline.id" + :project-id="mr.targetProjectId" + :security-reports-docs-path="mr.securityReportsDocsPath" + /> + <grouped-test-reports-app v-if="mr.testResultsPath" class="js-reports-container" @@ -498,7 +514,7 @@ export default { </mr-widget-alert-message> <mr-widget-alert-message v-if="mr.mergeError" type="danger"> - {{ mergeError }} + <span v-safe-html="mergeError"></span> </mr-widget-alert-message> <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" /> 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 846b1c453a1..8b235b20ad4 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 @@ -232,6 +232,7 @@ export default class MergeRequestStore { this.userCalloutsPath = data.user_callouts_path; this.suggestPipelineFeatureId = data.suggest_pipeline_feature_id; this.isDismissedSuggestPipeline = data.is_dismissed_suggest_pipeline; + this.securityReportsDocsPath = data.security_reports_docs_path; // codeclimate const blobPath = data.blob_path || {}; |