Fe/feature/ri 7687 adjust rdi config layout

redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

@@ -187,6 +187,7 @@ export const flexItemStyles = {
   `,
   grow: css`
     flex-basis: 0;
+    min-width: 0;
   `,
   growSizes: {
     '1': css`

redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx

@@ -1,4 +1,9 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor'
 import cx from 'classnames'
 import { merge } from 'lodash'
@@ -38,6 +43,7 @@ export interface CommonProps {
   onSubmitDedicatedEditor?: (langId: DSL) => void
   onCloseDedicatedEditor?: (langId: DSL) => void
   'data-testid'?: string
+  fullHeight?: boolean
 }
 
 export interface Props extends CommonProps {
@@ -75,6 +81,7 @@ const MonacoEditor = (props: Props) => {
     onSubmitDedicatedEditor,
     onCloseDedicatedEditor,
     'data-testid': dataTestId = 'monaco-editor',
+    fullHeight,
   } = props
 
   let contribution: Nullable<ISnippetController> = null
@@ -256,6 +263,7 @@ const MonacoEditor = (props: Props) => {
         disabled,
         [styles.isEditing]: isEditing && readOnly,
       })}
+      style={fullHeight ? { flex: '1 1 auto' } : undefined}
     >
       <InlineItemEditor
         onApply={handleApply}
@@ -268,6 +276,7 @@ const MonacoEditor = (props: Props) => {
           className={cx('inlineMonacoEditor', editorWrapperClassName)}
           data-testid={`wrapper-${dataTestId}`}
           ref={input}
+          style={fullHeight ? { height: '100%' } : undefined}
         >
           <ReactMonacoEditor
             language={language}

redisinsight/ui/src/constants/links.ts

@@ -17,7 +17,7 @@ export const EXTERNAL_LINKS = {
   rdiQuickStart:
     'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/quick-start-guide/',
   rdiPipeline:
-    'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/data-pipelines/',
+    'https://redis.io/docs/latest/integrate/redis-data-integration/data-pipelines/',
   rdiPipelineTransforms:
     'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/transform-examples/',
   pubSub: 'https://redis.io/docs/latest/commands/psubscribe/',

redisinsight/ui/src/pages/rdi/pipeline-management/PipelineManagementPage.tsx

@@ -21,7 +21,7 @@ import Navigation from 'uiSrc/pages/rdi/pipeline-management/components/navigatio
 import { removeInfiniteNotification } from 'uiSrc/slices/app/notifications'
 import { InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
 import PipelinePageRouter from './PipelineManagementPageRouter'
-import styles from './styles.module.scss'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 
 export interface Props {
   routes: IRoute[]
@@ -81,11 +81,15 @@ const PipelineManagementPage = ({ routes = [] }: Props) => {
   }, [pathname, lastViewedPage])
 
   return (
-    <div className={styles.wrapper}>
-      <Navigation />
+    <Row>
+      <FlexItem>
+        <Navigation />
+      </FlexItem>
       <SourcePipelineDialog />
-      <PipelinePageRouter routes={routes} />
-    </div>
+      <FlexItem grow>
+        <PipelinePageRouter routes={routes} />
+      </FlexItem>
+    </Row>
   )
 }
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, within } from 'uiSrc/utils/test-utils'
+import { render, screen } from 'uiSrc/utils/test-utils'
 import { TransformGroupResult } from 'uiSrc/slices/interfaces'
 
 import TestConnectionsLog from './TestConnectionsLog'
@@ -17,99 +17,23 @@ describe('TestConnectionsLog', () => {
     }
     render(<TestConnectionsLog data={mockedData} />)
 
-    expect(screen.getByTestId('failed-connections-closed')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId('success-connections-closed'),
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByTestId('mixed-connections-closed'),
-    ).not.toBeInTheDocument()
+    expect(screen.queryByText('Successful')).not.toBeInTheDocument()
+    expect(screen.queryByText('some error')).toBeInTheDocument()
   })
 
-  it('should render the correct status when only successful connections exist', () => {
-    const mockedData: TransformGroupResult = {
-      fail: [],
-      success: [{ target: 'localhost:1233' }],
-    }
-    render(<TestConnectionsLog data={mockedData} />)
-
-    expect(screen.getByTestId('success-connections-closed')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId('failed-connections-closed'),
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByTestId('mixed-connections-closed'),
-    ).not.toBeInTheDocument()
-  })
-
-  it('should expand and collapse successful connections', () => {
-    const mockedData: TransformGroupResult = {
-      fail: [],
-      success: [{ target: 'localhost:1233' }],
-    }
-    render(<TestConnectionsLog data={mockedData} />)
-
-    fireEvent.click(
-      within(screen.getByTestId('success-connections-closed')).getByRole(
-        'button',
-      ),
-    )
-    expect(screen.getByTestId('success-connections-open')).toBeInTheDocument()
-  })
-
-  it('should display the correct number of successful connections', () => {
-    const mockedData: TransformGroupResult = {
-      fail: [],
-      success: [{ target: 'localhost:1233' }, { target: 'localhost:1234' }],
-    }
-    render(<TestConnectionsLog data={mockedData} />)
-
-    expect(
-      within(screen.getByTestId('success-connections-closed')).getByTestId(
-        'number-of-connections',
-      ),
-    ).toHaveTextContent('2')
-  })
-
-  it('should display "Partially connected" when there are both successful and failed connections', () => {
-    const mockedData: TransformGroupResult = {
-      fail: [{ target: 'localhost:1233', error: 'some error' }],
-      success: [{ target: 'localhost:1234' }],
-    }
-    render(<TestConnectionsLog data={mockedData} />)
-
-    expect(screen.getByText('Partially connected:')).toBeInTheDocument()
-  })
-
-  it('should expand and collapse the "Mixed" state correctly', () => {
-    const mockedData: TransformGroupResult = {
-      fail: [{ target: 'localhost:1233', error: 'some error' }],
-      success: [{ target: 'localhost:1234' }],
-    }
-    render(<TestConnectionsLog data={mockedData} />)
-
-    fireEvent.click(
-      within(screen.getByTestId('mixed-connections-closed')).getByRole(
-        'button',
-      ),
-    )
-    expect(screen.getByTestId('mixed-connections-open')).toBeInTheDocument()
-  })
-
-  it('should display the correct number of connections for the "Mixed" state', () => {
+  it('should render all results', () => {
     const mockedData: TransformGroupResult = {
       fail: [
         { target: 'localhost:1233', error: 'some error' },
         { target: 'localhost:1234', error: 'timeout' },
       ],
       success: [{ target: 'localhost:1235' }],
     }
+
     render(<TestConnectionsLog data={mockedData} />)
 
-    expect(
-      within(screen.getByTestId('mixed-connections-closed')).getByTestId(
-        'number-of-connections',
-      ),
-    ).toHaveTextContent('3') // 2 failed + 1 success
+    expect(screen.queryAllByText('Successful').length).toEqual(1)
+    expect(screen.queryAllByText('some error').length).toEqual(1)
+    expect(screen.queryAllByText('timeout').length).toEqual(1)
   })
 })

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.tsx

@@ -1,91 +1,51 @@
-import cx from 'classnames'
-import React, { useState } from 'react'
-
-import { RICollapsibleNavGroup } from 'uiSrc/components/base/display'
-import { TransformGroupResult } from 'uiSrc/slices/interfaces'
-import TestConnectionsTable from 'uiSrc/pages/rdi/pipeline-management/components/test-connections-table'
-
-import styles from './styles.module.scss'
-
-enum ResultsStatus {
-  Success = 'success',
-  Failed = 'failed',
-  Mixed = 'mixed',
-}
+import React from 'react'
+import {
+  IRdiConnectionResult,
+  TransformGroupResult,
+} from 'uiSrc/slices/interfaces'
+import { StyledRdiAnalyticsTable } from 'uiSrc/pages/rdi/statistics/styles'
+import { ColumnDefinition, Table } from 'uiSrc/components/base/layout/table'
+import { RiTooltip } from 'uiSrc/components'
+
+const columns: ColumnDefinition<IRdiConnectionResult>[] = [
+  {
+    header: 'Endpoint',
+    id: 'endpoint',
+    accessorKey: 'target',
+  },
+  {
+    header: 'Results',
+    id: 'results',
+    accessorKey: 'error',
+    cell: ({
+      row: {
+        original: { error: error },
+      },
+    }) => {
+      if (error) {
+        return <RiTooltip content={error}>{error}</RiTooltip>
+      }
+      return 'Successful'
+    },
+  },
+]
 
 export interface Props {
   data: TransformGroupResult
 }
 
-const getStatus = (data: TransformGroupResult) => {
-  if (data.fail.length && data.success.length) {
-    return ResultsStatus.Mixed
-  }
-
-  if (data.fail.length) {
-    return ResultsStatus.Failed
-  }
-
-  return ResultsStatus.Success
-}
-
-const statusToLabel = {
-  [ResultsStatus.Success]: 'Connected successfully',
-  [ResultsStatus.Failed]: 'Failed to connect',
-  [ResultsStatus.Mixed]: 'Partially connected',
-}
-
 const TestConnectionsLog = (props: Props) => {
   const { data } = props
   const statusData = [...data.success, ...data.fail]
-  const status = getStatus(data)
-  const [openedNav, setOpenedNav] = useState<string>('')
-
-  const onToggle = (length: number = 0, isOpen: boolean, name: string) => {
-    if (length === 0) return
-    setOpenedNav(isOpen ? name : '')
-  }
-
-  const CollapsibleNavTitle = ({
-    title,
-    length = 0,
-  }: {
-    title: string
-    length: number
-  }) => (
-    <div className={styles.collapsibleNavTitle} style={{ margin: 0 }}>
-      <span data-testid="nav-group-title">{title}:</span>
-      <span data-testid="number-of-connections">{length}</span>
-    </div>
-  )
-
-  const navTitle = statusToLabel[status]
-
-  const getNavGroupState = (name: ResultsStatus) =>
-    openedNav === name ? 'open' : 'closed'
-
-  const id = `${status}-connections-${getNavGroupState(status)}`
 
   return (
-    <RICollapsibleNavGroup
-      title={
-        <CollapsibleNavTitle
-          title={navTitle}
-          length={statusData?.length ?? 0}
-        />
-      }
-      className={cx(styles.collapsibleNav, status, {
-        [styles.disabled]: !statusData?.length,
-      })}
-      isCollapsible
-      initialIsOpen={false}
-      onToggle={(isOpen) => onToggle(statusData?.length, isOpen, status)}
-      forceState={getNavGroupState(status)}
-      data-testid={id}
-      id={id}
-    >
-      <TestConnectionsTable data={statusData ?? []} />
-    </RICollapsibleNavGroup>
+    <>
+      <StyledRdiAnalyticsTable columns={columns} data={statusData} stripedRows>
+        <Table.Root></Table.Root>
+        <Table.Header />
+        <Table.Body />
+      </StyledRdiAnalyticsTable>
+    </>
   )
 }