feat: add pipeline preview action

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx

@@ -0,0 +1,43 @@
+import { EyeFilled } from '@ant-design/icons';
+import { Divider, Modal } from 'antd';
+import { useState } from 'react';
+import { PipelineData } from 'types/api/pipeline/def';
+
+import { iconStyle } from '../../../config';
+
+function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
+	const [previewKey, setPreviewKey] = useState<string | null>(null);
+	const isModalOpen = Boolean(previewKey);
+
+	const openModal = (): void => setPreviewKey(String(Math.random()));
+	const closeModal = (): void => setPreviewKey(null);
+
+	console.log(pipeline);
+
+	// Can only preview pipelines with some processors in them
+	if ((pipeline?.config?.length || 0) < 1) {
+		return null;
+	}
+
+	return (
+		<>
+			<EyeFilled style={iconStyle} onClick={openModal} />
+			<Modal
+				open={isModalOpen}
+				onCancel={closeModal}
+				centered
+				width={800}
+				footer={null}
+				title={`Logs processing preview for ${pipeline.name}`}
+			>
+				<Divider />
+				{/* isModalOpen && <PipelinePreview pipeline={pipeline} key={previewKey} /> */}
+			</Modal>
+		</>
+	);
+}
+
+export interface PreviewActionProps {
+	pipeline: PipelineData;
+}
+export default PreviewAction;

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions.tsx → frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/index.tsx

@@ -1,20 +1,26 @@
-import { IconListStyle } from '../styles';
-import DeleteAction from './TableActions/DeleteAction';
-import EditAction from './TableActions/EditAction';
+import { PipelineData } from 'types/api/pipeline/def';
+
+import { IconListStyle } from '../../styles';
+import DeleteAction from '../TableActions/DeleteAction';
+import EditAction from '../TableActions/EditAction';
+import PreviewAction from './components/PreviewAction';
 
 function PipelineActions({
+	pipeline,
 	editAction,
 	deleteAction,
 }: PipelineActionsProps): JSX.Element {
 	return (
 		<IconListStyle>
+			<PreviewAction pipeline={pipeline} />
 			<EditAction editAction={editAction} isPipelineAction />
 			<DeleteAction deleteAction={deleteAction} isPipelineAction />
 		</IconListStyle>
 	);
 }
 
 export interface PipelineActionsProps {
+	pipeline: PipelineData;
 	editAction: VoidFunction;
 	deleteAction: VoidFunction;
 }

frontend/src/container/PipelinePage/PipelineListsView/index.tsx

@@ -172,6 +172,7 @@ function PipelineListsView({
 					align: 'center',
 					render: (_value, record): JSX.Element => (
 						<PipelineActions
+							pipeline={record}
 							editAction={pipelineEditAction(record)}
 							deleteAction={pipelineDeleteAction(record)}
 						/>

frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx

@@ -1,18 +1,24 @@
 import { render } from '@testing-library/react';
-import PipelineActions from 'container/PipelinePage/PipelineListsView/TableComponents/PipelineActions';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
+import { pipelineMockData } from '../mocks/pipeline';
+import PipelineActions from '../PipelineListsView/TableComponents/PipelineActions';
+
 describe('PipelinePage container test', () => {
 	it('should render PipelineActions section', () => {
 		const { asFragment } = render(
 			<MemoryRouter>
 				<Provider store={store}>
 					<I18nextProvider i18n={i18n}>
-						<PipelineActions editAction={jest.fn()} deleteAction={jest.fn()} />
+						<PipelineActions
+							pipeline={pipelineMockData[0]}
+							editAction={jest.fn()}
+							deleteAction={jest.fn()}
+						/>
 					</I18nextProvider>
 				</Provider>
 			</MemoryRouter>,