Explore: Add resize to split view, with Min/Max button (#54420)

* Add split resize to Explore without keeping width in state

* debug commit

* ugly hack around split lib only supporting one child

* Use SplitView to accomodate one or two elements, remove debug code, fix test

* More cleanup, fix state action

* Fix even split from manual size scenario

* cleanup

* Add new state elements to test

* Handle scrollable on internal element for virtualized lists

* Left align overflow button for explore

* Change min/max buttons

* Apply suggestions from code review

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Add more suggestions from the code review

* Fix problems tests found

* commit broken test with debug info

* Add test, remove debug code

* Remove second get of panes

* Remove second get of panes

Co-authored-by: Elfo404 <me@giordanoricci.com>

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -24,6 +24,7 @@ export interface Props {
   className?: string;
   isFullscreen?: boolean;
   'aria-label'?: string;
+  buttonOverflowAlignment?: 'left' | 'right';
 }
 
 /** @alpha */
@@ -42,6 +43,7 @@ export const PageToolbar: FC<Props> = React.memo(
     className,
     /** main nav-container aria-label **/
     'aria-label': ariaLabel,
+    buttonOverflowAlignment = 'right',
   }) => {
     const styles = useStyles2(getStyles);
 
@@ -132,7 +134,9 @@ export const PageToolbar: FC<Props> = React.memo(
             )}
           </nav>
         </div>
-        <ToolbarButtonRow alignment="right">{React.Children.toArray(children).filter(Boolean)}</ToolbarButtonRow>
+        <ToolbarButtonRow alignment={buttonOverflowAlignment}>
+          {React.Children.toArray(children).filter(Boolean)}
+        </ToolbarButtonRow>
       </nav>
     );
   }