feat: rework connection test feedback

packages/web/src/components/AppConnectionRow/index.tsx

@@ -3,8 +3,11 @@ import { useLazyQuery, useMutation } from '@apollo/client';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
 import CardActionArea from '@mui/material/CardActionArea';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
 import { useSnackbar } from 'notistack';
 import { DateTime } from 'luxon';
 
@@ -30,7 +33,12 @@ const countTranslation = (value: React.ReactNode) => (
 
 function AppConnectionRow(props: AppConnectionRowProps) {
   const { enqueueSnackbar } = useSnackbar();
-  const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION);
+  const [verificationVisible, setVerificationVisible] = React.useState(false);
+  const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION, {
+    fetchPolicy: 'network-only',
+    onCompleted: () => { setTimeout(() => setVerificationVisible(false), 3000); },
+    onError: () => { setTimeout(() => setVerificationVisible(false), 3000); },
+  });
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
   const formatMessage = useFormatMessage();
@@ -62,6 +70,7 @@ function AppConnectionRow(props: AppConnectionRowProps) {
 
       enqueueSnackbar(formatMessage('connection.deletedMessage'), { variant: 'success' });
     } else if (action.type === 'test') {
+      setVerificationVisible(true);
       testConnection({ variables: { id } });
     }
   }, [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]);
@@ -74,7 +83,6 @@ function AppConnectionRow(props: AppConnectionRowProps) {
         <CardActionArea onClick={onContextMenuClick}>
           <CardContent>
             <Stack
-              direction="column"
               justifyContent="center"
               alignItems="flex-start"
               spacing={1}
@@ -89,7 +97,26 @@ function AppConnectionRow(props: AppConnectionRowProps) {
             </Stack>
 
             <Box>
-              {testCalled && !testLoading && (verified ? 'yes' : 'no')}
+              <Stack direction="row" alignItems="center" spacing={1}>
+                {verificationVisible && testCalled && testLoading && (
+                  <>
+                    <CircularProgress size={16} />
+                    <Typography variant="caption">{formatMessage('connection.testing')}</Typography>
+                  </>
+                )}
+                {verificationVisible && testCalled && !testLoading && verified && (
+                  <>
+                    <CheckCircleIcon fontSize="small" color="success" />
+                    <Typography variant="caption">{formatMessage('connection.testSuccessful')}</Typography>
+                  </>
+                )}
+                {verificationVisible && testCalled && !testLoading && !verified && (
+                  <>
+                    <ErrorIcon fontSize="small" color="error" />
+                    <Typography variant="caption">{formatMessage('connection.testFailed')}</Typography>
+                  </>
+                )}
+              </Stack>
             </Box>
 
             <Box sx={{ px: 2 }}>