diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-22 12:18:00 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-22 12:18:00 +0300 |
commit | 932d504aaadc03b978eccad962a12be93f84be47 (patch) | |
tree | da6fba1cb0b34d8a5c8ecd57f85b23fc3ee9ed63 /app/assets/javascripts/vue_merge_request_widget | |
parent | c123291db91a8c54865779ee29ddebaad159d147 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
3 files changed, 115 insertions, 61 deletions
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 a25b4ab54e5..4f27a3baca9 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 @@ -2,8 +2,6 @@ import { GlButton, GlLoadingIcon, - GlLink, - GlBadge, GlSafeHtmlDirective, GlTooltipDirective, GlIntersectionObserver, @@ -17,6 +15,7 @@ import Poll from '~/lib/utils/poll'; import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants'; import StatusIcon from './status_icon.vue'; import Actions from './actions.vue'; +import ChildContent from './child_content.vue'; import { generateText } from './utils'; export const LOADING_STATES = { @@ -30,12 +29,11 @@ export default { components: { GlButton, GlLoadingIcon, - GlLink, - GlBadge, GlIntersectionObserver, SmartVirtualList, StatusIcon, Actions, + ChildContent, }, directives: { SafeHtml: GlSafeHtmlDirective, @@ -196,9 +194,6 @@ export default { Sentry.captureException(e); }); }, - isArray(arr) { - return Array.isArray(arr); - }, appear(index) { if (index === this.fullData.length - 1) { this.showFade = false; @@ -299,60 +294,14 @@ export default { class="gl-py-3 gl-pl-7" data-testid="extension-list-item" > - <div class="gl-w-full"> - <div v-if="data.header" class="gl-mb-2"> - <template v-if="isArray(data.header)"> - <component - :is="headerI === 0 ? 'strong' : 'span'" - v-for="(header, headerI) in data.header" - :key="headerI" - v-safe-html="generateText(header)" - class="gl-display-block" - /> - </template> - <strong v-else v-safe-html="generateText(data.header)"></strong> - </div> - <div class="gl-display-flex"> - <status-icon - v-if="data.icon" - :icon-name="data.icon.name" - :size="12" - class="gl-pl-0" - /> - <gl-intersection-observer - :options="{ rootMargin: '100px', thresholds: 0.1 }" - class="gl-w-full" - @appear="appear(index)" - @disappear="disappear(index)" - > - <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> - - <actions - :widget="$options.label || $options.name" - :tertiary-buttons="data.actions" - class="gl-ml-auto" - /> - </div> - <p - v-if="data.subtext" - v-safe-html="generateText(data.subtext)" - class="gl-m-0 gl-font-sm" - ></p> - </gl-intersection-observer> - </div> - </div> + <gl-intersection-observer + :options="{ rootMargin: '100px', thresholds: 0.1 }" + class="gl-w-full" + @appear="appear(index)" + @disappear="disappear(index)" + > + <child-content :data="data" :widget-label="widgetLabel" :level="2" /> + </gl-intersection-observer> </li> </smart-virtual-list> <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 new file mode 100644 index 00000000000..5f42c6c7acb --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue @@ -0,0 +1,95 @@ +<script> +import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; +import StatusIcon from './status_icon.vue'; +import Actions from './actions.vue'; +import { generateText } from './utils'; + +export default { + name: 'ChildContent', + components: { + GlBadge, + GlLink, + StatusIcon, + Actions, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + data: { + type: Object, + required: true, + }, + widgetLabel: { + type: String, + required: true, + }, + level: { + type: Number, + required: true, + }, + }, + methods: { + isArray(arr) { + return Array.isArray(arr); + }, + generateText, + }, +}; +</script> + +<template> + <div :class="{ 'gl-pl-6': level === 3 }" class="gl-w-full"> + <div v-if="data.header" class="gl-mb-2"> + <template v-if="isArray(data.header)"> + <component + :is="headerI === 0 ? 'strong' : 'span'" + v-for="(header, headerI) in data.header" + :key="headerI" + v-safe-html="generateText(header)" + class="gl-display-block" + /> + </template> + <strong v-else v-safe-html="generateText(data.header)"></strong> + </div> + <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> + <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 + v-if="data.subtext" + v-safe-html="generateText(data.subtext)" + class="gl-m-0 gl-font-sm" + ></p> + </div> + </div> + <template v-if="data.children && level === 2"> + <ul class="gl-m-0 gl-p-0 gl-list-style-none"> + <li> + <child-content + v-for="childData in data.children" + :key="childData.id" + :data="childData" + :widget-label="widgetLabel" + :level="3" + data-testid="child-content" + /> + </li> + </ul> + </template> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js index 4aeebf095c4..e52f2c2c666 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js @@ -88,6 +88,16 @@ export default { // text: 'Link text', // Required: Text to be used inside the link // }, actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }], + children: [ + { + id: `child-${issue.id}`, + header: 'New', + text: '%{critical_start}1 Critical%{critical_end}', + icon: { + name: EXTENSION_ICONS.error, + }, + }, + ], })); }); }, |