diff --git a/frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx b/frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx index b98053ae90d5..29fb1fbfddbd 100644 --- a/frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx +++ b/frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx @@ -2,7 +2,7 @@ import '../RenameFunnel/RenameFunnel.styles.scss'; import { Input } from 'antd'; import logEvent from 'api/common/logEvent'; -import { AxiosError } from 'axios'; +import axios from 'axios'; import SignozModal from 'components/SignozModal/SignozModal'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import ROUTES from 'constants/routes'; @@ -26,6 +26,7 @@ function CreateFunnel({ redirectToDetails, }: CreateFunnelProps): JSX.Element { const [funnelName, setFunnelName] = useState(''); + const [inputError, setInputError] = useState(''); const createFunnelMutation = useCreateFunnel(); const { notifications } = useNotifications(); const queryClient = useQueryClient(); @@ -51,6 +52,7 @@ function CreateFunnel({ logEvent(eventMessage, {}); setFunnelName(''); + setInputError(''); queryClient.invalidateQueries([REACT_QUERY_KEY.GET_FUNNELS_LIST]); const funnelId = data?.payload?.funnel_id; @@ -65,11 +67,17 @@ function CreateFunnel({ } }, onError: (error) => { - notifications.error({ - message: - ((error as AxiosError)?.response?.data as string) || - 'Failed to create funnel', - }); + if (axios.isAxiosError(error) && error.response?.status === 400) { + const errorMessage = + error.response?.data?.error?.message || 'Invalid funnel name'; + setInputError(errorMessage); + } else { + notifications.error({ + message: axios.isAxiosError(error) + ? error.response?.data?.error?.message + : 'Failed to create funnel', + }); + } }, }, ); @@ -77,9 +85,17 @@ function CreateFunnel({ const handleCancel = (): void => { setFunnelName(''); + setInputError(''); onClose(); }; + const handleInputChange = (e: React.ChangeEvent): void => { + setFunnelName(e.target.value); + if (inputError) { + setInputError(''); + } + }; + return ( Enter funnel name setFunnelName(e.target.value)} + onChange={handleInputChange} placeholder="Eg. checkout dropoff funnel" autoFocus + status={inputError && 'error'} /> + {inputError && ( + {inputError} + )} ); diff --git a/frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.styles.scss b/frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.styles.scss index 7cc6be8473cb..0a020e7bec56 100644 --- a/frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.styles.scss +++ b/frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.styles.scss @@ -63,6 +63,18 @@ font-weight: 400; line-height: 18px; letter-spacing: -0.07px; + + &--error { + border-color: var(--bg-cherry-500); + } + } + + &__error { + color: var(--bg-cherry-500); + font-size: 12px; + font-weight: 400; + line-height: 16px; + margin-top: 4px; } } @@ -82,6 +94,14 @@ &:focus { border-color: var(--bg-robin-500); } + + &--error { + border-color: var(--bg-cherry-500); + } + } + + &__error { + color: var(--bg-cherry-500); } } .funnel-modal__cancel-btn {