The goal of this epic is to track the migration of all the [bootstrap modals](https://getbootstrap.com/docs/4.0/components/modal/) in HAML and vanilla JS to GitLab UI. We're in the process of migrating away all uses of Bootstrap/jQuery. Whilst this is a simple task for things such as [buttons](https://gitlab.com/groups/gitlab-org/-/epics/4001) and [alerts](https://gitlab.com/groups/gitlab-org/-/epics/4070), 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/jquery in this particular file. Or at least what is related to modal display. How you achieve that goal, is largely up to you. Take a look at the [parent epic](https://gitlab.com/groups/gitlab-org/-/epics/3963) 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 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. Your 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>`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-modal--default). 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 here. Happy hunting! | Type | regex | scope | | ------ | ------ | ----- | | [data triggers](https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes) | `data.*(\n)?.*toggle.*modal` | `*.haml` | | [JS Triggers](https://getbootstrap.com/docs/4.0/components/modal/#via-javascript) | `\.modal\(` | `*.js,.haml` | ### Additional issues These are issues that could not be linked to this epic as they are already associated with an epic - [ ] https://gitlab.com/gitlab-org/gitlab/-/issues/324351