feat(eventbrite): add new events trigger

packages/backend/src/apps/eventbrite/assets/favicon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+		<g>
+				<circle fill="#F05537" cx="128" cy="128" r="128"></circle>
+				<path d="M117.475323,82.7290398 C136.772428,78.4407943 156.069532,86.3025777 166.790146,101.311437 L81.5017079,120.608542 C84.3605382,102.26438 98.1782181,87.0172853 117.475323,82.7290398 Z M167.266618,153.48509 C160.596014,163.252761 150.351872,170.161601 138.678314,172.782195 C119.38121,177.070441 99.8458692,169.208657 89.1252554,153.961562 L174.651929,134.664457 L188.469609,131.567391 L215.152026,125.611495 C214.91379,119.893834 214.199082,114.176173 213.007903,108.696749 C202.287289,62.7172275 155.354825,33.8906884 108.42236,44.6113021 C61.4898956,55.3319159 32.1868848,101.073201 43.1457344,147.290958 C54.1045839,193.508715 100.798813,222.097018 147.731277,211.376404 C175.366637,205.182272 196.807864,186.599875 207.766714,163.014525 L167.266618,153.48509 L167.266618,153.48509 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+		</g>
+</svg>

packages/backend/src/apps/eventbrite/auth/generate-auth-url.js

@@ -0,0 +1,19 @@
+import { URLSearchParams } from 'url';
+
+export default async function generateAuthUrl($) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const searchParams = new URLSearchParams({
+    response_type: 'code',
+    client_id: $.auth.data.clientId,
+    redirect_uri: redirectUri,
+  });
+
+  const url = `https://www.eventbrite.com/oauth/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+  });
+}

packages/backend/src/apps/eventbrite/auth/index.js

@@ -0,0 +1,46 @@
+import generateAuthUrl from './generate-auth-url.js';
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string',
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/eventbrite/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Eventbrite, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'API Key',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client Secret',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/eventbrite/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const isStillVerified = async ($) => {
+  const currentUser = await getCurrentUser($);
+  return !!currentUser.id;
+};
+
+export default isStillVerified;

packages/backend/src/apps/eventbrite/auth/verify-credentials.js

@@ -0,0 +1,42 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const verifyCredentials = async ($) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const { data } = await $.http.post(
+    'https://www.eventbrite.com/oauth/token',
+    {
+      grant_type: 'authorization_code',
+      client_id: $.auth.data.clientId,
+      client_secret: $.auth.data.clientSecret,
+      code: $.auth.data.code,
+      redirect_uri: redirectUri,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  const screenName = [currentUser.name, currentUser.emails[0].email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    screenName,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/eventbrite/common/add-auth-header.js

@@ -0,0 +1,9 @@
+const addAuthHeader = ($, requestConfig) => {
+  if ($.auth.data?.accessToken) {
+    requestConfig.headers.Authorization = `Bearer ${$.auth.data.accessToken}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/eventbrite/common/get-current-user.js

@@ -0,0 +1,6 @@
+const getCurrentUser = async ($) => {
+  const { data: currentUser } = await $.http.get('/v3/users/me');
+  return currentUser;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/eventbrite/dynamic-data/index.js

@@ -0,0 +1,3 @@
+import listOrganizations from './list-organizations/index.js';
+
+export default [listOrganizations];

packages/backend/src/apps/eventbrite/dynamic-data/list-organizations/index.js

@@ -0,0 +1,35 @@
+export default {
+  name: 'List organizations',
+  key: 'listOrganizations',
+
+  async run($) {
+    const organizations = {
+      data: [],
+    };
+
+    const params = {
+      continuation: undefined,
+    };
+
+    do {
+      const { data } = await $.http.get('/v3/users/me/organizations', {
+        params,
+      });
+
+      if (data.pagination.has_more_items) {
+        params.continuation = data.pagination.continuation;
+      }
+
+      if (data.organizations) {
+        for (const organization of data.organizations) {
+          organizations.data.push({
+            value: organization.id,
+            name: organization.name,
+          });
+        }
+      }
+    } while (params.continuation);
+
+    return organizations;
+  },
+};

packages/backend/src/apps/eventbrite/index.js

@@ -0,0 +1,20 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import auth from './auth/index.js';
+import dynamicData from './dynamic-data/index.js';
+import triggers from './triggers/index.js';
+
+export default defineApp({
+  name: 'Eventbrite',
+  key: 'eventbrite',
+  baseUrl: 'https://www.eventbrite.com',
+  apiBaseUrl: 'https://www.eventbriteapi.com',
+  iconUrl: '{BASE_URL}/apps/eventbrite/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/eventbrite/connection',
+  primaryColor: 'F05537',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+  dynamicData,
+  triggers,
+});

packages/backend/src/apps/eventbrite/triggers/index.js

@@ -0,0 +1,3 @@
+import newEvents from './new-events/index.js';
+
+export default [newEvents];

packages/backend/src/apps/eventbrite/triggers/new-events/index.js

@@ -0,0 +1,98 @@
+import Crypto from 'crypto';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New events',
+  key: 'newEvents',
+  type: 'webhook',
+  description:
+    'Triggers when a new event is published and live within an organization.',
+  arguments: [
+    {
+      label: 'Organization',
+      key: 'organizationId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listOrganizations',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const organizationId = $.step.parameters.organizationId;
+
+    const params = {
+      orderBy: 'created_desc',
+      status: 'all',
+    };
+
+    const {
+      data: { events },
+    } = await $.http.get(`/v3/organizations/${organizationId}/events/`, params);
+
+    if (events.length === 0) {
+      return;
+    }
+
+    const computedWebhookEvent = {
+      config: {
+        action: 'event.published',
+        user_id: events[0].organization_id,
+        webhook_id: '11111111',
+        endpoint_url: $.webhookUrl,
+      },
+      api_url: events[0].resource_uri,
+    };
+
+    const dataItem = {
+      raw: computedWebhookEvent,
+      meta: {
+        internalId: computedWebhookEvent.user_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async registerHook($) {
+    const organizationId = $.step.parameters.organizationId;
+
+    const payload = {
+      endpoint_url: $.webhookUrl,
+      actions: 'event.published',
+      event_id: '',
+    };
+
+    const { data } = await $.http.post(
+      `/v3/organizations/${organizationId}/webhooks/`,
+      payload
+    );
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v3/webhooks/${$.flow.remoteWebhookId}/`);
+  },
+});

packages/docs/pages/.vitepress/config.js

@@ -113,6 +113,15 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/dropbox/connection' },
           ],
         },
+        {
+          text: 'Eventbrite',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Triggers', link: '/apps/eventbrite/triggers' },
+            { text: 'Connection', link: '/apps/eventbrite/connection' },
+          ],
+        },
         {
           text: 'Filter',
           collapsible: true,

packages/docs/pages/apps/eventbrite/connection.md

@@ -0,0 +1,18 @@
+# Eventbrite
+
+:::info
+This page explains the steps you need to follow to set up the Eventbrite
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to your Eventbrite account settings.
+2. Click on the **Developer Links**, and click on the **API Keys** button.
+3. Click on the **Create API Key** button.
+4. Fill the form.
+5. Copy **OAuth Redirect URL** from Automatisch to **OAuth Redirect URI** field in the form.
+6. After filling the form, click on the **Create Key** button.
+7. Click on the **Show API key, client secret and tokens** in the middle of the page.
+8. Copy the **API Key** value to the `API Key` field on Automatisch.
+9. Copy the **Client secret** value to the `Client Secret` field on Automatisch.
+10. Click **Submit** button on Automatisch.
+11. Congrats! Start using your new Eventbrite connection within the flows.

packages/docs/pages/apps/eventbrite/triggers.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/eventbrite.svg
+items:
+  - name: New events
+    desc: Triggers when a new event is published and live within an organization.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/guide/available-apps.md

@@ -11,6 +11,7 @@ The following integrations are currently supported by Automatisch.
 - [Discord](/apps/discord/actions)
 - [Disqus](/apps/disqus/triggers)
 - [Dropbox](/apps/dropbox/actions)
+- [Eventbrite](/apps/eventbrite/triggers)
 - [Filter](/apps/filter/actions)
 - [Flickr](/apps/flickr/triggers)
 - [Formatter](/apps/formatter/actions)

packages/docs/pages/public/favicons/eventbrite.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+		<g>
+				<circle fill="#F05537" cx="128" cy="128" r="128"></circle>
+				<path d="M117.475323,82.7290398 C136.772428,78.4407943 156.069532,86.3025777 166.790146,101.311437 L81.5017079,120.608542 C84.3605382,102.26438 98.1782181,87.0172853 117.475323,82.7290398 Z M167.266618,153.48509 C160.596014,163.252761 150.351872,170.161601 138.678314,172.782195 C119.38121,177.070441 99.8458692,169.208657 89.1252554,153.961562 L174.651929,134.664457 L188.469609,131.567391 L215.152026,125.611495 C214.91379,119.893834 214.199082,114.176173 213.007903,108.696749 C202.287289,62.7172275 155.354825,33.8906884 108.42236,44.6113021 C61.4898956,55.3319159 32.1868848,101.073201 43.1457344,147.290958 C54.1045839,193.508715 100.798813,222.097018 147.731277,211.376404 C175.366637,205.182272 196.807864,186.599875 207.766714,163.014525 L167.266618,153.48509 L167.266618,153.48509 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+		</g>
+</svg>

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

@@ -8,7 +8,6 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { useQueryClient } from '@tanstack/react-query';
-import Can from 'components/Can';
 
 function ContextMenu(props) {
   const {
@@ -45,57 +44,34 @@ function ContextMenu(props) {
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
-      <Can I="read" a="Flow" passThrough>
+      <MenuItem
-        {(allowed) => (
+        component={Link}
-          <MenuItem
+        to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
-            component={Link}
+        onClick={createActionHandler({ type: 'viewFlows' })}
-            to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
+      >
-            onClick={createActionHandler({ type: 'viewFlows' })}
+        {formatMessage('connection.viewFlows')}
-            disabled={!allowed}
+      </MenuItem>
-          >
-            {formatMessage('connection.viewFlows')}
-          </MenuItem>
-        )}
-      </Can>
 
-      <Can I="update" a="Connection" passThrough>
+      <MenuItem onClick={createActionHandler({ type: 'test' })}>
-        {(allowed) => (
+        {formatMessage('connection.testConnection')}
-          <MenuItem
+      </MenuItem>
-            onClick={createActionHandler({ type: 'test' })}
-            disabled={!allowed}
-          >
-            {formatMessage('connection.testConnection')}
-          </MenuItem>
-        )}
-      </Can>
 
-      <Can I="create" a="Connection" passThrough>
+      <MenuItem
-        {(allowed) => (
+        component={Link}
-          <MenuItem
+        disabled={disableReconnection}
-            component={Link}
+        to={URLS.APP_RECONNECT_CONNECTION(
-            disabled={!allowed || disableReconnection}
+          appKey,
-            to={URLS.APP_RECONNECT_CONNECTION(
+          connection.id,
-              appKey,
+          connection.appAuthClientId,
-              connection.id,
-              connection.appAuthClientId,
-            )}
-            onClick={createActionHandler({ type: 'reconnect' })}
-          >
-            {formatMessage('connection.reconnect')}
-          </MenuItem>
         )}
-      </Can>
+        onClick={createActionHandler({ type: 'reconnect' })}
+      >
+        {formatMessage('connection.reconnect')}
+      </MenuItem>
 
-      <Can I="delete" a="Connection" passThrough>
+      <MenuItem onClick={createActionHandler({ type: 'delete' })}>
-        {(allowed) => (
+        {formatMessage('connection.delete')}
-          <MenuItem
+      </MenuItem>
-            onClick={createActionHandler({ type: 'delete' })}
-            disabled={!allowed}
-          >
-            {formatMessage('connection.delete')}
-          </MenuItem>
-        )}
-      </Can>
     </Menu>
   );
 }

packages/web/src/components/AppConnections/index.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
-import Can from 'components/Can';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import useAppConnections from 'hooks/useAppConnections';
@@ -17,15 +16,11 @@ function AppConnections(props) {
 
   if (!hasConnections) {
     return (
-      <Can I="create" a="Connection" passThrough>
+      <NoResultFound
-        {(allowed) => (
+        to={URLS.APP_ADD_CONNECTION(appKey)}
-          <NoResultFound
+        text={formatMessage('app.noConnections')}
-            text={formatMessage('app.noConnections')}
+        data-test="connections-no-results"
-            data-test="connections-no-results"
+      />
-            {...(allowed && { to: URLS.APP_ADD_CONNECTION(appKey) })}
-          />
-        )}
-      </Can>
     );
   }
 

packages/web/src/components/AppFlows/index.jsx

@@ -5,7 +5,6 @@ import PaginationItem from '@mui/material/PaginationItem';
 
 import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
-import Can from 'components/Can';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useConnectionFlows from 'hooks/useConnectionFlows';
@@ -37,20 +36,11 @@ function AppFlows(props) {
 
   if (!hasFlows) {
     return (
-      <Can I="create" a="Flow" passThrough>
+      <NoResultFound
-        {(allowed) => (
+        to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(appKey, connectionId)}
-          <NoResultFound
+        text={formatMessage('app.noFlows')}
-            text={formatMessage('app.noFlows')}
+        data-test="flows-no-results"
-            data-test="flows-no-results"
+      />
-            {...(allowed && {
-              to: URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
-                appKey,
-                connectionId
-              ),
-            })}
-          />
-        )}
-      </Can>
     );
   }
 

packages/web/src/components/ControlledCustomAutocomplete/index.jsx

@@ -61,7 +61,6 @@ function ControlledCustomAutocomplete(props) {
   const [isSingleChoice, setSingleChoice] = React.useState(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
-  const mountedRef = React.useRef(false);
 
   const renderElement = React.useCallback(
     (props) => <Element {...props} disabled={disabled} />,
@@ -95,14 +94,10 @@ function ControlledCustomAutocomplete(props) {
   }, []);
 
   React.useEffect(() => {
-    if (mountedRef.current) {
+    const hasDependencies = dependsOnValues.length;
-      const hasDependencies = dependsOnValues.length;
+    if (hasDependencies) {
-      if (hasDependencies) {
+      // Reset the field when a dependent has been updated
-        // Reset the field when a dependent has been updated
+      resetEditor(editor);
-        resetEditor(editor);
-      }
-    } else {
-      mountedRef.current = true;
     }
   }, dependsOnValues);
 

packages/web/src/components/DynamicField/index.jsx

@@ -64,19 +64,11 @@ function DynamicField(props) {
           <Stack
             direction={{ xs: 'column', sm: 'row' }}
             spacing={{ xs: 2 }}
-            sx={{
+            sx={{ display: 'flex', flex: 1 }}
-              display: 'flex',
-              flex: 1,
-              minWidth: 0,
-            }}
           >
             {fields.map((fieldSchema, fieldSchemaIndex) => (
               <Box
-                sx={{
+                sx={{ display: 'flex', flex: '1 0 0px' }}
-                  display: 'flex',
-                  flex: '1 0 0px',
-                  minWidth: 0,
-                }}
                 key={`field-${field.__id}-${fieldSchemaIndex}`}
               >
                 <InputCreator

packages/web/src/components/EditorNew/Edge/Edge.jsx

@@ -0,0 +1,79 @@
+import { EdgeLabelRenderer, getStraightPath } from 'reactflow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import { useMutation } from '@apollo/client';
+import { CREATE_STEP } from 'graphql/mutations/create-step';
+import { useQueryClient } from '@tanstack/react-query';
+import PropTypes from 'prop-types';
+
+export default function Edge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  source,
+  data: { flowId, setCurrentStepId, flowActive, layouted },
+}) {
+  const [createStep, { loading: creationInProgress }] =
+    useMutation(CREATE_STEP);
+  const queryClient = useQueryClient();
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  const addStep = async (previousStepId) => {
+    const mutationInput = {
+      previousStep: {
+        id: previousStepId,
+      },
+      flow: {
+        id: flowId,
+      },
+    };
+
+    const createdStep = await createStep({
+      variables: { input: mutationInput },
+    });
+
+    const createdStepId = createdStep.data.createStep.id;
+    setCurrentStepId(createdStepId);
+    await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
+  };
+
+  return (
+    <>
+      <EdgeLabelRenderer>
+        <IconButton
+          onClick={() => addStep(source)}
+          color="primary"
+          sx={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: 'all',
+            visibility: layouted ? 'visible' : 'hidden',
+          }}
+          disabled={creationInProgress || flowActive}
+        >
+          <AddIcon />
+        </IconButton>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+Edge.propTypes = {
+  sourceX: PropTypes.number.isRequired,
+  sourceY: PropTypes.number.isRequired,
+  targetX: PropTypes.number.isRequired,
+  targetY: PropTypes.number.isRequired,
+  source: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    flowId: PropTypes.string.isRequired,
+    setCurrentStepId: PropTypes.func.isRequired,
+    flowActive: PropTypes.bool.isRequired,
+    layouted: PropTypes.bool,
+  }).isRequired,
+};

packages/web/src/components/EditorNew/Edges/NodeEdge/NodeEdge.js

@@ -1,69 +0,0 @@
-import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
-import IconButton from '@mui/material/IconButton';
-import AddIcon from '@mui/icons-material/Add';
-
-import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import { EdgesContext } from '../../EditorNew';
-import { Tooltip } from '@mui/material';
-
-export default function NodeEdge({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  source,
-  data: { laidOut },
-}) {
-  const { stepCreationInProgress, flowActive, onAddStep } =
-    useContext(EdgesContext);
-
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
-  const handleAddStep = () => {
-    onAddStep(source);
-  };
-
-  return (
-    <>
-      <BaseEdge path={edgePath} />
-      <EdgeLabelRenderer>
-        <Tooltip title="Add step">
-          <IconButton
-            onClick={handleAddStep}
-            color="primary"
-            sx={{
-              position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              pointerEvents: 'all',
-              backgroundColor: '#fafafa',
-              '&:hover': {
-                backgroundColor: '#f0f3fa',
-              },
-              // visibility: laidOut ? 'visible' : 'hidden',
-            }}
-            disabled={stepCreationInProgress || flowActive}
-          >
-            <AddIcon />
-          </IconButton>
-        </Tooltip>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
-
-NodeEdge.propTypes = {
-  sourceX: PropTypes.number.isRequired,
-  sourceY: PropTypes.number.isRequired,
-  targetX: PropTypes.number.isRequired,
-  targetY: PropTypes.number.isRequired,
-  source: PropTypes.string.isRequired,
-  data: PropTypes.shape({
-    laidOut: PropTypes.bool,
-  }).isRequired,
-};

packages/web/src/components/EditorNew/Edges/NodeOrPathsEdge/NodeOrPathsEdge.jsx

@@ -1,95 +0,0 @@
-import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
-import IconButton from '@mui/material/IconButton';
-import AddIcon from '@mui/icons-material/Add';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-import PropTypes from 'prop-types';
-import { useContext, useState } from 'react';
-import { EdgesContext } from '../../EditorNew';
-import { Tooltip } from '@mui/material';
-
-export default function NodeOrPathsEdge({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  source,
-  data: { laidOut },
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const { stepCreationInProgress, flowActive, onAddStep, onAddPaths } =
-    useContext(EdgesContext);
-
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
-  const handleAddStep = () => {
-    onAddStep(source);
-    handleClose();
-  };
-
-  const handleAddPaths = () => {
-    onAddPaths(source);
-    handleClose();
-  };
-
-  return (
-    <>
-      <BaseEdge path={edgePath} />
-      <EdgeLabelRenderer>
-        <Tooltip title="Add step or paths">
-          <IconButton
-            onClick={handleClick}
-            color="primary"
-            sx={{
-              position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              pointerEvents: 'all',
-              backgroundColor: '#fafafa',
-              '&:hover': {
-                backgroundColor: '#f0f3fa',
-              },
-              // visibility: laidOut ? 'visible' : 'hidden',
-            }}
-            disabled={stepCreationInProgress || flowActive}
-          >
-            <AddIcon />
-          </IconButton>
-        </Tooltip>
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-        >
-          <MenuItem onClick={handleAddStep}>Step</MenuItem>
-          <MenuItem onClick={handleAddPaths}>Paths</MenuItem>
-        </Menu>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
-
-NodeOrPathsEdge.propTypes = {
-  sourceX: PropTypes.number.isRequired,
-  sourceY: PropTypes.number.isRequired,
-  targetX: PropTypes.number.isRequired,
-  targetY: PropTypes.number.isRequired,
-  source: PropTypes.string.isRequired,
-  data: PropTypes.shape({
-    laidOut: PropTypes.bool,
-  }).isRequired,
-};

packages/web/src/components/EditorNew/Edges/PathsEdge/PathsEdge.js

@@ -1,69 +0,0 @@
-import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
-import IconButton from '@mui/material/IconButton';
-import AddIcon from '@mui/icons-material/Add';
-
-import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import { EdgesContext } from '../../EditorNew';
-import { Tooltip } from '@mui/material';
-
-export default function PathsEdge({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  source,
-  data: { laidOut },
-}) {
-  const { stepCreationInProgress, flowActive, onAddPath } =
-    useContext(EdgesContext);
-
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
-  const handleAddPath = () => {
-    onAddPath(source);
-  };
-
-  return (
-    <>
-      <BaseEdge path={edgePath} />
-      <EdgeLabelRenderer>
-        <Tooltip title="Add path">
-          <IconButton
-            onClick={handleAddPath}
-            color="primary"
-            sx={{
-              position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              pointerEvents: 'all',
-              backgroundColor: '#fafafa',
-              '&:hover': {
-                backgroundColor: '#f0f3fa',
-              },
-              // visibility: laidOut ? 'visible' : 'hidden',
-            }}
-            disabled={stepCreationInProgress || flowActive}
-          >
-            <AddIcon />
-          </IconButton>
-        </Tooltip>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
-
-PathsEdge.propTypes = {
-  sourceX: PropTypes.number.isRequired,
-  sourceY: PropTypes.number.isRequired,
-  targetX: PropTypes.number.isRequired,
-  targetY: PropTypes.number.isRequired,
-  source: PropTypes.string.isRequired,
-  data: PropTypes.shape({
-    laidOut: PropTypes.bool,
-  }).isRequired,
-};

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -1,181 +1,255 @@
-import { useEffect, useCallback, createContext, useRef } from 'react';
+import { useEffect, useState, useCallback } from 'react';
-// import { useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
-// import { useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { FlowPropType } from 'propTypes/propTypes';
-import ReactFlow, { useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'reactflow';
 import 'reactflow/dist/style.css';
-// import { UPDATE_STEP } from 'graphql/mutations/update-step';
+import { UPDATE_STEP } from 'graphql/mutations/update-step';
-// import { CREATE_STEP } from 'graphql/mutations/create-step';
 
 import { useAutoLayout } from './useAutoLayout';
-import NodeOrPathsEdge from './Edges/NodeOrPathsEdge/NodeOrPathsEdge';
+import { useScrollBoundries } from './useScrollBoundries';
-import FlowStepNode from './Nodes/FlowStepNode/FlowStepNode';
+import FlowStepNode from './FlowStepNode/FlowStepNode';
-import InvisibleNode from './Nodes/InvisibleNode/InvisibleNode';
+import Edge from './Edge/Edge';
-import PathsNode from './Nodes/PathsNode/PathsNode';
+import InvisibleNode from './InvisibleNode/InvisibleNode';
 import { EditorWrapper } from './style';
-import { generateEdges, generateNodes, updatedCollapsedNodes } from './utils';
-import { EDGE_TYPES, NODE_TYPES } from './constants';
-import { useFlow } from './temp/useFlow';
-import PathNode from './Nodes/PathNode/PathNode';
-import PathsEdge from './Edges/PathsEdge/PathsEdge';
-import NodeEdge from './Edges/NodeEdge/NodeEdge';
 
-export const EdgesContext = createContext();
+const nodeTypes = { flowStep: FlowStepNode, invisible: InvisibleNode };
-export const NodesContext = createContext();
-
-const nodeTypes = {
-  [NODE_TYPES.FLOW_STEP]: FlowStepNode,
-  [NODE_TYPES.INVISIBLE]: InvisibleNode,
-  [NODE_TYPES.PATHS]: PathsNode,
-  [NODE_TYPES.PATH]: PathNode,
-};
 
 const edgeTypes = {
-  [EDGE_TYPES.ADD_NODE_OR_PATHS_EDGE]: NodeOrPathsEdge,
+  addNodeEdge: Edge,
-  [EDGE_TYPES.ADD_PATH_EDGE]: PathsEdge,
-  [EDGE_TYPES.ADD_NODE_EDGE]: NodeEdge,
 };
 
-const EditorNew = () =>
+const INVISIBLE_NODE_ID = 'invisible-node';
-  // { flow }
-  {
-    const { flow, createStep, createPaths, createPath } = useFlow();
-    // const [updateStep] = useMutation(UPDATE_STEP);
-    // const queryClient = useQueryClient();
-    // const [createStep, { loading: stepCreationInProgress }] =
-    //   useMutation(CREATE_STEP);
-    const stepCreationInProgress = false;
 
-    const [nodes, setNodes, onNodesChange] = useNodesState(
+const generateEdgeId = (sourceId, targetId) => `${sourceId}-${targetId}`;
-      generateNodes({ steps: flow.steps }),
-    );
-    const [edges, setEdges, onEdgesChange] = useEdgesState(
-      generateEdges({ steps: flow.steps }),
-    );
 
-    useAutoLayout();
+const EditorNew = ({ flow }) => {
+  const [triggerStep] = flow.steps;
+  const [currentStepId, setCurrentStepId] = useState(triggerStep.id);
 
-    const createdStepIdRef = useRef(null);
+  const [updateStep] = useMutation(UPDATE_STEP);
+  const queryClient = useQueryClient();
 
-    const openNextStep = useCallback(
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-      (currentStepId) => {
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-        setNodes((nodes) => {
+  useAutoLayout();
-          const currentStepIndex = nodes.findIndex(
+  useScrollBoundries();
-            (node) => node.id === currentStepId,
+
+  const onConnect = useCallback(
+    (params) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges],
+  );
+
+  const openNextStep = useCallback(
+    (nextStep) => () => {
+      setCurrentStepId(nextStep?.id);
+    },
+    [],
+  );
+
+  const onStepChange = useCallback(
+    async (step) => {
+      const mutationInput = {
+        id: step.id,
+        key: step.key,
+        parameters: step.parameters,
+        connection: {
+          id: step.connection?.id,
+        },
+        flow: {
+          id: flow.id,
+        },
+      };
+
+      if (step.appKey) {
+        mutationInput.appKey = step.appKey;
+      }
+
+      await updateStep({
+        variables: { input: mutationInput },
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ['steps', step.id, 'connection'],
+      });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
+    },
+    [flow.id, updateStep, queryClient],
+  );
+
+  const generateEdges = useCallback((flow, prevEdges) => {
+    const newEdges =
+      flow.steps
+        .map((step, i) => {
+          const sourceId = step.id;
+          const targetId = flow.steps[i + 1]?.id;
+          const edge = prevEdges?.find(
+            (edge) => edge.id === generateEdgeId(sourceId, targetId),
           );
-          if (currentStepIndex >= 0) {
+          if (targetId) {
-            const nextStep = nodes[currentStepIndex + 1];
+            return {
-            return updatedCollapsedNodes(nodes, nextStep.id);
+              id: generateEdgeId(sourceId, targetId),
+              source: sourceId,
+              target: targetId,
+              type: 'addNodeEdge',
+              data: {
+                flowId: flow.id,
+                flowActive: flow.active,
+                setCurrentStepId,
+                layouted: !!edge,
+              },
+            };
           }
-          return nodes;
+        })
-        });
+        .filter((edge) => !!edge) || [];
-      },
-      [setNodes],
-    );
 
-    const onStepClose = useCallback(() => {
+    const lastStep = flow.steps[flow.steps.length - 1];
-      setNodes((nodes) => updatedCollapsedNodes(nodes));
-    }, [setNodes]);
 
-    const onStepOpen = useCallback(
+    return lastStep
-      (stepId) => {
+      ? [
-        setNodes((nodes) => updatedCollapsedNodes(nodes, stepId));
+          ...newEdges,
-      },
+          {
-      [setNodes],
+            id: generateEdgeId(lastStep.id, INVISIBLE_NODE_ID),
-    );
+            source: lastStep.id,
+            target: INVISIBLE_NODE_ID,
+            type: 'addNodeEdge',
+            data: {
+              flowId: flow.id,
+              flowActive: flow.active,
+              setCurrentStepId,
+              layouted: false,
+            },
+          },
+        ]
+      : newEdges;
+  }, []);
 
-    const onStepChange = useCallback(
+  const generateNodes = useCallback(
-      async (step) => {
+    (flow, prevNodes) => {
-        // const mutationInput = {
+      const newNodes = flow.steps.map((step, index) => {
-        //   id: step.id,
+        const node = prevNodes?.find(({ id }) => id === step.id);
-        //   key: step.key,
+        const collapsed = currentStepId !== step.id;
-        //   parameters: step.parameters,
+        return {
-        //   connection: {
+          id: step.id,
-        //     id: step.connection?.id,
+          type: 'flowStep',
-        //   },
+          position: {
-        //   flow: {
+            x: node ? node.position.x : 0,
-        //     id: flow.id,
+            y: node ? node.position.y : 0,
-        //   },
+          },
-        // };
+          zIndex: collapsed ? 0 : 1,
-        // if (step.appKey) {
+          data: {
-        //   mutationInput.appKey = step.appKey;
+            step,
-        // }
+            index: index,
-        // const updated = await updateStep({
+            flowId: flow.id,
-        //   variables: { input: mutationInput },
+            collapsed,
-        // });
+            openNextStep: openNextStep(flow.steps[index + 1]),
-        // await queryClient.invalidateQueries({
+            onOpen: () => setCurrentStepId(step.id),
-        //   queryKey: ['steps', step.id, 'connection'],
+            onClose: () => setCurrentStepId(null),
-        // });
+            onChange: onStepChange,
-        // await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
+            layouted: !!node,
-      },
+          },
-      // [flow.id, updateStep, queryClient],
+        };
-    );
+      });
 
-    const onAddStep = async (previousStepId) => {
+      const prevInvisibleNode = nodes.find((node) => node.type === 'invisible');
-      const createdStepId = createStep(flow, previousStepId);
-      createdStepIdRef.current = createdStepId;
-    };
 
-    console.log({ flow });
+      return [
+        ...newNodes,
+        {
+          id: INVISIBLE_NODE_ID,
+          type: 'invisible',
+          position: {
+            x: prevInvisibleNode ? prevInvisibleNode.position.x : 0,
+            y: prevInvisibleNode ? prevInvisibleNode.position.y : 0,
+          },
+        },
+      ];
+    },
+    [currentStepId, nodes, onStepChange, openNextStep],
+  );
 
-    useEffect(() => {
+  const updateNodesData = useCallback(
-      // if (flow.steps.length + 1 !== nodes.length) {
+    (steps) => {
       setNodes((nodes) =>
-        generateNodes({
+        nodes.map((node) => {
-          prevNodes: nodes,
+          const step = steps.find((step) => step.id === node.id);
-          steps: flow.steps,
+          if (step) {
-          createdStepId: createdStepIdRef.current,
+            return { ...node, data: { ...node.data, step: { ...step } } };
+          }
+          return node;
         }),
       );
+    },
+    [setNodes],
+  );
 
+  const updateEdgesData = useCallback(
+    (flow) => {
       setEdges((edges) =>
-        generateEdges({ prevEdges: edges, steps: flow.steps }),
+        edges.map((edge) => {
+          return {
+            ...edge,
+            data: { ...edge.data, flowId: flow.id, flowActive: flow.active },
+          };
+        }),
       );
+    },
+    [setEdges],
+  );
 
-      if (createdStepIdRef.current) {
+  useEffect(() => {
-        createdStepIdRef.current = null;
+    setNodes(
-      }
+      nodes.map((node) => {
-      // }
+        if (node.type === 'flowStep') {
-    }, [flow.steps]);
+          const collapsed = currentStepId !== node.data.step.id;
-
+          return {
-    return (
+            ...node,
-      <NodesContext.Provider
+            zIndex: collapsed ? 0 : 1,
-        value={{
+            data: {
-          openNextStep,
+              ...node.data,
-          onStepOpen,
+              collapsed,
-          onStepClose,
+            },
-          onStepChange,
+          };
-          flowId: flow.id,
+        }
-          steps: flow.steps,
+        return node;
-        }}
+      }),
-      >
-        <EdgesContext.Provider
-          value={{
-            stepCreationInProgress,
-            onAddStep,
-            onAddPaths: createPaths,
-            onAddPath: createPath,
-            flowActive: flow.active,
-          }}
-        >
-          <EditorWrapper direction="column">
-            <ReactFlow
-              nodes={nodes}
-              edges={edges}
-              onNodesChange={onNodesChange}
-              onEdgesChange={onEdgesChange}
-              nodeTypes={nodeTypes}
-              edgeTypes={edgeTypes}
-              fitView
-              maxZoom={1}
-              minZoom={0.001}
-              proOptions={{ hideAttribution: true }}
-            />
-          </EditorWrapper>
-        </EdgesContext.Provider>
-      </NodesContext.Provider>
     );
-  };
+  }, [currentStepId]);
+
+  useEffect(() => {
+    if (flow.steps.length + 1 !== nodes.length) {
+      const newNodes = generateNodes(flow, nodes);
+      const newEdges = generateEdges(flow, edges);
+
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      updateNodesData(flow.steps);
+      updateEdgesData(flow);
+    }
+  }, [flow]);
+
+  return (
+    <EditorWrapper direction="column">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        panOnScroll
+        panOnScrollMode="vertical"
+        panOnDrag={false}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        panActivationKeyCode={null}
+        proOptions={{ hideAttribution: true }}
+      />
+    </EditorWrapper>
+  );
+};
 
 EditorNew.propTypes = {
   flow: FlowPropType.isRequired,

packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx

@@ -0,0 +1,72 @@
+import { Handle, Position } from 'reactflow';
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+
+import FlowStep from 'components/FlowStep';
+import { StepPropType } from 'propTypes/propTypes';
+
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+
+function FlowStepNode({
+  data: {
+    step,
+    index,
+    flowId,
+    collapsed,
+    openNextStep,
+    onOpen,
+    onClose,
+    onChange,
+    layouted,
+  },
+}) {
+  return (
+    <NodeWrapper
+      className="nodrag"
+      sx={{
+        visibility: layouted ? 'visible' : 'hidden',
+      }}
+    >
+      <NodeInnerWrapper>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+        <FlowStep
+          step={step}
+          index={index + 1}
+          collapsed={collapsed}
+          onOpen={onOpen}
+          onClose={onClose}
+          onChange={onChange}
+          flowId={flowId}
+          onContinue={openNextStep}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </NodeInnerWrapper>
+    </NodeWrapper>
+  );
+}
+
+FlowStepNode.propTypes = {
+  data: PropTypes.shape({
+    step: StepPropType.isRequired,
+    index: PropTypes.number.isRequired,
+    flowId: PropTypes.string.isRequired,
+    collapsed: PropTypes.bool.isRequired,
+    openNextStep: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    layouted: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+export default FlowStepNode;

packages/web/src/components/EditorNew/FlowStepNode/style.js

@@ -9,6 +9,6 @@ export const NodeWrapper = styled(Box)(({ theme }) => ({
 }));
 
 export const NodeInnerWrapper = styled(Box)(({ theme }) => ({
-  width: 900,
+  maxWidth: 900,
   flex: 1,
 }));

packages/web/src/components/EditorNew/Nodes/FlowStepNode/FlowStepNode.jsx

@@ -1,69 +0,0 @@
-import { Handle, Position } from 'reactflow';
-import PropTypes from 'prop-types';
-
-import FlowStep from 'components/FlowStep';
-
-import { NodeWrapper, NodeInnerWrapper } from './style.js';
-import { useContext } from 'react';
-import { NodesContext } from '../../EditorNew.jsx';
-import { findStepByStepId } from 'components/EditorNew/utils.js';
-
-function FlowStepNode({ data: { collapsed, laidOut }, id }) {
-  const { openNextStep, onStepOpen, onStepClose, onStepChange, flowId, steps } =
-    useContext(NodesContext);
-
-  const step = findStepByStepId({ steps }, id);
-
-  return (
-    // <NodeWrapper
-    //   sx={{
-    //     visibility: laidOut ? 'visible' : 'hidden',
-    //   }}
-    // >
-    <NodeInnerWrapper
-      sx={
-        {
-          // visibility: laidOut ? 'visible' : 'hidden',
-        }
-      }
-      id="flowStepId"
-      className="nodrag"
-    >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-      {step && (
-        <FlowStep
-          step={step}
-          collapsed={collapsed}
-          onOpen={() => onStepOpen(step.id)}
-          onClose={onStepClose}
-          onChange={onStepChange}
-          flowId={flowId}
-          onContinue={() => openNextStep(step.id)}
-          collapseAnimation={false}
-        />
-      )}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-    </NodeInnerWrapper>
-    // </NodeWrapper>
-  );
-}
-
-FlowStepNode.propTypes = {
-  id: PropTypes.string,
-  data: PropTypes.shape({
-    collapsed: PropTypes.bool.isRequired,
-    laidOut: PropTypes.bool.isRequired,
-  }).isRequired,
-};
-
-export default FlowStepNode;

packages/web/src/components/EditorNew/Nodes/PathNode/PathNode.jsx

@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import { Handle, Position } from 'reactflow';
-import { Box, Stack, Typography } from '@mui/material';
-import { useRef, useState } from 'react';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-import IconButton from '@mui/material/IconButton';
-import { Wrapper } from './style';
-
-/* TODO 
-    - add delete
-    - add rename 
-    - add translations
-    - add collapsing?
-*/
-
-function PathNode({ data: { laidOut } }) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const contextButtonRef = useRef(null);
-
-  const onContextMenuClose = (event) => {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-
-  const onContextMenuClick = (event) => {
-    event.stopPropagation();
-    setAnchorEl(contextButtonRef.current);
-  };
-
-  const deletePath = () => {
-    setAnchorEl(null);
-    onContextMenuClose();
-  };
-
-  return (
-    <>
-      <Box
-        className="nodrag"
-        sx={
-          {
-            // visibility: laidOut ? 'visible' : 'hidden',
-          }
-        }
-      >
-        <Handle
-          type="target"
-          position={Position.Top}
-          isConnectable={false}
-          style={{ visibility: 'hidden' }}
-        />
-
-        <Wrapper>
-          <Stack
-            justifyContent="space-between"
-            alignItems="center"
-            direction="row"
-          >
-            <Typography sx={{ pr: 2 }}>Path</Typography>
-            <IconButton
-              color="primary"
-              onClick={onContextMenuClick}
-              ref={contextButtonRef}
-            >
-              <MoreHorizIcon />
-            </IconButton>
-          </Stack>
-        </Wrapper>
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          isConnectable={false}
-          style={{ visibility: 'hidden' }}
-        />
-      </Box>
-      {anchorEl && (
-        <Menu
-          open={true}
-          onClose={onContextMenuClose}
-          hideBackdrop={false}
-          anchorEl={anchorEl}
-        >
-          <MenuItem onClick={deletePath}>Delete</MenuItem>
-        </Menu>
-      )}
-    </>
-  );
-}
-
-PathNode.propTypes = {
-  data: PropTypes.shape({
-    laidOut: PropTypes.bool,
-  }).isRequired,
-};
-
-export default PathNode;

packages/web/src/components/EditorNew/Nodes/PathNode/style.js

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-
-export const Wrapper = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(1, 2),
-  backgroundColor: '#0059f714',
-  borderRadius: 20,
-}));

packages/web/src/components/EditorNew/Nodes/PathsNode/PathsNode.jsx

@@ -1,108 +0,0 @@
-import PropTypes from 'prop-types';
-import { Handle, Position } from 'reactflow';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
-import { useRef, useState } from 'react';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import CallSplitIcon from '@mui/icons-material/CallSplit';
-
-import IconButton from '@mui/material/IconButton';
-import { Wrapper } from './style';
-
-/* TODO 
-    - add delete
-    - add rename 
-    - add translations
-    - add collapsing?
-*/
-
-function PathsNode({ data: { laidOut } }) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const contextButtonRef = useRef(null);
-
-  const onContextMenuClose = (event) => {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-
-  const onContextMenuClick = (event) => {
-    event.stopPropagation();
-    setAnchorEl(contextButtonRef.current);
-  };
-
-  const deletePaths = () => {
-    setAnchorEl(null);
-    onContextMenuClose();
-  };
-
-  return (
-    <>
-      <Box
-        width={900}
-        className="nodrag"
-        sx={
-          {
-            // visibility: laidOut ? 'visible' : 'hidden',
-          }
-        }
-      >
-        <Handle
-          type="target"
-          position={Position.Top}
-          isConnectable={false}
-          style={{ visibility: 'hidden' }}
-        />
-
-        <Wrapper>
-          <Stack justifyContent="space-between" direction="row">
-            <Stack direction="row" alignItems="center" spacing={2}>
-              <Avatar
-                sx={{ display: 'flex', width: 50, height: 50 }}
-                variant="square"
-              >
-                <CallSplitIcon
-                  fontSize="large"
-                  sx={{ transform: 'rotate(180deg)' }}
-                />
-              </Avatar>
-              {/* TODO name from path data */}
-              <Typography>Paths</Typography>
-            </Stack>
-            <IconButton
-              color="primary"
-              onClick={onContextMenuClick}
-              ref={contextButtonRef}
-            >
-              <MoreHorizIcon />
-            </IconButton>
-          </Stack>
-        </Wrapper>
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          isConnectable={false}
-          style={{ visibility: 'hidden' }}
-        />
-      </Box>
-      {anchorEl && (
-        <Menu
-          open={true}
-          onClose={onContextMenuClose}
-          hideBackdrop={false}
-          anchorEl={anchorEl}
-        >
-          <MenuItem onClick={deletePaths}>Delete</MenuItem>
-        </Menu>
-      )}
-    </>
-  );
-}
-
-PathsNode.propTypes = {
-  data: PropTypes.shape({
-    laidOut: PropTypes.bool,
-  }).isRequired,
-};
-
-export default PathsNode;

packages/web/src/components/EditorNew/Nodes/PathsNode/style.js

@@ -1,7 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-
-export const Wrapper = styled(Card)`
-  width: 100%;
-  padding: ${({ theme }) => theme.spacing(2)};
-`;

packages/web/src/components/EditorNew/constants.js

@@ -1,14 +0,0 @@
-export const INVISIBLE_NODE_ID = 'invisible-node';
-
-export const NODE_TYPES = {
-  FLOW_STEP: 'flowStep',
-  INVISIBLE: 'invisible',
-  PATHS: 'parallelPaths',
-  PATH: 'path',
-};
-
-export const EDGE_TYPES = {
-  ADD_NODE_OR_PATHS_EDGE: 'addNodeOrPathsEdge',
-  ADD_PATH_EDGE: 'addPathEdge',
-  ADD_NODE_EDGE: 'addNodeEdge',
-};

packages/web/src/components/EditorNew/style.js

@@ -7,7 +7,7 @@ export const EditorWrapper = styled(Stack)(({ theme }) => ({
     flexGrow: 1,
   },
 
-  // '& .react-flow__pane, & .react-flow__node': {
+  '& .react-flow__pane, & .react-flow__node': {
-  //   cursor: 'auto !important',
+    cursor: 'auto !important',
-  // },
+  },
 }));

packages/web/src/components/EditorNew/temp/useFlow.js

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { insertStep } from '../utils';
-
-const initFlow = {
-  id: '7c55e6ce-a84a-46e3-ba31-211ec7b5c2cb',
-  name: 'Name your flow',
-  active: false,
-  status: 'draft',
-  createdAt: 1718264916266,
-  updatedAt: 1718264916266,
-  steps: [
-    {
-      id: '82ce34ab-7aab-4e6c-9f62-db5104aa81c6',
-      type: 'trigger',
-      key: null,
-      appKey: null,
-      iconUrl: null,
-      webhookUrl: 'http://localhost:3000/null',
-      status: 'incomplete',
-      position: 1,
-      parameters: {},
-    },
-    {
-      id: '41c60527-eb4f-4f2d-93ec-2fd37e336909',
-      type: 'action',
-      key: null,
-      appKey: null,
-      iconUrl: null,
-      webhookUrl: 'http://localhost:3000/null',
-      status: 'incomplete',
-      position: 2,
-      parameters: {},
-    },
-  ],
-};
-
-const generateStep = () => {
-  return {
-    id: uuidv4(),
-    type: 'action',
-    key: null,
-    appKey: null,
-    parameters: {},
-    iconUrl: null,
-    webhookUrl: 'http://localhost:3000/null',
-    status: 'incomplete',
-    connection: null,
-    position: null,
-  };
-};
-
-const generatePath = (steps) => {
-  return {
-    id: uuidv4(),
-    type: 'path',
-    steps: steps?.length > 0 ? steps : [generateStep()],
-  };
-};
-
-export const generatePaths = (steps) => {
-  return {
-    id: uuidv4(),
-    type: 'parallelPaths',
-    steps: [generatePath(steps), generatePath()],
-  };
-};
-
-export const useFlow = () => {
-  const [flow, setFlow] = useState(initFlow);
-
-  const createStep = (flow, previousStepId) => {
-    const newStep = generateStep();
-    const newFlow = insertStep(flow, previousStepId, newStep);
-
-    setFlow(newFlow);
-    return newStep.id;
-  };
-
-  const createPaths = (previousStepId) => {
-    const newFlow = insertStep(flow, previousStepId, generatePaths());
-    setFlow(newFlow);
-  };
-
-  const createPath = (previousStepId) => {
-    const newFlow = insertStep(flow, previousStepId, generatePath());
-    setFlow(newFlow);
-  };
-
-  return {
-    flow,
-    createStep,
-    createPaths,
-    createPath,
-  };
-};

packages/web/src/components/EditorNew/useAutoLayout.js

@@ -4,7 +4,7 @@ import { usePrevious } from 'hooks/usePrevious';
 import { isEqual } from 'lodash';
 import { useNodesInitialized, useNodes, useReactFlow } from 'reactflow';
 
-const getLaidOutElements = (nodes, edges) => {
+const getLayoutedElements = (nodes, edges) => {
   const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   graph.setGraph({
     rankdir: 'TB',
@@ -32,22 +32,22 @@ export const useAutoLayout = () => {
   const nodes = useNodes();
   const prevNodes = usePrevious(nodes);
   const nodesInitialized = useNodesInitialized();
-  const { getEdges, setNodes, setEdges, fitView } = useReactFlow();
+  const { getEdges, setNodes, setEdges } = useReactFlow();
 
   const onLayout = useCallback(
     (nodes, edges) => {
-      const laidOutElements = getLaidOutElements(nodes, edges);
+      const layoutedElements = getLayoutedElements(nodes, edges);
 
       setNodes([
-        ...laidOutElements.nodes.map((node) => ({
+        ...layoutedElements.nodes.map((node) => ({
           ...node,
-          data: { ...node.data, laidOut: true },
+          data: { ...node.data, layouted: true },
         })),
       ]);
       setEdges([
-        ...laidOutElements.edges.map((edge) => ({
+        ...layoutedElements.edges.map((edge) => ({
           ...edge,
-          data: { ...edge.data, laidOut: true },
+          data: { ...edge.data, layouted: true },
         })),
       ]);
     },
@@ -62,8 +62,6 @@ export const useAutoLayout = () => {
         prevNodes.map(({ width, height }) => ({ width, height })),
       );
 
-    fitView();
-
     if (shouldAutoLayout) {
       onLayout(nodes, getEdges());
     }

packages/web/src/components/EditorNew/useScrollBoundries.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useViewport, useReactFlow } from 'reactflow';
 
-export const useScrollBoundaries = () => {
+export const useScrollBoundries = () => {
   const { setViewport } = useReactFlow();
   const { x, y, zoom } = useViewport();
 

packages/web/src/components/EditorNew/utils.js

@@ -1,245 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep.js';
-import { EDGE_TYPES, INVISIBLE_NODE_ID, NODE_TYPES } from './constants';
-
-export const generateEdgeId = (sourceId, targetId) =>
-  `${sourceId}--${targetId}`;
-
-export const updatedCollapsedNodes = (nodes, openStepId) => {
-  return nodes.map((node) => {
-    if (node.type !== NODE_TYPES.FLOW_STEP) {
-      return node;
-    }
-
-    const collapsed = node.id !== openStepId;
-    return {
-      ...node,
-      zIndex: collapsed ? 0 : 1,
-      data: { ...node.data, collapsed },
-    };
-  });
-};
-
-export const generateNodes = ({ steps, prevNodes, createdStepId }) => {
-  const newNodes = steps.map((step, index) => {
-    const collapsed = index !== 0;
-
-    const prevNode = prevNodes?.find(({ id }) => id === step.id);
-
-    let newNode;
-    let childSteps = [];
-
-    switch (step.type) {
-      case 'trigger':
-      case 'action': {
-        if (prevNode) {
-          newNode = {
-            ...prevNode,
-            zIndex: createdStepId ? 0 : prevNode?.zIndex || 0,
-            data: {
-              ...prevNode.data,
-              collapsed: createdStepId
-                ? true
-                : prevNode?.data?.collapsed || true,
-            },
-          };
-        } else {
-          newNode = {
-            id: step.id,
-            type: NODE_TYPES.FLOW_STEP,
-            position: {
-              x: 0,
-              y: 0,
-            },
-            zIndex: collapsed ? 0 : 1,
-            data: {
-              collapsed,
-              laidOut: false,
-            },
-          };
-        }
-        break;
-      }
-      case 'parallelPaths': {
-        if (prevNode) {
-          newNode = prevNode;
-        } else {
-          newNode = {
-            id: step.id,
-            type: NODE_TYPES.PATHS,
-            position: {
-              x: 0,
-              y: 0,
-            },
-            data: {
-              laidOut: false,
-            },
-          };
-        }
-
-        break;
-      }
-      case 'path': {
-        if (prevNode) {
-          newNode = prevNode;
-        } else {
-          newNode = {
-            id: step.id,
-            type: NODE_TYPES.PATH,
-            position: {
-              x: 0,
-              y: 0,
-            },
-            data: {
-              laidOut: false,
-            },
-          };
-        }
-        break;
-      }
-      default:
-    }
-
-    if (step?.steps?.length > 0) {
-      childSteps = generateNodes({
-        steps: step.steps,
-        prevNodes,
-        createdStepId,
-      });
-    }
-
-    return [newNode, ...childSteps];
-  });
-
-  return newNodes.flat(Infinity);
-};
-
-export const generateEdges = ({ steps }) => {
-  const newEdges = steps.map((step, index) => {
-    switch (step.type) {
-      case 'parallelPaths': {
-        const edges = step.steps.map((childStep) => {
-          const sourceId = step.id;
-          const targetId = childStep.id;
-
-          const newEdge = {
-            id: generateEdgeId(sourceId, targetId),
-            source: sourceId,
-            target: targetId,
-            type: EDGE_TYPES.ADD_PATH_EDGE,
-            data: {
-              laidOut: false,
-            },
-          };
-
-          return newEdge;
-        });
-
-        const childEdges = generateEdges({ steps: step.steps });
-
-        return [...edges, ...childEdges];
-      }
-      case 'path': {
-        console.log({ step });
-
-        const sourceId = step.id;
-        const targetId = step.steps?.[0]?.id;
-
-        if (targetId) {
-          const newEdge = {
-            id: generateEdgeId(sourceId, targetId),
-            source: sourceId,
-            target: targetId,
-            type: EDGE_TYPES.ADD_NODE_EDGE,
-            data: {
-              laidOut: false,
-            },
-          };
-          const childEdges = generateEdges({ steps: step.steps });
-
-          return [newEdge, ...childEdges];
-        }
-        return null;
-      }
-      default: {
-        const sourceId = step.id;
-        const targetId = steps[index + 1]?.id;
-
-        if (targetId) {
-          return {
-            id: generateEdgeId(sourceId, targetId),
-            source: sourceId,
-            target: targetId,
-            type: EDGE_TYPES.ADD_NODE_OR_PATHS_EDGE,
-            data: {
-              laidOut: false,
-            },
-          };
-        }
-        return null;
-      }
-    }
-  });
-
-  return newEdges.flat(Infinity).filter((edge) => !!edge);
-};
-
-export const findStepByStepId = (obj, id) => {
-  if (Array.isArray(obj.steps)) {
-    for (const step of obj.steps) {
-      if (step.id === id) {
-        return step;
-      }
-      const result = findStepByStepId(step, id);
-      if (result) {
-        return result;
-      }
-    }
-  }
-  return null;
-};
-
-export function insertStep(parentObj, id, newStep) {
-  function recursiveFindAndInsert(parentObj, id, newStep) {
-    if (parentObj.steps && Array.isArray(parentObj.steps)) {
-      for (let index = 0; index < parentObj.steps.length; index++) {
-        const step = parentObj.steps[index];
-        if (step.id === id) {
-          if (newStep.type === NODE_TYPES.PATHS) {
-            const stepsAfter = parentObj.steps.slice(
-              index + 1,
-              parentObj.steps.length,
-            );
-            parentObj.steps.splice(index + 1);
-            newStep.steps[0].steps = stepsAfter;
-            parentObj.steps.splice(index + 1, 0, newStep);
-          } else if (step.type === NODE_TYPES.PATHS) {
-            step.steps.push(newStep);
-          } else if (step.type === NODE_TYPES.PATH) {
-            step.steps.unshift(newStep);
-          } else {
-            const originalSteps = step.steps || [];
-            step.steps = [];
-
-            const newStepObject = {
-              ...newStep,
-              steps: originalSteps,
-            };
-
-            parentObj.steps.splice(index + 1, 0, newStepObject);
-          }
-          return true;
-        }
-        const found = recursiveFindAndInsert(step, id, newStep);
-        if (found) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  // Clone the input object to avoid mutating the original
-  const newParentObj = cloneDeep(parentObj);
-  recursiveFindAndInsert(newParentObj, id, newStep);
-  return newParentObj;
-}

packages/web/src/components/FlowStep/index.jsx

@@ -105,7 +105,7 @@ function generateValidationSchema(substeps) {
 }
 
 function FlowStep(props) {
-  const { collapsed, onChange, onContinue, flowId, collapseAnimation } = props;
+  const { collapsed, onChange, onContinue, flowId } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
   const step = props.step;
@@ -259,11 +259,7 @@ function FlowStep(props) {
         </Stack>
       </Header>
 
-      <Collapse
+      <Collapse in={!collapsed} unmountOnExit>
-        in={!collapsed}
-        unmountOnExit
-        {...(!collapseAnimation ? { timeout: 0 } : {})}
-      >
         <Content>
           <List>
             <StepExecutionsProvider value={stepWithTestExecutionsData}>
@@ -364,15 +360,11 @@ function FlowStep(props) {
 FlowStep.propTypes = {
   collapsed: PropTypes.bool,
   step: StepPropType.isRequired,
+  index: PropTypes.number,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   onContinue: PropTypes.func,
-  collapseAnimation: PropTypes.bool,
-};
-
-FlowStep.defaultProps = {
-  collapseAnimation: true,
 };
 
 export default FlowStep;

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

@@ -30,7 +30,6 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useApp from 'hooks/useApp';
-import Can from 'components/Can';
 
 const ReconnectConnection = (props) => {
   const { application, onClose } = props;
@@ -93,7 +92,7 @@ export default function Application() {
     }
 
     return options;
-  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
+  }, [appKey, appConfig?.data, currentUserAbility]);
 
   if (loading) return null;
 
@@ -119,46 +118,37 @@ export default function Application() {
                 <Route
                   path={`${URLS.FLOWS}/*`}
                   element={
-                    <Can I="create" a="Flow" passThrough>
+                    <ConditionalIconButton
-                      {(allowed) => (
+                      type="submit"
-                        <ConditionalIconButton
+                      variant="contained"
-                          type="submit"
+                      color="primary"
-                          variant="contained"
+                      size="large"
-                          color="primary"
+                      component={Link}
-                          size="large"
+                      to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
-                          component={Link}
+                        appKey,
-                          to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                        connectionId,
-                            appKey,
-                            connectionId,
-                          )}
-                          fullWidth
-                          icon={<AddIcon />}
-                          disabled={!allowed}
-                        >
-                          {formatMessage('app.createFlow')}
-                        </ConditionalIconButton>
                       )}
-                    </Can>
+                      fullWidth
+                      icon={<AddIcon />}
+                      disabled={!currentUserAbility.can('create', 'Flow')}
+                    >
+                      {formatMessage('app.createFlow')}
+                    </ConditionalIconButton>
                   }
                 />
 
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
                   element={
-                    <Can I="create" a="Connection" passThrough>
+                    <SplitButton
-                      {(allowed) => (
+                      disabled={
-                        <SplitButton
+                        (appConfig?.data &&
-                          disabled={
+                          !appConfig?.data?.canConnect &&
-                            !allowed ||
+                          !appConfig?.data?.canCustomConnect) ||
-                            (appConfig?.data &&
+                        connectionOptions.every(({ disabled }) => disabled)
-                              !appConfig?.data?.canConnect &&
+                      }
-                              !appConfig?.data?.canCustomConnect) ||
+                      options={connectionOptions}
-                            connectionOptions.every(({ disabled }) => disabled)
+                    />
-                          }
-                          options={connectionOptions}
-                        />
-                      )}
-                    </Can>
                   }
                 />
               </Routes>
@@ -179,20 +169,17 @@ export default function Application() {
                     label={formatMessage('app.connections')}
                     to={URLS.APP_CONNECTIONS(appKey)}
                     value={URLS.APP_CONNECTIONS_PATTERN}
-                    disabled={
+                    disabled={!app.supportsConnections}
-                      !currentUserAbility.can('read', 'Connection') ||
-                      !app.supportsConnections
-                    }
                     component={Link}
                     data-test="connections-tab"
                   />
+
                   <Tab
                     label={formatMessage('app.flows')}
                     to={URLS.APP_FLOWS(appKey)}
                     value={URLS.APP_FLOWS_PATTERN}
                     component={Link}
                     data-test="flows-tab"
-                    disabled={!currentUserAbility.can('read', 'Flow')}
                   />
                 </Tabs>
               </Box>
@@ -200,20 +187,14 @@ export default function Application() {
               <Routes>
                 <Route
                   path={`${URLS.FLOWS}/*`}
-                  element={
+                  element={<AppFlows appKey={appKey} />}
-                    <Can I="read" a="Flow">
-                      <AppFlows appKey={appKey} />
-                    </Can>
-                  }
                 />
+
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
-                  element={
+                  element={<AppConnections appKey={appKey} />}
-                    <Can I="read" a="Connection">
-                      <AppConnections appKey={appKey} />
-                    </Can>
-                  }
                 />
+
                 <Route
                   path="/"
                   element={
@@ -237,24 +218,17 @@ export default function Application() {
         <Route
           path="/connections/add"
           element={
-            <Can I="create" a="Connection">
+            <AddAppConnection onClose={goToApplicationPage} application={app} />
-              <AddAppConnection
-                onClose={goToApplicationPage}
-                application={app}
-              />
-            </Can>
           }
         />
 
         <Route
           path="/connections/:connectionId/reconnect"
           element={
-            <Can I="create" a="Connection">
+            <ReconnectConnection
-              <ReconnectConnection
+              application={app}
-                application={app}
+              onClose={goToApplicationPage}
-                onClose={goToApplicationPage}
+            />
-              />
-            </Can>
           }
         />
       </Routes>

packages/web/src/pages/Applications/index.jsx

@@ -84,14 +84,10 @@ export default function Applications() {
         )}
 
         {!isLoading && !hasApps && (
-          <Can I="create" a="Connection" passThrough>
+          <NoResultFound
-            {(allowed) => (
+            text={formatMessage('apps.noConnections')}
-              <NoResultFound
+            to={URLS.NEW_APP_CONNECTION}
-                text={formatMessage('apps.noConnections')}
+          />
-                {...(allowed && { to: URLS.NEW_APP_CONNECTION })}
-              />
-            )}
-          </Can>
         )}
 
         {!isLoading &&