diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/widget')
3 files changed, 45 insertions, 13 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue index 18aa85484ea..5db5f1f8dcf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue @@ -1,5 +1,11 @@ <script> export default { + components: { + MrSecurityWidget: () => + import( + '~/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue' + ), + }, props: { mr: { type: Object, @@ -8,7 +14,9 @@ export default { }, computed: { widgets() { - return [].filter((w) => w); + return [window.gon?.features?.refactorSecurityExtension && 'MrSecurityWidget'].filter( + (w) => w, + ); }, }, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue index cdf35033021..7343c98938c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue @@ -42,7 +42,8 @@ export default { */ value: { type: Object, - required: true, + required: false, + default: () => ({}), }, loadingText: { type: String, @@ -56,7 +57,8 @@ export default { }, fetchCollapsedData: { type: Function, - required: true, + required: false, + default: undefined, }, fetchExpandedData: { type: Function, @@ -119,6 +121,12 @@ export default { required: false, default: null, }, + // When this is provided, the widget will display an error message in the summary section. + hasError: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -138,8 +146,17 @@ export default { summaryStatusIcon() { return this.summaryError ? this.$options.failedStatusIcon : this.statusIconName; }, + hasActionButtons() { + return this.actionButtons.length > 0 || Boolean(this.$scopedSlots['action-buttons']); + }, }, watch: { + hasError: { + handler(newValue) { + this.summaryError = newValue ? this.errorText : null; + }, + immediate: true, + }, isLoading(newValue) { this.$emit('is-loading', newValue); }, @@ -154,7 +171,9 @@ export default { this.telemetryHub?.viewed(); try { - await this.fetch(this.fetchCollapsedData, FETCH_TYPE_COLLAPSED); + if (this.fetchCollapsedData) { + await this.fetch(this.fetchCollapsedData, FETCH_TYPE_COLLAPSED); + } } catch { this.summaryError = this.errorText; } @@ -258,7 +277,7 @@ export default { v-if="helpPopover" icon="information-o" :options="helpPopover.options" - :class="{ 'gl-mr-3': actionButtons.length > 0 }" + :class="{ 'gl-mr-3': hasActionButtons }" > <template v-if="helpPopover.content"> <p @@ -275,12 +294,14 @@ export default { > </template> </help-popover> - <action-buttons - v-if="actionButtons.length > 0" - :widget="widgetName" - :tertiary-buttons="actionButtons" - @clickedAction="onActionClick" - /> + <slot name="action-buttons"> + <action-buttons + v-if="actionButtons.length > 0" + :widget="widgetName" + :tertiary-buttons="actionButtons" + @clickedAction="onActionClick" + /> + </slot> </div> <div v-if="isCollapsible" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue index 543136dc659..b64f9c148d1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue @@ -79,8 +79,11 @@ export default { </script> <template> <div - class="gl-w-full gl-display-flex gl-align-items-baseline" - :class="{ 'gl-border-t gl-py-3 gl-pl-7': level === 2 }" + class="gl-w-full gl-display-flex" + :class="{ + 'gl-border-t gl-py-3 gl-pl-7 gl-align-items-baseline': level === 2, + 'gl-align-items-center': level === 3, + }" > <status-icon v-if="statusIconName && !header" |