From 53a78211efbd5752d7e5792e3d0e4eeb61c10a0e Mon Sep 17 00:00:00 2001
From: Raj Kamal Singh <1133322+rkssisodiya@users.noreply.github.com>
Date: Thu, 19 Oct 2023 15:18:32 +0530
Subject: [PATCH] chore: Show pipeline preview action in more contexts (#3758)

* chore: pass dirty pipeline to preview action when editing

* chore: show pipeline actions when clicking New Pipeline for the 1st time

* chore: ensure pipeline previews work for disabled pipelines too

* chore: show preview action on pipelines when not editing

* chore: update snapshot for pipeline lists view
---
 .../Layouts/Pipeline/CreatePipelineButton.tsx  | 16 ++++++++--------
 .../PipelineSimulationResult/index.tsx         |  6 +++++-
 .../PipelinePage/PipelineListsView/index.tsx   | 18 +++++++++++++++++-
 .../PipelinePageLayout.test.tsx.snap           |  8 +++++++-
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
index 68d12f066b..04358c39b7 100644
--- a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
+++ b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
@@ -1,6 +1,6 @@
 import { EditFilled, PlusOutlined } from '@ant-design/icons';
 import TextToolTip from 'components/TextToolTip';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def';
 
@@ -21,11 +21,11 @@ function CreatePipelineButton({
 	);
 	const isDisabled = isActionMode === ActionMode.Editing;
 
-	const actionHandler = useCallback(
-		(action: string, setStateFunc: (action: string) => void) => (): void =>
-			setStateFunc(action),
-		[],
-	);
+	const onEnterEditMode = (): void => setActionMode(ActionMode.Editing);
+	const onAddNewPipeline = (): void => {
+		setActionMode(ActionMode.Editing);
+		setActionType(ActionType.AddPipeline);
+	};
 
 	return (
 		<ButtonContainer>
@@ -33,7 +33,7 @@ function CreatePipelineButton({
 			{isAddNewPipelineVisible && (
 				<CustomButton
 					icon={<EditFilled />}
-					onClick={actionHandler(ActionMode.Editing, setActionMode)}
+					onClick={onEnterEditMode}
 					disabled={isDisabled}
 				>
 					{t('enter_edit_mode')}
@@ -42,7 +42,7 @@ function CreatePipelineButton({
 			{!isAddNewPipelineVisible && (
 				<CustomButton
 					icon={<PlusOutlined />}
-					onClick={actionHandler(ActionType.AddPipeline, setActionType)}
+					onClick={onAddNewPipeline}
 					type="primary"
 				>
 					{t('new_pipeline')}
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview/components/PipelineSimulationResult/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview/components/PipelineSimulationResult/index.tsx
index 438d529e5a..ba313f4672 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview/components/PipelineSimulationResult/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview/components/PipelineSimulationResult/index.tsx
@@ -11,7 +11,11 @@ function PipelineSimulationResult({
 	pipeline,
 }: PipelineSimulationResultProps): JSX.Element {
 	const { isLoading, outputLogs, isError, errorMsg } = usePipelinePreview({
-		pipeline,
+		pipeline: {
+			...pipeline,
+			// Ensure disabled pipelines can also be previewed
+			enabled: true,
+		},
 		inputLogs,
 	});
 
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx
index 00a512d3e0..62a49b26b1 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx
@@ -32,6 +32,7 @@ import {
 } from './styles';
 import DragAction from './TableComponents/DragAction';
 import PipelineActions from './TableComponents/PipelineActions';
+import PreviewAction from './TableComponents/PipelineActions/components/PreviewAction';
 import TableExpandIcon from './TableComponents/TableExpandIcon';
 import {
 	getDataOnSearch,
@@ -172,7 +173,11 @@ function PipelineListsView({
 					align: 'center',
 					render: (_value, record): JSX.Element => (
 						<PipelineActions
-							pipeline={record}
+							pipeline={
+								expandedPipelineData?.id === record.id
+									? (expandedPipelineData as PipelineData)
+									: record
+							}
 							editAction={pipelineEditAction(record)}
 							deleteAction={pipelineDeleteAction(record)}
 						/>
@@ -192,6 +197,16 @@ function PipelineListsView({
 					),
 				},
 			);
+		} else {
+			fieldColumns.push({
+				title: 'Actions',
+				dataIndex: 'smartAction',
+				key: 'smartAction',
+				align: 'center',
+				render: (_value, record): JSX.Element => (
+					<PreviewAction pipeline={record} />
+				),
+			});
 		}
 		return fieldColumns;
 	}, [
@@ -199,6 +214,7 @@ function PipelineListsView({
 		pipelineEditAction,
 		pipelineDeleteAction,
 		onSwitchPipelineChange,
+		expandedPipelineData,
 	]);
 
 	const updatePipelineSequence = useCallback(
diff --git a/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap b/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
index fc3092c4f6..a6a0bd00fd 100644
--- a/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
+++ b/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
@@ -250,6 +250,12 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
                       >
                         Edited By
                       </th>
+                      <th
+                        class="ant-table-cell"
+                        style="text-align: center;"
+                      >
+                        Actions
+                      </th>
                     </tr>
                   </thead>
                   <tbody
@@ -261,7 +267,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
                     >
                       <td
                         class="ant-table-cell"
-                        colspan="6"
+                        colspan="7"
                       >
                         <div
                           class="css-dev-only-do-not-override-1i536d8 ant-empty ant-empty-normal"