diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components')
10 files changed, 45 insertions, 26 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue index 25dbb614c1d..0e31f97b9db 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue @@ -102,7 +102,11 @@ export default { <template v-if="hasApprovers"> <span v-if="approvalLeftMessage">{{ message }}</span> <strong v-else>{{ message }}</strong> - <user-avatar-list class="d-inline-block align-middle" :items="approvers" /> + <user-avatar-list + class="gl-display-inline-block gl-vertical-align-middle" + :img-size="24" + :items="approvers" + /> </template> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index 684386883c8..f1b89c42fb5 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -66,7 +66,15 @@ export default { return this.loadingState === LOADING_STATES.expandedLoading; }, isCollapsible() { - return !this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError; + if (!this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError) { + if (this.shouldCollapse) { + return this.shouldCollapse(); + } + + return true; + } + + return false; }, hasFullData() { return this.fullData.length > 0; @@ -86,7 +94,7 @@ export default { ); }, statusIconName() { - if (this.hasFetchError) return EXTENSION_ICONS.error; + if (this.hasFetchError) return EXTENSION_ICONS.failed; if (this.isLoadingSummary) return null; return this.statusIcon(this.collapsedData); @@ -128,7 +136,7 @@ export default { } }), toggleCollapsed(e) { - if (!e?.target?.closest('.btn:not(.btn-icon),a')) { + if (this.isCollapsible && !e?.target?.closest('.btn:not(.btn-icon),a')) { this.isCollapsed = !this.isCollapsed; this.triggerRedisTracking(); @@ -214,7 +222,7 @@ export default { // To allow for text to be selected we check if the the user is clicking // or selecting, if they are selecting the time difference should be // more than 200ms - if (up - this.down < 200) { + if (up - this.down < 200 && !e?.target?.closest('.btn-icon')) { this.toggleCollapsed(e); } }, @@ -226,7 +234,12 @@ export default { <template> <section class="media-section" data-testid="widget-extension"> - <div class="media gl-p-5 gl-cursor-pointer" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp"> + <div + :class="{ 'gl-cursor-pointer': isCollapsible }" + class="media gl-p-5" + @mousedown="onRowMouseDown" + @mouseup="onRowMouseUp" + > <status-icon :name="$options.label || $options.name" :is-loading="isLoadingSummary" @@ -264,7 +277,7 @@ export default { category="tertiary" data-testid="toggle-button" size="small" - @click.self="toggleCollapsed" + @click="toggleCollapsed" /> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue index 5f42c6c7acb..5cfee21dd5e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue @@ -55,19 +55,21 @@ export default { <div class="gl-display-flex"> <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" /> <div class="gl-w-full"> - <div class="gl-flex-wrap gl-display-flex gl-w-full"> - <div class="gl-mr-4 gl-display-flex gl-align-items-center"> - <p v-safe-html="generateText(data.text)" class="gl-m-0"></p> + <div class="gl-display-flex gl-flex-nowrap"> + <div class="gl-flex-wrap gl-display-flex gl-w-full"> + <div class="gl-mr-4 gl-display-flex gl-align-items-center"> + <p v-safe-html="generateText(data.text)" class="gl-m-0"></p> + </div> + <div v-if="data.link"> + <gl-link :href="data.link.href">{{ data.link.text }}</gl-link> + </div> + <div v-if="data.supportingText"> + <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p> + </div> + <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'"> + {{ data.badge.text }} + </gl-badge> </div> - <div v-if="data.link"> - <gl-link :href="data.link.href">{{ data.link.text }}</gl-link> - </div> - <div v-if="data.supportingText"> - <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p> - </div> - <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'"> - {{ data.badge.text }} - </gl-badge> <actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" /> </div> <p diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js index 8ba13cf8252..5fba070f79c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js @@ -32,7 +32,7 @@ const textStyleTags = { [getStartTag('critical')]: '<span class="gl-font-weight-bold gl-text-red-800">', [getStartTag('same')]: '<span class="gl-font-weight-bold gl-text-gray-700">', [getStartTag('strong')]: '<span class="gl-font-weight-bold">', - [getStartTag('small')]: '<span class="gl-font-sm">', + [getStartTag('small')]: '<span class="gl-font-sm gl-text-gray-700">', }; export const generateText = (text) => { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue index b062833cdf8..e906b8c3b59 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue @@ -79,7 +79,7 @@ export default { }, data() { return { - resolveConflictsFromCli: helpPagePath('ee/user/project/merge_requests/conflicts.html', { + resolveConflictsFromCli: helpPagePath('user/project/merge_requests/conflicts', { anchor: 'resolve-conflicts-from-the-command-line', }), }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue index 2e3a02b1712..9499603163b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue @@ -1,7 +1,7 @@ <script> import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import ciIcon from '../../vue_shared/components/ci_icon.vue'; +import ciIcon from '~/vue_shared/components/ci_icon.vue'; export default { components: { 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 caafd6b995e..e86724d133a 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,6 @@ <script> import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; -import { __ } from '../../locale'; +import { __ } from '~/locale'; export default { i18n: { 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 e0c4679b983..887d1aab524 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 @@ -1,7 +1,7 @@ <script> import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import simplePoll from '~/lib/utils/simple_poll'; -import MergeRequest from '../../../merge_request'; +import MergeRequest from '~/merge_request'; import eventHub from '../../event_hub'; import { MERGE_ACTIVE_STATUS_PHRASES, STATE_MACHINE } from '../../constants'; import statusIcon from '../mr_widget_status_icon.vue'; 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 ebdc8309cd5..3511fffcfbb 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 @@ -3,7 +3,7 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui'; import createFlash from '~/flash'; import { __ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import simplePoll from '../../../lib/utils/simple_poll'; +import simplePoll from '~/lib/utils/simple_poll'; import eventHub from '../../event_hub'; import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables'; import rebaseQuery from '../../queries/states/rebase.query.graphql'; 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 e43319d42ca..4902c9b45e8 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 @@ -28,7 +28,7 @@ export default { api.trackRedisHllUserEvent('i_code_review_widget_nothing_merge_click_new_file'); }, }, - ciHelpPage: helpPagePath('/ci/quick_start/index.html'), + ciHelpPage: helpPagePath('ci/quick_start/index.html'), safeHtmlConfig: { ADD_TAGS: ['use'] }, }; </script> |