To avoid having empty areas in the dropdown that occupy
unnessary space, I removed the dropdown's min-height and changed
its default height in empty state to be same as its loading state
(with the spinner).

Fixed in MR list and branch list components.

Earlier clicking right outside the input box closed
the dropdown, which was unexpected behaviour. To
make it consistent with the behaviour of select2
jquery plugin, I have made clicking outside the
input focus on the input by using a label.

**Why?**
The ide_status_list will be used and extended in EE.

- Pull the new MR option out into it's own component
- Default MR checkbox to true when creating a new MR and committing to a
  branch that does not have an MR
- Still change the MR checkbox to false when a user is on a branch that
  already has an MR
- Hide MR option when on a branch that already has an MR and committing
  to current branch
- Don't default to true when committing directly to master

Resolves https://gitlab.com/gitlab-org/gitlab-ce/issues/47771

Changelog entry

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51857

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/53304

This file tree displays all the diff files in a tree like format
Each file is taken and converted into a tree with folders
Each folder can be toggled open & closed
Clicking a file will scroll to the diff file & highlight with a glow affect

Searching the tree list will search only files & return a list of the
files without any folders

Each file row contains an icon to show changed, new file or deleted
Each row will also contain the added & removed lines count

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/14249

This makes the file row component re-usable ouside of the Web IDE

Pre-request for https://gitlab.com/gitlab-org/gitlab-ce/issues/14249

moved heights into variables

Closes #48182

improved variable & prop names

Closes #48059

This enables JavaScripts projects to have live previews straight in the
browser without requiring any local configuration. This uses the
CodeSandbox package `sandpack` to compile it all inside of an iframe.

This feature is off by default and can be toggled on in the admin
settings. Only projects with a `package.json` and a `main` key are
supported.

Updates happen in real-time with hot-reloading. We just watch for
changes to files and then send them to `sandpack` to allow it to reload
the iframe. The iframe includes a very simple navigation bar, the text
bar is `readonly` to stop users navigating away from the preview and
the back and forward buttons just pop/splice the navigation stack
which is tracked by a listener on `sandpack`

There is a button inside the iframe which allows the user to open the
projects inside of CodeSandbox. This button is only visible on
**public** projects. On private or internal projects this button
get hidden to protect private code being leaked into an external
public URL.

Closes #47268

for folders, it shows all the files in commit mode
for files, nothing changes, the behaviour is the same