Merge pull request #3483 from RedisInsight/fe/feature/RI-5800-stream-details

#RI-5800 - update stream details

Author: mariasergeenko

redisinsight/ui/src/components/popover-item-editor/PopoverItemEditor.spec.tsx

@@ -37,10 +37,11 @@ const VirtualGrid = (props: IProps) => {
     scrollTopProp = 0,
     maxTableWidth = 0,
     hideProgress,
+    stickLastColumnHeaderCell,
   } = props
 
   const scrollTopRef = useRef<number>(0)
-  const [width, setWidth] = useState<number>(100)
+  const [width, setWidth] = useState<number>(200)
   const [height, setHeight] = useState<number>(100)
   const [forceScrollTop, setForceScrollTop] = useState<Maybe<number>>(scrollTopProp)
   const [expandedRows, setExpandedRows] = useState<number[]>([])
@@ -155,9 +156,10 @@ const VirtualGrid = (props: IProps) => {
     }, [setRowHeight, rowIndex, expanded])
 
     if (rowIndex === 0) {
+      const isLastColumn = columns.length - 1 === columnIndex
       return (
-        <div ref={cellRef} style={style}>
-          <div className={cx(styles.gridHeaderItem, 'truncateText')}>
+        <hgroup className={styles.gridHeaderCell} ref={cellRef} style={style}>
+          <div className={cx(styles.gridHeaderItem, 'truncateText', { [styles.lastHeaderItem]: isLastColumn })}>
             {isObject(content) && (
               <>
                 {!!content?.sortable && (
@@ -184,9 +186,10 @@ const VirtualGrid = (props: IProps) => {
             )}
             {!isObject(content) && renderNotEmptyContent(content)}
           </div>
-        </div>
+        </hgroup>
       )
     }
+
     if (columnIndex === 0) {
       const lastColumn = columns[columns.length - 1]
       const allDynamicRowsHeight: number[] = Object.values(rowHeightsMap.current)
@@ -233,7 +236,8 @@ const VirtualGrid = (props: IProps) => {
         className={cx(styles.gridItem,
           rowIndex % 2
             ? styles.gridItemOdd
-            : styles.gridItemEven)}
+            : styles.gridItemEven,
+          columnIndex === columns.length - 2 ? 'penult' : '')}
       >
         {column?.render && isObject(rowData) && column?.render(rowData, expanded) }
         {!column?.render && content }
@@ -248,6 +252,7 @@ const VirtualGrid = (props: IProps) => {
     columns.length - 1,
     Math.max(maxTableWidth, width),
     columns,
+    { stickLastColumnHeaderCell }
   )
 
   return (

redisinsight/ui/src/components/popover-item-editor/index.ts

@@ -65,6 +65,7 @@ export interface IProps {
   hideFooter?: boolean
   maxTableWidth?: number
   hideProgress?: boolean
+  stickLastColumnHeaderCell?: boolean
 }
 
 export interface ISortedColumn {

redisinsight/ui/src/components/popover-item-editor/styles.module.scss

@@ -16,24 +16,48 @@ $paddingCell: 12px;
   border-left-width: 0;
   border-top-width: 0;
   cursor: pointer;
+
+  &:global(.penult) {
+    border-right: 0;
+  }
 }
 
 .gridItemLast {
   z-index: 6;
   margin-top: -50px;
   padding-top: 16px;
+  border-left: 1px solid var(--tableDarkestBorderColor);
+}
+
+.gridHeaderCell {
+  border: 1px solid var(--separatorColorLight);
+
+  &:not(:last-of-type) {
+    border-right: 0;
+  }
+
+  &:first-of-type {
+    border-right: 1px solid var(--separatorColorLight);
+  }
+
+  &:last-of-type, &:nth-of-type(2) {
+    border-left: 0;
+  }
+
+  &:last-of-type {
+    border-left: 1px solid var(--separatorColorLight);
+  }
 }
 
 .gridHeaderItem {
   overflow: hidden;
   align-items: center;
-  line-height: 44px;
-  height: 60px;
+  line-height: 38px;
+  height: 58px;
   text-transform: none;
   z-index: 5;
   padding: $paddingCell;
   background-color: var(--euiColorEmptyShade);
-  border-bottom: 1px solid var(--tableDarkestBorderColor);
 
   &Sortable {
     &:hover {

redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx

@@ -38,6 +38,7 @@ export const useInnerElementType = (
   columnCount: number,
   tableWidth: number,
   columns: ITableColumn[],
+  options: Record<string, any> = {}
 ) => React.useMemo(
   () =>
     React.forwardRef((props:ReactNode, ref) => {
@@ -129,7 +130,8 @@ export const useInnerElementType = (
         })
       )
 
-      const shownColumnsCount = shownIndecies.to.column - shownIndecies.from.column
+      const toColumnDelta = options?.stickLastColumnHeaderCell ? -1 : 0
+      const shownColumnsCount = shownIndecies.to.column + toColumnDelta - shownIndecies.from.column
 
       for (let i = 1; i <= shownColumnsCount; i += 1) {
         const columnIndex = i + shownIndecies.from.column
@@ -157,6 +159,27 @@ export const useInnerElementType = (
         )
       }
 
+      // last sticky column
+      if (options?.stickLastColumnHeaderCell) {
+        const columnIndex = columns.length - 1
+        children.push(
+          React.createElement(Cell, {
+            key: `0:${columnIndex}`,
+            rowIndex: 0,
+            columnIndex,
+            style: {
+              display: 'inline-flex',
+              width: columnWidth(columnIndex, tableWidth, columns),
+              height: rowHeight(0),
+              position: 'sticky',
+              top: 0,
+              right: 0,
+              zIndex: 3,
+            }
+          })
+        )
+      }
+
       const shownRowsCount = shownIndecies.to.row - shownIndecies.from.row
 
       for (let i = 1; i <= shownRowsCount; i += 1) {

redisinsight/ui/src/components/virtual-grid/interfaces.ts

@@ -188,13 +188,15 @@ $footerHeight: 38px;
     font-size: 13px;
     align-items: normal;
   }
+
   :global(.ReactVirtualized__Table__headerRow) {
     border: 1px solid var(--separatorColorLight) !important;
+    // fix border alignment, need to investigate why this happens
+    padding: 0 !important;
   }
+
   :global(.ReactVirtualized__Table__rowColumn) {
     overflow: visible !important;
-    // fix border alignment, need to investigate why this happens
-    margin-right: 1px !important;
 
     &:global(.actions.singleAction) {
       .tableRowCell {
@@ -213,6 +215,10 @@ $footerHeight: 38px;
       & > div:not(:last-of-type) {
         border-right: 1px solid var(--separatorColor);
       }
+
+      :global(.ReactVirtualized__Table__headerColumn) {
+        border-right-color: var(--separatorColorLight) !important;
+      }
     }
   }
 

redisinsight/ui/src/components/virtual-grid/styles.module.scss

@@ -15,8 +15,8 @@
   min-width: 330px;
 }
 
-.editLastId {
-  margin-right: 4px;
+.editableCell {
+  padding: 12px 40px 12px 12px;
 }
 
 .idText, .error {
@@ -30,3 +30,15 @@
 .error {
   color: var(--euiColorDangerText);
 }
+
+.container {
+  :global(.ReactVirtualized__Table__rowColumn) {
+    display: flex;
+  }
+}
+
+.editBtn {
+  position: absolute;
+  top: 20px;
+  right: 0;
+}

redisinsight/ui/src/components/virtual-grid/utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cloneDeep } from 'lodash'
-import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import {
   deleteConsumerGroups,
   loadConsumerGroups,
@@ -116,7 +116,10 @@ describe('GroupsViewWrapper', () => {
 
     const afterRenderActions = [...store.getActions()]
 
-    fireEvent.click(screen.getByTestId('edit-stream-last-id-123'))
+    act(() => {
+      fireEvent.mouseEnter(screen.getByTestId('stream-group_content-value-123'))
+    })
+    fireEvent.click(screen.getByTestId('stream-group_edit-btn-123'))
 
     expect(store.getActions()).toEqual([...afterRenderActions, setSelectedKeyRefreshDisabled(true)])
   })