Merge pull request #3156 from RedisInsight/feature/RI-5531_stream-entries

Feature/ri 5531 stream entries

Author: mariasergeenko

redisinsight/api/src/modules/browser/stream/services/stream.service.ts

@@ -29,6 +29,7 @@ import { ClientMetadata } from 'src/common/models';
 import { DatabaseClientFactory } from 'src/modules/database/providers/database.client.factory';
 import { RedisClient } from 'src/modules/redis/client';
 import { checkIfKeyExists, checkIfKeyNotExists } from 'src/modules/browser/utils';
+import { convertArrayReplyToObject } from 'src/modules/redis/utils';
 
 @Injectable()
 export class StreamService {
@@ -55,10 +56,10 @@ export class StreamService {
 
       await checkIfKeyNotExists(keyName, client);
 
-      const info = await client.sendCommand([
+      const info = convertArrayReplyToObject(await client.sendCommand([
         BrowserToolStreamCommands.XInfoStream,
         keyName,
-      ]);
+      ]) as string[]);
 
       let entries = [];
       if (sortOrder && sortOrder === SortOrder.Asc) {
@@ -71,10 +72,10 @@ export class StreamService {
 
       return plainToClass(GetStreamEntriesResponse, {
         keyName,
-        total: info[1],
-        lastGeneratedId: info[7].toString(),
-        firstEntry: StreamService.formatArrayToDto(info[11]),
-        lastEntry: StreamService.formatArrayToDto(info[13]),
+        total: info['length'],
+        lastGeneratedId: info['last-generated-id'].toString(),
+        firstEntry: StreamService.formatArrayToDto(info['first-entry']),
+        lastEntry: StreamService.formatArrayToDto(info['last-entry']),
         entries,
       });
     } catch (error) {

redisinsight/api/src/modules/redis/utils/reply.util.ts

@@ -26,7 +26,7 @@ export const convertArrayReplyToObject = (input: string[]): { [key: string]: any
   2,
 ).reduce((prev: any, current: string[]) => {
   const [key, value] = current;
-  return { ...prev, [key.toLowerCase()]: value };
+  return { ...prev, [key.toString().toLowerCase()]: value };
 }, {});
 
 /**

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/AddStreamEntries.spec.tsx

@@ -1,13 +1,53 @@
 import React from 'react'
 import { mock } from 'ts-mockito'
-import { render, screen } from 'uiSrc/utils/test-utils'
+import { render, screen, act, fireEvent } from 'uiSrc/utils/test-utils'
 
+import { streamDataSelector } from 'uiSrc/slices/browser/stream'
 import AddStreamEntries, { Props } from './AddStreamEntries'
 
 const mockedProps = mock<Props>()
 
+jest.mock('uiSrc/slices/browser/stream', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/stream'),
+  streamDataSelector: jest.fn().mockReturnValue({})
+}))
+
 describe('AddStreamEntries', () => {
   it('should render', () => {
     expect(render(<AddStreamEntries {...mockedProps} />)).toBeTruthy()
   })
+
+  it('should be valid by default', () => {
+    render(<AddStreamEntries {...mockedProps} />)
+
+    expect(screen.getByTestId('save-elements-btn')).not.toBeDisabled()
+  })
+
+  it('should properly validate/show error', async () => {
+    (streamDataSelector as jest.Mock).mockReturnValue({
+      lastGeneratedId: '100-0'
+    })
+    render(<AddStreamEntries {...mockedProps} />)
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('entryId'), { target: { value: '99-0' } })
+    })
+
+    expect(screen.getByTestId('stream-entry-error')).toHaveTextContent('Must be greater than the last ID')
+    expect(screen.getByTestId('save-elements-btn')).toBeDisabled()
+  })
+
+  it('should properly validate', async () => {
+    (streamDataSelector as jest.Mock).mockReturnValue({
+      lastGeneratedId: '100-0'
+    })
+    render(<AddStreamEntries {...mockedProps} />)
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('entryId'), { target: { value: '101-0' } })
+    })
+
+    expect(screen.queryByTestId('stream-entry-error')).not.toBeInTheDocument()
+    expect(screen.getByTestId('save-elements-btn')).not.toBeDisabled()
+  })
 })

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/AddStreamEntries.tsx

@@ -22,7 +22,7 @@ export interface Props {
 
 const AddStreamEntries = (props: Props) => {
   const { closePanel } = props
-  const { lastEntry } = useSelector(streamDataSelector)
+  const { lastGeneratedId } = useSelector(streamDataSelector)
   const { name: keyName = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
   const { viewType } = useSelector(keysSelector)
   const { id: instanceId } = useSelector(connectedInstanceSelector)
@@ -49,7 +49,7 @@ const AddStreamEntries = (props: Props) => {
       return
     }
 
-    if (!lastEntry?.id) {
+    if (!lastGeneratedId) {
       setEntryIdError('')
       return
     }
@@ -59,7 +59,7 @@ const AddStreamEntries = (props: Props) => {
       return
     }
 
-    const [lastIdTimestamp, lastId] = lastEntry.id?.split('-')
+    const [lastIdTimestamp, lastId] = lastGeneratedId.split('-')
     const [idTimestamp, id] = entryID?.split('-')
 
     if (toNumber(idTimestamp) > toNumber(lastIdTimestamp)) {

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx

@@ -142,7 +142,7 @@ const StreamEntryFields = (props: Props) => {
           />
         </EuiFormRow>
         {!showEntryError && <span className={styles.timestampText}>Timestamp - Sequence Number or *</span>}
-        {showEntryError && <span className={styles.error}>{entryIdError}</span>}
+        {showEntryError && <span className={styles.error} data-testid="stream-entry-error">{entryIdError}</span>}
       </div>
 
       <div className={styles.fieldsWrapper}>