## Description The left sidebar of the Web IDE should be collapsible, like the right sidebar already is. This will give benefits like: * More screen real estate for future enhancements such as WYSIWYG editors * A better mobile experience. Currently, the Web IDE is completely unusable on mobile. This change will make it at least somewhat usable on mobile. ## Background and history This epic supersedes https://gitlab.com/gitlab-org/gitlab/issues/22457 and https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010, which had become too large and complex, and needed to be revisited with a more incremental approach. Much, if not the majority, of the work to implement this has already been done in a [separate preliminary refactoring](https://gitlab.com/gitlab-org/gitlab/merge_requests/22416) (which has been completed and merged), and https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010 (which was undergoing the review process when we decided to [step back and take this more incremental approach](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010#note_283737687). There was also a significant amount of pre-existing code debt in the code related to this change, such as: * Extensive usage of custom CSS rather than utility classes * Missing test coverage This code debt increased the complexity and risk of the change, and will be addressed in a more incremental way as part of this epic. The current state of https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010 is that the collapse behavior works and is functional (and the right side is already using `CollapsibleSidebar` on master), but there were several styling and layout issues related to how the left-side structure of the HTML changed when using the reusable `CollapsibleSidebar` approach, as well as concerns about ignoring/propagating pre-existing code debt. ## Plan ### Initial Plan Now we know *what* the styling and HTML structure changes need to be, and other than that, the collapsible is already functional. So, this epic will focus on first refactoring the left side HTML and CSS to match what will be needed to work with the collapsible sidebar approach, but without actually making it collapsible yet. From a technical perspective: on master it's currently a single column of elements, each containing one pair of button+pane. The new approach is two columns, the first containing the buttons, and the second containing the corresponding panes. This approach to being incremental makes sense because: * Most if not all of the remaining unresolved issues are related to styling of the left side. The actual reusable collapsible behavior works fine, and is, I think, pretty solidly and cleanly implemented. It's the styling that needs a lot of care, cleanup, and attention * This refactoring has lots of opportunities to be split up incrementally itself. E.g.: * make multiple passes to convert custom CSS to utility classes as appropriate to reduce coupling and complexity * Make the styling more consistent and between the right and left sides * Then finally do the actual HTML layout conversion, which should be easier in a more sane, utility-class-based world. * Then, the actual implementation of the collapsible behavior should be a fairly straightforward drop-in. * There are also some other separate iterations we can do in the order which makes the most sense, such as changing how the loading states are handled, and moving it out of the shared component to the individual pane components. * We can also address relevant code debt where it make sense, especially in the areas of: * Converting custom CSS to utility classes * Adding missing unit and integration test coverage * Converting unit tests from Karma to Jest Also, it is likely that most if not all of this could be accomplished without having to use feature flags, if we plan it carefully. ### Refined Plan So to recap the plan based on current status as of 2020-02-29: I have the left side working here (https://gitlab.com/gitlab-org/gitlab/-/merge_requests/25663) but without making it collapsible, or using/touching `CollapsibleSidebar` yet. Then I'm putting that on hold while I backport/sync the necessary changes to (https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26043), and make sure they also work with both the right and left side. So the hope is that then it should be simple to just start using `CollapsibleSidebar` for the right side too with no (or minimal) further styling issues, and be able to just focus on the code-level issues. E.g. dealing with more frequent remounts and properly wiring it up to Vuex, most or all of which should have already been solved in (https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010) ## Summary list of prioritized issues These are ordered in a logical progression which should minimize risk, maximize the opportunity for being incremental, and minimize or completely avoid the need for feature flagging. We may decide not to do some of the code debt issues such, while remaining aware that this may increase the risk of regressions. ### Technical Debt These all have the `technical debt` label applied. * Convert remaining IDE unit tests from Karma to Jest (can be multiple issues, one for each file). Note that the [issue with supporting `monaco-editor` in Jest](https://gitlab.com/gitlab-org/gitlab/issues/119194) may make this difficult, and might need to be addressed first (perhaps by [attempting a monaco upgrade](https://github.com/facebook/create-react-app/issues/5881#issuecomment-441249405)) (https://gitlab.com/gitlab-org/gitlab/issues/119194, https://gitlab.com/gitlab-org/gitlab/issues/194238, and https://gitlab.com/gitlab-org/gitlab/issues/194288) * Add at least 90% unit test coverage for all existing classes related to the Web IDE, excluding (perhaps) `activity_bar.vue` and `ide_side_bar.vue`, which we know are going to be replaced and deleted. (https://gitlab.com/gitlab-org/gitlab/issues/204812) * Add (if possible) some missing integration/feature tests for important happy path scenarios. E.g. the differing behaviors when the browser height is shorter than `MAX_WINDOW_HEIGHT_COMPACT`. (https://gitlab.com/gitlab-org/gitlab/issues/204813) * Maybe (or maybe not?) add some simple happy-path feature specs for areas that are already covered by QA specs, even though they would be redundant - e.g. fleshing out `spec/features/ide_spec.rb`. (https://gitlab.com/gitlab-org/gitlab/issues/204814) * Convert all possible custom CSS related to the IDE sidebars and panes to utility classes (can be multiple issues, for different sections of CSS) (https://gitlab.com/gitlab-org/gitlab/issues/204815) ### Work Supporting This Feature * Refactor IDE project avatar/description header (top left tab) highlighting: Change it from relying on a single-HTML-element `hover` highlighting to a different approach which will work when the avatar and description are in separate HTML elements. (https://gitlab.com/gitlab-org/gitlab/issues/204816) * Refactor the naming convention and usage of left-pane related constants, i.e. move from `activityBarViews` to `leftSidebarViews`. (https://gitlab.com/gitlab-org/gitlab/issues/204817) * Convert the structure of the left sidebar HTML: Change from a single column of elements, each containing one pair of button+pane, to the new approach of two columns, the first containing the buttons, and the second containing the corresponding panes. This can involve the introduction of a new `LeftPane` component. If we run into more unexpected styling issues, stop, and try to address these first as separate prerequisite MRs. (https://gitlab.com/gitlab-org/gitlab/issues/204819) * There _are_ a couple of known styling issues with the new approach, which can be handled as a separate issue. (https://gitlab.com/gitlab-org/gitlab/issues/204931) * Refactor how resizeable panel is handled for the CollapsibleSidebar, so it will not need to be the responsibility of `CollapsibleSidebar` anymore (the version of `CollapsibleSidebar` on master currently has this, and it should be removed). (https://gitlab.com/gitlab-org/gitlab/issues/204821) * Allow `CollapsibleSidebar` to take a slot for the rendered tab component(s), to allow for more flexible styling (approach [suggested by Paul here](https://gitlab.com/gitlab-org/gitlab/issues/204816#note_293642850)). (https://gitlab.com/gitlab-org/gitlab/issues/208086) * Finally, make the left sidebar actually use `CollapsibleSidebar`. If we did everything above correctly, this should be a fairly straightforward copying of the [existing working implementation and tests from the previous MR](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21010). (https://gitlab.com/gitlab-org/gitlab/issues/204822) ## Previous Related/Duplicate Issues * https://gitlab.com/gitlab-org/gitlab/issues/22457 * https://gitlab.com/gitlab-org/gitlab-foss/issues/46920