RI-7714 Replace the Pub/Sub table with Redis UI

redisinsight/ui/src/pages/pub-sub/components/messages-list/MessageListWrapper.styles.tsx

@@ -1,15 +1,6 @@
 import styled from 'styled-components'
 import { Col } from 'uiSrc/components/base/layout/flex'
 
-export const InnerContainer = styled(Col)`
-  background-color: ${({ theme }) =>
-    theme.semantic.color.background.neutral300};
-  border-radius: ${({ theme }) => theme.core.space.space100};
-  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
-  padding: ${({ theme }) => theme.core.space.space300};
-  margin: ${({ theme }) => theme.core.space.space200};
-`
-
 export const Wrapper = styled(Col)`
   margin: ${({ theme }) => theme.core.space.space200};
   /* 

redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.config.tsx

@@ -0,0 +1,31 @@
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP,
+  PubSubTableColumn,
+} from './MessagesListTable.constants'
+import MessagesListTableCellTimestamp from './components/MessagesListTableCellTimestamp'
+
+export const PUB_SUB_TABLE_COLUMNS: ColumnDef<IMessage>[] = [
+  {
+    id: PubSubTableColumn.Timestamp,
+    accessorKey: PubSubTableColumn.Timestamp,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(
+      PubSubTableColumn.Timestamp,
+    ),
+    size: 30,
+    enableSorting: true,
+    cell: MessagesListTableCellTimestamp,
+  },
+  {
+    id: PubSubTableColumn.Channel,
+    accessorKey: PubSubTableColumn.Channel,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(PubSubTableColumn.Channel),
+    size: 40,
+  },
+  {
+    id: PubSubTableColumn.Message,
+    accessorKey: PubSubTableColumn.Message,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(PubSubTableColumn.Message),
+  },
+]

redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.constants.ts

@@ -0,0 +1,14 @@
+export enum PubSubTableColumn {
+  Timestamp = 'time',
+  Channel = 'channel',
+  Message = 'message',
+}
+
+export const PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP = new Map<
+  PubSubTableColumn,
+  string
+>([
+  [PubSubTableColumn.Timestamp, 'Timestamp'],
+  [PubSubTableColumn.Channel, 'Channel'],
+  [PubSubTableColumn.Message, 'Message'],
+])

redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.types.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react'
+import { CellContext } from 'uiSrc/components/base/layout/table'
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+
+export type IMessagesListTableCell = (
+  props: CellContext<IMessage, unknown>,
+) => ReactElement<any, any> | null

redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/components/MessagesListTableCellTimestamp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { FormatedDate } from 'uiSrc/components'
+import { IMessagesListTableCell } from '../MessagesListTable.types'
+
+const MessagesListTableCellTimestamp: IMessagesListTableCell = ({ row }) => {
+  const date = row.original.time * 1000
+
+  return <FormatedDate date={date} />
+}
+
+export default MessagesListTableCellTimestamp