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

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(
+	const onEnterEditMode = (): void => setActionMode(ActionMode.Editing);
-		(action: string, setStateFunc: (action: string) => void) => (): void =>
+	const onAddNewPipeline = (): void => {
-			setStateFunc(action),
+		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')}

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,
 	});
 

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(

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"