From d65d75ef69502d36a940270c25b8cac61035c8f6 Mon Sep 17 00:00:00 2001
From: Raj Kamal Singh <1133322+raj-k-singh@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:26:25 +0530
Subject: [PATCH] Fix: FE: pipelines: should be able to exit edit mode without
 making a change (#4335)

* fix: show cancel button on entering edit mode before any changes have been made

* chore: align pipeline page save/cancel buttons to the right
---
 .../PipelineListsView/PipelineListsView.tsx   |  3 ++-
 .../PipelineListsView/SaveConfigButton.tsx    | 20 +++++++++++--------
 .../PipelinePage/PipelineListsView/styles.ts  |  1 +
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
index 058c16761b..c4494569df 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
@@ -506,8 +506,9 @@ function PipelineListsView({
 								pagination={false}
 							/>
 						</DndProvider>
-						{showSaveButton && (
+						{isEditingActionMode && (
 							<SaveConfigButton
+								showSaveButton={Boolean(showSaveButton)}
 								onSaveConfigurationHandler={onSaveConfigurationHandler}
 								onCancelConfigurationHandler={onCancelConfigurationHandler}
 							/>
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/SaveConfigButton.tsx b/frontend/src/container/PipelinePage/PipelineListsView/SaveConfigButton.tsx
index e7aa0ecedc..700665b957 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/SaveConfigButton.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/SaveConfigButton.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { SaveConfigWrapper } from './styles';
 
 function SaveConfigButton({
+	showSaveButton,
 	onSaveConfigurationHandler,
 	onCancelConfigurationHandler,
 }: SaveConfigButtonTypes): JSX.Element {
@@ -11,14 +12,16 @@ function SaveConfigButton({
 
 	return (
 		<SaveConfigWrapper>
-			<Button
-				key="submit"
-				type="primary"
-				htmlType="submit"
-				onClick={onSaveConfigurationHandler}
-			>
-				{t('save_configuration')}
-			</Button>
+			{showSaveButton && (
+				<Button
+					key="submit"
+					type="primary"
+					htmlType="submit"
+					onClick={onSaveConfigurationHandler}
+				>
+					{t('save_configuration')}
+				</Button>
+			)}
 			<Button key="cancel" onClick={onCancelConfigurationHandler}>
 				{t('cancel')}
 			</Button>
@@ -26,6 +29,7 @@ function SaveConfigButton({
 	);
 }
 export interface SaveConfigButtonTypes {
+	showSaveButton: boolean;
 	onSaveConfigurationHandler: VoidFunction;
 	onCancelConfigurationHandler: VoidFunction;
 }
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/styles.ts b/frontend/src/container/PipelinePage/PipelineListsView/styles.ts
index 0b3ddbff3d..d96eb7cd93 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/styles.ts
+++ b/frontend/src/container/PipelinePage/PipelineListsView/styles.ts
@@ -108,6 +108,7 @@ export const ModeAndConfigWrapper = styled.div`
 
 export const SaveConfigWrapper = styled.div`
 	display: flex;
+	justify-content: flex-end;
 	gap: 0.938rem;
 	margin-top: 1.25rem;
 `;