redis · egor-zalenski · Jun 15, 2022 · Jun 14, 2022
@@ -1,15 +1,19 @@
 import React from 'react'
-import { instance, mock } from 'ts-mockito'
+import { mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
 
 import MessagesList, { Props } from './MessagesList'
 
-const mockedProps = mock<Props>()
+const mockedProps = {
+  ...mock<Props>(),
+  height: 20,
+  width: 20
+}
 
 describe('MessagesList', () => {
   it('should render', () => {
     expect(
-      render(<MessagesList {...instance(mockedProps)} />)
+      render(<MessagesList {...mockedProps} />)
     ).toBeTruthy()
   })
 })
@@ -1,82 +1,149 @@
-import React, { useEffect, useRef } from 'react'
-import { CellMeasurer, CellMeasurerCache, List, ListRowProps } from 'react-virtualized'
-import AutoSizer from 'react-virtualized-auto-sizer'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { ListChildComponentProps, ListOnScrollProps, VariableSizeList as List } from 'react-window'
+import { EuiButton, EuiIcon } from '@elastic/eui'
 
 import { getFormatDateTime } from 'uiSrc/utils'
 import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+
 import styles from './styles.module.scss'
 
 export interface Props {
   items: IMessage[]
+  width: number
+  height: number
 }
 
 const PROTRUDING_OFFSET = 2
+const MIN_ROW_HEIGHT = 30
 
 const MessagesList = (props: Props) => {
-  const { items = [] } = props
-
-  const cache = new CellMeasurerCache({
-    defaultHeight: 17,
-    fixedWidth: true,
-    fixedHeight: false
-  })
+  const { items = [], width = 0, height = 0 } = props
 
+  const [showAnchor, setShowAnchor] = useState<boolean>(false)
   const listRef = useRef<List>(null)
+  const followRef = useRef<boolean>(true)
+  const hasMountedRef = useRef<boolean>(false)
+  const rowHeights = useRef<{ [key: number]: number }>({})
+  const outerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [])
 
   useEffect(() => {
-    clearCacheAndUpdate()
+    if (items.length > 0 && followRef.current) {
+      setTimeout(() => {
+        scrollToBottom()
+      }, 0)
+    }
   }, [items])
 
-  const clearCacheAndUpdate = () => {
-    listRef?.current?.scrollToRow(items.length - 1)
+  useEffect(() => {
+    if (followRef.current) {
+      setTimeout(() => {
+        scrollToBottom()
+      }, 0)
+    }
+  }, [width, height])
+
+  const getRowHeight = (index: number) => (
+    rowHeights.current[index] > MIN_ROW_HEIGHT ? (rowHeights.current[index] + 2) : MIN_ROW_HEIGHT
+  )
+
+  const setRowHeight = (index: number, size: number) => {
+    listRef.current?.resetAfterIndex(0)
+    rowHeights.current = { ...rowHeights.current, [index]: size }
+  }
+
+  const scrollToBottom = () => {
+    listRef.current?.scrollToItem(items.length - 1, 'end')
     requestAnimationFrame(() => {
-      listRef?.current?.scrollToRow(items.length - 1)
+      listRef.current?.scrollToItem(items.length - 1, 'end')
     })
   }
 
-  const rowRenderer = ({ parent, index, key, style }: ListRowProps) => {
-    const { time = 0, channel = '', message = '' } = items[index]
+  // TODO: delete after manual tests
+  // const scrollToBottomReserve = () => {
+  //   const { scrollHeight = 0, offsetHeight = 0 } = outerRef.current || {}
+
+  //   listRef.current?.scrollTo(scrollHeight - offsetHeight)
+  //   requestAnimationFrame(() => {
+  //     listRef.current?.scrollTo(scrollHeight - offsetHeight)
+  //   })
+  // }
+
+  const handleAnchorClick = () => {
+    scrollToBottom()
+  }
+
+  const handleScroll = useCallback((e: ListOnScrollProps) => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true
+      return
+    }
+
+    if (e.scrollUpdateWasRequested === false) {
+      followRef.current = false
+      setShowAnchor(true)
+    }
+
+    if (!outerRef.current) {
+      return
+    }
+
+    if (e.scrollOffset + outerRef.current.offsetHeight === outerRef.current.scrollHeight) {
+      followRef.current = true
+      setShowAnchor(false)
+    }
+  }, [])
+
+  const Row = ({ index, style }: ListChildComponentProps) => {
+    const rowRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current?.clientHeight)
+      }
+    }, [rowRef])
+
+    const { channel, message, time } = items[index]
+
     return (
-      <CellMeasurer
-        cache={cache}
-        columnIndex={0}
-        key={key}
-        parent={parent}
-        rowIndex={index}
-      >
-        {({ registerChild, measure }) => (
-          <div onLoad={measure} className={styles.item} ref={registerChild} style={style}>
-            <div className={styles.time}>{getFormatDateTime(time)}</div>
-            <div className={styles.channel}>{channel}</div>
-            <div className={styles.message}>{message}</div>
-          </div>
-        )}
-      </CellMeasurer>
+      <div style={style} className={styles.item} data-testid={`row-${index}`}>
+        <div className={styles.time}>{getFormatDateTime(time)}</div>
+        <div className={styles.channel}>{channel}</div>
+        <div className={styles.message} ref={rowRef}>{message}</div>
+      </div>
     )
   }
 
   return (
     <>
-      <div className={styles.header} data-testid="messages-list">
-        <div className={styles.time}>Timestamp</div>
-        <div className={styles.channel}>Channel</div>
-        <div className={styles.message}>Message</div>
-      </div>
-      <AutoSizer>
-        {({ width, height }) => (
-          <List
-            ref={listRef}
-            width={width - PROTRUDING_OFFSET}
-            height={height - PROTRUDING_OFFSET}
-            rowCount={items.length}
-            rowHeight={cache.rowHeight}
-            rowRenderer={rowRenderer}
-            overscanRowCount={30}
-            className={styles.listWrapper}
-            deferredMeasurementCache={cache}
-          />
-        )}
-      </AutoSizer>
+      <List
+        height={height}
+        itemCount={items.length}
+        itemSize={getRowHeight}
+        ref={listRef}
+        width={width - PROTRUDING_OFFSET}
+        className={styles.listContent}
+        outerRef={outerRef}
+        onScroll={handleScroll}
+        overscanCount={30}
+      >
+        {Row}
+      </List>
+      {showAnchor && (
+        <EuiButton
+          fill
+          color="secondary"
+          className={styles.anchorBtn}
+          onClick={handleAnchorClick}
+          data-testid="messages-list-anchor-btn"
+        >
+          New messages
+          <EuiIcon type="sortDown" />
+        </EuiButton>
+      )}
     </>
   )
 }

@@ -1,3 +1,7 @@
+@import "@elastic/eui/src/global_styling/mixins/helpers";
+@import "@elastic/eui/src/components/table/mixins";
+@import "@elastic/eui/src/global_styling/index";
+
 .time,
 .channel,
 .message {
@@ -26,10 +30,14 @@
 .message {
   width: calc(100% - 372px);
   color: var(--htmlColor);
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .header {
+  width: 100%;
+  display: flex;
+  height: 24px;
+
   .time,
   .channel,
   .message {
@@ -38,3 +46,49 @@
     color: var(--htmlColor);
   }
 }
+
+.wrapperContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.listContainer {
+  height: 100%;
+  width: 100%;
+  padding-top: 14px;
+  padding-right: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.listContent {
+  @include euiScrollBar;
+}
+
+.anchorBtn {
+  position: absolute;
+  z-index: 10;
+  bottom: 10px;
+  right: 28px;
+  width: 149px !important;
+  height: 36px !important;
+
+  box-shadow: 0px 3px 6px #00000099 !important;
+  border-radius: 18px !important;
+
+  :global(.euiButton__text) {
+    padding-left: 6px;
+    font-size: 12px !important;
+    font-weight: normal !important;
+  }
+
+  svg {
+    margin-left: 4px;
+    margin-bottom: 1px;
+    width: 20px;
+    height: 20px;
+  }
+}
@@ -1,17 +1,40 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { pubSubSelector } from 'uiSrc/slices/pubsub/pubsub'
 import EmptyMessagesList from './EmptyMessagesList'
 import MessagesList from './MessagesList'
 
+import styles from './MessagesList/styles.module.scss'
+
 const MessagesListWrapper = () => {
   const { messages = [], isSubscribed } = useSelector(pubSubSelector)
   const { connectionType } = useSelector(connectedInstanceSelector)
 
   return (
     <>
-      {(messages.length > 0 || isSubscribed) && <MessagesList items={messages} />}
+      {(messages.length > 0 || isSubscribed) && (
+        <div className={styles.wrapperContainer}>
+          <div className={styles.header} data-testid="messages-list">
+            <div className={styles.time}>Timestamp</div>
+            <div className={styles.channel}>Channel</div>
+            <div className={styles.message}>Message</div>
+          </div>
+          <div className={styles.listContainer}>
+            <AutoSizer>
+              {({ width, height }) => (
+                <MessagesList
+                  items={messages}
+                  width={width}
+                  height={height}
+                />
+              )}
+            </AutoSizer>
+          </div>
+        </div>
+      )}
       {messages.length === 0 && !isSubscribed && <EmptyMessagesList connectionType={connectionType} />}
     </>
   )

@@ -34,8 +34,8 @@
 
   .tableWrapper {
     width: 100%;
-    height: calc(100% - 135px);
-    padding: 18px 0 18px 18px;
+    height: calc(100% - 125px);
+    padding: 18px 0 0 18px;
 
     :global(.ReactVirtualized__Grid) {
       @include euiScrollBar;