Skip to content

"Resolve conflicts" button popover does not show

Summary

There is a Bootstrap popover used with disabled gl-button and it does not work. Implementation does not follow https://getbootstrap.com/docs/4.4/components/popovers/#disabled-elements - pointer-events: none; is missing from the button. Adding this style causes another issue - cursor no longer changes to not-allowed. Probably this could be resolved by changing the UX - use another way (than a popover) of informing the user about the reason of button being disabled.

Steps to reproduce

  1. Create merge request with conflict and protected source branch.
  2. Mouse enter disabled "Resolve conflicts" button.

Example Project

https://gitlab.com/marcinmajkowski/gitlab/-/merge_requests/1

What is the current bug behavior?

Popover does not show. User is not informed why "Resolve conflicts" is disabled.

What is the expected correct behavior?

User is informed why "Resolve conflicts" is disabled.

Relevant logs and/or screenshots

The popover and the button with pointer-events workaround applied.

image

Output of checks

This bug happens on GitLab.com.

Results of GitLab environment info

Expand for output related to GitLab environment info 

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

The file is app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue. UX can be changed to present same information differently. Pajamas popover could be used instead of Bootstraps (see https://gitlab.com/gitlab-org/gitlab/-/issues/227257) but only if it already works with disabled gl-button.