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 refactor ide_side_bar.vue to handle its responsibilities, and match the design and API of collapsible_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 the updateViewer 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.
• 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

• Code review guidelines
• Style guides
• Separation of EE specific content

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 for tree-ready to ide_vue along with the logic.
• ...?

Closes #204819 (closed)