Merge pull request #4205 from activepieces/reafctor/piece-form

refactor: piece form
activepieces · Mar 25, 2024 · b898e0a · b898e0a
2 parents 4250db2 + 1196dbf
commit b898e0a
Show file tree

Hide file tree

Showing 142 changed files with 3,186 additions and 2,853 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,3 @@
 {
   "singleQuote": true
-}
+}
diff --git a/package.json b/package.json
@@ -293,4 +293,4 @@
   "nx": {
     "includedScripts": []
   }
-}
+}
diff --git a/...e/components/src/lib/embedded-connection-dialog/embedded-connection-dialog.component.html b/...e/components/src/lib/embedded-connection-dialog/embedded-connection-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="ap-hidden">
     <app-add-edit-connection-button *ngIf="openNewConnectionsDialog$ | async as newConnectionPiece " #connectionButton
         btnSize="extraSmall" [isEditConnectionButton]="false" [authProperty]="newConnectionPiece.auth!"
-        [pieceName]="newConnectionPiece.name" [pieceVersion]="newConnectionPiece.version" [propertyKey]="''"
+        [pieceName]="newConnectionPiece.name" [pieceVersion]="newConnectionPiece.version"
         [pieceDisplayName]="newConnectionPiece.displayName" (newConnection)="hideConnectionIframe($event)"
         (newConnectionDialogClosed)="hideConnectionIframe()"></app-add-edit-connection-button>
 </div>

diff --git a/packages/pieces/community/activepieces/package.json b/packages/pieces/community/activepieces/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.4",
   "dependencies": {
     "@activepieces/pieces-common": "0.2.12",
-    "@activepieces/pieces-framework": "0.7.25",
+    "@activepieces/pieces-framework": "0.7.28",
     "tslib": "2.6.2"
   }
 }
diff --git a/packages/pieces/community/brilliant-directories/package.json b/packages/pieces/community/brilliant-directories/package.json
@@ -2,7 +2,7 @@
   "name": "@activepieces/piece-brilliant-directories",
   "version": "0.0.6",
   "dependencies": {
-    "@activepieces/pieces-framework": "0.7.25",
+    "@activepieces/pieces-framework": "0.7.28",
     "@activepieces/pieces-common": "0.2.12",
     "tslib": "^2.6.2",
     "@activepieces/shared": "*"

diff --git a/packages/pieces/community/convertkit/package.json b/packages/pieces/community/convertkit/package.json
@@ -2,7 +2,7 @@
   "name": "@activepieces/piece-convertkit",
   "version": "0.1.3",
   "dependencies": {
-    "@activepieces/pieces-framework": "0.7.25",
+    "@activepieces/pieces-framework": "0.7.28",
     "@activepieces/pieces-common": "0.2.12",
     "tslib": "^2.6.2",
     "@activepieces/shared": "*"

diff --git a/packages/pieces/community/framework/package.json b/packages/pieces/community/framework/package.json
@@ -1,5 +1,5 @@
 {
   "name": "@activepieces/pieces-framework",
-  "version": "0.7.27",
+  "version": "0.7.28",
   "type": "commonjs"
-}
+}
diff --git a/packages/pieces/community/framework/src/lib/property/index.ts b/packages/pieces/community/framework/src/lib/property/index.ts
@@ -35,7 +35,7 @@ export { BasicAuthProperty } from './authentication/basic-auth-prop';
 export { SecretTextProperty } from './authentication/secret-text-property'
 export { CustomAuthProperty } from './authentication/custom-auth-prop';
 
-
+export { JsonProperty } from './input/json-property'
 export const PieceProperty = Type.Union([InputProperty, PieceAuthProperty])
 export type PieceProperty = InputProperty | PieceAuthProperty;
 

diff --git a/packages/pieces/community/math-helper/package.json b/packages/pieces/community/math-helper/package.json
@@ -2,8 +2,8 @@
   "name": "@activepieces/piece-math-helper",
   "version": "0.0.6",
   "dependencies": {
-    "@activepieces/pieces-framework": "0.7.25",
-    "@activepieces/shared": "0.10.97",
+    "@activepieces/pieces-framework": "0.7.28",
+    "@activepieces/shared": "0.10.98",
     "tslib": "2.6.2"
   }
 }
diff --git a/packages/pieces/community/retune/package.json b/packages/pieces/community/retune/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.5",
   "dependencies": {
     "@activepieces/pieces-common": "0.2.12",
-    "@activepieces/pieces-framework": "0.7.25",
-    "@activepieces/shared": "0.10.97",
+    "@activepieces/pieces-framework": "0.7.28",
+    "@activepieces/shared": "0.10.98",
     "tslib": "2.6.2"
   }
 }
diff --git a/packages/pieces/community/saastic/package.json b/packages/pieces/community/saastic/package.json
@@ -2,7 +2,7 @@
   "name": "@activepieces/piece-saastic",
   "version": "0.0.6",
   "dependencies": {
-    "@activepieces/pieces-framework": "0.7.25",
+    "@activepieces/pieces-framework": "0.7.28",
     "@activepieces/pieces-common": "0.2.12",
     "tslib": "^2.6.2",
     "@activepieces/shared": "*"

diff --git a/packages/ui/common/src/index.ts b/packages/ui/common/src/index.ts
@@ -26,3 +26,4 @@ export * from './lib/pipe/comma-seperated.pipe';
 export * from './lib/utils/consts';
 export * from './lib/components/is-feature-enabled-base/is-feature-enabled-base.component';
 export * from './lib/models/mention-list-item';
+export * from './lib/components/control-description/control-description.component';
diff --git a/packages/ui/common/src/lib/components/control-description/control-description.component.ts b/packages/ui/common/src/lib/components/control-description/control-description.component.ts
@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import {
+  BOTTOM_MARGIN_FOR_DESCRIPTION_IN_PIECE_PROPERTIES_FORM,
+  EMPTY_SPACE_BETWEEN_INPUTS_IN_PIECE_PROPERTIES_FORM,
+} from '../../utils/consts';
+import { CommonModule } from '@angular/common';
+import { MarkdownModule } from 'ngx-markdown';
+import { CheckOverflowDirective } from '../../directives';
+@Component({
+  selector: 'ap-control-description',
+  standalone: true,
+  imports: [CommonModule, MarkdownModule, CheckOverflowDirective],
+  template: `
+    @if( !(description || (passedFormControl.touched &&
+    passedFormControl.invalid))) {
+    <div [style.height]="MIN_SPACING_BETWEEN_INPUTS"></div>
+    } @else() {
+    <div
+      class="ap-flex ap-justify-between ap-markdown "
+      [style.marginBottom]="
+        BOTTOM_MARGIN_FOR_DESCRIPTION_IN_PIECE_PROPERTIES_FORM
+      "
+      *ngIf="
+        description || (passedFormControl.touched && passedFormControl.invalid)
+      "
+    >
+      <div
+        class="ap-line-clamp-1"
+        [style.display]="isExpanded ? 'block' : '-webkit-box'"
+        [class.ap-h-[24px]]="!isExpanded"
+      >
+        <div
+          class="ap-typography-caption"
+          apCheckOverflow
+          (isOverflowed)="isOverFlown = $event"
+        >
+          <markdown
+            [data]="
+              passedFormControl.touched && passedFormControl.invalid
+                ? errorMessageOpeningTag +
+                  errorMessage +
+                  errorMessageClosingTag +
+                  ' ' +
+                  description
+                : description
+            "
+          >
+          </markdown>
+        </div>
+      </div>
+      <div class="ap-flex ap-items-start">
+        <button
+          class="ap-underline ap-typography-caption ap-mt-2"
+          *ngIf="isExpanded || isOverFlown"
+          (click)="isExpanded = !isExpanded"
+        >
+          {{ isExpanded ? 'less' : 'more' }}
+        </button>
+      </div>
+    </div>
+    }
+  `,
+})
+export class ControlDescriptionComponent {
+  readonly BOTTOM_MARGIN_FOR_DESCRIPTION_IN_PIECE_PROPERTIES_FORM =
+    BOTTOM_MARGIN_FOR_DESCRIPTION_IN_PIECE_PROPERTIES_FORM;
+  readonly MIN_SPACING_BETWEEN_INPUTS =
+    EMPTY_SPACE_BETWEEN_INPUTS_IN_PIECE_PROPERTIES_FORM;
+  isOverFlown = false;
+  isExpanded = false;
+  errorMessageOpeningTag = "<span class='ap-text-danger'>";
+  errorMessageClosingTag = '</span>';
+  @Input({ required: true }) errorMessage = '';
+  @Input({ required: true }) description = '';
+  @Input({ required: true }) passedFormControl: AbstractControl;
+}
diff --git a/packages/ui/common/src/lib/directives/check-overflow.directive.ts b/packages/ui/common/src/lib/directives/check-overflow.directive.ts
@@ -9,6 +9,7 @@ import {
 
 @Directive({
   selector: '[apCheckOverflow]',
+  standalone: true,
 })
 export class CheckOverflowDirective implements AfterViewInit, OnDestroy {
   @Output() isOverflowed = new EventEmitter<boolean>();

diff --git a/packages/ui/common/src/lib/pipe/dropdown-search.pipe.ts b/packages/ui/common/src/lib/pipe/dropdown-search.pipe.ts
@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DropdownOption } from '@activepieces/pieces-framework';
 import { FormControl } from '@angular/forms';
-import { Observable, map, startWith } from 'rxjs';
+import { Observable, map, of, startWith } from 'rxjs';
 
 @Pipe({
   name: 'dropdownSearch',
@@ -10,8 +10,12 @@ import { Observable, map, startWith } from 'rxjs';
 export class DropdownPropertySearchPipe implements PipeTransform {
   transform(
     options: DropdownOption<unknown>[],
-    search: FormControl<string>
+    search: FormControl<string>,
+    searchIsDoneByBackend?: boolean
   ): Observable<DropdownOption<unknown>[]> {
+    if (searchIsDoneByBackend) {
+      return of(options);
+    }
     return search.valueChanges.pipe(
       startWith(search.value),
       map((searchText) => {

diff --git a/packages/ui/common/src/lib/store/app-connections/app-connections.selector.ts b/packages/ui/common/src/lib/store/app-connections/app-connections.selector.ts
@@ -3,8 +3,10 @@ import { selectCommonState } from '../common.selector';
 import { CommonStateModel } from '../common-state.model';
 import { AppConnectionsState } from './app-connections-state.model';
 import { AppConnectionWithoutSensitiveData } from '@activepieces/shared';
-import { ConnectionDropdownItem } from './connections-dropdown-item';
-import { MentionListItem } from '../../models/mention-list-item';
+import {
+  ConnectionDropdownItem,
+  PieceConnectionDropdownItem,
+} from './connections-dropdown-item';
 
 const selectConnectionsState = createSelector(
   selectCommonState,
@@ -37,53 +39,25 @@ const selectAppConnectionsDropdownOptions = createSelector(
   }
 );
 
-const selectAppConnectionsDropdownOptionsWithIds = createSelector(
-  selectAllAppConnections,
-  (connections: AppConnectionWithoutSensitiveData[]) => {
-    return [...connections].map((c) => {
-      const result: ConnectionDropdownItem = {
-        label: { pieceName: c.pieceName, name: c.name },
-        value: c.id,
-      };
-      return result;
-    });
-  }
-);
-
-const selectAppConnectionsDropdownOptionsForAppWithIds = (appName: string) => {
-  return createSelector(
-    selectAppConnectionsDropdownOptionsWithIds,
-    (connections) => {
-      return connections
-        .filter((opt) => opt.label.pieceName === appName)
+const selectAllConnectionsForPiece = (pieceName: string) =>
+  createSelector(
+    selectAllAppConnections,
+    (connections: AppConnectionWithoutSensitiveData[]) => {
+      return [...connections]
+        .filter((c) => c.pieceName === pieceName)
         .map((c) => {
-          const result: ConnectionDropdownItem = {
-            label: { pieceName: c.label.pieceName, name: c.label.name },
-            value: c.value,
+          const result: PieceConnectionDropdownItem = {
+            label: c.name,
+            value: `{{connections['${c.name}']}}`,
           };
           return result;
         });
     }
   );
-};
-const selectAppConnectionsForMentionsDropdown = createSelector(
-  selectAllAppConnections,
-  (connections: AppConnectionWithoutSensitiveData[]) => {
-    return [...connections].map((c) => {
-      const result: MentionListItem = {
-        label: c.name,
-        value: `{{connections['${c.name}']}}`,
-      };
-      return result;
-    });
-  }
-);
 
 export const appConnectionsSelectors = {
   selectAllAppConnections,
   selectConnection,
   selectAppConnectionsDropdownOptions,
-  selectAppConnectionsDropdownOptionsWithIds,
-  selectAppConnectionsDropdownOptionsForAppWithIds,
-  selectAppConnectionsForMentionsDropdown,
+  selectAllConnectionsForPiece,
 };
diff --git a/packages/ui/common/src/lib/store/app-connections/connections-dropdown-item.ts b/packages/ui/common/src/lib/store/app-connections/connections-dropdown-item.ts
@@ -1,4 +1,9 @@
+import { DropdownOption } from '@activepieces/pieces-framework';
+
 export interface ConnectionDropdownItem {
   label: { pieceName: string | null; name: string };
   value: string;
 }
+
+export type PieceConnectionDropdownItem =
+  DropdownOption<`{{connections['${string}']}}`>;
diff --git a/packages/ui/common/src/lib/store/app-connections/index.ts b/packages/ui/common/src/lib/store/app-connections/index.ts
@@ -1,3 +1,4 @@
 export * from './app-connections.action';
 export * from './app-connections.selector';
 export * from './app-connections.reducer';
+export { PieceConnectionDropdownItem } from './connections-dropdown-item';
diff --git a/packages/ui/common/src/lib/ui-common.module.ts b/packages/ui/common/src/lib/ui-common.module.ts
@@ -73,6 +73,8 @@ import { ImportFlowDialogComponent } from './components/dialogs/import-flow-dial
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { LetterIconComponent } from './components/letter-icon/letter-icon.component';
 import { MatListModule } from '@angular/material/list';
+import { MatPseudoCheckboxModule } from '@angular/material/core';
+import { ControlDescriptionComponent } from './components/control-description/control-description.component';
 
 const exportedImports = [
   CommonModule,
@@ -102,6 +104,9 @@ const exportedImports = [
   ScrollingModule,
   MonacoEditorModule,
   MatListModule,
+  MatPseudoCheckboxModule,
+  CheckOverflowDirective,
+  ControlDescriptionComponent,
 ];
 const exportedDeclarations = [
   UploadFileControlComponent,
@@ -133,7 +138,6 @@ const exportedDeclarations = [
   UserAvatarComponent,
   TrackHoverDirective,
   DragDropDirective,
-  CheckOverflowDirective,
   PageTitleComponent,
   PoweredByActivepiecesComponent,
   ImgFallbackDirective,

diff --git a/packages/ui/core/src/assets/scss/ng-material-override.scss b/packages/ui/core/src/assets/scss/ng-material-override.scss
@@ -760,4 +760,7 @@ app-templates-dialog
 }
 .ap-opacity-100 * {
   opacity: 1 !important;
+}
+.connections-dropdown-container {
+  max-height: var(--mat-form-field-container-text-line-height)
 }
diff --git a/packages/ui/feature-builder-form-controls/src/index.ts b/packages/ui/feature-builder-form-controls/src/index.ts
@@ -1,18 +1,18 @@
-export * from './lib/interpolating-text-form-control/builder-autocomplete-dropdown-handler/builder-autocomplete-dropdown-handler.component';
+export * from './lib/components/interpolating-text-form-control/builder-autocomplete-dropdown-handler/builder-autocomplete-dropdown-handler.component';
 export * from './lib/ui-feature-builder-form-controls.module';
-export * from './lib/models/piece-properties-form-value';
-export * from './lib/interpolating-text-form-control/utils';
-export * from './lib/interpolating-text-form-control/interpolating-text-form-control.component';
-export * from './lib/array-form-control/array-form-control.component';
-export * from './lib/branch-condition-form-control/branch-condition-form-control.component';
-export * from './lib/branch-conditions-group-form-control/branch-conditions-group-form-control.component';
-export * from './lib/code-artifact-form-control/code-artifact-control-fullscreen/add-npm-package-modal/add-npm-package-modal.component';
-export * from './lib/code-artifact-form-control/code-artifact-control-fullscreen/code-artifact-control-fullscreen.component';
-export * from './lib/code-artifact-form-control/code-artifact-form-control.component';
-export * from './lib/piece-properties-form/piece-properties-form.component';
-export * from './lib/dictionary-form-control/dictionary-form-control.component';
-export * from './lib/interpolating-text-form-control/fixed-selection-mention';
-export * from './lib/interpolating-text-form-control/builder-autocomplete-mentions-dropdown/builder-autocomplete-mentions-dropdown.component';
-export * from './lib/action-error-handling-form-control/action-error-handling-form-control.component';
-
+export * from './lib/components/interpolating-text-form-control/utils';
+export * from './lib/components/interpolating-text-form-control/interpolating-text-form-control.component';
+export * from './lib/components/array-form-control/array-form-control.component';
+export * from './lib/components/branch-condition-form-control/branch-condition-form-control.component';
+export * from './lib/components/branch-conditions-group-form-control/branch-conditions-group-form-control.component';
+export * from './lib/components/code-artifact-form-control/code-artifact-control-fullscreen/add-npm-package-modal/add-npm-package-modal.component';
+export * from './lib/components/code-artifact-form-control/code-artifact-control-fullscreen/code-artifact-control-fullscreen.component';
+export * from './lib/components/code-artifact-form-control/code-artifact-form-control.component';
+export * from './lib/components/dictionary-form-control/dictionary-form-control.component';
+export * from './lib/components/interpolating-text-form-control/fixed-selection-mention';
+export * from './lib/components/interpolating-text-form-control/builder-autocomplete-mentions-dropdown/builder-autocomplete-mentions-dropdown.component';
+export * from './lib/components/action-error-handling-form-control/action-error-handling-form-control.component';
+export * from './lib/components/new-piece-properties-form/piece-properties-form.component';
+export * from './lib/components/action-or-trigger-dropdown/action-or-trigger-dropdown.component';
 import '@angular/localize/init';
+export * from './lib/components/dynamic-property-control/dynamic-property-control.component';