better UX to enable/disable button than hide/show it based on state values

This commit is contained in:
Egor 2025-10-26 15:05:37 -07:00
parent ea777fed39
commit ecdd47af36

View file

@ -37,7 +37,7 @@ export const ModelFileField = ({
const [analysisError, setAnalysisError] = useState<string>(); const [analysisError, setAnalysisError] = useState<string>();
const getHelperText = () => { const getHelperText = () => {
if (!value.trim()) return undefined; if (validationState === 'neutral') return undefined;
if (validationState === 'invalid') { if (validationState === 'invalid') {
return 'Enter a valid URL or file path'; return 'Enter a valid URL or file path';
@ -47,7 +47,7 @@ export const ModelFileField = ({
}; };
const handleAnalyzeModel = async () => { const handleAnalyzeModel = async () => {
if (!value.trim()) return; if (validationState === 'neutral' || validationState === 'invalid') return;
setAnalysisModalOpened(true); setAnalysisModalOpened(true);
setAnalysisLoading(true); setAnalysisLoading(true);
@ -97,13 +97,22 @@ export const ModelFileField = ({
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
)} )}
{showAnalyze && value.trim() && validationState !== 'invalid' && ( {showAnalyze && (
<Tooltip label="Analyze model"> <Tooltip
label={
validationState === 'neutral' || validationState === 'invalid'
? 'Enter a valid model path'
: 'Analyze model'
}
>
<ActionIcon <ActionIcon
onClick={handleAnalyzeModel} onClick={handleAnalyzeModel}
variant="light" variant="light"
color="blue" color="blue"
size="lg" size="lg"
disabled={
validationState === 'neutral' || validationState === 'invalid'
}
> >
<Info size={16} /> <Info size={16} />
</ActionIcon> </ActionIcon>