Skip to content

Connects merge request status to whole page

Phil Hughes requested to merge ph/statusBoxGlobalStatePOC into master

What does this MR do?

This creates a way for other components on the page to import and use the merge requests state (open/merged/closed).

The idea being that this creates a reactive object which contains the state which gets exported. This exported state can then be imported anywhere else on the page and Vue will react and update accordingly whenever the state gets changed. The state gets changed through the exported method. This method refetches the query and updates the state. Right now this method gets called after a polling request in the merge request widget is returned.

This pattern can then be used in other places. Each of the sidebar elements (assignees, reviewers, labels etc.) using this pattern which any other component/Vue app/JS app can import, use and subscribe to however they want.

Why?

This pattern allows for us to make individual components on the page be in charge of its state. For example, we would have a labels component on the page that would manage the label data for a merge request/issue. This component then fetches the data and exports this data to be used throughout the page.

How to use?

If we take this proof of concept as an example, it is super easy for any component (or JS file to use!).

To start, just simply import the status state from the component:

import { statusBoxState } from '~/issuable/components/status_box.vue';

and then use it with:

const state = statusBoxState.state;

How do we update the state? Just as easy. We import the state again from the component and call the update method:

import { statusBoxState } from '~/issuable/components/status_box.vue';

statusBoxState?.updateStatus()

This then updates the value in statusBoxState.state which will allow for Vues' reactivity stuff to kick in and update the components with the new changes.

Screenshots (strongly suggested)

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Closes #328547 (closed)

Edited by Phil Hughes

Merge request reports