debian-mirror-gitlab/doc/development/new_fe_guide/modules/widget_extensions.md

stage	group	info
Create	Source Code	To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments

Merge request widget extensions (FREE)

Introduced in GitLab 13.6.

Summary

Extensions in the merge request widget enable you to add new features into the widget that match the existing design and interaction as other extensions.

Usage

To use extensions you need to first create a new extension object to fetch the data to render in the extension. See the example file in app/assets/javascripts/vue_merge_request_widget/extensions/issues.js for a working example.

The basic object structure is as below:

export default {
  name: '',
  props: [],
  computed: {
    summary() {},
    statusIcon() {},
  },
  methods: {
    fetchCollapsedData() {},
    fetchFullData() {},
  },
};

By following the same data structure, each extension can follow the same registering structure, but each extension can manage its data sources.

After creating this structure you need to register it. Registering the extension can happen at any point after the widget has been created.

To register a extension the following can be done:

// Import the register method
import { registerExtension } from '~/vue_merge_request_widget/components/extensions';

// Import the new extension
import issueExtension from '~/vue_merge_request_widget/extensions/issues';

// Register the imported extension
registerExtension(issueExtension);

Fetching errors

If fetchCollapsedData() or fetchFullData() methods throw an error:

• The loading state of the extension is updated to LOADING_STATES.collapsedError and LOADING_STATES.expandedError respectively.
• The extensions header displays an error icon and updates the text to be either:
  • The text defined in $options.i18n.error.
  • "Failed to load" if $options.i18n.error is not defined.
• The error is sent to Sentry to log that it occurred.

To customise the error text, you need to add it to the i18n object in your extension:

export default {
  //...
  i18n: {
    //...
    error: __('Your error text'),
  },
};