Frontend: Replace the custom pipeline editor drawer component with the gitlab-ui drawer component
Problem
Currently the Pipeline Editor drawer opens automatically when you open the pipeline editor for the first time. From UX research we found that most users close the drawer and find it annoying. On small screens the automatically open drawer creates usability problems. It's also not aligned with our Drawer usage guidelines in Pajamas and creates accessibility problems.
The drawer behavior and styling is also not aligned with the rest of the drawers in GitLab, and doesn't align with the drawer component guidelines.
Research
Insight - Pipeline editor opening automatically is unexpected and undesired in many cases. Users should be able to discover and manually open the drawer when they need it.
Proposal
Replace the custom drawer component we use today with the gitlab-ui drawer component. This should cover the following requirements:
- The drawer should trigger with a click of a "Help" button in the pipeline editor UI and have an explicit "close" button inside the drawer.
- The "Help" button uses the small variant of the default button, and can be placed next to the "Browse templates" button in the editor. It also uses the "information" icon from the SVG library.
- The drawer shouldn't be visible as a sidebar when it's closed. Closing the drawer should close it entirely.
- Inside of the drawer shouldn't have the additional borders that separate the paragraphs of text, which is aligned with our efforts to "unbox" GitLab UI and keep it more clean. The background of the drawer should be white.
For detailed drawer guidelines and the gitlab-ui component, see the Drawer component page in Pajamas.