Refactor CollapsibleSidebar

Background

This is an incremental refactoring to support a collapsible left sidebar in the Web IDE.

Description

We want to make the resizeable panel not need to be the responsibility of CollapsibleSidebar anymore. The version of CollapsibleSidebar on master currently has this, and it should be removed.

This will make it match the approach taken for the left sidebar in !25663 (closed), where the parent component (i.e. left.vue or right.vue) is responsible for handling the resizeable panel.

There are also some other small fixes/improvements made to CollapsibleSidebar as part of this.

See the epic &2585 (closed) for more context...

Challenges

In some cases in the existing layout, there were occasional non-Flexbox elements intermingled with Flexbox elements.

This means that in some cases, attempting to use Flex approaches to fix layout problems, e.g. setting align-items and align-content to stretch, does not work when there's a nested non-Flex child element somewhere.

This introduced subtle bugs with centering and resizing when the HTML structure is refactored.

These are also hard to find, because the collapsible sidebar pane can contain a wide variety of child components in it, across the left and right side, and taking into account loading state.

These are also difficult to explore for styling regressions, because some there's some involved setup needed to cause some child components to show up (e.g. making sure there are pipelines, or making sure the client side preview is enabled in the current test project).

Also, some of these regressions only appear when you resize the panels to certain sizes horizontally or vertically.

So, I took the approach of proactively adding h-100 w-100 min-height-0 to all of the elements involved in the structure down to the individual panes.

This seems like overkill and is undoubtably unnecessary in all cases, but it also seems to cause no negative issues that I know of, and is less risky because it may be avoiding some regressions that have not yet been found.

UPDATE: More discussion on these topics is in the threads below

NOTE: The branch for this MR is named inaccurately. After getting started, I realized the focus needed to change from loading state to resizable panel

Tasks

• Move resizeable-panel into right.vue
• Remove need for .ide-right-sidebar-clientside class and delete it; move it to a utility class
• Fix issue with highlighting and tooltips getting stuck on click/focus.
• Remove header-related slots which will not be needed.
• 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?
• Explore all tab panes with empty state and populated state:
  • Pipelines
    • Empty state
    • Active state
  • Client Side Preview
    • Empty state
    • Active state
  • Terminal (EE Only)
    • Empty state
    • Active state
• Write (or remove) unit test coverage for all new or removed logic/markup.
  • Specifically, the header slot test appears to be bad, it didn't start failing when the slot was removed, and is falsely passing. Figure out why, and make sure the footer slot test doesn't have the same problem.

closes #204821 (closed)