feat: pass pieces to flow drawer construct

activepieces · May 19, 2024 · f6d11e5 · f6d11e5
1 parent 24d96fe
commit f6d11e5
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 54 deletions.
diff --git a/packages/ui/canvas-utils/src/lib/drawing/branch-drawer.ts b/packages/ui/canvas-utils/src/lib/drawing/branch-drawer.ts
@@ -39,9 +39,7 @@ export class BranchDrawer {
     const actions =
       branchStep.type === ActionType.BRANCH
         ? [branchStep.onSuccessAction, branchStep.onFailureAction]
-        : Object.keys(outputs ?? {}).map(
-            (output) => branchStep.children?.[output]
-          );
+        : Object.keys(outputs!).map((output) => branchStep.children?.[output]);
     const branchesDrawers: FlowDrawer[] = actions.map((action) =>
       FlowDrawer.construct(action)
     );
@@ -88,7 +86,7 @@ export class BranchDrawer {
           y:
             drawerMovedToFirstChildStep.steps[0].y -
             VERTICAL_SPACE_BETWEEN_LABEL_AND_FLOW_ITEM,
-          label: BranchDrawer.setLabel(index, branchStep),
+          label: BranchDrawer.setLabel(index, outputs),
         })
         .appendSvg(lineComponentAtStartOfBranch.line)
         .appendButton(lineComponentAtStartOfBranch.button)

diff --git a/packages/ui/canvas-utils/src/lib/drawing/flow-drawer.ts b/packages/ui/canvas-utils/src/lib/drawing/flow-drawer.ts
@@ -17,26 +17,30 @@ import { SvgDrawer, drawLineComponentWithButton } from './svg-drawer';
 import { PositionedStep } from './step-card';
 import { BranchDrawer } from './branch-drawer';
 import { LoopDrawer } from './loop-drawer';
-import { environment } from '@activepieces/ui/common';
+import { PieceMetadataModel } from '@activepieces/pieces-framework';
 
-// !!!TESTING ONLY!!! Testing purpose to fetch piece metadata
-const getPieceMetadata = async (
-  name: string,
-  actionName?: string,
-  version?: string
+const filterActionFunction = (
+  pieceMetadata: PieceMetadataModel[] | undefined,
+  pieceName?: string,
+  actionName?: string | undefined
 ) => {
-  console.log('name ' + name);
-  const response = await fetch(`${environment.apiUrl}/pieces/${name}`);
-  const data = await response.json();
+  if (isNil(pieceMetadata) || isNil(pieceName) || isNil(actionName)) {
+    return undefined;
+  }
+  const piece = pieceMetadata.filter((piece) => {
+    return piece.name === pieceName;
+  })[0];
 
-  if (actionName && data.actions && data.actions[actionName]) {
-    console.log(
-      'actionName' + JSON.stringify(data.actions[actionName].outputs)
-    );
-    return data.actions[actionName].outputs;
-  } else {
-    return data;
+  if (isNil(piece)) {
+    return undefined;
   }
+
+  const action = piece.actions[actionName].outputs;
+  if (isNil(action) || Object.keys(action).length === 0) {
+    return undefined;
+  }
+
+  return action;
 };
 
 export class FlowDrawer {
@@ -50,6 +54,7 @@ export class FlowDrawer {
     y: 0,
     content: null,
   }).center('bottom');
+  static pieces: PieceMetadataModel[] | undefined = [];
   private constructor({
     svg = SvgDrawer.empty(),
     steps = [],
@@ -194,7 +199,11 @@ export class FlowDrawer {
     });
   }
 
-  static construct(step: Action | Trigger | undefined): FlowDrawer {
+  static construct(
+    step: Action | Trigger | undefined,
+    allPieces?: PieceMetadataModel[]
+  ): FlowDrawer {
+    this.pieces = allPieces ?? this.pieces;
     if (isNil(step)) {
       return new FlowDrawer({
         buttons: [],
@@ -238,18 +247,15 @@ export class FlowDrawer {
         break;
       }
       default: {
-        if (step.type === ActionType.PIECE) {
-          getPieceMetadata(
-            step.settings.pieceName,
-            step.settings.actionName,
-            step.settings.pieceVersion
-          ).then((data) => {
-            if (Object.keys(data).length > 1) {
-              const branchDrawer = BranchDrawer.handleBranchAction(step, data);
-              childHeight = branchDrawer.boundingBox().height;
-              flowDrawer = flowDrawer.mergeChild(branchDrawer);
-            }
-          });
+        const outputs = filterActionFunction(
+          this.pieces,
+          step.settings.pieceName,
+          step.settings.actionName
+        );
+        if (step.type === ActionType.PIECE && !isNil(outputs)) {
+          const branchDrawer = BranchDrawer.handleBranchAction(step, outputs);
+          childHeight = branchDrawer.boundingBox().height;
+          flowDrawer = flowDrawer.mergeChild(branchDrawer);
           break;
         }
 

diff --git a/...s/ui/feature-builder-canvas/src/lib/components/flow-item-tree/flow-item-tree.component.ts b/...s/ui/feature-builder-canvas/src/lib/components/flow-item-tree/flow-item-tree.component.ts
@@ -1,5 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable, combineLatest, map } from 'rxjs';
+import {
+  Observable,
+  combineLatest,
+  filter,
+  from,
+  map,
+  mergeMap,
+  switchMap,
+  toArray,
+} from 'rxjs';
 import { BuilderSelectors } from '@activepieces/ui/feature-builder-store';
 import { Store } from '@ngrx/store';
 import {
@@ -12,6 +21,9 @@ import {
   PositionedStep,
   DEFAULT_TOP_MARGIN,
 } from '@activepieces/ui-canvas-utils';
+import { PieceMetadataService } from '@activepieces/ui/feature-pieces';
+import { ActionType, flowHelper } from '@activepieces/shared';
+import { PieceMetadataModel } from '@activepieces/pieces-framework';
 
 type UiFlowDrawer = {
   centeringGraphTransform: string;
@@ -32,7 +44,8 @@ export class FlowItemTreeComponent implements OnInit {
   constructor(
     private store: Store,
     private pannerService: PannerService,
-    private zoomingService: ZoomingService
+    private zoomingService: ZoomingService,
+    private piecesMetadataService: PieceMetadataService
   ) {
     this.transform$ = this.getTransform$();
     this.isPanning$ = this.pannerService.isPanning$;
@@ -43,26 +56,39 @@ export class FlowItemTreeComponent implements OnInit {
     const flowVersion$ = this.store.select(
       BuilderSelectors.selectViewedVersion
     );
+
     this.flowDrawer$ = flowVersion$.pipe(
-      map((version) => {
-        FlowDrawer.trigger = version.trigger;
-        return FlowDrawer.construct(version.trigger).offset(
-          0,
-          DEFAULT_TOP_MARGIN
-        );
-      }),
-      map((drawer) => {
-        return {
-          svg: drawer.svg.toSvg().content,
-          boundingBox: drawer.boundingBox(),
-          buttons: drawer.buttons,
-          steps: drawer.steps,
-          labels: drawer.labels,
-          centeringGraphTransform: `translate(${
-            drawer.boundingBox().width / 2 - FLOW_ITEM_WIDTH / 2
-          }px,-${FLOW_ITEM_HEIGHT_WITH_BOTTOM_PADDING - DEFAULT_TOP_MARGIN}px)`,
-        };
-      })
+      switchMap((version) =>
+        from(flowHelper.getAllSteps(version.trigger)).pipe(
+          filter((s) => s.type === ActionType.PIECE),
+          mergeMap((s) =>
+            this.piecesMetadataService.getPieceMetadata(
+              s.settings.pieceName,
+              s.settings.pieceVersion
+            )
+          ),
+          toArray(),
+          map((allPieces: PieceMetadataModel[]) => {
+            FlowDrawer.trigger = version.trigger;
+            const drawer = FlowDrawer.construct(
+              version.trigger,
+              allPieces
+            ).offset(0, DEFAULT_TOP_MARGIN);
+            return {
+              svg: drawer.svg.toSvg().content,
+              boundingBox: drawer.boundingBox(),
+              buttons: drawer.buttons,
+              steps: drawer.steps,
+              labels: drawer.labels,
+              centeringGraphTransform: `translate(${
+                drawer.boundingBox().width / 2 - FLOW_ITEM_WIDTH / 2
+              }px,-${
+                FLOW_ITEM_HEIGHT_WITH_BOTTOM_PADDING - DEFAULT_TOP_MARGIN
+              }px)`,
+            };
+          })
+        )
+      )
     );
   }