feat: introduce reconnect feature for connections

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

@@ -15,6 +15,7 @@ import { Form } from './style';
 type AddAppConnectionProps = {
   onClose: () => void;
   application: App;
+  connectionId?: string;
 };
 
 type Response = {
@@ -22,8 +23,8 @@ type Response = {
 }
 
 export default function AddAppConnection(props: AddAppConnectionProps){
-  const { application, onClose } = props;
-  const { key, fields, authenticationSteps } = application;
+  const { application, connectionId, onClose } = props;
+  const { key, fields, authenticationSteps, reconnectionSteps } = application;
 
   useEffect(() => {
     if (window.opener) {
@@ -33,14 +34,21 @@ export default function AddAppConnection(props: AddAppConnectionProps){
   }, []);
 
   const submitHandler: SubmitHandler<FieldValues> = useCallback(async (data) => {
+    const hasConnection = Boolean(connectionId);
+
     const response: Response = {
       key,
+      connection: {
+        id: connectionId
+      },
       fields: data,
     };
 
+    const steps = hasConnection ? reconnectionSteps : authenticationSteps;
+
     let stepIndex = 0;
-    while (stepIndex < authenticationSteps.length) {
-      const step = authenticationSteps[stepIndex];
+    while (stepIndex < steps.length) {
+      const step = steps[stepIndex];
       const variables = computeAuthStepVariables(step, response);
 
       const stepResponse = await processStep(step, variables);
@@ -51,7 +59,7 @@ export default function AddAppConnection(props: AddAppConnectionProps){
     }
 
     onClose?.();
-  }, [authenticationSteps, key, onClose]);
+  }, [connectionId, key, reconnectionSteps, authenticationSteps, onClose]);
 
   return (
     <Dialog open={true} onClose={onClose}>

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

@@ -13,13 +13,14 @@ type Action = {
 
 type ContextMenuProps = {
   appKey: string;
+  connectionId: string;
   onClose: () => void;
   onMenuItemClick: (event: React.MouseEvent, action: Action) => void;
   anchorEl: PopoverProps['anchorEl'];
 };
 
 export default function ContextMenu(props: ContextMenuProps) {
-  const { appKey, onClose, onMenuItemClick, anchorEl } = props;
+  const { appKey, connectionId, onClose, onMenuItemClick, anchorEl } = props;
   const formatMessage = useFormatMessage();
 
   const createActionHandler = React.useCallback((action: Action) => {
@@ -37,7 +38,11 @@ export default function ContextMenu(props: ContextMenuProps) {
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
-      <MenuItem component={Link} to={URLS.APP_FLOWS(appKey)} onClick={createActionHandler({ type: 'viewFlows' })}>
+      <MenuItem
+        component={Link}
+        to={URLS.APP_FLOWS(appKey)}
+        onClick={createActionHandler({ type: 'viewFlows' })}
+      >
         {formatMessage('connection.viewFlows')}
       </MenuItem>
 
@@ -45,7 +50,11 @@ export default function ContextMenu(props: ContextMenuProps) {
         {formatMessage('connection.testConnection')}
       </MenuItem>
 
-      <MenuItem onClick={createActionHandler({ type: 'reconnect' })}>
+      <MenuItem
+        component={Link}
+        to={URLS.APP_RECONNECT_CONNECTION(appKey, connectionId)}
+        onClick={createActionHandler({ type: 'reconnect' })}
+      >
         {formatMessage('connection.reconnect')}
       </MenuItem>
 

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

@@ -19,11 +19,11 @@ type AppConnectionRowProps = {
 const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
 
 function AppConnectionRow(props: AppConnectionRowProps) {
-  const [testConnection, { data: testData, called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION);
+  const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION);
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
   const formatMessage = useFormatMessage();
-  const { id, key, data } = props.connection;
+  const { id, key, data, verified } = props.connection;
 
   const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
   const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
@@ -39,7 +39,7 @@ function AppConnectionRow(props: AppConnectionRowProps) {
         variables: { id },
         update: (cache, mutationResult) => {
           const connectionCacheId = cache.identify({
-            __typename: 'connection',
+            __typename: 'Connection',
             id,
           });
 
@@ -65,7 +65,7 @@ function AppConnectionRow(props: AppConnectionRowProps) {
             </Box>
 
             <Box>
-              {testCalled && !testLoading && (testData ? 'yes' : 'no')}
+              {testCalled && !testLoading && (verified ? 'yes' : 'no')}
             </Box>
 
             <Box sx={{ px: 2 }}>
@@ -83,6 +83,7 @@ function AppConnectionRow(props: AppConnectionRowProps) {
 
       {anchorEl && <ConnectionContextMenu
         appKey={key}
+        connectionId={id}
         onClose={handleClose}
         onMenuItemClick={onContextMenuAction}
         anchorEl={anchorEl}

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

@@ -3,7 +3,6 @@ import { DrawerProps } from '@mui/material/Drawer';
 import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
-import DashboardIcon from '@mui/icons-material/Dashboard';
 import AppsIcon from '@mui/icons-material/Apps';
 import LanguageIcon from '@mui/icons-material/Language';
 import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
@@ -29,12 +28,6 @@ export default function Drawer(props: DrawerProps) {
       </HideOnScroll>
 
       <List>
-        <ListItemLink
-          icon={<DashboardIcon />}
-          primary={formatMessage('drawer.dashboard')}
-          to={URLS.DASHBOARD}
-        />
-
         <ListItemLink
           icon={<OfflineBoltIcon />}
           primary={formatMessage('drawer.flows')}