WIP: Resolve "Convert the structure of Web IDE left sidebar HTML"
What does this MR do?
This is a refactor of the Web IDE left sidebar in preparation to make it collapsible. It will make it be able to use the CollapsibleSidebar reusable component, which is already being used on the right sidebar (and being improved as part of !26043 (closed)).
The main change is 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 will involve the introduction of a new LeftPane
component, and removal of the ActivityBar
component.
Some of these changes have already been done in !21010 (closed), but are being re-implemented here as part of a more incremental approach.
See the epic &2585 (closed) for more context.
Tasks
-
Add left.vue
and tests -
Remove activity_bar.vue
and refactoride_side_bar.vue
to handle its responsibilities, and match the design and API ofcollapsible_sidebar.vue
. -
Remove all references to activity_bar
/ActivityBar
-
Regression: The review double-pane middle diff viewer is shown when the edit tab is selected. - Fix: This was related to the coupling of the
mounted()
callbacks in the views to theupdateViewer
state. They make the assumption that the view components are not mounted until used, and always unmounted/remounted as the tabs are changed. So, this MR preserves that behavior and assumption.
- Fix: This was related to the coupling of the
-
Regression: Background/outline of file ide tree should be white, not grey -
Regression: Commit button/form does not float up in Safari for short windows. -
Is it possible to avoid the use of JQuery in CollapsibleSidebar
clickTab
function? (it was previously not working properly, using JQuery was necessary for the above task "Fix issue with highlighting and tooltips getting stuck on click/focus."- Asked on slack
- Got one response to use
GlTooltip
, which is out of scope for this feature for various reasons (there's already been a lot of scope creep due to code debt, it's tightly coupled to existing CSS, and there's already been many subtle styling-based regressions). - Got another response "pretty sure the plain bootstrap tooltips depend on jquery so it's unavoidable"
-
Whichever we choose, is import tooltip from '~/vue_shared/directives/tooltip';
still necessary?
Does this MR meet the acceptance criteria?
Conformity
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Tasks for rebase if we do it...
-
Copy diffs from activity_bar.vue: git diff d10513c6eef92b3bce4e008a2396c456d0c208c2~1 -- app/assets/javascripts/ide/components/activity_bar.vue
-
Move specs from ide_tree_list.vue
fortree-ready
toide_vue
along with the logic. -
...?
Closes #204819 (closed)