Skip to content

Replace bootstrap modal trigger in app/assets/javascripts/blob/blob_file_dropzone.js

We're in the process of migrating away all uses of Bootstrap. Whilst this is a simple task for things such as buttons and alerts, modals are much more complex. Because of that, there will be no step-by-step instructions in this issue. The goal here, is to remove the dependency on bootstrap in this particular file. How you achieve that goal, is largely up to you. Take a look at the parent epic and related sub-issues for discussions and examples of how others have tackled this problem.

Reasons we're doing this

The main reason for doing this is performance. With modals in particular, this will be a two-fold increase. Firstly, removing any uses of bootstrap will allow us to remove bootstrap. This saves file size in itself and also helps pave the way to removing jQuery. Secondly, a lot of these modals are troublesome. They sit on the page, completely hidden and make all sorts of API calls to fetch data that may or may not ever be viewed by the user. Let's make GitLab smarter, and faster.

Things to help you

This js file uses element.modal() to trigger a modal. The regex used to create this issue looked specifically for that selector. It may be that there are duplicate issues for the same modal as the issues are created based on the triggers, not the modals themselves. Watch out for that.

You mission (if you chose to accept it) is to find the modal that this trigger, triggers. Once you've found that modal, you have a few options:

  1. Migrate the modal and the surrounding code to a Vue application and use <gl-modal>.
  2. Consider, "does this even need to be a modal?" if not, involve someone from UX to figure out an alternative solution.
  3. Consider, "does this modal need to be here at all?" It might not. Again, consult with UX (and possibly product) on this one.
  4. Come up with another solution that doesn't require creating a vue application. Just be sure to look at what others have done and communicate your plans so we don't re-invent the modal too many times. No one wants that.

If you have any questions, drop them in this issue. Or (better yet) hoist them up to the parent epic so anyone working on other issues can see it too. Happy hunting!