feat: introduce reconnect feature for connections

packages/backend/src/apps/twitter/index.ts

@@ -1,7 +1,6 @@
 import TwitterApi from 'twitter-api-v2';
 import App from '../../models/app';
 import Field from '../../types/field';
-import appData from './info';
 
 export default class Twitter {
   client: any
@@ -17,7 +16,7 @@ export default class Twitter {
     });
 
     this.connectionData = connectionData;
-    this.appData = appData;
+    this.appData = App.findOneByKey('twitter');
   }
 
   async createAuthLink() {

packages/backend/src/graphql/mutations/create-auth-link.ts

@@ -14,7 +14,7 @@ const createAuthLinkResolver = async (params: Params, req: RequestWithCurrentUse
 
   const appClass = (await import(`../../apps/${connection.key}`)).default;
 
-  const appInstance = new appClass(connection.data)
+  const appInstance = new appClass({ consumerKey: connection.data.consumerKey, consumerSecret: connection.data.consumerSecret });
   const authLink = await appInstance.createAuthLink();
 
   await connection.$query().patch({

packages/backend/src/graphql/mutations/update-connection.ts

@@ -21,14 +21,17 @@ const updateConnectionResolver = async (params: Params, req: RequestWithCurrentU
     }
   })
 
-  const appClass = (await import(`../../apps/${connection.key}`)).default;
+  // Not every updateConnection mutation can verify credentials as some need to reconnect
+  try {
+    const appClass = (await import(`../../apps/${connection.key}`)).default;
 
-  const appInstance = new appClass(connection.data)
-  const verifiedCredentials = await appInstance.verifyCredentials();
+    const appInstance = new appClass(connection.data)
+    const verifiedCredentials = await appInstance.verifyCredentials();
 
-  connection = await connection.$query().patchAndFetch({
-    data: verifiedCredentials
-  })
+    connection = await connection.$query().patchAndFetch({
+      data: verifiedCredentials
+    })
+  } catch {}
 
   return connection;
 }

packages/backend/src/helpers/graphql-instance.ts

@@ -4,6 +4,12 @@ import graphQLSchema from '../graphql/graphql-schema'
 const graphQLInstance = graphqlHTTP({
   schema: graphQLSchema,
   graphiql: true,
+  customFormatErrorFn: (error) => ({
+    message: error.message,
+    locations: error.locations,
+    stack: error.stack ? error.stack.split('\n') : [],
+    path: error.path,
+  })
 })
 
 export default graphQLInstance;

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')}

packages/web/src/config/urls.ts

@@ -8,6 +8,8 @@ export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:key/connections';
 export const APP_ADD_CONNECTION = (appKey: string) => `/app/${appKey}/connections/add`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:key/connections/add';
+export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string) => `/app/${appKey}/connections/${connectionId}/reconnect`;
+export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:key/connections/:connectionId/reconnect';
 export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
 export const APP_FLOWS_PATTERN = '/app/:key/flows';
 

packages/web/src/graphql/mutations/create-connection.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_CONNECTION = gql`
-  mutation CreateConnection($key: String!, $data: twitterCredentialInput!) {
+  mutation CreateConnection($key: String!, $data: TwitterCredentialInput!) {
     createConnection(key: $key, data: $data) {
       id
       key

packages/web/src/graphql/mutations/update-connection.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const UPDATE_CONNECTION = gql`
-  mutation UpdateConnection($id: String!, $data: twitterCredentialInput!) {
+  mutation UpdateConnection($id: String!, $data: TwitterCredentialInput!) {
     updateConnection(id: $id, data: $data) {
       id
       key

packages/web/src/graphql/queries/get-app.ts

@@ -32,6 +32,19 @@ export const GET_APP = gql`
           }
         }
       }
+      reconnectionSteps {
+        step
+        type
+        name
+        fields {
+          name
+          value
+          fields {
+            name
+            value
+          }
+        }
+      }
       connections {
         id
       }

packages/web/src/graphql/queries/test-connection.ts

@@ -2,6 +2,9 @@ import { gql } from '@apollo/client';
 
 export const TEST_CONNECTION = gql`
   query TestConnection($id: String!) {
-    testConnection(id: $id)
+    testConnection(id: $id) {
+      id
+      verified
+    }
   }
 `;

packages/web/src/pages/Application/index.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/client';
-import { Link, Route, Redirect, Switch, useParams, useRouteMatch, useHistory } from 'react-router-dom';
+import { Link, Route, Redirect, Switch, RouteComponentProps, useParams, useRouteMatch, useHistory } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -20,6 +20,7 @@ import PageTitle from 'components/PageTitle';
 
 type ApplicationParams = {
   key: string;
+  connectionId?: string;
 };
 
 export default function Application() {
@@ -95,9 +96,9 @@ export default function Application() {
         </Container>
       </Box>
 
-      <Route exact path={URLS.APP_ADD_CONNECTION_PATTERN}>
-        <AddAppConnection onClose={goToApplicationPage} application={app} />
-      </Route>
+      <Route exact path={[URLS.APP_RECONNECT_CONNECTION_PATTERN, URLS.APP_ADD_CONNECTION_PATTERN]} render={({ match }: RouteComponentProps<ApplicationParams>) => (
+        <AddAppConnection onClose={goToApplicationPage} application={app} connectionId={match.params.connectionId} />
+      )} />
     </>
   );
 };

packages/web/src/routes.tsx

@@ -1,5 +1,4 @@
 import { Route, Switch, Redirect } from "react-router";
-import Dashboard from 'pages/Dashboard';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
 import Flows from 'pages/Flows';
@@ -8,10 +7,6 @@ import * as URLS from 'config/urls';
 
 export default (
   <Switch>
-    <Route path={URLS.DASHBOARD}>
-      <Dashboard />
-    </Route>
-
     <Route path={URLS.FLOWS}>
       <Flows />
     </Route>
@@ -29,7 +24,7 @@ export default (
     </Route>
 
     <Route exact path="/">
-      <Redirect to={URLS.DASHBOARD} />
+      <Redirect to={URLS.FLOWS} />
     </Route>
 
     <Route>

packages/web/src/types/app.ts

@@ -19,6 +19,7 @@ type App = {
   primaryColor: string;
   fields: AppFields[];
   authenticationSteps: any[];
+  reconnectionSteps: any[];
 };
 
 export type { App, AppFields };