style(Flows): change space between arrow node and stage node. Refactor files architecture for workflows entire feature.

Signed-off-by: reslene <[email protected]>

Author: reslene

app/routes/instances/$instanceId.tsx

@@ -26,6 +26,13 @@ import {
 } from '@numaryhq/storybook';
 
 import { getRoute, WORKFLOW_ROUTE } from '~/src/components/Layout/routes';
+import CustomNode from '~/src/components/Workflows/CustomNode';
+import ArrowNode from '~/src/components/Workflows/CustomNode/ArrowNode';
+import ActivitiesWrapper from '~/src/components/Workflows/histories/activities/ActivitiesWrapper';
+import {
+  logsFactory,
+  OrchestrationFactoryLog,
+} from '~/src/components/Workflows/logs/factory';
 import ComponentErrorBoundary from '~/src/components/Wrappers/ComponentErrorBoundary';
 import IconTitlePage from '~/src/components/Wrappers/IconTitlePage';
 import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
@@ -35,13 +42,6 @@ import {
   orchestrationInstanceStatusIconMap,
 } from '~/src/components/Wrappers/StatusChip/maps';
 import Table from '~/src/components/Wrappers/Table';
-import CustomNode from '~/src/components/Wrappers/Workflows/CustomNode';
-import ArrowNode from '~/src/components/Wrappers/Workflows/CustomNode/ArrowNode';
-import ActivitiesWrapper from '~/src/components/Wrappers/Workflows/histories/activities/ActivitiesWrapper';
-import {
-  logsFactory,
-  OrchestrationFactoryLog,
-} from '~/src/components/Wrappers/Workflows/logs/factory';
 import {
   FlowInstance,
   OrchestrationInstanceStatuses,
@@ -146,7 +146,7 @@ export default function Index() {
 
   const stagesNodes = instance.stages
     .map((stage: any, index: number) => {
-      x = x + index === 0 ? initPosInstance : x + 400;
+      x = x + index === 0 ? initPosInstance : x + 350;
       if (isEmpty(stage.error) && stage.name) {
         const nodes = [
           {
@@ -169,7 +169,7 @@ export default function Index() {
             draggable: false,
             selectable: false,
             id: `arrow-node-${index}`,
-            position: { x: x + 210, y: 100 },
+            position: { x: x + 185, y: 100 },
           } as any);
         }
         if (stage.activities.length > 0) {

app/routes/workflows/$workflowId.tsx

@@ -12,12 +12,12 @@ import invariant from 'tiny-invariant';
 
 import { Chip, Date, Page, Row, SectionWrapper } from '@numaryhq/storybook';
 
+import CustomNode from '~/src/components/Workflows/CustomNode';
+import ArrowNode from '~/src/components/Workflows/CustomNode/ArrowNode';
 import ComponentErrorBoundary from '~/src/components/Wrappers/ComponentErrorBoundary';
 import IconTitlePage from '~/src/components/Wrappers/IconTitlePage';
 import InstanceList from '~/src/components/Wrappers/Lists/InstanceList';
 import Table from '~/src/components/Wrappers/Table';
-import CustomNode from '~/src/components/Wrappers/Workflows/CustomNode';
-import ArrowNode from '~/src/components/Wrappers/Workflows/CustomNode/ArrowNode';
 import { FlowWorkflow } from '~/src/types/orchestration';
 import { API_ORCHESTRATION } from '~/src/utils/api';
 import { createApiClient } from '~/src/utils/api.server';
@@ -68,7 +68,7 @@ export default function Index() {
   const initPos = workflow.config.stages.length === 1 ? 0 : -200;
   const nodes = workflow.config.stages
     .map((stage: any, index: number) => {
-      x = x + index === 0 ? initPos : x + 360;
+      x = x + index === 0 ? initPos : x + 300;
 
       const nodes = [
         {
@@ -89,7 +89,7 @@ export default function Index() {
           draggable: false,
           selectable: false,
           id: `arrow-node-${index}`,
-          position: { x: x + 190, y: 250 },
+          position: { x: x + 160, y: 250 },
         } as any);
       }
 

app/src/components/Wrappers/Workflows/CustomNode/ArrowNode/ArrowNode.tsx app/src/components/Workflows/CustomNode/ArrowNode/ArrowNode.tsx

@@ -10,15 +10,15 @@ const ArrowNode: FunctionComponent<ArrowNodeProps> = () => (
     <Box
       sx={{
         borderBottom: ({ palette }) => `1px solid ${palette.neutral[400]}`,
-        width: 110,
+        width: 60,
       }}
     />
     <ArrowRight
       sx={{
         position: 'absolute',
         top: '-11px',
         zIndex: 9,
-        left: '95px',
+        left: '46px',
         color: ({ palette }) => palette.neutral[500],
       }}
     />

app/src/components/Wrappers/Workflows/CustomNode/ArrowNode/index.ts app/src/components/Workflows/CustomNode/ArrowNode/index.ts

@@ -6,18 +6,18 @@ import { Handle, Position } from 'reactflow';
 
 import { CustomNodeProps } from './types';
 
-import CreateTransaction from '~/src/components/Wrappers/Workflows/histories/activities/CreateTransaction';
-import CreditWallet from '~/src/components/Wrappers/Workflows/histories/activities/CreditWallet';
-import DebitWallet from '~/src/components/Wrappers/Workflows/histories/activities/DebitWallet';
-import GetAccount from '~/src/components/Wrappers/Workflows/histories/activities/GetAccount';
-import GetPayment from '~/src/components/Wrappers/Workflows/histories/activities/GetPayment';
-import GetWallet from '~/src/components/Wrappers/Workflows/histories/activities/GetWallet';
-import RevertTransaction from '~/src/components/Wrappers/Workflows/histories/activities/RevertTransaction';
-import StripeTransfer from '~/src/components/Wrappers/Workflows/histories/activities/StripeTransfer';
-import RunSend from '~/src/components/Wrappers/Workflows/histories/RunSend';
-import DelayStage from '~/src/components/Wrappers/Workflows/stages/DelayStage';
-import SendStage from '~/src/components/Wrappers/Workflows/stages/SendStage';
-import WaitEventStage from '~/src/components/Wrappers/Workflows/stages/WaitEventStage/WaitEventStage';
+import CreateTransaction from '~/src/components/Workflows/histories/activities/CreateTransaction';
+import CreditWallet from '~/src/components/Workflows/histories/activities/CreditWallet';
+import DebitWallet from '~/src/components/Workflows/histories/activities/DebitWallet';
+import GetAccount from '~/src/components/Workflows/histories/activities/GetAccount';
+import GetPayment from '~/src/components/Workflows/histories/activities/GetPayment';
+import GetWallet from '~/src/components/Workflows/histories/activities/GetWallet';
+import RevertTransaction from '~/src/components/Workflows/histories/activities/RevertTransaction';
+import StripeTransfer from '~/src/components/Workflows/histories/activities/StripeTransfer';
+import RunSend from '~/src/components/Workflows/histories/RunSend';
+import DelayStage from '~/src/components/Workflows/stages/DelayStage';
+import SendStage from '~/src/components/Workflows/stages/SendStage';
+import WaitEventStage from '~/src/components/Workflows/stages/WaitEventStage/WaitEventStage';
 import {
   OrchestrationRunHistories,
   OrchestrationStages,

app/src/components/Wrappers/Workflows/CustomNode/ArrowNode/types.ts app/src/components/Workflows/CustomNode/ArrowNode/types.ts

@@ -4,7 +4,7 @@ import { Alert, Box, Typography } from '@mui/material';
 import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
-import { ErrorBoxProps } from '~/src/components/Wrappers/Workflows/CustomNode/ErrorBox/types';
+import { ErrorBoxProps } from '~/src/components/Workflows/CustomNode/ErrorBox/types';
 
 const ErrorBox: FunctionComponent<ErrorBoxProps> = ({ error }) => {
   const { t } = useTranslation();

app/src/components/Wrappers/Workflows/CustomNode/CustomNode.tsx app/src/components/Workflows/CustomNode/CustomNode.tsx

@@ -5,7 +5,7 @@ import { Box, Typography } from '@mui/material';
 
 import { LoadingButton } from '@numaryhq/storybook';
 
-import { NodeTitleProps } from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle/types';
+import { NodeTitleProps } from '~/src/components/Workflows/CustomNode/NodeTitle/types';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const NodeTitle: FunctionComponent<NodeTitleProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/ErrorBox/ErrorBox.tsx app/src/components/Workflows/CustomNode/ErrorBox/ErrorBox.tsx

@@ -15,13 +15,13 @@ import {
   PAYMENT_ROUTE,
   WALLET_ROUTE,
 } from '~/src/components/Layout/routes';
-import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
+import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
 import {
   OrchestrationStageInput,
   OrchestrationStageInputAccount,

app/src/components/Wrappers/Workflows/CustomNode/ErrorBox/index.ts app/src/components/Workflows/CustomNode/ErrorBox/index.ts

@@ -8,15 +8,15 @@ import { RunSendProps } from './types';
 
 import { Date } from '@numaryhq/storybook';
 
-import ErrorBox from '~/src/components/Wrappers/Workflows/CustomNode/ErrorBox';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import SourceDestinationBox from '~/src/components/Wrappers/Workflows/CustomNode/SourceDestinationBox';
+import ErrorBox from '~/src/components/Workflows/CustomNode/ErrorBox';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import SourceDestinationBox from '~/src/components/Workflows/CustomNode/SourceDestinationBox';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   placeholderSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
 
 const RunSend: FunctionComponent<RunSendProps> = ({
   startedAt,

app/src/components/Wrappers/Workflows/CustomNode/ErrorBox/types.ts app/src/components/Workflows/CustomNode/ErrorBox/types.ts

@@ -6,8 +6,8 @@ import { Handle, Position } from 'reactflow';
 
 import { ActivitiesWrapperProps } from './types';
 
-import CustomNode from '~/src/components/Wrappers/Workflows/CustomNode/CustomNode';
-import SequentialNode from '~/src/components/Wrappers/Workflows/CustomNode/SequentialNode/SequentialNode';
+import CustomNode from '~/src/components/Workflows/CustomNode/CustomNode';
+import SequentialNode from '~/src/components/Workflows/CustomNode/SequentialNode/SequentialNode';
 
 const ActivitiesWrapper: FunctionComponent<ActivitiesWrapperProps> = ({
   data: { details },

app/src/components/Wrappers/Workflows/CustomNode/NodeTitle/NodeTitle.tsx app/src/components/Workflows/CustomNode/NodeTitle/NodeTitle.tsx

@@ -8,17 +8,17 @@ import { useTranslation } from 'react-i18next';
 import { Chip, CopyPasteTooltip, Date, JsonViewer } from '@numaryhq/storybook';
 
 import { getLedgerTransactionDetailsRoute } from '~/src/components/Layout/routes';
-import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { CreateTransactionProps } from '~/src/components/Wrappers/Workflows/histories/activities/CreateTransaction/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { CreateTransactionProps } from '~/src/components/Workflows/histories/activities/CreateTransaction/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   jsonContainer,
   placeholderSx,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
+import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const CreateTransaction: FunctionComponent<CreateTransactionProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/NodeTitle/index.ts app/src/components/Workflows/CustomNode/NodeTitle/index.ts

@@ -7,15 +7,15 @@ import { useTranslation } from 'react-i18next';
 
 import { Chip, JsonViewer } from '@numaryhq/storybook';
 
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { CreditWalletProps } from '~/src/components/Wrappers/Workflows/histories/activities/CreditWallet/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { CreditWalletProps } from '~/src/components/Workflows/histories/activities/CreditWallet/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   jsonContainer,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const CreditWallet: FunctionComponent<CreditWalletProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/NodeTitle/types.ts app/src/components/Workflows/CustomNode/NodeTitle/types.ts

@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next';
 
 import { Chip } from '@numaryhq/storybook';
 
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { DebitWalletProps } from '~/src/components/Wrappers/Workflows/histories/activities/DebitWallet/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { DebitWalletProps } from '~/src/components/Workflows/histories/activities/DebitWallet/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const DebitWallet: FunctionComponent<DebitWalletProps> = ({ amount }) => {

app/src/components/Wrappers/Workflows/CustomNode/SequentialNode/SequentialNode.tsx app/src/components/Workflows/CustomNode/SequentialNode/SequentialNode.tsx

@@ -8,16 +8,16 @@ import { useTranslation } from 'react-i18next';
 import { JsonViewer } from '@numaryhq/storybook';
 
 import { getLedgerAccountDetailsRoute } from '~/src/components/Layout/routes';
-import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { GetAccountProps } from '~/src/components/Wrappers/Workflows/histories/activities/GetAccount/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { GetAccountProps } from '~/src/components/Workflows/histories/activities/GetAccount/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   jsonContainer,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
+import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const GetAccount: FunctionComponent<GetAccountProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/SequentialNode/index.ts app/src/components/Workflows/CustomNode/SequentialNode/index.ts

@@ -7,6 +7,16 @@ import { useTranslation } from 'react-i18next';
 import { Chip, Date, JsonViewer } from '@numaryhq/storybook';
 
 import { getRoute, PAYMENT_ROUTE } from '~/src/components/Layout/routes';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { GetPaymentProps } from '~/src/components/Workflows/histories/activities/GetPayment/types';
+import {
+  chipContainer,
+  containerSx,
+  getPlaceholder,
+  jsonContainer,
+  placeholderSx,
+  typoSx,
+} from '~/src/components/Workflows/stages/utils';
 import { PaymentSchemeChip } from '~/src/components/Wrappers/PaymentSchemeChip/PaymentSchemeChip';
 import ProviderPicture from '~/src/components/Wrappers/ProviderPicture';
 import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
@@ -17,16 +27,6 @@ import {
   paymentTypeColorMap,
   paymentTypeIconMap,
 } from '~/src/components/Wrappers/StatusChip/maps';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { GetPaymentProps } from '~/src/components/Wrappers/Workflows/histories/activities/GetPayment/types';
-import {
-  chipContainer,
-  containerSx,
-  getPlaceholder,
-  jsonContainer,
-  placeholderSx,
-  typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const GetPayment: FunctionComponent<GetPaymentProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/SequentialNode/types.ts app/src/components/Workflows/CustomNode/SequentialNode/types.ts

@@ -12,17 +12,17 @@ import {
   LEDGER_ROUTE,
   WALLET_ROUTE,
 } from '~/src/components/Layout/routes';
-import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { GetWalletProps } from '~/src/components/Wrappers/Workflows/histories/activities/GetWallet/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { GetWalletProps } from '~/src/components/Workflows/histories/activities/GetWallet/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   jsonContainer,
   placeholderSx,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
+import RoutingChip from '~/src/components/Wrappers/RoutingChip/RoutingChip';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const GetWallet: FunctionComponent<GetWalletProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/SourceDestinationBox/SourceDestinationBox.tsx app/src/components/Workflows/CustomNode/SourceDestinationBox/SourceDestinationBox.tsx

@@ -4,7 +4,7 @@ import { SwapHoriz } from '@mui/icons-material';
 import { Box, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
 
 const RevertTransaction: FunctionComponent = () => {
   const { t } = useTranslation();

app/src/components/Wrappers/Workflows/CustomNode/SourceDestinationBox/index.ts app/src/components/Workflows/CustomNode/SourceDestinationBox/index.ts

@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next';
 
 import { Chip } from '@numaryhq/storybook';
 
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import { StripeTransferProps } from '~/src/components/Wrappers/Workflows/histories/activities/StripeTransfer/types';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import { StripeTransferProps } from '~/src/components/Workflows/histories/activities/StripeTransfer/types';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
   typoSx,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
 import { useToggle } from '~/src/hooks/useToggle';
 
 const StripeTransfer: FunctionComponent<StripeTransferProps> = ({

app/src/components/Wrappers/Workflows/CustomNode/SourceDestinationBox/types.ts app/src/components/Workflows/CustomNode/SourceDestinationBox/types.ts

@@ -4,7 +4,7 @@ import { SwapHoriz } from '@mui/icons-material';
 import { Box, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
 
 const VoidHold: FunctionComponent = () => {
   const { t } = useTranslation();

app/src/components/Wrappers/Workflows/CustomNode/index.ts app/src/components/Workflows/CustomNode/index.ts

@@ -7,13 +7,13 @@ import { DelayStageProps } from './types';
 
 import { Chip } from '@numaryhq/storybook';
 
-import { orchestrationStagesIconMap } from '~/src/components/Wrappers/StatusChip/maps';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
 import {
   chipContainer,
   containerSx,
   getPlaceholder,
-} from '~/src/components/Wrappers/Workflows/stages/utils';
+} from '~/src/components/Workflows/stages/utils';
+import { orchestrationStagesIconMap } from '~/src/components/Wrappers/StatusChip/maps';
 import { OrchestrationStages } from '~/src/types/orchestration';
 
 const DelayStage: FunctionComponent<DelayStageProps> = ({ delay }) => {

app/src/components/Wrappers/Workflows/CustomNode/types.ts app/src/components/Workflows/CustomNode/types.ts

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 
 import { SendStageProps } from './types';
 
+import NodeTitle from '~/src/components/Workflows/CustomNode/NodeTitle';
+import SourceDestinationBox from '~/src/components/Workflows/CustomNode/SourceDestinationBox';
 import { orchestrationStagesIconMap } from '~/src/components/Wrappers/StatusChip/maps';
-import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
-import SourceDestinationBox from '~/src/components/Wrappers/Workflows/CustomNode/SourceDestinationBox';
 import { OrchestrationStages } from '~/src/types/orchestration';
 
 const SendStage: FunctionComponent<SendStageProps> = ({ send }) => {