External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-19 16:36:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve the UX of trying to create a funnel with existing name (#8693)

Browse Source
This commit is contained in:
Shaheer Kochai 2025-08-05 09:29:52 +04:30 committed by GitHub
parent 301d9ca4dd
commit 8e5b1be106
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx
View File

@ -2,7 +2,7 @@ import '../RenameFunnel/RenameFunnel.styles.scss';
import { Input } from 'antd'; import { Input } from 'antd';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import { AxiosError } from 'axios'; import axios from 'axios';
import SignozModal from 'components/SignozModal/SignozModal'; import SignozModal from 'components/SignozModal/SignozModal';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
@ -26,6 +26,7 @@ function CreateFunnel({
redirectToDetails, redirectToDetails,
}: CreateFunnelProps): JSX.Element { }: CreateFunnelProps): JSX.Element {
const [funnelName, setFunnelName] = useState<string>(''); const [funnelName, setFunnelName] = useState<string>('');
const [inputError, setInputError] = useState<string>('');
const createFunnelMutation = useCreateFunnel(); const createFunnelMutation = useCreateFunnel();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -51,6 +52,7 @@ function CreateFunnel({
logEvent(eventMessage, {}); logEvent(eventMessage, {});
setFunnelName(''); setFunnelName('');
setInputError('');
queryClient.invalidateQueries([REACT_QUERY_KEY.GET_FUNNELS_LIST]); queryClient.invalidateQueries([REACT_QUERY_KEY.GET_FUNNELS_LIST]);
const funnelId = data?.payload?.funnel_id; const funnelId = data?.payload?.funnel_id;
@ -65,11 +67,17 @@ function CreateFunnel({
} }
}, },
onError: (error) => { onError: (error) => {
if (axios.isAxiosError(error) && error.response?.status === 400) {
const errorMessage =
error.response?.data?.error?.message || 'Invalid funnel name';
setInputError(errorMessage);
} else {
notifications.error({ notifications.error({
message: message: axios.isAxiosError(error)
((error as AxiosError)?.response?.data as string) || ? error.response?.data?.error?.message
'Failed to create funnel', : 'Failed to create funnel',
}); });
}
}, },
}, },
); );
@ -77,9 +85,17 @@ function CreateFunnel({
const handleCancel = (): void => { const handleCancel = (): void => {
setFunnelName(''); setFunnelName('');
setInputError('');
onClose(); onClose();
}; };
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
setFunnelName(e.target.value);
if (inputError) {
setInputError('');
}
};
return ( return (
<SignozModal <SignozModal
open={isOpen} open={isOpen}
@ -109,12 +125,18 @@ function CreateFunnel({
<div className="funnel-modal-content"> <div className="funnel-modal-content">
<span className="funnel-modal-content__label">Enter funnel name</span> <span className="funnel-modal-content__label">Enter funnel name</span>
<Input <Input
className="funnel-modal-content__input" className={`funnel-modal-content__input${
inputError ? ' funnel-modal-content__input--error' : ''
}`}
value={funnelName} value={funnelName}
onChange={(e): void => setFunnelName(e.target.value)} onChange={handleInputChange}
placeholder="Eg. checkout dropoff funnel" placeholder="Eg. checkout dropoff funnel"
autoFocus autoFocus
status={inputError && 'error'}
/> />
{inputError && (
<span className="funnel-modal-content__error">{inputError}</span>
)}
</div> </div>
</SignozModal> </SignozModal>
); );

20
frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.styles.scss
View File

@ -63,6 +63,18 @@
font-weight: 400; font-weight: 400;
line-height: 18px; line-height: 18px;
letter-spacing: -0.07px; 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 { &:focus {
border-color: var(--bg-robin-500); border-color: var(--bg-robin-500);
} }
&--error {
border-color: var(--bg-cherry-500);
}
}
&__error {
color: var(--bg-cherry-500);
} }
} }
.funnel-modal__cancel-btn { .funnel-modal__cancel-btn {