feat: add supportsConnections support in App

packages/backend/src/apps/discord/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/discord/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/discord",
   "primaryColor": "5865f2",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/firebase/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/firebase/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/firebase",
   "primaryColor": "ffca28",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/flickr/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/flickr/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/flickr",
   "primaryColor": "000000",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/github/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/github/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/github",
   "primaryColor": "000000",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/gitlab/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/gitlab/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/gitlab",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/postgresql/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/postgresql/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/postgresql",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "host",

packages/backend/src/apps/scheduler/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/scheduler/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/scheduler",
   "primaryColor": "0059F7",
+  "supportsConnections": false,
   "requiresAuthentication": false,
   "triggers": [
     {

packages/backend/src/apps/slack/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/slack/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/slack",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "accessToken",

packages/backend/src/apps/smtp/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/smtp/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/smtp",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "host",

packages/backend/src/apps/twilio/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/twilio/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/twilio",
   "primaryColor": "f22f46",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "accountSid",

packages/backend/src/apps/twitch/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/twitch/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/twitch",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/twitter/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/twitter/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/twitter",
   "primaryColor": "2DAAE1",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/apps/typeform/info.json

@@ -4,6 +4,7 @@
   "iconUrl": "{BASE_URL}/apps/typeform/assets/favicon.svg",
   "docUrl": "https://automatisch.io/docs/typeform",
   "primaryColor": "5865f2",
+  "supportsConnections": true,
   "fields": [
     {
       "key": "oAuthRedirectUrl",

packages/backend/src/graphql/schema.graphql

@@ -87,6 +87,7 @@ type App {
   iconUrl: String
   docUrl: String
   primaryColor: String
+  supportsConnections: Boolean
   fields: [Field]
   authenticationSteps: [AuthenticationStep]
   reconnectionSteps: [ReconnectionStep]

packages/types/index.d.ts

@@ -142,6 +142,7 @@ export interface IApp {
   iconUrl: string;
   docUrl: string;
   primaryColor: string;
+  supportsConnections: boolean;
   fields: IField[];
   authenticationSteps: IAuthenticationStep[];
   reconnectionSteps: IAuthenticationStep[];

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

@@ -23,6 +23,14 @@ import AppIcon from 'components/AppIcon';
 import { GET_APPS } from 'graphql/queries/get-apps';
 import useFormatMessage from 'hooks/useFormatMessage';
 
+function createConnectionOrFlow(appKey: string, supportsConnections = false) {
+  if (!supportsConnections) {
+    return URLS.CREATE_FLOW_WITH_APP(appKey);
+  }
+
+  return URLS.APP_ADD_CONNECTION(appKey);
+};
+
 type AddNewAppConnectionProps = {
   onClose: () => void;
 };
@@ -70,7 +78,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
         <List sx={{ pt: 2 }}>
           {data?.getApps?.map((app: IApp) => (
             <ListItem disablePadding key={app.name}>
-              <ListItemButton component={Link} to={URLS.APP_ADD_CONNECTION(app.name.toLowerCase())}>
+              <ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}>
                 <ListItemIcon sx={{ minWidth: 74 }}>
                   <AppIcon color="transparent" url={app.iconUrl} name={app.name} />
                 </ListItemIcon>

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

@@ -8,6 +8,7 @@ export const GET_APP = gql`
       iconUrl
       docUrl
       primaryColor
+      supportsConnections
       fields {
         key
         label

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

@@ -9,6 +9,7 @@ export const GET_APPS = gql`
       docUrl
       primaryColor
       connectionCount
+      supportsConnections
       fields {
         key
         label

packages/web/src/graphql/queries/get-connected-apps.ts

@@ -9,6 +9,7 @@ export const GET_CONNECTED_APPS = gql`
       docUrl
       primaryColor
       connectionCount
+      supportsConnections
     }
   }
 `;

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

@@ -40,7 +40,7 @@ const ReconnectConnection = (props: any): React.ReactElement => {
   );
 }
 
-export default function Application(): React.ReactElement {
+export default function Application(): React.ReactElement | null {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
   const formatMessage = useFormatMessage();
@@ -48,7 +48,7 @@ export default function Application(): React.ReactElement {
   const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
   const { appKey } = useParams() as ApplicationParams;
   const navigate = useNavigate();
-  const { data } = useQuery(GET_APP, { variables: { key: appKey } });
+  const { data, loading } = useQuery(GET_APP, { variables: { key: appKey } });
 
   const goToApplicationPage = () => navigate('connections');
   const app = data?.getApp || {};
@@ -75,6 +75,8 @@ export default function Application(): React.ReactElement {
     [appKey],
   );
 
+  if (loading) return null;
+
   return (
     <>
       <Box sx={{ py: 3 }}>
@@ -142,6 +144,7 @@ export default function Application(): React.ReactElement {
                     label={formatMessage('app.connections')}
                     to={URLS.APP_CONNECTIONS(appKey)}
                     value={URLS.APP_CONNECTIONS_PATTERN}
+                    disabled={!app.supportsConnections}
                     component={Link}
                   />
 
@@ -159,7 +162,12 @@ export default function Application(): React.ReactElement {
 
                 <Route path={`${URLS.CONNECTIONS}/*`} element={<AppConnections appKey={appKey} />} />
 
-                <Route path="/" element={<Navigate to={URLS.APP_CONNECTIONS(appKey)} />} />
+                <Route
+                  path="/"
+                  element={(
+                    <Navigate to={app.supportsConnections ? URLS.APP_CONNECTIONS(appKey) : URLS.APP_FLOWS(appKey)} />
+                  )}
+                />
               </Routes>
             </Grid>
           </Grid>