fix: issue with the test connection message

This commit is contained in:
Nicolas Meienberger
2025-10-03 21:50:57 +02:00
parent 5f003fe69d
commit 8d46074bb1
3 changed files with 45 additions and 111 deletions

View File

@@ -53,22 +53,21 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] }); form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
}, [watchedBackend, watchedName, form.reset]); }, [watchedBackend, watchedName, form.reset]);
const [testMessage, setTestMessage] = useState<string>(""); const [testMessage, setTestMessage] = useState<{ success: boolean; message: string } | null>(null);
const testBackendConnection = useMutation({ const testBackendConnection = useMutation({
...testConnectionMutation(), ...testConnectionMutation(),
onMutate: () => { onMutate: () => {
setTestMessage(""); setTestMessage(null);
}, },
onError: () => { onError: (error) => {
setTestMessage("Failed to test connection. Please try again."); setTestMessage({
success: false,
message: error?.message || "Failed to test connection. Please try again.",
});
}, },
onSuccess: (data) => { onSuccess: (data) => {
if (data?.success) { setTestMessage(data);
setTestMessage(data.message);
} else {
setTestMessage(data?.message || "Connection test failed");
}
}, },
}); });
@@ -424,110 +423,43 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
</> </>
)} )}
{watchedBackend === "smb" && ( <div className="space-y-3">
<div className="space-y-3"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Button
<Button type="button"
type="button" variant="outline"
variant="outline" onClick={handleTestConnection}
onClick={handleTestConnection} disabled={testBackendConnection.isPending}
disabled={testBackendConnection.isPending} className="flex-1"
className="flex-1" >
> {testBackendConnection.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{testBackendConnection.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {!testBackendConnection.isPending && testMessage?.success && (
{testBackendConnection.isSuccess && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />} <CheckCircle className="mr-2 h-4 w-4 text-green-500" />
{testBackendConnection.isError && <XCircle className="mr-2 h-4 w-4 text-red-500" />} )}
{testBackendConnection.isIdle && "Test Connection"} {!testBackendConnection.isPending && testMessage && !testMessage.success && (
{testBackendConnection.isPending && "Testing..."} <XCircle className="mr-2 h-4 w-4 text-red-500" />
{testBackendConnection.isSuccess && "Connection Successful"} )}
{testBackendConnection.isError && "Test Failed"} {testBackendConnection.isPending
</Button> ? "Testing..."
</div> : testMessage
{testMessage && ( ? testMessage.success
<div ? "Connection Successful"
className={`text-sm p-2 rounded-md ${ : "Test Failed"
testBackendConnection.isSuccess : "Test Connection"}
? "bg-green-50 text-green-700 border border-green-200" </Button>
: testBackendConnection.isError
? "bg-red-50 text-red-700 border border-red-200"
: "bg-gray-50 text-gray-700 border border-gray-200"
}`}
>
{testMessage}
</div>
)}
</div> </div>
)} {testMessage && (
<div
{watchedBackend === "nfs" && ( className={`text-sm p-2 rounded-md ${
<div className="space-y-3"> testMessage.success
<div className="flex items-center gap-2"> ? "bg-green-50 text-green-700 border border-green-200"
<Button : "bg-red-50 text-red-700 border border-red-200"
type="button" }`}
variant="outline" >
onClick={handleTestConnection} {testMessage.message}
disabled={testBackendConnection.isPending}
className="flex-1"
>
{testBackendConnection.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{testBackendConnection.isSuccess && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />}
{testBackendConnection.isError && <XCircle className="mr-2 h-4 w-4 text-red-500" />}
{testBackendConnection.isIdle && "Test Connection"}
{testBackendConnection.isPending && "Testing..."}
{testBackendConnection.isSuccess && "Connection Successful"}
{testBackendConnection.isError && "Test Failed"}
</Button>
</div> </div>
{testMessage && ( )}
<div </div>
className={`text-sm p-2 rounded-md ${
testBackendConnection.isSuccess
? "bg-green-50 text-green-700 border border-green-200"
: testBackendConnection.isError
? "bg-red-50 text-red-700 border border-red-200"
: "bg-gray-50 text-gray-700 border border-gray-200"
}`}
>
{testMessage}
</div>
)}
</div>
)}
{watchedBackend === "webdav" && (
<div className="space-y-3">
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"
onClick={handleTestConnection}
disabled={testBackendConnection.isPending}
className="flex-1"
>
{testBackendConnection.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{testBackendConnection.isSuccess && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />}
{testBackendConnection.isError && <XCircle className="mr-2 h-4 w-4 text-red-500" />}
{testBackendConnection.isIdle && "Test Connection"}
{testBackendConnection.isPending && "Testing..."}
{testBackendConnection.isSuccess && "Connection Successful"}
{testBackendConnection.isError && "Test Failed"}
</Button>
</div>
{testMessage && (
<div
className={`text-sm p-2 rounded-md ${
testBackendConnection.isSuccess
? "bg-green-50 text-green-700 border border-green-200"
: testBackendConnection.isError
? "bg-red-50 text-red-700 border border-red-200"
: "bg-gray-50 text-gray-700 border border-gray-200"
}`}
>
{testMessage}
</div>
)}
</div>
)}
{mode === "update" && ( {mode === "update" && (
<Button type="submit" className="w-full mt-4" loading={loading}> <Button type="submit" className="w-full mt-4" loading={loading}>
Save Changes Save Changes

View File

@@ -51,6 +51,7 @@
"@types/react-dom": "^19.2.0", "@types/react-dom": "^19.2.0",
"lightningcss": "^1.30.2", "lightningcss": "^1.30.2",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"tinyglobby": "^0.2.15",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.1.9", "vite": "^7.1.9",

View File

@@ -53,6 +53,7 @@
"@types/react-dom": "^19.2.0", "@types/react-dom": "^19.2.0",
"lightningcss": "^1.30.2", "lightningcss": "^1.30.2",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"tinyglobby": "^0.2.15",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.1.9", "vite": "^7.1.9",