[kbn-grid-layout] POC of kbn-grid-layout in Dashboard

packages/kbn-grid-layout/grid/grid_height_smoother.tsx

@@ -9,7 +9,7 @@
 
 import { css } from '@emotion/react';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import { combineLatest } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map } from 'rxjs';
 import { GridLayoutStateManager } from './types';
 
 export const GridHeightSmoother = ({
@@ -19,13 +19,14 @@ export const GridHeightSmoother = ({
   // set the parent div size directly to smooth out height changes.
   const smoothHeightRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
-    const subscription = combineLatest([
+    const heightSubscription = combineLatest([
       gridLayoutStateManager.gridDimensions$,
       gridLayoutStateManager.interactionEvent$,
     ]).subscribe(([dimensions, interactionEvent]) => {
       if (!smoothHeightRef.current) return;
       if (!interactionEvent) {
         smoothHeightRef.current.style.height = `${dimensions.height}px`;
+        smoothHeightRef.current.style.userSelect = 'auto';
         return;
       }
 
@@ -38,8 +39,23 @@ export const GridHeightSmoother = ({
         dimensions.height ?? 0,
         smoothHeightRef.current.getBoundingClientRect().height
       )}px`;
+      smoothHeightRef.current.style.userSelect = 'none';
     });
-    return () => subscription.unsubscribe();
+
+    const marginSubscription = gridLayoutStateManager.runtimeSettings$
+      .pipe(
+        map(({ gutterSize }) => gutterSize),
+        distinctUntilChanged()
+      )
+      .subscribe((gutterSize) => {
+        if (!smoothHeightRef.current) return;
+        smoothHeightRef.current.style.margin = `${gutterSize}px`;
+      });
+
+    return () => {
+      marginSubscription.unsubscribe();
+      heightSubscription.unsubscribe();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/kbn-grid-layout/grid/grid_layout.tsx

@@ -12,6 +12,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { combineLatest, distinctUntilChanged, filter, map, pairwise, skip } from 'rxjs';
 
 import { GridHeightSmoother } from './grid_height_smoother';
+import { GridOverlay } from './grid_overlay';
 import { GridRow } from './grid_row';
 import { GridLayoutData, GridSettings } from './types';
 import { useGridLayoutEvents } from './use_grid_layout_events';
@@ -22,7 +23,10 @@ import { compactGridRow } from './utils/resolve_grid_row';
 interface GridLayoutProps {
   layout: GridLayoutData;
   gridSettings: GridSettings;
-  renderPanelContents: (panelId: string) => React.ReactNode;
+  renderPanelContents: (
+    panelId: string,
+    setDragHandles: (refs: Array<HTMLElement | null>) => void
+  ) => React.ReactNode;
   onLayoutChange: (newLayout: GridLayoutData) => void;
 }
 
@@ -133,14 +137,17 @@ export const GridLayout = ({
   }, [rowCount, gridLayoutStateManager, renderPanelContents]);
 
   return (
-    <GridHeightSmoother gridLayoutStateManager={gridLayoutStateManager}>
-      <div
-        ref={(divElement) => {
-          setDimensionsRef(divElement);
-        }}
-      >
-        {children}
-      </div>
-    </GridHeightSmoother>
+    <>
+      <GridHeightSmoother gridLayoutStateManager={gridLayoutStateManager}>
+        <div
+          ref={(divElement) => {
+            setDimensionsRef(divElement);
+          }}
+        >
+          {children}
+        </div>
+      </GridHeightSmoother>
+      <GridOverlay gridLayoutStateManager={gridLayoutStateManager} />
+    </>
   );
 };

packages/kbn-grid-layout/grid/grid_overlay.tsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { GridLayoutStateManager } from './types';
+
+type ScrollDirection = 'up' | 'down';
+
+const scrollLabels: { [key in ScrollDirection]: string } = {
+  up: i18n.translate('kbnGridLayout.overlays.scrollUpLabel', { defaultMessage: 'Scroll up' }),
+  down: i18n.translate('kbnGridLayout.overlays.scrollDownLabel', { defaultMessage: 'Scroll down' }),
+};
+
+const scrollOnInterval = (direction: ScrollDirection) => {
+  const interval = setInterval(() => {
+    window.scroll({
+      top: window.scrollY + (direction === 'down' ? 50 : -50),
+      behavior: 'smooth',
+    });
+  }, 100);
+  return interval;
+};
+
+const ScrollOnHover = ({
+  gridLayoutStateManager,
+  direction,
+}: {
+  gridLayoutStateManager: GridLayoutStateManager;
+  direction: ScrollDirection;
+}) => {
+  const buttonRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const [isHidden, setIsHidden] = useState(true);
+  const [isActive, setIsActive] = useState(false);
+  const scrollInterval = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    gridLayoutStateManager.interactionEvent$.subscribe((interactionEvent) => {
+      if (interactionEvent) {
+        setIsHidden(false);
+      } else {
+        setIsHidden(true);
+      }
+    });
+  }, [gridLayoutStateManager]);
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseEnter={() => {
+        setIsActive(true);
+        scrollInterval.current = scrollOnInterval(direction);
+      }}
+      onMouseLeave={() => {
+        setIsActive(false);
+        if (scrollInterval.current) {
+          clearInterval(scrollInterval.current);
+        }
+      }}
+      className={'droppable'}
+      css={css`
+        pointer-events: ${isHidden ? 'none' : 'auto'};
+        width: 100%;
+        position: fixed;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        opacity: ${isHidden ? 0 : 1};
+        background-color: transparent;
+        transition: opacity 100ms linear;
+        padding: ${euiThemeVars.euiSizeM};
+        ${direction === 'down' ? 'bottom: 0;' : 'top: 0;'}
+      `}
+    >
+      {direction === 'up' && (
+        <div
+          css={css`
+            height: 96px;
+          `}
+        />
+      )}
+      <div
+        ref={buttonRef}
+        css={css`
+          display: flex;
+          width: fit-content;
+          align-items: center;
+          background-color: ${isActive
+            ? euiThemeVars.euiColorSuccess
+            : euiThemeVars.euiColorEmptyShade};
+          height: ${euiThemeVars.euiButtonHeight};
+          line-height: ${euiThemeVars.euiButtonHeight};
+          border-radius: ${euiThemeVars.euiButtonHeight};
+          outline: ${isActive ? 'none' : euiThemeVars.euiBorderThin};
+          transition: background-color 100ms linear, color 100ms linear;
+          padding: 0 ${euiThemeVars.euiSizeL} 0 ${euiThemeVars.euiSizeL};
+          color: ${isActive ? euiThemeVars.euiColorEmptyShade : euiThemeVars.euiTextColor};
+        `}
+      >
+        <EuiText size="m">
+          <strong>{scrollLabels[direction]}</strong>
+        </EuiText>
+      </div>
+    </div>
+  );
+};
+
+export const GridOverlay = ({
+  gridLayoutStateManager,
+}: {
+  gridLayoutStateManager: GridLayoutStateManager;
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <span
+      ref={ref}
+      css={css`
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        overflow: hidden;
+        z-index: 100000000;
+        pointer-events: none;
+      `}
+    >
+      <ScrollOnHover gridLayoutStateManager={gridLayoutStateManager} direction="up" />
+      <ScrollOnHover gridLayoutStateManager={gridLayoutStateManager} direction="down" />
+    </span>
+  );
+};