chore: trace funnels bugfixes/improvements (#8114)

* fix: refetch funnel steps overview on clicking refresh

* chore: temporarily hide latency pointer from funnel steps

* chore: remove the existing filters of a step on clicking replace button

* fix(useLocalStorage): stabilize initialValue handling to prevent unnecessary re-renders

* chore: remove p99_latency references from funnel metrics

* fix(useFunnelMetrics): ensure latency type defaults to P99 when undefined

Author: ahmadshaheer

frontend/src/api/traceFunnels/index.ts

@@ -196,8 +196,6 @@ export interface FunnelOverviewResponse {
 			avg_rate: number;
 			conversion_rate: number | null;
 			errors: number;
-			// TODO(shaheer): remove p99_latency once we have support for latency
-			p99_latency: number;
 			latency: number;
 		};
 	}>;

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -16,11 +16,51 @@
 
 		&-body {
 			padding: 14px 16px !important;
+			padding-bottom: 0 !important;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
 		}
-	}
-	&--details {
-		.ant-modal-content {
-			height: 710px;
+
+		&-footer {
+			margin-top: 0;
+			background: var(--bg-ink-400);
+			border-top: 1px solid var(--bg-slate-500);
+			padding: 16px !important;
+			.add-span-to-funnel-modal {
+				&__save-button {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 4px;
+					color: var(--bg-vanilla-100);
+					font-size: 12px;
+					font-weight: 500;
+					line-height: 24px;
+					width: 135px;
+
+					.ant-btn-icon {
+						display: flex;
+					}
+					&:disabled {
+						color: var(--bg-vanilla-400);
+						.ant-btn-icon {
+							svg {
+								stroke: var(--bg-vanilla-400);
+							}
+						}
+					}
+				}
+				&__discard-button {
+					background: var(--bg-slate-500);
+				}
+			}
+			.ant-btn {
+				border-radius: 2px;
+				padding: 4px 8px;
+				margin: 0 !important;
+				border: none;
+				box-shadow: none;
+			}
 		}
 	}
 }

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -9,14 +9,18 @@ import {
 	useFunnelDetails,
 	useFunnelsList,
 } from 'hooks/TracesFunnels/useFunnels';
-import { ArrowLeft, Plus, Search } from 'lucide-react';
+import { isEqual } from 'lodash-es';
+import { ArrowLeft, Check, Plus, Search } from 'lucide-react';
 import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
 import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
 import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
 import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
-import { FunnelProvider } from 'pages/TracesFunnels/FunnelContext';
+import {
+	FunnelProvider,
+	useFunnelContext,
+} from 'pages/TracesFunnels/FunnelContext';
 import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
-import { ChangeEvent, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { Span } from 'types/api/trace/getTraceV2';
 import { FunnelData } from 'types/api/traceFunnels';
 
@@ -28,21 +32,54 @@ enum ModalView {
 function FunnelDetailsView({
 	funnel,
 	span,
+	triggerAutoSave,
+	showNotifications,
+	onChangesDetected,
+	triggerDiscard,
 }: {
 	funnel: FunnelData;
 	span: Span;
+	triggerAutoSave: boolean;
+	showNotifications: boolean;
+	onChangesDetected: (hasChanges: boolean) => void;
+	triggerDiscard: boolean;
 }): JSX.Element {
+	const { handleRestoreSteps, steps } = useFunnelContext();
+
+	// Track changes between current steps and original steps
+	useEffect(() => {
+		const hasChanges = !isEqual(steps, funnel.steps);
+		if (onChangesDetected) {
+			onChangesDetected(hasChanges);
+		}
+	}, [steps, funnel.steps, onChangesDetected]);
+
+	// Handle discard when triggered from parent
+	useEffect(() => {
+		if (triggerDiscard && funnel.steps) {
+			handleRestoreSteps(funnel.steps);
+		}
+	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
+
 	return (
 		<div className="add-span-to-funnel-modal__details">
 			<FunnelListItem
 				funnel={funnel}
 				shouldRedirectToTracesListOnDeleteSuccess={false}
 				isSpanDetailsPage
 			/>
-			<FunnelConfiguration funnel={funnel} isTraceDetailsPage span={span} />
+			<FunnelConfiguration
+				funnel={funnel}
+				isTraceDetailsPage
+				span={span}
+				disableAutoSave
+				triggerAutoSave={triggerAutoSave}
+				showNotifications={showNotifications}
+			/>
 		</div>
 	);
 }
+
 interface AddSpanToFunnelModalProps {
 	isOpen: boolean;
 	onClose: () => void;
@@ -60,6 +97,9 @@ function AddSpanToFunnelModal({
 		undefined,
 	);
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
+	const [triggerSave, setTriggerSave] = useState<boolean>(false);
+	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
+	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
 
 	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
 		setSearchQuery(e.target.value);
@@ -92,12 +132,26 @@ function AddSpanToFunnelModal({
 	const handleBack = (): void => {
 		setActiveView(ModalView.LIST);
 		setSelectedFunnelId(undefined);
+		setIsUnsavedChanges(false);
+		setTriggerSave(false);
 	};
 
 	const handleCreateNewClick = (): void => {
 		setIsCreateModalOpen(true);
 	};
 
+	const handleSaveFunnel = (): void => {
+		setTriggerSave(true);
+		// Reset trigger after a brief moment to allow the save to be processed
+		setTimeout(() => setTriggerSave(false), 100);
+	};
+
+	const handleDiscard = (): void => {
+		setTriggerDiscard(true);
+		// Reset trigger after a brief moment
+		setTimeout(() => setTriggerDiscard(false), 100);
+	};
+
 	const renderListView = (): JSX.Element => (
 		<div className="add-span-to-funnel-modal">
 			{!!filteredData?.length && (
@@ -156,7 +210,14 @@ function AddSpanToFunnelModal({
 					<div className="traces-funnel-details__steps-config">
 						{selectedFunnelId && funnelDetails?.payload && (
 							<FunnelProvider funnelId={selectedFunnelId}>
-								<FunnelDetailsView funnel={funnelDetails.payload} span={span} />
+								<FunnelDetailsView
+									funnel={funnelDetails.payload}
+									span={span}
+									triggerAutoSave={triggerSave}
+									showNotifications
+									onChangesDetected={setIsUnsavedChanges}
+									triggerDiscard={triggerDiscard}
+								/>
 							</FunnelProvider>
 						)}
 					</div>
@@ -175,18 +236,43 @@ function AddSpanToFunnelModal({
 				'add-span-to-funnel-modal-container--details':
 					activeView === ModalView.DETAILS,
 			})}
-			okText="Save Funnel"
 			footer={
-				activeView === ModalView.LIST && !!filteredData?.length ? (
-					<Button
-						type="default"
-						className="add-span-to-funnel-modal__create-button"
-						onClick={handleCreateNewClick}
-						icon={<Plus size={14} />}
-					>
-						Create new funnel
-					</Button>
-				) : null
+				activeView === ModalView.DETAILS
+					? [
+							<Button key="close" onClick={onClose}>
+								Close
+							</Button>,
+							<Button
+								type="default"
+								key="discard"
+								onClick={handleDiscard}
+								className="add-span-to-funnel-modal__discard-button"
+								disabled={!isUnsavedChanges}
+							>
+								Discard
+							</Button>,
+							<Button
+								key="save"
+								type="primary"
+								className="add-span-to-funnel-modal__save-button"
+								onClick={handleSaveFunnel}
+								disabled={!isUnsavedChanges}
+								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
+							>
+								Save Funnel
+							</Button>,
+					  ]
+					: [
+							<Button
+								key="create"
+								type="default"
+								className="add-span-to-funnel-modal__create-button"
+								onClick={handleCreateNewClick}
+								icon={<Plus size={14} />}
+							>
+								Create new funnel
+							</Button>,
+					  ]
 			}
 		>
 			{activeView === ModalView.LIST