From 009cf63d8c5931bc058c4c2c9424194e764dffff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Wed, 10 Apr 2024 12:39:42 +0200
Subject: [PATCH 1/2] fix: show flow counts using useConnectionFlows

---
 .../src/components/AppConnectionRow/index.jsx | 44 ++++++++++++-------
 packages/web/src/hooks/useConnectionFlows.js  |  2 +-
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/components/AppConnectionRow/index.jsx b/packages/web/src/components/AppConnectionRow/index.jsx
index 7622575a..be3f0dc0 100644
--- a/packages/web/src/components/AppConnectionRow/index.jsx
+++ b/packages/web/src/components/AppConnectionRow/index.jsx
@@ -1,21 +1,24 @@
+import * as React from 'react';
 import { useLazyQuery, useMutation } from '@apollo/client';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
+import Skeleton from '@mui/material/Skeleton';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import CircularProgress from '@mui/material/CircularProgress';
 import Stack from '@mui/material/Stack';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { DateTime } from 'luxon';
-import * as React from 'react';
+
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { CardContent, Typography } from './style';
+import useConnectionFlows from 'hooks/useConnectionFlows';
 
 const countTranslation = (value) => (
   <>
@@ -23,9 +26,16 @@ const countTranslation = (value) => (
     <br />
   </>
 );
+
 function AppConnectionRow(props) {
+  const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
+  const { id, key, formattedData, verified, createdAt, reconnectable } =
+    props.connection;
   const [verificationVisible, setVerificationVisible] = React.useState(false);
+  const contextButtonRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
   const [testConnection, { called: testCalled, loading: testLoading }] =
     useLazyQuery(TEST_CONNECTION, {
       fetchPolicy: 'network-only',
@@ -36,23 +46,20 @@ function AppConnectionRow(props) {
         setTimeout(() => setVerificationVisible(false), 3000);
       },
     });
+
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
-  const formatMessage = useFormatMessage();
-  const {
-    id,
-    key,
-    formattedData,
-    verified,
-    createdAt,
-    flowCount,
-    reconnectable,
-  } = props.connection;
-  const contextButtonRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
+  const { data, isLoading: isConnectionFlowsLoading } = useConnectionFlows({
+    connectionId: id,
+  });
+  const flowCount = data?.meta?.count;
+
   const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
+
   const onContextMenuAction = React.useCallback(
     async (event, action) => {
       if (action.type === 'delete') {
@@ -68,6 +75,7 @@ function AppConnectionRow(props) {
             });
           },
         });
+
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
           SnackbarProps: {
@@ -81,9 +89,11 @@ function AppConnectionRow(props) {
     },
     [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar],
   );
+
   const relativeCreatedAt = DateTime.fromMillis(
     parseInt(createdAt, 10),
   ).toRelative();
+
   return (
     <>
       <Card sx={{ my: 2 }} data-test="app-connection-row">
@@ -143,7 +153,11 @@ function AppConnectionRow(props) {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('connection.flowCount', {
-                  count: countTranslation(flowCount),
+                  count: isConnectionFlowsLoading ? (
+                    <Skeleton variant="rounded" width={20} height={20} />
+                  ) : (
+                    countTranslation(flowCount)
+                  ),
                 })}
               </Typography>
             </Box>
diff --git a/packages/web/src/hooks/useConnectionFlows.js b/packages/web/src/hooks/useConnectionFlows.js
index d8799567..ec8990b3 100644
--- a/packages/web/src/hooks/useConnectionFlows.js
+++ b/packages/web/src/hooks/useConnectionFlows.js
@@ -4,7 +4,7 @@ import api from 'helpers/api';
 
 export default function useConnectionFlows(
   { connectionId, page },
-  { enabled },
+  { enabled } = {},
 ) {
   const query = useQuery({
     queryKey: ['connectionFlows', connectionId, page],

From 196642a1cfc830548f5ffd25c6f25f59604f2bbb Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 10 Apr 2024 14:08:30 +0000
Subject: [PATCH 2/2] feat(AppConnectionRow): embed skeleton in place of flow
 count

---
 packages/web/src/components/AppConnectionRow/index.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/AppConnectionRow/index.jsx b/packages/web/src/components/AppConnectionRow/index.jsx
index be3f0dc0..dba24a08 100644
--- a/packages/web/src/components/AppConnectionRow/index.jsx
+++ b/packages/web/src/components/AppConnectionRow/index.jsx
@@ -153,10 +153,12 @@ function AppConnectionRow(props) {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('connection.flowCount', {
-                  count: isConnectionFlowsLoading ? (
-                    <Skeleton variant="rounded" width={20} height={20} />
-                  ) : (
-                    countTranslation(flowCount)
+                  count: countTranslation(
+                    isConnectionFlowsLoading ? (
+                      <Skeleton variant="text" width={15} />
+                    ) : (
+                      flowCount
+                    ),
                   ),
                 })}
               </Typography>