refactor: address review comments

Author: ahmadshaheer

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -9,6 +9,7 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 export interface SelectOptionConfig {
@@ -38,6 +39,37 @@ export function FilterSelect({
 	const history = useHistory();
 	const location = useLocation();
 
+	// Use externally provided `values` if `shouldSetQueryParams` is false, otherwise get from URL params.
+	const selectValue =
+		!shouldSetQueryParams && !!values?.length
+			? values
+			: getValuesFromQueryParams(queryParam, urlQuery) || [];
+
+	const handleSelectChange = useCallback(
+		(value: string | string[]): void => {
+			handleSearch('');
+			if (shouldSetQueryParams) {
+				setQueryParamsFromOptions(
+					value as string[],
+					urlQuery,
+					history,
+					location,
+					queryParam,
+				);
+			}
+			onChange?.(value);
+		},
+		[
+			handleSearch,
+			shouldSetQueryParams,
+			urlQuery,
+			history,
+			location,
+			queryParam,
+			onChange,
+		],
+	);
+
 	return (
 		<Select
 			key={filterType.toString()}
@@ -52,11 +84,7 @@ export function FilterSelect({
 			maxTagCount={4}
 			allowClear
 			maxTagPlaceholder={SelectMaxTagPlaceholder}
-			value={
-				!shouldSetQueryParams && !!values?.length
-					? values
-					: getValuesFromQueryParams(queryParam, urlQuery) || []
-			}
+			value={selectValue}
 			notFoundContent={
 				isFetching ? (
 					<span>
@@ -66,19 +94,7 @@ export function FilterSelect({
 					<span>No {placeholder} found</span>
 				)
 			}
-			onChange={(value): void => {
-				handleSearch('');
-				if (shouldSetQueryParams) {
-					setQueryParamsFromOptions(
-						value as string[],
-						urlQuery,
-						history,
-						location,
-						queryParam,
-					);
-				}
-				onChange?.(value);
-			}}
+			onChange={handleSelectChange}
 		/>
 	);
 }

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -149,28 +149,30 @@ function SpanOverview({
 					<Typography.Text className="service-name">
 						{span.serviceName}
 					</Typography.Text>
-					{!!span.serviceName && !!span.name && (
-						<div className="add-funnel-button">
-							<span className="add-funnel-button__separator">·</span>
-							<Button
-								type="text"
-								size="small"
-								className="add-funnel-button__button"
-								onClick={(e): void => {
-									e.preventDefault();
-									e.stopPropagation();
-									handleAddSpanToFunnel(span);
-								}}
-								icon={
-									<img
-										className="add-funnel-button__icon"
-										src="/Icons/funnel-add.svg"
-										alt="funnel-icon"
-									/>
-								}
-							/>
-						</div>
-					)}
+					{!!span.serviceName &&
+						!!span.name &&
+						process.env.NODE_ENV === 'development' && (
+							<div className="add-funnel-button">
+								<span className="add-funnel-button__separator">·</span>
+								<Button
+									type="text"
+									size="small"
+									className="add-funnel-button__button"
+									onClick={(e): void => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleAddSpanToFunnel(span);
+									}}
+									icon={
+										<img
+											className="add-funnel-button__icon"
+											src="/Icons/funnel-add.svg"
+											alt="funnel-icon"
+										/>
+									}
+								/>
+							</div>
+						)}
 				</section>
 			</div>
 		</div>

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelBreadcrumb.tsx

@@ -9,25 +9,24 @@ interface FunnelBreadcrumbProps {
 }
 
 function FunnelBreadcrumb({ funnelName }: FunnelBreadcrumbProps): JSX.Element {
+	const breadcrumbItems = [
+		{
+			title: (
+				<Link to={ROUTES.TRACES_FUNNELS}>
+					<span className="funnel-breadcrumb__link">
+						<span className="funnel-breadcrumb__title">All funnels</span>
+					</span>
+				</Link>
+			),
+		},
+		{
+			title: <div className="funnel-breadcrumb__title">{funnelName}</div>,
+		},
+	];
+
 	return (
 		<div>
-			<Breadcrumb
-				className="funnel-breadcrumb"
-				items={[
-					{
-						title: (
-							<Link to={ROUTES.TRACES_FUNNELS}>
-								<span className="funnel-breadcrumb__link">
-									<span className="funnel-breadcrumb__title">All funnels</span>
-								</span>
-							</Link>
-						),
-					},
-					{
-						title: <div className="funnel-breadcrumb__title">{funnelName}</div>,
-					},
-				]}
-			/>
+			<Breadcrumb className="funnel-breadcrumb" items={breadcrumbItems} />
 		</div>
 	);
 }

frontend/src/pages/TracesFunnelDetails/components/FunnelResults/FunnelTopTracesTable.tsx

@@ -1,12 +1,11 @@
 import { ErrorTraceData, SlowTraceData } from 'api/traceFunnels';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { useFunnelContext } from 'pages/TracesFunnels/FunnelContext';
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Link } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 import FunnelTable from './FunnelTable';
+import { topTracesTableColumns } from './utils';
 
 interface FunnelTopTracesTableProps {
 	funnelId: string;
@@ -61,39 +60,11 @@ function FunnelTopTracesTable({
 		}));
 	}, [response]);
 
-	const columns = useMemo(
-		() => [
-			{
-				title: 'TRACE ID',
-				dataIndex: 'trace_id',
-				key: 'trace_id',
-				render: (traceId: string): JSX.Element => (
-					<Link to={`/trace/${traceId}`} className="trace-id-cell">
-						{traceId}
-					</Link>
-				),
-			},
-			{
-				title: 'DURATION',
-				dataIndex: 'duration_ms',
-				key: 'duration_ms',
-				render: (value: string): string => getYAxisFormattedValue(value, 'ms'),
-			},
-			{
-				title: 'SPAN COUNT',
-				dataIndex: 'span_count',
-				key: 'span_count',
-				render: (value: number): string => value.toString(),
-			},
-		],
-		[],
-	);
-
 	return (
 		<FunnelTable
 			title={title}
 			tooltip={tooltip}
-			columns={columns}
+			columns={topTracesTableColumns}
 			data={data}
 			loading={isLoading || isFetching}
 		/>

frontend/src/pages/TracesFunnelDetails/components/FunnelResults/utils.tsx

@@ -0,0 +1,27 @@
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { Link } from 'react-router-dom';
+
+export const topTracesTableColumns = [
+	{
+		title: 'TRACE ID',
+		dataIndex: 'trace_id',
+		key: 'trace_id',
+		render: (traceId: string): JSX.Element => (
+			<Link to={`/trace/${traceId}`} className="trace-id-cell">
+				{traceId}
+			</Link>
+		),
+	},
+	{
+		title: 'DURATION',
+		dataIndex: 'duration_ms',
+		key: 'duration_ms',
+		render: (value: string): string => getYAxisFormattedValue(value, 'ms'),
+	},
+	{
+		title: 'SPAN COUNT',
+		dataIndex: 'span_count',
+		key: 'span_count',
+		render: (value: number): string => value.toString(),
+	},
+];