Update documentation on mr widgets
What does this MR do and why?
Updates the Merge Request Widget documentation.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Here's an example of a widget that uses all fields available:
<script>
import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
import { __ } from '~/locale';
export default {
name: 'WidgetHelloWorld',
components: {
MrWidget,
},
computed: {
summary() {
return { title: __('Hello World'), subtitle: __('I am a subtext') };
},
content() {
return [
{
text: __('Content text 1'),
subtext: __('Content subtext 1'),
supportingText: __('Content supporting text 1'),
tooltipText: __('I am a tooltip'),
link: {
href: 'https://www.gitlab.com',
text: __('I am a link'),
},
badge: {
variant: 'success',
text: __('I am a badge'),
},
header: __('I am a header'),
helpPopover: {
options: { title: __('Popover title') },
content: {
text: __('I am a help popover'),
// learnMorePath: '/user/application_security/index',
},
},
actions: [
{
id: 'my_id',
href: '/',
dataMethod: 'GET',
dataClipboardText: __('clipboard text'),
icon: 'trash',
variant: 'success',
loading: false,
testId: 'my_test_id',
text: __('I am an action'),
class: 'my_class',
trackFullReportClicked: true,
},
],
children: [],
},
{
text: __('Content text 2'),
subtext: __('Content subtext 2'),
supportingText: __('Content supporting text 2'),
},
];
},
},
};
</script>
<template>
<mr-widget
:summary="summary"
:content="content"
:is-collapsible="true"
:widget-name="$options.name"
/>
</template>
And here's how it gets loaded:
Screenshot from the documentation page:
Screenshot |
---|
![]() |
How to set up and validate locally
- Visit
/help/development/fe_guide/merge_request_widget_extensions.md
- Check the documentation
Related to #438943 (closed)
Edited by Savas Vedova