Merge pull request #734 from RedisInsight/feature/bugfix

#RI-3004, #RI-3006

Author: egor-zalenski

redisinsight/ui/src/pages/browser/components/stream-details/constants.ts

@@ -1,6 +1,13 @@
+import React from 'react'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 
-export const streamViewTypeTabs = [
+interface StreamTabs {
+  id: StreamViewType,
+  label: string,
+  separator?: React.ReactElement
+}
+
+export const streamViewTypeTabs: StreamTabs[] = [
   {
     id: StreamViewType.Data,
     label: 'Stream data',

redisinsight/ui/src/pages/browser/components/stream-details/stream-tabs/StreamTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { EuiTab, EuiTabs } from '@elastic/eui'
+import { EuiIcon, EuiTab, EuiTabs } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
@@ -14,6 +14,8 @@ import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 
 import { streamViewTypeTabs } from '../constants'
 
+import styles from './styles.module.scss'
+
 const StreamTabs = () => {
   const { viewType } = useSelector(streamSelector)
   const { data: groups = [] } = useSelector(streamGroupsSelector)
@@ -36,25 +38,30 @@ const StreamTabs = () => {
       tabs.push({
         id: StreamViewType.Consumers,
         label: selectedGroupName,
+        separator: <EuiIcon type="arrowRight" className={styles.separator} />
       })
     }
 
     if (selectedConsumerName && viewType === StreamViewType.Messages) {
       tabs.push({
         id: StreamViewType.Messages,
-        label: selectedConsumerName
+        label: selectedConsumerName,
+        separator: <EuiIcon type="arrowRight" className={styles.separator} />
       })
     }
 
-    return tabs.map(({ id, label }) => (
-      <EuiTab
-        isSelected={viewType === id}
-        onClick={() => onSelectedTabChanged(id)}
-        key={id}
-        data-testid={`stream-tab-${id}`}
-      >
-        {label}
-      </EuiTab>
+    return tabs.map(({ id, label, separator = '' }) => (
+      <>
+        {separator}
+        <EuiTab
+          isSelected={viewType === id}
+          onClick={() => onSelectedTabChanged(id)}
+          key={id}
+          data-testid={`stream-tab-${id}`}
+        >
+          {label}
+        </EuiTab>
+      </>
     ))
   }, [viewType, selectedGroupName, selectedConsumerName])
 

redisinsight/ui/src/pages/browser/components/stream-details/stream-tabs/styles.module.scss

@@ -0,0 +1,8 @@
+.separator {
+  position: relative;
+  margin-top: 10px;
+  width: 12px !important;
+  height: 12px !important;
+  margin-left: 2px;
+  margin-right: 2px;
+}