Merge pull request #3967 from MoShizzle/interfaces-changes

feat(forms): rename interfaces to forms

packages/pieces/community/forms/README.md

@@ -0,0 +1,7 @@
+# pieces-forms
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build pieces-forms` to build the library.

packages/pieces/community/forms/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@activepieces/piece-forms",
+  "version": "0.0.2"
+}

packages/pieces/community/interfaces/project.json → packages/pieces/community/forms/project.json

@@ -1,7 +1,7 @@
 {
-  "name": "pieces-interfaces",
+  "name": "pieces-forms",
   "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/pieces/community/interfaces/src",
+  "sourceRoot": "packages/pieces/community/forms/src",
   "projectType": "library",
   "targets": {
     "build": {
@@ -10,19 +10,19 @@
         "{options.outputPath}"
       ],
       "options": {
-        "outputPath": "dist/packages/pieces/community/interfaces",
-        "tsConfig": "packages/pieces/community/interfaces/tsconfig.lib.json",
-        "packageJson": "packages/pieces/community/interfaces/package.json",
-        "main": "packages/pieces/community/interfaces/src/index.ts",
+        "outputPath": "dist/packages/pieces/community/forms",
+        "tsConfig": "packages/pieces/community/forms/tsconfig.lib.json",
+        "packageJson": "packages/pieces/community/forms/package.json",
+        "main": "packages/pieces/community/forms/src/index.ts",
         "assets": [
-          "packages/pieces/community/interfaces/*.md"
+          "packages/pieces/community/forms/*.md"
         ],
         "buildableProjectDepsInPackageJsonType": "dependencies",
         "updateBuildableProjectDepsInPackageJson": true
       }
     },
     "publish": {
-      "command": "node tools/scripts/publish.mjs pieces-interfaces {args.ver} {args.tag}",
+      "command": "node tools/scripts/publish.mjs pieces-forms {args.ver} {args.tag}",
       "dependsOn": [
         "build"
       ]
@@ -34,7 +34,7 @@
       ],
       "options": {
         "lintFilePatterns": [
-          "packages/pieces/community/interfaces/**/*.ts"
+          "packages/pieces/community/forms/**/*.ts"
         ]
       }
     }

packages/pieces/community/forms/src/index.ts

@@ -0,0 +1,24 @@
+import { createPiece, PieceAuth } from '@activepieces/pieces-framework';
+import { returnFile } from './lib/actions/return-file';
+import { returnMarkdown } from './lib/actions/return-markdown';
+import { onFormSubmission } from './lib/triggers/form-trigger';
+import { onFileSubmission } from './lib/triggers/file-trigger';
+import { PieceCategory } from '@activepieces/shared';
+
+export const forms = createPiece({
+  displayName: 'Forms (BETA)',
+  description: 'Trigger a flow through form interfaces.',
+  auth: PieceAuth.None(),
+  minimumSupportedRelease: '0.20.3',
+  categories: [PieceCategory.CORE],
+  logoUrl: 'https://cdn.activepieces.com/pieces/forms.png',
+  authors: ['MoShizzle'],
+  actions: [
+    returnFile,
+    returnMarkdown
+  ],
+  triggers: [
+    onFormSubmission,
+    onFileSubmission,
+  ],
+});

packages/pieces/community/forms/src/lib/triggers/file-trigger.ts

@@ -0,0 +1,40 @@
+import {
+  Property,
+  TriggerStrategy,
+  createTrigger,
+} from '@activepieces/pieces-framework';
+
+const markdown = `
+The form title is same as the flow's title. \n
+Form URL: \n
+**{{formUrl}}**
+`;
+
+export const onFileSubmission = createTrigger({
+  name: 'file_submission',
+  displayName: 'Simple File Submission',
+  description: 'Trigger the flow by submitting a file.',
+  props: {
+    about: Property.MarkDown({
+      value: markdown,
+    }),
+    waitForResponse: Property.Checkbox({
+      displayName: 'Wait for Response',
+      description:
+        'If enabled, the form will return the flow output to the frontend. Make sure to use the Return Response action to return a response.',
+      defaultValue: true,
+      required: true,
+    }),
+  },
+  sampleData: {},
+  type: TriggerStrategy.WEBHOOK,
+  async onEnable() {
+    return;
+  },
+  async onDisable() {
+    return;
+  },
+  async run(context) {
+    return [context.payload.body];
+  },
+});

packages/pieces/community/interfaces/src/lib/triggers/interface-trigger.ts → packages/pieces/community/forms/src/lib/triggers/form-trigger.ts

@@ -5,9 +5,9 @@ import {
 } from '@activepieces/pieces-framework';
 
 const markdown = `
-The interface title is same as the flow's title. \n
-Interface URL: \n
-**{{interfaceUrl}}**
+The form title is same as the flow's title. \n
+Form URL: \n
+**{{formUrl}}**
 `;
 
 export const onFormSubmission = createTrigger({
@@ -32,7 +32,9 @@ export const onFormSubmission = createTrigger({
           options: {
             options: [
               { value: 'text', label: 'Text' },
+              { value: 'text_area', label: 'Text Area' },
               { value: 'file', label: 'File' },
+              { value: 'toggle', label: 'Toggle' },
             ],
           },
         }),
@@ -49,7 +51,8 @@ export const onFormSubmission = createTrigger({
     waitForResponse: Property.Checkbox({
       displayName: 'Wait for Response',
       description:
-        'If enabled, the interface will return the flow output to the frontend. Make sure to use the Return Response action to return a response.',
+        'If enabled, the form will return the flow output to the frontend. Make sure to use the Return Response action to return a response.',
+      defaultValue: true,
       required: true,
     }),
   },

packages/shared/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@activepieces/shared",
-  "version": "0.10.81",
+  "version": "0.10.82",
   "type": "commonjs"
 }

packages/shared/src/index.ts

@@ -50,7 +50,7 @@ export * from './lib/flows/dto/flow-template-request'
 export * from './lib/flows'
 export * from './lib/flows/dto/list-flows-request'
 export * from './lib/project/project'
-export { FileResponseInterface } from './lib/interfaces'
+export { FileResponseInterface } from './lib/forms'
 import { TypeSystem } from '@sinclair/typebox/system'
 export { RetryFlowRequestBody } from './lib/flow-run/test-flow-run-request'
 export * from './lib/flows/dto/flow-template-request'

packages/shared/src/lib/common/telemetry.ts

@@ -83,10 +83,10 @@ type CopilotGeneratedCode = {
     prompt: string
 }
 
-type InterfacesViewed = {
+type FormsViewed = {
     flowId: string
     projectId: string
-    interfaceProps: Record<string, unknown>
+    formProps: Record<string, unknown>
 }
 
 export enum TelemetryEventName {
@@ -109,8 +109,8 @@ export enum TelemetryEventName {
     FLOW_SHARED = 'flow.shared',
     TEMPLATE_SEARCH = 'template.search',
     COPILOT_GENERATED_CODE = 'copilot.code.generated',
-    INTERFACES_VIEWED = 'interfaces.viewed',
-    INTERFACES_SUBMITTED = 'interfaces.submitted',
+    FORMS_VIEWED = 'forms.viewed',
+    FORMS_SUBMITTED = 'forms.submitted',
 }
 
 type BaseTelemetryEvent<T, P> = {
@@ -136,5 +136,5 @@ export type TelemetryEvent =
     | BaseTelemetryEvent<TelemetryEventName.DEMO_IMPORTED, Record<string, never>>
     | BaseTelemetryEvent<TelemetryEventName.OPENED_PRICING_FROM_DASHBOARD, OpenedFromDasahboard>
     | BaseTelemetryEvent<TelemetryEventName.COPILOT_GENERATED_CODE, CopilotGeneratedCode>
-    | BaseTelemetryEvent<TelemetryEventName.INTERFACES_VIEWED, InterfacesViewed>
-    | BaseTelemetryEvent<TelemetryEventName.INTERFACES_SUBMITTED, InterfacesViewed>
+    | BaseTelemetryEvent<TelemetryEventName.FORMS_VIEWED, FormsViewed>
+    | BaseTelemetryEvent<TelemetryEventName.FORMS_SUBMITTED, FormsViewed>

packages/ui/common/src/lib/service/flag.service.ts

@@ -92,10 +92,10 @@ export class FlagService {
     );
   }
 
-  getInterfaceUrlPrefix(): Observable<string> {
+  getFormUrlPrefix(): Observable<string> {
     return this.getAllFlags().pipe(
       map((flags) => {
-        return (flags[ApFlagId.FRONTEND_URL] as string) + '/interfaces';
+        return (flags[ApFlagId.FRONTEND_URL] as string) + '/forms';
       })
     );
   }

packages/ui/core/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { RedirectUrlComponent } from './modules/redirect-url/redirect-url.compon
 import { NotFoundComponent } from './modules/not-found/not-found.component';
 import { EmbedRedirectComponent } from '@activepieces/ee-components';
 import { ApEdition } from '@activepieces/shared';
-import { InterfacesComponent } from './modules/interfaces/interfaces.component';
+import { FormsComponent } from './modules/forms/forms.component';
 
 export const routes: Routes = [
   {
@@ -68,8 +68,8 @@ export const routes: Routes = [
   },
 
   {
-    path: 'interfaces/:flowId',
-    component: InterfacesComponent,
+    path: 'forms/:flowId',
+    component: FormsComponent,
   },
   {
     path: '**',

packages/ui/core/src/app/app.module.ts

@@ -31,7 +31,7 @@ import { apMonacoTheme } from './monaco-themes/ap-monaco-theme';
 import { cobalt2 } from './monaco-themes/cobalt-2-theme';
 import { EeComponentsModule } from '@activepieces/ee-components';
 import { UiFeatureAuthenticationModule } from '@activepieces/ui/feature-authentication';
-import { InterfacesComponent } from './modules/interfaces/interfaces.component';
+import { FormsComponent } from './modules/forms/forms.component';
 import { UiFeaturePiecesModule } from '@activepieces/ui/feature-pieces';
 
 const monacoConfig: NgxMonacoEditorConfig = {
@@ -67,7 +67,7 @@ export function playerFactory() {
     RedirectUrlComponent,
     ImportFlowComponent,
     ImportFlowUriEncodedComponent,
-    InterfacesComponent,
+    FormsComponent,
   ],
   imports: [
     CommonModule,

packages/ui/core/src/app/modules/forms/forms.component.html

@@ -0,0 +1,76 @@
+<div
+  class="ap-h-screen ap-w-full ap-flex ap-items-center ap-justify-center ap-bg-center ap-bg-cover ap-bg-authBg ap-flex-col">
+  <ng-container *ngIf="!error && props">
+    <form [formGroup]="form" (ngSubmit)="submit()" class="ap-flex ap-flex-col ap-gap-2">
+      <mat-card class="md:ap-min-w-[480px] md:ap-max-w-initial ap-min-w-[350px] ap-max-w-[350px] auth-card ap-max-h-[80vh] ap-overflow-scroll">
+        <div class="ap-typography-headline-5 ap-text-center ap-mb-6">{{ title }}</div>
+        <ng-container *ngFor="let input of inputs">
+          <ng-container [ngSwitch]="input.type">
+            <ng-container *ngSwitchCase="PropertyType.SHORT_TEXT">
+              <mat-form-field class="ap-w-full ap-mb-4" appearance="outline" subscriptSizing="dynamic">
+                <mat-label>{{ input.displayName }}</mat-label>
+                <input matInput type="text" [formControlName]="getInputKey(input.displayName)">
+                <mat-hint>{{ input.description }}</mat-hint>
+                <mat-error *ngIf="form.controls[getInputKey(input.displayName)]?.invalid">
+                  {{ input.displayName }} is required
+                </mat-error>
+              </mat-form-field>
+            </ng-container>
+            <ng-container *ngSwitchCase="PropertyType.FILE">
+              <mat-form-field class="ap-w-full" subscriptSizing="dynamic">
+                <mat-label i18n>{{ input.displayName }}</mat-label>
+                <ap-file-upload [required]="input.required" #flowInput
+                  [formControlName]="getInputKey(input.displayName)" [extensions]="['.*']"></ap-file-upload>
+                <ap-icon-button [height]="25" [width]="25" iconFilename="attach.svg" matSuffix
+                  (buttonClicked)="flowInput.fileInput.nativeElement.click()"></ap-icon-button>
+
+                <mat-hint>{{ input.description }}</mat-hint>
+                <mat-error *ngIf="form.controls[getInputKey(input.displayName)]?.invalid">
+                  {{ input.displayName }} is required
+                </mat-error>
+              </mat-form-field>
+            </ng-container>
+            <ng-container *ngSwitchCase="PropertyType.CHECKBOX">
+              <div class="app-w-full ap-mb-4">
+                <div>
+                  <mat-slide-toggle [formControlName]="getInputKey(input.displayName)" color="primary" i18n>{{ input.displayName }}</mat-slide-toggle>
+                </div>
+                <markdown class="ap-typography-caption">{{ input.description }}</markdown>
+                <mat-error *ngIf="form.controls[getInputKey(input.displayName)]?.invalid" class="ap-mt-2">
+                  {{ input.displayName }} is required
+                </mat-error>
+              </div>
+            </ng-container>
+            <ng-container *ngSwitchCase="PropertyType.LONG_TEXT">
+              <mat-form-field class="ap-w-full ap-mb-4" appearance="outline" subscriptSizing="dynamic">
+                <mat-label>{{ input.displayName }}</mat-label>
+                <textarea matInput [formControlName]="getInputKey(input.displayName)"></textarea>
+                <mat-hint>{{ input.description }}</mat-hint>
+                <mat-error *ngIf="form.controls[getInputKey(input.displayName)]?.invalid">
+                  {{ input.displayName }} is required
+                </mat-error>
+              </mat-form-field>
+            </ng-container>
+          </ng-container>
+        </ng-container>
+
+        <div class="text-center ap-mt-6 ap-flex ap-flex-col ap-gap-2">
+          <ap-button [loading]="loading" (buttonClicked)="submit()" btnColor="primary" btnSize="large"
+            [fullWidthOfContainer]="true" i18n>
+            Submit
+          </ap-button>
+        </div>
+
+        <ng-container *ngIf="markdownResponse | async as mkResponse">
+          <ap-markdown [fullWidth]="true" [data]="mkResponse" class="ap-mt-4 ap-mb-4"></ap-markdown>
+        </ng-container>
+      </mat-card>
+    </form>
+  </ng-container>
+  <ng-container *ngIf="error">
+    {{ error }}
+  </ng-container>
+  <ap-powered-by-activepieces class="ap-mt-4"></ap-powered-by-activepieces>
+</div>
+<ng-container *ngIf="flow$ | async as flow"></ng-container>
+<ng-container *ngIf="submitForm$ | async"></ng-container>