Merge pull request #832 from activepieces/feat/test-polling

feat: add test polling

packages/backend/src/app/flows/trigger-events/trigger-event.module.ts

@@ -1,5 +1,5 @@
 import { FastifyInstance, FastifyRequest } from "fastify";
-import { ListTriggerEventsRequest } from "@activepieces/shared";
+import { ListTriggerEventsRequest, TestTriggerRequest } from "@activepieces/shared";
 import { triggerEventService } from "./trigger-event.service";
 import { flowService } from "../flow.service";
 
@@ -12,6 +12,27 @@ export const triggerEventModule = async (app: FastifyInstance) => {
 
 const triggerEventController = async (fastify: FastifyInstance) => {
 
+
+    fastify.get(
+        "/poll",
+        {
+            schema: {
+                querystring: TestTriggerRequest
+            },
+        },
+        async (
+            request: FastifyRequest<{
+                Querystring: TestTriggerRequest;
+            }>
+        ) => {
+            const flow = await flowService.getOneOrThrow({ projectId: request.principal.projectId, id: request.query.flowId });
+            return await triggerEventService.test({
+                projectId: request.principal.projectId,
+                flow: flow
+            });
+        }
+    );
+
     fastify.get(
         "/",
         {
@@ -24,10 +45,10 @@ const triggerEventController = async (fastify: FastifyInstance) => {
                 Querystring: ListTriggerEventsRequest;
             }>
         ) => {
-            const flow = await flowService.getOneOrThrow({projectId: request.principal.projectId, id: request.query.flowId});
+            const flow = await flowService.getOneOrThrow({ projectId: request.principal.projectId, id: request.query.flowId });
             return await triggerEventService.list({
                 projectId: request.principal.projectId,
-                flowVersion: flow.version,
+                flow: flow,
                 cursor: request.query.cursor ?? null,
                 limit: request.query.limit ?? DEFUALT_PAGE_SIZE
             });

packages/backend/src/app/flows/trigger-events/trigger-event.service.ts

@@ -1,26 +1,16 @@
-import { apId, Cursor, FlowId, FlowVersion, ListenForTriggerEventsRequest, PieceTrigger, ProjectId, SeekPage, Trigger, TriggerEvent , TriggerType} from "@activepieces/shared";
+import { apId, Cursor, Flow, FlowId, FlowVersion, PieceTrigger, ProjectId, SeekPage, Trigger, TriggerEvent , TriggerHookType, TriggerType} from "@activepieces/shared";
 import { databaseConnection } from "../../database/database-connection";
+import { engineHelper } from "../../helper/engine-helper";
 import { buildPaginator } from "../../helper/pagination/build-paginator";
 import { paginationHelper } from "../../helper/pagination/pagination-utils";
 import { Order } from "../../helper/pagination/paginator";
+import { webhookService } from "../../webhooks/webhook-service";
 import { flowService } from "../flow.service";
 import { TriggerEventEntity } from "./trigger-event.entity";
 
 const triggerEventrepo = databaseConnection.getRepository(TriggerEventEntity);
 
 export const triggerEventService = {
-    async test(flowVersion: FlowVersion, request: ListenForTriggerEventsRequest): Promise<void> {
-        const trigger = flowVersion.trigger;
-        // TODO: Implement this
-        switch (trigger.type) {
-        case TriggerType.WEBHOOK:
-            break;
-        case TriggerType.PIECE:
-            throw new Error("Not implemented");
-        case TriggerType.EMPTY:
-            break;
-        }
-    },
     async saveEvent({projectId, flowId, payload}:{projectId: ProjectId, flowId: FlowId, payload: unknown}): Promise<TriggerEvent> {
         const flow = await flowService.getOne({projectId: projectId, id: flowId, versionId: undefined, includeArtifacts: false});
         const sourceName = getSourceName(flow.version.trigger);
@@ -32,10 +22,46 @@ export const triggerEventService = {
             payload,
         });  
     },
-    async list({projectId, flowVersion, cursor, limit}: {projectId: ProjectId, flowVersion: FlowVersion, cursor: Cursor | null, limit: number}): Promise<SeekPage<TriggerEvent>> {
+    async test({projectId, flow}: {projectId: ProjectId, flow: Flow}): Promise<SeekPage<unknown>> {
+        const trigger = flow.version.trigger;
+        const emptyPage = paginationHelper.createPage<TriggerEvent>([], null);
+        switch (trigger.type) {
+        case TriggerType.WEBHOOK:
+            throw new Error("Cannot be tested");
+        case TriggerType.PIECE: {
+            const testResult =( await engineHelper.executeTrigger({
+                hookType: TriggerHookType.TEST,
+                flowVersion: flow.version,
+                collectionId: flow.collectionId,
+                webhookUrl: await webhookService.getWebhookUrl(projectId),
+                projectId: projectId
+            }) )as unknown[];
+            await triggerEventrepo.delete({
+                projectId,
+                flowId: flow.id,
+            });
+            for(let i = 0; i < testResult.length; i++) {
+                await triggerEventService.saveEvent({
+                    projectId,
+                    flowId: flow.id,
+                    payload: testResult[i]
+                });
+            }
+            return triggerEventService.list({
+                projectId,
+                flow,
+                cursor: null,
+                limit: testResult.length
+            });
+        }
+        case TriggerType.EMPTY:
+            return emptyPage;
+        }
+    },
+    async list({projectId, flow, cursor, limit}: ListParams): Promise<SeekPage<TriggerEvent>> {
         const decodedCursor = paginationHelper.decodeCursor(cursor);
-        const sourceName = getSourceName(flowVersion.trigger);
-        const flowId = flowVersion.flowId;
+        const sourceName = getSourceName(flow.version.trigger);
+        const flowId = flow.id;
         const paginator = buildPaginator({
             entity: TriggerEventEntity,
             query: {
@@ -66,4 +92,11 @@ function getSourceName(trigger: Trigger): string {
     case TriggerType.EMPTY:
         return TriggerType.EMPTY;
     }
+}
+
+interface ListParams {
+    projectId: ProjectId;
+    flow: Flow; 
+    cursor: Cursor | null;
+    limit: number;
 }

packages/backend/src/app/helper/engine-helper.ts

@@ -9,6 +9,7 @@ import {
     ExecuteFlowOperation,
     ExecutePropsOptions,
     ExecuteTriggerOperation,
+    ExecuteTriggerResponse,
     ExecutionOutput,
     getPackageAliasForPiece,
     getPackageVersionForPiece,
@@ -78,12 +79,11 @@ export const engineHelper = {
         return result as ParseEventResponse;
     },
 
-    async executeTrigger(operation: ExecuteTriggerOperation): Promise<void | unknown[] | unknown> {
+    async executeTrigger(operation: ExecuteTriggerOperation): Promise<void | unknown[] | ExecuteTriggerResponse> {
         const sandbox = sandboxManager.obtainSandbox();
         let result;
         try {
             await sandbox.cleanAndInit();
-
             const buildPath = sandbox.getSandboxFolderPath();
             const { pieceName, pieceVersion } = (operation.flowVersion.trigger as PieceTrigger).settings;
             await installPieceDependency(buildPath, pieceName, pieceVersion);
@@ -102,13 +102,9 @@ export const engineHelper = {
         finally {
             sandboxManager.returnSandbox(sandbox.boxId);
         }
-
-        if (operation.hookType === TriggerHookType.RUN) {
+        if (operation.hookType === TriggerHookType.RUN || operation.hookType === TriggerHookType.TEST) {
             return result as unknown[];
         }
-        if (operation.hookType === TriggerHookType.TEST) {
-            return result as unknown;
-        }
         return result as void;
     },
 

packages/backend/src/app/helper/pagination/pagination-utils.ts

@@ -93,8 +93,8 @@ function encodePreviousCursor(cursor: string) {
 export const paginationHelper = {
     createPage<T>(data: T[], cursor: CursorResult): SeekPage<T> {
         return {
-            next: encodeNextCursor(cursor.afterCursor),
-            previous: encodePreviousCursor(cursor.beforeCursor),
+            next: encodeNextCursor(cursor?.afterCursor),
+            previous: encodePreviousCursor(cursor?.beforeCursor),
             data,
         };
     },

packages/frontend/src/app/modules/common/common-layout.module.ts

@@ -82,6 +82,8 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { HotspotComponent } from './components/hotspot/hotspot.component';
 import { LoopStepMentionItemComponent } from './components/form-controls/interpolating-text-form-control/mentions-list/loop-step-mention-item/loop-step-mention-item.component';
 import { CustomPathMentionDialogComponent } from './components/form-controls/interpolating-text-form-control/mentions-list/custom-path-mention-dialog/custom-path-mention-dialog.component';
+import { WarningBoxComponent } from './components/warning-box/warning-box.component';
+import { PieceTriggerMentionItemComponent } from './components/form-controls/interpolating-text-form-control/mentions-list/piece-trigger-mention-item/piece-trigger-mention-item.component';
 export const materialTooltipDefaults: MatTooltipDefaultOptions = {
   showDelay: 0,
   hideDelay: 0,
@@ -132,6 +134,8 @@ export const materialTooltipDefaults: MatTooltipDefaultOptions = {
     HotspotComponent,
     LoopStepMentionItemComponent,
     CustomPathMentionDialogComponent,
+    WarningBoxComponent,
+    PieceTriggerMentionItemComponent,
   ],
   imports: [
     FontAwesomeModule,
@@ -211,6 +215,8 @@ export const materialTooltipDefaults: MatTooltipDefaultOptions = {
     MatDividerModule,
     MatButtonToggleModule,
     HotspotComponent,
+    WarningBoxComponent,
+    PieceTriggerMentionItemComponent,
   ],
   providers: [
     HighlightService,

packages/frontend/src/app/modules/common/components/editable-text/editable-text.component.html

@@ -1,7 +1,7 @@
 <div (click)="clickHandler()" (dblclick)="doubleClickHandler()">
   <div *ngIf="!this._editing" class=" {{ cssClasses }} viewed-text-container"
     [class.!ap-cursor-pointer]="allowDoubleClick" #viewedText [style.max-width]="viewedTextMaxWidth"
-    [matTooltip]="viewedText.scrollWidth > viewedText.clientWidth && value? value:'' ">
+    [matTooltip]="viewedText.scrollWidth > viewedText.clientWidth && value && !hideOverflownTextTooltip? value:'' ">
     {{ value }}
   </div>
 

packages/frontend/src/app/modules/common/components/editable-text/editable-text.component.ts

@@ -23,8 +23,10 @@ export class EditableTextComponent {
   @Output() editingChanges: EventEmitter<boolean> = new EventEmitter<boolean>();
   @ViewChild('editableText') editableText: ElementRef;
   @Input() hideOverflowWhileEditing = true;
+  @Input() hideOverflownTextTooltip = false;
   valueOnEditingStarted = '';
   _editing = false;
+
   get editing(): boolean {
     return this._editing;
   }

packages/frontend/src/app/modules/common/components/form-controls/interpolating-text-form-control/mentions-list/mentions-list.component.html

@@ -25,20 +25,15 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="TriggerType.PIECE">
-        <app-piece-step-mention-item [stepIndex]="1" (mentionClicked)="mentionClicked($event)"
-          [stepMention]="stepMention"></app-piece-step-mention-item>
+        <app-piece-trigger-mention-item [stepIndex]="1" (mentionClicked)="mentionClicked($event)"
+          [stepMention]="stepMention"></app-piece-trigger-mention-item>
       </ng-container>
 
       <ng-container *ngSwitchCase="TriggerType.WEBHOOK">
         <app-webhook-trigger-mention-item [stepIndex]="1" (mentionEmitted)="mentionClicked($event)"
           [stepMention]="stepMention"></app-webhook-trigger-mention-item>
       </ng-container>
-      <ng-container *ngSwitchDefault>
-        <button mat-menu-item (click)="mentionClicked(stepMention)" class="!ap-px-[9px]">
-          <app-generic-step-mention-item [stepIndex]="stepMention.step.indexInDfsTraversal || 1" [indentation]="true"
-            [stepMention]="stepMention"></app-generic-step-mention-item>
-        </button>
-      </ng-container>
+
       <mat-divider></mat-divider>
     </ng-container>
 

packages/frontend/src/app/modules/common/components/form-controls/interpolating-text-form-control/mentions-list/piece-step-mention-item/piece-step-mention-item.component.ts

@@ -72,12 +72,10 @@ export class PieceStepMentionItemComponent implements OnInit {
     private mentionsTreeCache: MentionsTreeCacheService
   ) {}
   ngOnInit(): void {
-    const cacheResult = this.mentionsTreeCache.getStepMentionsTree(
-      this._stepMention.step.name
-    );
-    if (cacheResult) {
+    const cachedResult: undefined | MentionTreeNode[] = this.getChachedData();
+    if (cachedResult) {
       this.sampleData$ = combineLatest({
-        stepTree: of({ children: cacheResult.children, error: '' }),
+        stepTree: of({ children: cachedResult, error: '' }),
         search: this.mentionsTreeCache.listSearchBarObs$,
       }).pipe(
         map((res) => {
@@ -100,15 +98,31 @@ export class PieceStepMentionItemComponent implements OnInit {
       BuilderSelectors.selectFlowItemDetails(this._stepMention.step)
     );
   }
+  getChachedData() {
+    const step = this._stepMention.step;
+    let cachedResult: undefined | MentionTreeNode[] = undefined;
+    if (
+      step.type === TriggerType.PIECE &&
+      step.settings.inputUiInfo.currentSelectedData
+    ) {
+      cachedResult = traverseStepOutputAndReturnMentionTree(
+        step.settings.inputUiInfo.currentSelectedData,
+        step.name,
+        step.displayName
+      )?.children;
+    } else {
+      cachedResult = this.mentionsTreeCache.getStepMentionsTree(
+        step.name
+      )?.children;
+    }
+    return cachedResult;
+  }
   fetchSampleData() {
     const step = this._stepMention.step;
-
     if (step.type !== TriggerType.PIECE && step.type !== ActionType.PIECE) {
       throw new Error("Activepieces- step isn't of a piece type");
     }
-
     const { pieceName, pieceVersion } = step.settings;
-
     this.sampleData$ = this.actionMetaDataService
       .getPieceMetadata(pieceName, pieceVersion)
       .pipe(

packages/frontend/src/app/modules/common/components/form-controls/interpolating-text-form-control/mentions-list/piece-trigger-mention-item/piece-trigger-mention-item.component.html

@@ -0,0 +1,46 @@
+<button mat-menu-item appTrackHover #hoverTracker="hoverTrackerDirective" class="!ap-px-[9px]">
+  <div class="ap-flex" (click)="$event.stopPropagation(); expandSample? expandSample=false : expandSample=true">
+    <ng-container *ngIf="sampleData$ | async as result">
+      <mat-icon class="mat-icon-rtl-mirror !ap-mr-[5px]"
+        *ngIf="result.children && result.children.length>0 || (isPollingTrigger$|async)">
+        {{expandSample ? 'expand_less' : 'expand_more'}}
+      </mat-icon>
+      <app-generic-step-mention-item [stepIndex]="stepIndex" [stepMention]="_stepMention"
+        [indentation]="!result.children || result.children.length===0 && (isPollingTrigger$|async) !== true"></app-generic-step-mention-item>
+    </ng-container>
+
+  </div>
+  <app-button *ngIf="hoverTracker.isHovered" btnColor="primary" btnStyle="basic" type="button" btnSize="small"
+    class="ap-absolute ap-right-[10px]" [buttonIsInsideAutocomplete]="true"
+    (click)="mentionClicked.emit(_stepMention)">Select
+  </app-button>
+
+</button>
+<ng-container *ngIf="expandSample">
+  <ng-container *ngIf="sampleData$ | async as result">
+    <app-step-mentions-tree *ngIf="result.children && result.children.length>0"
+      [stepOutputObjectChildNodes]="result.children" [markedNodesToShow]="result.markedNodesToShow"
+      [stepDisplayName]="_stepMention.step.displayName"
+      (mentionClicked)="mentionClicked.emit($event)"></app-step-mentions-tree>
+    <ng-container *ngIf="result.error">
+      <div class="ap-pl-6 ap-py-2">
+        {{result.error}}
+      </div>
+    </ng-container>
+    <ng-container *ngIf="result.children?.length === 0 && (isPollingTrigger$| async)">
+      <div class="ap-my-3 ap-px-2">
+        <div class="ap-typography-body-1 ap-text-center ap-mb-1">
+          Load sample data first
+        </div>
+        <div class="ap-typography-body-2 ap-text-center ap-mb-3">
+          This trigger needs to have data loaded from your account, to use as sample data
+        </div>
+        <div class="ap-text-center">
+          <app-button btnColor="primary" btnStyle="flat" type="button" btnSize="default" [darkLoadingSpinner]="false"
+            (click)="$event.stopPropagation();selectStep() ">Go to trigger
+          </app-button>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+</ng-container>