feat: add supportsConnections support in App

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>