Improve handling of scroll shadow.

Author: linuspahl

graylog2-web-interface/src/components/common/EntityDataTable/EntityDataTable.tsx

@@ -198,8 +198,9 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
   const authorizedColumnSchemas = useAuthorizedColumnSchemas(columnSchemas);
   const columnRenderersByAttribute = useColumnRenderers<Entity, Meta>(authorizedColumnSchemas, customColumnRenderers);
   const { headerMinWidths, handleHeaderSectionResize } = useHeaderMinWidths();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const scrolledToRightIndicator = useRef<HTMLDivElement>();
-  const scrolledToRight = useIntersectionObserver(scrolledToRightIndicator);
+  const scrolledToRight = useIntersectionObserver(scrollContainerRef, scrolledToRightIndicator);
 
   const [internalAttributeColumnOrder, setInternalAttributeColumnOrder] = useState<Array<string>>(
     layoutPreferences?.order ?? defaultColumnOrder,
@@ -221,17 +222,19 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
     displayBulkSelectCol,
   );
 
-  const { tableRef, columnWidths, handleActionsWidthChange, tableIsCompressed, actionsColMinWidth } = useElementWidths<
+  const { columnWidths, handleActionsWidthChange, tableIsCompressed, actionsColMinWidth } = useElementWidths<
     Entity,
     Meta
   >({
     columnRenderersByAttribute,
     columnSchemas: authorizedColumnSchemas,
     columnWidthPreferences: internalColumnWidthPreferences,
     displayBulkSelectCol,
+    entities,
+    hasRowActions,
     headerMinWidths,
+    scrollContainerRef,
     visibleColumns: columnOrder,
-    entities,
   });
 
   const columnDefinitions = useColumnDefinitions<Entity, Meta>({
@@ -302,7 +305,7 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
               {({ activeColId, columnTransform }) => (
                 <ScrollContainer
                   id="scroll-container"
-                  ref={tableRef}
+                  ref={scrollContainerRef}
                   $actionsHeaderWidth={actionsColMinWidth}
                   $activeColId={activeColId}
                   $columnTransform={columnTransform}

graylog2-web-interface/src/components/common/EntityDataTable/PinnedColScrollShadow.ts

@@ -23,8 +23,13 @@ import { Table as BaseTable } from 'components/bootstrap';
 import ExpandedSections from 'components/common/EntityDataTable/ExpandedSections';
 import { CELL_PADDING, ACTIONS_COL_ID } from 'components/common/EntityDataTable/Constants';
 import type { EntityBase, ExpandedSectionRenderers, ColumnMetaContext } from 'components/common/EntityDataTable/types';
-import { columnOpacityVar, columnTransformVar, columnTransition } from 'components/common/EntityDataTable/CSSVariables';
-import PinnedColScrollShadow from 'components/common/EntityDataTable/PinnedColScrollShadow';
+import {
+  columnOpacityVar,
+  columnTransformVar,
+  columnTransition,
+  displayScrollRightIndicatorVar,
+} from 'components/common/EntityDataTable/CSSVariables';
+import ScrollShadow from 'theme/box-shadows/ScrollShadow';
 
 import TableHead from './TableHead';
 
@@ -78,7 +83,10 @@ const Td = styled.td<{
     ${$colId === ACTIONS_COL_ID &&
     css`
       position: sticky;
-      ${PinnedColScrollShadow}
+      ${ScrollShadow('left')}
+      &::before {
+        display: var(${displayScrollRightIndicatorVar}, none);
+      }
     `}
   `,
 );

graylog2-web-interface/src/components/common/EntityDataTable/Table.tsx

@@ -24,9 +24,10 @@ import {
   columnOpacityVar,
   columnWidthVar,
   columnTransition,
+  displayScrollRightIndicatorVar,
 } from 'components/common/EntityDataTable/CSSVariables';
 import { ACTIONS_COL_ID } from 'components/common/EntityDataTable/Constants';
-import PinnedColScrollShadow from 'components/common/EntityDataTable/PinnedColScrollShadow';
+import ScrollShadow from 'theme/box-shadows/ScrollShadow';
 
 import type { EntityBase, ColumnMetaContext } from './types';
 
@@ -65,7 +66,10 @@ export const Th = styled.th<{
     ${$colId === ACTIONS_COL_ID &&
     css`
       position: sticky;
-      ${PinnedColScrollShadow}
+      ${ScrollShadow('left')}
+      &::before {
+        display: var(${displayScrollRightIndicatorVar}, none);
+      }
     `}
   `,
 );

graylog2-web-interface/src/components/common/EntityDataTable/TableHead.tsx

@@ -129,7 +129,7 @@ const useActionsColumnDefinition = <Entity extends EntityBase>({
         enableHiding: false,
         enablePinning: true,
         enableResizing: false,
-        header,
+        header: hasRowActions ? header : undefined,
         cell: hasRowActions ? cell : undefined,
         meta: {
           hideCellPadding: true,

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useActionsColumnDefinition.tsx

@@ -21,7 +21,7 @@ import { CELL_PADDING } from 'components/common/EntityDataTable/Constants';
 
 import type { EntityBase } from '../types';
 
-const useActionsColumnWidth = <Entity extends EntityBase>(entities: ReadonlyArray<Entity>) => {
+const useActionsColumnWidth = <Entity extends EntityBase>(entities: ReadonlyArray<Entity>, hasRowActions: boolean) => {
   const [rowWidths, setRowWidths] = useState<{ [rowId: string]: number }>({});
   const visibleRowIdsSet = useMemo(() => new Set(entities.map(({ id }) => id)), [entities]);
 
@@ -64,7 +64,7 @@ const useActionsColumnWidth = <Entity extends EntityBase>(entities: ReadonlyArra
         .filter((width) => !!width),
     );
 
-    return maxWidth + CELL_PADDING * 2;
+    return hasRowActions ? maxWidth + CELL_PADDING * 2 : 0;
   }, [rowWidths, visibleRowIdsSet]);
 
   return { colMinWidth, handleWidthChange };

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useActionsColumnWidth.ts

@@ -26,7 +26,7 @@ import {
 import type { EntityBase, ColumnRenderersByAttribute } from '../types';
 
 const assignableTableWidth = ({
-  tableWidth,
+  scrollContainerWidth,
   actionsColMinWidth,
   bulkSelectColWidth,
   columnIds,
@@ -35,12 +35,12 @@ const assignableTableWidth = ({
   actionsColMinWidth: number;
   bulkSelectColWidth: number;
   columnIds: Array<string>;
-  tableWidth: number;
+  scrollContainerWidth: number;
   staticColumnWidths: { [colId: string]: number };
 }) => {
   const staticColWidths = columnIds.reduce((total, id) => total + (staticColumnWidths[id] ?? 0), 0);
 
-  return tableWidth - bulkSelectColWidth - actionsColMinWidth - staticColWidths;
+  return scrollContainerWidth - bulkSelectColWidth - actionsColMinWidth - staticColWidths;
 };
 
 const calculateColumnWidths = ({
@@ -118,15 +118,15 @@ const useColumnWidths = <Entity extends EntityBase>({
   bulkSelectColWidth,
   columnRenderersByAttribute,
   columnIds,
-  tableWidth,
+  scrollContainerWidth,
   columnWidthPreferences,
   headerMinWidths,
 }: {
   actionsColMinWidth: number;
   bulkSelectColWidth: number;
   columnRenderersByAttribute: ColumnRenderersByAttribute<Entity>;
   columnIds: Array<string>;
-  tableWidth: number;
+  scrollContainerWidth: number;
   columnWidthPreferences: { [key: string]: number } | undefined;
   headerMinWidths: { [colId: string]: number };
 }) => {
@@ -143,7 +143,7 @@ const useColumnWidths = <Entity extends EntityBase>({
   );
 
   useLayoutEffect(() => {
-    if (!tableWidth) {
+    if (!scrollContainerWidth) {
       return;
     }
 
@@ -152,7 +152,7 @@ const useColumnWidths = <Entity extends EntityBase>({
       actionsColMinWidth,
       columnIds,
       bulkSelectColWidth,
-      tableWidth,
+      scrollContainerWidth,
       staticColumnWidths,
     });
 
@@ -173,7 +173,7 @@ const useColumnWidths = <Entity extends EntityBase>({
     bulkSelectColWidth,
     columnRenderersByAttribute,
     columnIds,
-    tableWidth,
+    scrollContainerWidth,
     columnWidthPreferences,
     staticColumnWidths,
     headerMinWidths,

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useColumnWidths.ts

@@ -15,7 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 
-import { useRef, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import type { EntityBase, ColumnRenderersByAttribute } from 'components/common/EntityDataTable/types';
 import type { ColumnSchema } from 'components/common/EntityDataTable';
@@ -29,24 +29,27 @@ type Props<Entity extends EntityBase, Meta> = {
   columnSchemas: Array<ColumnSchema>;
   columnWidthPreferences: { [colId: string]: number };
   displayBulkSelectCol: boolean;
+  hasRowActions: boolean;
   headerMinWidths: { [colId: string]: number };
   visibleColumns: Array<string>;
   entities: ReadonlyArray<Entity>;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
 };
 
 const useElementWidths = <Entity extends EntityBase, Meta>({
   columnRenderersByAttribute,
   columnSchemas,
   columnWidthPreferences,
   displayBulkSelectCol,
+  entities,
+  hasRowActions,
   headerMinWidths,
+  scrollContainerRef,
   visibleColumns,
-  entities,
 }: Props<Entity, Meta>) => {
-  const tableRef = useRef<HTMLDivElement>(null);
   const { colMinWidth: actionsColMinWidth, handleWidthChange: handleActionsWidthChange } =
-    useActionsColumnWidth<Entity>(entities);
-  const { width: tableWidth } = useElementDimensions(tableRef);
+    useActionsColumnWidth<Entity>(entities, hasRowActions);
+  const { width: scrollContainerWidth } = useElementDimensions(scrollContainerRef);
   const columnIds = useMemo(
     () => columnSchemas.filter(({ id }) => visibleColumns.includes(id)).map(({ id }) => id),
     [columnSchemas, visibleColumns],
@@ -58,12 +61,10 @@ const useElementWidths = <Entity extends EntityBase, Meta>({
     columnRenderersByAttribute,
     columnWidthPreferences,
     headerMinWidths,
-    tableWidth,
+    scrollContainerWidth,
   });
 
   return {
-    tableRef,
-    tableWidth,
     handleActionsWidthChange,
     columnWidths,
     tableIsCompressed: actionsColMinWidth === columnWidths[ACTIONS_COL_ID],

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useElementWidths.ts

@@ -17,18 +17,21 @@
 
 import { useEffect, useState } from 'react';
 
-const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>) => {
+const useIntersectionObserver = (
+  containerRef: React.RefObject<HTMLDivElement>,
+  targetElementRef: React.RefObject<HTMLDivElement>,
+) => {
   const [elementIsVisible, setElementIsVisible] = useState(false);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         setElementIsVisible(!entry.isIntersecting);
       },
-      { threshold: 0.9 },
+      { threshold: 0.9, root: containerRef.current },
     );
 
-    const indicatorElement = ref.current;
+    const indicatorElement = targetElementRef.current;
 
     if (indicatorElement) {
       observer.observe(indicatorElement);
@@ -39,7 +42,7 @@ const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>) => {
         observer.unobserve(indicatorElement);
       }
     };
-  }, [ref]);
+  }, [containerRef, targetElementRef]);
 
   return elementIsVisible;
 };

graylog2-web-interface/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { css } from 'styled-components';
+
+const SIZE = 5;
+type Side = 'left' | 'right' | 'top' | 'bottom';
+
+const shadowXY = (side: Side) => {
+  switch (side) {
+    case 'left':
+      return { x: -4, y: 0 };
+    case 'right':
+      return { x: 4, y: 0 };
+    case 'top':
+      return { x: 0, y: -4 };
+    case 'bottom':
+      return { x: 0, y: 4 };
+  }
+};
+
+const sideGeometry = (side: Side) => {
+  switch (side) {
+    case 'left':
+      return css`
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: ${SIZE}px;
+      `;
+    case 'right':
+      return css`
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: ${SIZE}px;
+      `;
+    case 'top':
+      return css`
+        top: 0;
+        left: 0;
+        right: 0;
+        height: ${SIZE}px;
+      `;
+    case 'bottom':
+      return css`
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${SIZE}px;
+      `;
+  }
+};
+
+const ScrollShadow = (side: Side) => {
+  const { x, y } = shadowXY(side);
+
+  return css`
+    &::before {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      z-index: -1;
+      box-shadow: ${x}px ${y}px 8px rgb(0 0 0 / 10%);
+      ${sideGeometry(side)}
+    }
+  `;
+};
+
+export default ScrollShadow;