diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-02-15 21:09:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-02-15 21:09:19 +0300 |
commit | c54e7283c976bf7f4394e3270a28e34655275275 (patch) | |
tree | 06bdc5fff4eeceba2911bfc71e2c14b1768b43fa /app/assets | |
parent | fa7c331b76ed59230cc56fc51bfc9e467c8bb9b4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
19 files changed, 219 insertions, 117 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js index 097f2617c1d..9d33f051ad0 100644 --- a/app/assets/javascripts/behaviors/markdown/render_math.js +++ b/app/assets/javascripts/behaviors/markdown/render_math.js @@ -1,17 +1,19 @@ +import { escape } from 'lodash'; import { spriteIcon } from '~/lib/utils/common_utils'; import { differenceInMilliseconds } from '~/lib/utils/datetime_utility'; -import { s__ } from '~/locale'; +import { s__, sprintf } from '~/locale'; import { unrestrictedPages } from './constants'; -// Renders math using KaTeX in any element with the -// `js-render-math` class +// Renders math using KaTeX in an element. // -// ### Example Markup -// -// <code class="js-render-math"></div> +// Typically for elements with the `js-render-math` class such as +// <code class="js-render-math"></code> // +// See app/assets/javascripts/behaviors/markdown/render_gfm.js const MAX_MATH_CHARS = 1000; +const MAX_MACRO_EXPANSIONS = 1000; +const MAX_USER_SPECIFIED_EMS = 20; const MAX_RENDER_TIME_MS = 2000; // Wait for the browser to reflow the layout. Reflowing SVG takes time. @@ -74,13 +76,23 @@ class SafeMathRenderer { const { parentNode } = el; parentNode.replaceChild(wrapperElement, el); + let message; + if (text.length > MAX_MATH_CHARS) { + message = sprintf( + s__( + 'math|This math block exceeds %{maxMathChars} characters, and may cause performance issues on this page.', + ), + { maxMathChars: MAX_MATH_CHARS }, + ); + } else { + message = s__('math|Displaying this math block may cause performance issues on this page.'); + } + const html = ` <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-math-container js-lazy-render-math-container fade show" role="alert"> ${spriteIcon('warning', 'text-warning-600 s16 gl-alert-icon')} <div class="display-flex gl-alert-content"> - <div>${s__( - 'math|Displaying this math block may cause performance issues on this page', - )}</div> + <div>${message}</div> <div class="gl-alert-actions"> <button class="js-lazy-render-math btn gl-alert-action btn-confirm btn-md gl-button">Display anyway</button> </div> @@ -117,8 +129,10 @@ class SafeMathRenderer { displayContainer.innerHTML = this.katex.renderToString(text, { displayMode: el.dataset.mathStyle === 'display', throwOnError: true, - maxSize: 20, - maxExpand: 20, + maxSize: MAX_USER_SPECIFIED_EMS, + // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/111107 for + // reasoning behind this value + maxExpand: MAX_MACRO_EXPANSIONS, trust: (context) => // this config option restores the KaTeX pre-v0.11.0 // behavior of allowing certain commands and protocols @@ -128,8 +142,17 @@ class SafeMathRenderer { }); } catch (e) { // Don't show a flash for now because it would override an existing flash message - el.textContent = s__('math|There was an error rendering this math block'); - // el.style.color = '#d00'; + if (e.message.match(/Too many expansions/)) { + // this is controlled by the maxExpand parameter + el.textContent = s__('math|Too many expansions. Consider using multiple math blocks.'); + } else { + // According to https://katex.org/docs/error.html, we need to ensure that + // the error message is escaped. + el.textContent = sprintf( + s__('math|There was an error rendering this math block. %{katexMessage}'), + { katexMessage: escape(e.message) }, + ); + } el.className = 'katex-error'; } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue b/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue new file mode 100644 index 00000000000..bef1d79a655 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue @@ -0,0 +1,26 @@ +<script> +import { GlSprintf } from '@gitlab/ui'; + +export default { + name: 'BoldText', + components: { + GlSprintf, + }, + props: { + message: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <span> + <gl-sprintf :message="message"> + <template #bold="{ content }"> + <span class="gl-font-weight-bold" v-text="content"></span> + </template> + </gl-sprintf> + </span> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue index e5688091cc7..6d7ec607557 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue @@ -1,17 +1,23 @@ <script> import { s__ } from '~/locale'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StateContainer from '../state_container.vue'; import { DETAILED_MERGE_STATUS } from '../../constants'; export default { i18n: { - approvalNeeded: s__('mrWidget|Merge blocked: all required approvals must be given.'), + approvalNeeded: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} all required approvals must be given.', + ), blockingMergeRequests: s__( - 'mrWidget|Merge blocked: you can only merge after the above items are resolved.', + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} you can only merge after the above items are resolved.', + ), + externalStatusChecksFailed: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} all status checks must pass.', ), - externalStatusChecksFailed: s__('mrWidget|Merge blocked: all status checks must pass.'), }, components: { + BoldText, StateContainer, }, props: { @@ -38,10 +44,8 @@ export default { <template> <state-container :mr="mr" status="failed"> - <span - class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!" - > - {{ failedText }} + <span class="gl-ml-3 gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"> + <bold-text :message="failedText" /> </span> </state-container> </template> 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 79e878431ed..837f8b32637 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,17 @@ <script> +import { s__ } from '~/locale'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StateContainer from '../state_container.vue'; +const message = s__( + 'mrWidget|%{boldStart}Merge unavailable:%{boldEnd} merge requests are read-only on archived projects.', +); + export default { name: 'MRWidgetArchived', + message, components: { + BoldText, StateContainer, }, props: { @@ -17,8 +25,6 @@ export default { <template> <state-container :mr="mr" status="failed"> - <span class="gl-font-weight-bold"> - {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }} - </span> + <bold-text :message="$options.message" /> </state-container> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue index 922075516f3..670bd36d61e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue @@ -16,8 +16,6 @@ export default { </script> <template> <state-container :mr="mr" status="loading"> - <span class="gl-font-weight-bold"> - {{ s__('mrWidget|Checking if merge request can be merged…') }} - </span> + {{ s__('mrWidget|Checking if merge request can be merged…') }} </state-container> </template> 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 a5d982fe221..19701125978 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 @@ -1,5 +1,7 @@ <script> import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import userPermissionsQuery from '../../queries/permissions.query.graphql'; import conflictsStateQuery from '../../queries/states/conflicts.query.graphql'; @@ -8,6 +10,7 @@ import StateContainer from '../state_container.vue'; export default { name: 'MRWidgetConflicts', components: { + BoldText, GlSkeletonLoader, GlButton, StateContainer, @@ -55,6 +58,17 @@ export default { ); }, }, + i18n: { + shouldBeRebased: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} fast-forward merge is not possible. To merge this request, first rebase locally.', + ), + shouldBeResolved: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} merge conflicts must be resolved.', + ), + usersWriteBranches: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} Users who can write to the source or target branches can resolve the conflicts.', + ), + }, }; </script> <template> @@ -67,21 +81,14 @@ export default { </gl-skeleton-loader> </template> <template v-if="!isLoading"> - <span v-if="state.shouldBeRebased" class="bold gl-ml-0! gl-text-body!"> - {{ - s__(`mrWidget|Merge blocked: fast-forward merge is not possible. - To merge this request, first rebase locally.`) - }} + <span v-if="state.shouldBeRebased" class="gl-ml-0! gl-text-body!"> + <bold-text :message="$options.i18n.shouldBeRebased" /> </span> <template v-else> - <span class="bold gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2"> - {{ s__('mrWidget|Merge blocked: merge conflicts must be resolved.') }} + <span class="gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2"> + <bold-text :message="$options.i18n.shouldBeResolved" /> <span v-if="!userPermissions.canMerge"> - {{ - s__( - `mrWidget|Users who can write to the source or target branches can resolve the conflicts.`, - ) - }} + {{ $options.i18n.usersWriteBranches }} </span> </span> </template> 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 8a7f15d8d1a..bfc2c282f4c 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 @@ -101,12 +101,14 @@ export default { </span> </state-container> <state-container v-else :mr="mr" status="failed" :actions="actions"> - <span class="gl-font-weight-bold"> - <span v-if="mr.mergeError" class="has-error-message" data-testid="merge-error"> - {{ mergeError }} - </span> - <span v-else> {{ s__('mrWidget|Merge failed.') }} </span> - <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span> + <span + v-if="mr.mergeError" + class="has-error-message gl-font-weight-bold" + data-testid="merge-error" + > + {{ mergeError }} </span> + <span v-else class="gl-font-weight-bold"> {{ s__('mrWidget|Merge failed.') }} </span> + <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span> </state-container> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue index 51ac2576f75..c94718ca756 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue @@ -2,6 +2,7 @@ import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import simplePoll from '~/lib/utils/simple_poll'; import MergeRequest from '~/merge_request'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import eventHub from '../../event_hub'; import { MERGE_ACTIVE_STATUS_PHRASES, STATE_MACHINE } from '../../constants'; import StatusIcon from '../mr_widget_status_icon.vue'; @@ -12,6 +13,7 @@ const { MERGE_FAILURE } = transitions; export default { name: 'MRWidgetMerging', components: { + BoldText, StatusIcon, }, props: { @@ -83,11 +85,9 @@ export default { <template> <div class="mr-widget-body mr-state-locked media"> <status-icon status="loading" /> - <div class="media-body"> - <h4> - {{ mergeStatus.message }} - <gl-emoji :data-name="mergeStatus.emoji" /> - </h4> + <div class="media-body" data-testid="merging-state"> + <bold-text :message="mergeStatus.message" /> + <gl-emoji :data-name="mergeStatus.emoji" /> </div> </div> </template> 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 5e073bf7c04..f1ddf94597b 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 @@ -63,12 +63,14 @@ export default { <status-icon :show-disabled-button="true" status="failed" /> <div class="media-body space-children"> - <span class="gl-font-weight-bold js-branch-text" data-testid="widget-content"> - <gl-sprintf :message="warning"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> + <span class="js-branch-text" data-testid="widget-content"> + <span class="gl-font-weight-bold"> + <gl-sprintf :message="warning"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </span> {{ restore }} <gl-icon v-gl-tooltip diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue index d837551a813..536e61e57d3 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue @@ -1,9 +1,17 @@ <script> +import { s__ } from '~/locale'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StatusIcon from '../mr_widget_status_icon.vue'; +const message = s__( + 'mrWidget|%{boldStart}Ready to be merged automatically.%{boldEnd} Ask someone with write access to this repository to merge this request.', +); + export default { name: 'MRWidgetNotAllowed', + message, components: { + BoldText, StatusIcon, }, }; @@ -13,12 +21,7 @@ export default { <div class="mr-widget-body media"> <status-icon status="success" /> <div class="media-body space-children"> - <span class="gl-font-weight-bold"> - {{ - s__(`mrWidget|Ready to be merged automatically. -Ask someone with write access to this repository to merge this request`) - }} - </span> + <bold-text :message="$options.message" /> </div> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue index 13920daca15..beb6310992f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue @@ -1,10 +1,18 @@ <script> +import { s__ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StatusIcon from '../mr_widget_status_icon.vue'; +const message = s__( + "mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. It's waiting for a manual action to continue.", +); + export default { name: 'MRWidgetPipelineBlocked', + message, components: { + BoldText, StatusIcon, }, mixins: [glFeatureFlagMixin()], @@ -14,13 +22,7 @@ export default { <div class="mr-widget-body media"> <status-icon status="failed" /> <div class="media-body space-children"> - <span class="gl-font-weight-bold"> - {{ - s__( - `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`, - ) - }} - </span> + <bold-text :message="$options.message" /> </div> </div> </template> 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 d687f0346c7..ec6c2cf34c0 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,16 +1,24 @@ <script> import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; import { createAlert } from '~/flash'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import toast from '~/vue_shared/plugins/global_toast'; import simplePoll from '~/lib/utils/simple_poll'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import rebaseQuery from '../../queries/states/rebase.query.graphql'; import StateContainer from '../state_container.vue'; +const i18n = { + rebaseError: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} the source branch must be rebased onto the target branch.', + ), +}; + export default { name: 'MRWidgetRebase', + i18n, apollo: { state: { query: rebaseQuery, @@ -21,6 +29,7 @@ export default { }, }, components: { + BoldText, GlSkeletonLoader, GlButton, StateContainer, @@ -69,9 +78,6 @@ export default { } return 'success'; }, - fastForwardMergeText() { - return __('Merge blocked: the source branch must be rebased onto the target branch.'); - }, showRebaseWithoutPipeline() { return ( !this.mr.onlyAllowMergeIfPipelineSucceeds || @@ -146,29 +152,29 @@ export default { <template v-if="!isLoading"> <span v-if="rebaseInProgress || isMakingRequest" - class="gl-ml-0! gl-text-body! gl-font-weight-bold" + class="gl-ml-0! gl-text-body!" data-testid="rebase-message" - >{{ __('Rebase in progress') }}</span + >{{ s__('mrWidget|Rebase in progress') }}</span > <span v-if="!rebaseInProgress && !canPushToSourceBranch" - class="gl-text-body! gl-font-weight-bold gl-ml-0!" + class="gl-text-body! gl-ml-0!" data-testid="rebase-message" - >{{ fastForwardMergeText }}</span > + <bold-text :message="$options.i18n.rebaseError" /> + </span> <div v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest" class="accept-merge-holder clearfix js-toggle-container media gl-md-display-flex gl-flex-wrap gl-flex-grow-1" > <span v-if="!rebasingError" - class="gl-font-weight-bold gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-ml-0! gl-text-body! gl-md-mr-3" + class="gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-ml-0! gl-text-body! gl-md-mr-3" data-testid="rebase-message" data-qa-selector="no_fast_forward_message_content" - >{{ - __('Merge blocked: the source branch must be rebased onto the target branch.') - }}</span > + <bold-text :message="$options.i18n.rebaseError" /> + </span> <span v-else class="gl-font-weight-bold danger gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-md-mr-3" @@ -187,7 +193,7 @@ export default { class="gl-align-self-start" @click="rebase" > - {{ __('Rebase') }} + {{ s__('mrWidget|Rebase') }} </gl-button> <gl-button v-if="showRebaseWithoutPipeline" @@ -199,7 +205,7 @@ export default { class="gl-align-self-start gl-mr-2" @click="rebaseWithoutCi" > - {{ __('Rebase without pipeline') }} + {{ s__('mrWidget|Rebase without pipeline') }} </gl-button> </template> </state-container> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue index 853895a4296..1896851952b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue @@ -2,11 +2,13 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StatusIcon from '../mr_widget_status_icon.vue'; export default { name: 'PipelineFailed', components: { + BoldText, GlLink, GlSprintf, StatusIcon, @@ -24,7 +26,10 @@ export default { }, i18n: { failedMessage: s__( - `mrWidget|Merge blocked: pipeline must succeed. Push a commit that fixes the failure, or %{linkStart}learn about other solutions.%{linkEnd}`, + `mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. Push a commit that fixes the failure or %{linkStart}learn about other solutions.%{linkEnd}`, + ), + blockedMessage: s__( + "mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. It's waiting for a manual action to continue.", ), }, }; @@ -34,20 +39,17 @@ export default { <div class="mr-widget-body media"> <status-icon status="failed" /> <div class="media-body space-children"> - <span class="gl-font-weight-bold"> - <span v-if="mr.isPipelineBlocked"> - {{ - s__( - `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`, - ) - }} - </span> + <span> + <bold-text v-if="mr.isPipelineBlocked" :message="$options.i18n.blockedMessage" /> <gl-sprintf v-else :message="$options.i18n.failedMessage"> <template #link="{ content }"> <gl-link :href="troubleshootingDocsPath" target="_blank"> {{ content }} </gl-link> </template> + <template #bold="{ content }"> + <span class="gl-font-weight-bold">{{ content }}</span> + </template> </gl-sprintf> </span> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue index 27919f90cc3..2aa345b420e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue @@ -1,11 +1,13 @@ <script> import { GlButton } from '@gitlab/ui'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import { I18N_SHA_MISMATCH } from '../../i18n'; import StateContainer from '../state_container.vue'; export default { name: 'ShaMismatch', components: { + BoldText, GlButton, StateContainer, }, @@ -24,10 +26,10 @@ export default { <template> <state-container :mr="mr" status="failed"> <span - class="gl-font-weight-bold gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!" + class="gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!" data-qa-selector="head_mismatch_content" > - {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }} + <bold-text :message="$options.i18n.I18N_SHA_MISMATCH.warningMessage" /> </span> <template #actions> <gl-button diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index 9f3748599dc..0fd5551979d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -1,11 +1,17 @@ <script> import { GlButton } from '@gitlab/ui'; +import { s__ } from '~/locale'; import notesEventHub from '~/notes/event_hub'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import StateContainer from '../state_container.vue'; +const message = s__('mrWidget|%{boldStart}Merge blocked:%{boldEnd} all threads must be resolved.'); + export default { name: 'UnresolvedDiscussions', + message, components: { + BoldText, GlButton, StateContainer, }, @@ -25,10 +31,8 @@ export default { <template> <state-container :mr="mr" status="failed"> - <span - class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!" - > - {{ s__('mrWidget|Merge blocked: all threads must be resolved.') }} + <span class="gl-ml-3 gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"> + <bold-text :message="$options.message" /> </span> <template #actions> <gl-button 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 1004f2ab3ad..02d4f2499fe 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 @@ -4,6 +4,7 @@ import { produce } from 'immer'; import { createAlert } from '~/flash'; import { __, s__ } from '~/locale'; import MergeRequest from '~/merge_request'; +import BoldText from '~/vue_merge_request_widget/components/bold_text.vue'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import getStateQuery from '../../queries/get_state.query.graphql'; import draftQuery from '../../queries/states/draft.query.graphql'; @@ -12,14 +13,12 @@ import StateContainer from '../state_container.vue'; // Export for testing export const MSG_SOMETHING_WENT_WRONG = __('Something went wrong. Please try again.'); -export const MSG_MERGE_BLOCKED = __( - "Merge blocked: merge request must be marked as ready. It's still marked as draft.", -); export const MSG_MARK_READY = s__('mrWidget|Mark as ready'); export default { name: 'WorkInProgress', components: { + BoldText, GlButton, StateContainer, }, @@ -128,15 +127,19 @@ export default { }); }, }, - MSG_MERGE_BLOCKED, + i18n: { + removeDraftStatus: s__( + 'mrWidget|%{boldStart}Merge blocked:%{boldEnd} Select %{boldStart}Mark as ready%{boldEnd} to remove it from Draft status.', + ), + }, MSG_MARK_READY, }; </script> <template> <state-container :mr="mr" status="failed"> - <span class="gl-font-weight-bold gl-ml-0! gl-text-body! gl-flex-grow-1"> - {{ $options.MSG_MERGE_BLOCKED }} + <span class="gl-ml-0! gl-text-body! gl-flex-grow-1"> + <bold-text :message="$options.i18n.removeDraftStatus" /> </span> <template #actions> <gl-button diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js index 7109bed7743..85ae298fcea 100644 --- a/app/assets/javascripts/vue_merge_request_widget/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/constants.js @@ -4,9 +4,7 @@ import { stateToComponentMap as classStateMap, stateKey } from './stores/state_m export const SUCCESS = 'success'; export const WARNING = 'warning'; -export const DANGER = 'danger'; export const INFO = 'info'; -export const CONFIRM = 'confirm'; export const MWPS_MERGE_STRATEGY = 'merge_when_pipeline_succeeds'; export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds'; @@ -28,39 +26,39 @@ export const SP_ICON_NAME = 'status_notfound'; export const MERGE_ACTIVE_STATUS_PHRASES = [ { - message: s__('mrWidget|Merging! Drum roll, please…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Drum roll, please…'), emoji: 'drum', }, { - message: s__("mrWidget|Merging! We're almost there…"), + message: s__("mrWidget|%{boldStart}Merging!%{boldEnd} We're almost there…"), emoji: 'sparkles', }, { - message: s__('mrWidget|Merging! Changes will land soon…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Changes will land soon…'), emoji: 'airplane_arriving', }, { - message: s__('mrWidget|Merging! Changes are being shipped…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Changes are being shipped…'), emoji: 'ship', }, { - message: s__("mrWidget|Merging! Everything's good…"), + message: s__("mrWidget|%{boldStart}Merging!%{boldEnd} Everything's good…"), emoji: 'relieved', }, { - message: s__('mrWidget|Merging! This is going to be great…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} This is going to be great…'), emoji: 'heart_eyes', }, { - message: s__('mrWidget|Merging! Lift-off in 5… 4… 3…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Lift-off in 5… 4… 3…'), emoji: 'rocket', }, { - message: s__('mrWidget|Merging! The changes are leaving the station…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} The changes are leaving the station…'), emoji: 'bullettrain_front', }, { - message: s__('mrWidget|Merging! Take a deep breath and relax…'), + message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Take a deep breath and relax…'), emoji: 'sunglasses', }, ]; diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js index 5380bcae003..5ca56074031 100644 --- a/app/assets/javascripts/vue_merge_request_widget/i18n.js +++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js @@ -17,7 +17,7 @@ export const SQUASH_BEFORE_MERGE = { }; export const I18N_SHA_MISMATCH = { - warningMessage: __('Merge blocked: new changes were just added.'), + warningMessage: s__('mrWidget|%{boldStart}Merge blocked:%{boldEnd} new changes were just added.'), actionButtonLabel: __('Review changes'), }; diff --git a/app/assets/javascripts/vue_shared/components/url_sync.vue b/app/assets/javascripts/vue_shared/components/url_sync.vue index ba5bce32b40..ad81c14d9e5 100644 --- a/app/assets/javascripts/vue_shared/components/url_sync.vue +++ b/app/assets/javascripts/vue_shared/components/url_sync.vue @@ -1,7 +1,9 @@ <script> -import { historyPushState } from '~/lib/utils/common_utils'; +import { historyPushState, historyReplaceState } from '~/lib/utils/common_utils'; import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility'; +export const HISTORY_PUSH_UPDATE_METHOD = 'push'; +export const HISTORY_REPLACE_UPDATE_METHOD = 'replace'; export const URL_SET_PARAMS_STRATEGY = 'set'; export const URL_MERGE_PARAMS_STRATEGY = 'merge'; @@ -24,6 +26,13 @@ export default { default: URL_MERGE_PARAMS_STRATEGY, validator: (value) => [URL_MERGE_PARAMS_STRATEGY, URL_SET_PARAMS_STRATEGY].includes(value), }, + historyUpdateMethod: { + type: String, + required: false, + default: HISTORY_PUSH_UPDATE_METHOD, + validator: (value) => + [HISTORY_PUSH_UPDATE_METHOD, HISTORY_REPLACE_UPDATE_METHOD].includes(value), + }, }, watch: { query: { @@ -42,7 +51,12 @@ export default { this.urlParamsUpdateStrategy === URL_SET_PARAMS_STRATEGY ? setUrlParams(this.query, window.location.href, true, true, true) : mergeUrlParams(newQuery, window.location.href, { spreadArrays: true }); - historyPushState(url); + + if (this.historyUpdateMethod === HISTORY_PUSH_UPDATE_METHOD) { + historyPushState(url); + } else { + historyReplaceState(url); + } }, }, render() { |