Merge pull request #3982 from activepieces/chore/display-app-name-whe…

…n-creating-connection

chore: show piece name in dialog title when creating a new connection

packages/ui/feature-builder-form-controls/src/lib/piece-properties-form/piece-properties-form.component.html

@@ -466,15 +466,15 @@
                     ||
                     ''}}
                   </div>
-                  <div >
+                  <div>
                     <app-add-edit-connection-button *ngIf="formGroup.enabled && formGroup.get(property.key)!.value"
                       (click)="$event.stopPropagation()" btnSize="extraSmall" [isEditConnectionButton]="true"
                       [authProperty]="property.value" [pieceName]="pieceName" [pieceVersion]="pieceVersion"
-                      [propertyKey]="property.key"
+                      [propertyKey]="property.key" [pieceDisplayName]="pieceDisplayName"
                       [selectedConnectionInterpolatedString]="formGroup.get(property.key)!.value"
                       (connectionPropertyValueChanged)="connectionValueChanged($event)"
                       [triggerName]="actionOrTriggerName">
-                      <div class="ap-px-2" i18n >
+                      <div class="ap-px-2" i18n>
                         Reconnect
                       </div>
                     </app-add-edit-connection-button>
@@ -487,7 +487,8 @@
           <app-add-edit-connection-button btnSize="medium" class="ap-hidden" *ngIf="formGroup.enabled"
             [isEditConnectionButton]="false" #addConnectionBtn [authProperty]="property.value" [pieceName]="pieceName"
             [pieceVersion]="pieceVersion" [propertyKey]="property.key"
-            (connectionPropertyValueChanged)="connectionValueChanged($event)" [triggerName]="actionOrTriggerName">
+            (connectionPropertyValueChanged)="connectionValueChanged($event)" [triggerName]="actionOrTriggerName"
+            [pieceDisplayName]="pieceDisplayName">
 
           </app-add-edit-connection-button>
         </div>

packages/ui/feature-builder-form-controls/src/lib/piece-properties-form/piece-properties-form.component.ts

@@ -121,13 +121,13 @@ export class PiecePropertiesFormComponent implements ControlValueAccessor {
   requiredProperties: PiecePropertyMap = {};
   optionalProperties: PiecePropertyMap = {};
   optionalConfigsMenuOpened = false;
-  @Input() actionOrTriggerName: string;
-  @Input() packageType: PackageType;
-  @Input() pieceType: PieceType;
-  @Input() pieceName: string;
-  @Input() pieceVersion: string;
-  @Input() pieceDisplayName: string;
-  @Input() isTriggerPieceForm = false;
+  @Input({ required: true }) actionOrTriggerName: string;
+  @Input({ required: true }) packageType: PackageType;
+  @Input({ required: true }) pieceType: PieceType;
+  @Input({ required: true }) pieceName: string;
+  @Input({ required: true }) pieceVersion: string;
+  @Input({ required: true }) pieceDisplayName: string;
+  @Input({ required: true }) isTriggerPieceForm = false;
   @ViewChildren('textControl', { read: ElementRef })
   theInputs: QueryList<ElementRef>;
   @ViewChild('addConnectionBtn')

packages/ui/feature-builder-right-sidebar/src/lib/edit-step-sidebar/edit-step-form-container/edit-step-form-container.component.html

@@ -48,4 +48,6 @@
     </ng-container>
 
   </div>
-</ng-template>
+</ng-template>
+
+<ng-container *ngIf="setInitialFormValue$ | async"></ng-container>

packages/ui/feature-builder-right-sidebar/src/lib/edit-step-sidebar/edit-step-form-container/edit-step-form-container.component.ts

@@ -14,9 +14,10 @@ import {
   tap,
 } from 'rxjs';
 import {
+  FormControl,
+  FormGroup,
   UntypedFormBuilder,
   UntypedFormControl,
-  UntypedFormGroup,
 } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -41,6 +42,7 @@ import {
 } from '@activepieces/ui/feature-builder-store';
 import { TriggerBase, TriggerStrategy } from '@activepieces/pieces-framework';
 import { PieceMetadataService } from '@activepieces/ui/feature-pieces';
+import { InputFormsSchema } from '../../input-forms/input-forms-schema';
 
 @Component({
   selector: 'app-edit-step-form-container',
@@ -51,12 +53,13 @@ export class EditStepFormContainerComponent {
   readOnly$: Observable<boolean> = of(false);
   cancelAutoSaveListener$: Subject<boolean> = new Subject();
   _selectedStep: Step;
-  stepForm: UntypedFormGroup;
+  stepForm: FormGroup<{ settings: FormControl<InputFormsSchema> }>;
   webhookUrl$: Observable<string>;
   ActionType = ActionType;
   TriggerType = TriggerType;
   ApEdition = ApEdition;
   edition$: Observable<ApEdition>;
+  setInitialFormValue$: Observable<void>;
   @Input() set selectedStep(step: Step) {
     this._selectedStep = step;
     this.cancelAutoSaveListener$.next(true);
@@ -97,11 +100,20 @@ export class EditStepFormContainerComponent {
   }
 
   updateFormValue(stepSelected: Step) {
-    const settingsControl = this.stepForm.get('settings')!;
-    settingsControl.setValue({
-      ...stepSelected.settings,
-      type: stepSelected.type,
-    });
+    const settingsControl = this.stepForm.controls.settings;
+    this.setInitialFormValue$ = this.store
+      .select(BuilderSelectors.selectFlowItemDetails(stepSelected))
+      .pipe(
+        take(1),
+        tap((res) => {
+          settingsControl.setValue({
+            ...stepSelected.settings,
+            pieceDisplayName: res?.name || '',
+            type: stepSelected.type,
+          });
+        }),
+        switchMap(() => of(void 0))
+      );
   }
 
   setAutoSaveListener() {
@@ -216,7 +228,7 @@ export class EditStepFormContainerComponent {
 
   createNewStepSettings(currentStep: Step) {
     const inputControlValue: StepSettings =
-      this.stepForm.get('settings')?.value;
+      this.stepForm.controls.settings.value;
 
     switch (currentStep.type) {
       case ActionType.CODE: {
@@ -259,7 +271,7 @@ export class EditStepFormContainerComponent {
 
   createPieceSettings(step: Step) {
     const inputControlValue: StepSettings =
-      this.stepForm.get('settings')?.value;
+      this.stepForm.controls.settings.value;
     const stepSettings: PieceTriggerSettings = {
       ...step.settings,
       ...inputControlValue,

packages/ui/feature-builder-right-sidebar/src/lib/input-forms/input-forms-schema.ts

@@ -29,11 +29,16 @@ export interface ScheduledTriggerInputFormSchema extends InputFormsSchemaBase {
   cronExpression: string;
 }
 
-export interface PieceActionInputFormSchema extends InputFormsSchemaBase {
+type CommonPieceFormsProps = {
   packageType: PackageType;
   pieceType: PieceType;
   pieceName: string;
+  pieceDisplayName: string;
   pieceVersion: string;
+};
+export interface PieceActionInputFormSchema
+  extends InputFormsSchemaBase,
+    CommonPieceFormsProps {
   actionName: string;
   input: ConfigsAndTheirValues;
   inputUiInfo: {
@@ -42,11 +47,9 @@ export interface PieceActionInputFormSchema extends InputFormsSchemaBase {
   errorHandlingOptions?: ActionErrorHandlingOptions;
 }
 
-export interface ComponentTriggerInputFormSchema extends InputFormsSchemaBase {
-  packageType: PackageType;
-  pieceType: PieceType;
-  pieceName: string;
-  pieceVersion: string;
+export interface PieceTriggerInputFormSchema
+  extends InputFormsSchemaBase,
+    CommonPieceFormsProps {
   triggerName: string;
   input: ConfigsAndTheirValues;
 }

packages/ui/feature-builder-right-sidebar/src/lib/input-forms/piece-input-forms/piece-action-input-form/piece-action-input-form.component.html

@@ -35,6 +35,7 @@
         <app-piece-properties-form
           [actionOrTriggerName]="pieceActionForm.get(ACTION_FORM_CONTROL_NAME)!.value?.actionName"
           [packageType]="packageType" [pieceType]="pieceType" [pieceName]="pieceName" [pieceVersion]="pieceVersion"
+          [isTriggerPieceForm]="false" [pieceDisplayName]="pieceDisplayName"
           [formControlName]="CONFIGS_FORM_CONTROL_NAME">
         </app-piece-properties-form>
       </div>

packages/ui/feature-builder-right-sidebar/src/lib/input-forms/piece-input-forms/piece-action-input-form/piece-action-input-form.component.ts

@@ -115,6 +115,7 @@ export class PieceActionInputFormComponent
   pieceType: PieceType;
   pieceName: string;
   pieceVersion: string;
+  pieceDisplayName: string;
   initialComponentInputFormValue: PieceActionInputFormSchema | null;
   selectedAction$: Observable<ActionDropdownOption | undefined>;
   actions$: Observable<ActionDropdownOption[]>;
@@ -303,7 +304,7 @@ export class PieceActionInputFormComponent
     this.pieceType = obj.pieceType;
     this.pieceName = obj.pieceName;
     this.pieceVersion = obj.pieceVersion;
-
+    this.pieceDisplayName = obj.pieceDisplayName;
     this.pieceActionForm
       .get(ACTION_FORM_CONTROL_NAME)
       ?.setValue(undefined, { emitEvent: false });

packages/ui/feature-builder-right-sidebar/src/lib/input-forms/piece-input-forms/piece-trigger-input-form/piece-trigger-input-form.component.html

@@ -17,18 +17,15 @@
             </div>
 
             <div class="ap-flex-grow"></div>
-            <div *ngIf="opt.label.isWebhook"
-                 matTooltip="Instantly triggered once change occurs"
-                 i18n-matTooltip
-                 class="ap-rounded-full ap-drop-shadow-md ap-min-h-[30px] ap-min-w-[30px] ap-flex ap-items-center ap-justify-center">
+            <div *ngIf="opt.label.isWebhook" matTooltip="Instantly triggered once change occurs" i18n-matTooltip
+              class="ap-rounded-full ap-drop-shadow-md ap-min-h-[30px] ap-min-w-[30px] ap-flex ap-items-center ap-justify-center">
               <svg-icon src="assets/img/custom/triggers/instant.svg" class="ap-w-[25px] ap-h-[25px] ap-fill-body"
                 [applyClass]="true">
               </svg-icon>
             </div>
             <div *ngIf="!opt.label.isWebhook && pieceName !== CORE_SCHEDULE"
-                matTooltip="Checks for changes periodically, based on your plan"
-                i18n-matTooltip
-                class="ap-rounded-full  ap-drop-shadow-md ap-min-h-[30px] ap-justify-center ap-min-w-[30px] ap-flex ap-items-center">
+              matTooltip="Checks for changes periodically, based on your plan" i18n-matTooltip
+              class="ap-rounded-full  ap-drop-shadow-md ap-min-h-[30px] ap-justify-center ap-min-w-[30px] ap-flex ap-items-center">
               <svg-icon src="assets/img/custom/triggers/periodic.svg" class="ap-w-[25px] ap-h-[25px] ap-fill-body"
                 [applyClass]="true">
               </svg-icon>
@@ -37,7 +34,8 @@
           </div>
         </mat-option>
         <mat-option [disabled]="true"
-          *ngIf=" ( triggers$ | async) === undefined ||  (triggers$ | async) === null ||   (triggers$ | async)?.length === 0" i18n>
+          *ngIf=" ( triggers$ | async) === undefined ||  (triggers$ | async) === null ||   (triggers$ | async)?.length === 0"
+          i18n>
           No options available
         </mat-option>
       </mat-select>
@@ -51,11 +49,8 @@
 
         <app-piece-properties-form
           [actionOrTriggerName]="pieceTriggerInputForm.get(TRIGGER_FORM_CONTROL_NAME)!.value?.triggerName"
-          [isTriggerPieceForm]="true"
-          [packageType]="packageType"
-          [pieceType]="pieceType"
-          [pieceName]="pieceName"
-          [pieceVersion]="pieceVersion"
+          [isTriggerPieceForm]="true" [packageType]="packageType" [pieceType]="pieceType" [pieceName]="pieceName"
+          [pieceVersion]="pieceVersion" [pieceDisplayName]="pieceDisplayName"
           [formControlName]="CONFIGS_FORM_CONTROL_NAME">
         </app-piece-properties-form>
       </div>
@@ -73,4 +68,4 @@
 <ng-container *ngIf="triggerDropdownValueChanged$ | async"></ng-container>
 <ng-container *ngIf="initialSetup$ | async"> </ng-container>
 <ng-container *ngIf="selectedTrigger$ | async"></ng-container>
-<ng-container *ngIf="updateStepName$ | async"></ng-container>
+<ng-container *ngIf="updateStepName$ | async"></ng-container>

packages/ui/feature-builder-right-sidebar/src/lib/input-forms/piece-input-forms/piece-trigger-input-form/piece-trigger-input-form.component.ts

@@ -31,7 +31,7 @@ import {
   FlowsActions,
 } from '@activepieces/ui/feature-builder-store';
 import { PiecePropertiesFormValue } from '@activepieces/ui/feature-builder-form-controls';
-import { ComponentTriggerInputFormSchema } from '../../input-forms-schema';
+import { PieceTriggerInputFormSchema } from '../../input-forms-schema';
 import { PiecePropertyMap } from '@activepieces/pieces-framework';
 import {
   CORE_SCHEDULE,
@@ -83,6 +83,7 @@ export class PieceTriggerInputFormComponent {
   packageType: PackageType;
   pieceType: PieceType;
   pieceName: string;
+  pieceDisplayName: string;
   pieceVersion: string;
   initialComponentTriggerInputFormValue: {
     triggerName: string;
@@ -238,13 +239,13 @@ export class PieceTriggerInputFormComponent {
     }
   }
 
-  writeValue(obj: ComponentTriggerInputFormSchema): void {
+  writeValue(obj: PieceTriggerInputFormSchema): void {
     this.initialComponentTriggerInputFormValue = obj;
     this.packageType = obj.packageType;
     this.pieceType = obj.pieceType;
     this.pieceName = obj.pieceName;
     this.pieceVersion = obj.pieceVersion;
-
+    this.pieceDisplayName = obj.pieceDisplayName;
     this.pieceTriggerInputForm
       .get(TRIGGER_FORM_CONTROL_NAME)
       ?.setValue(undefined, { emitEvent: false });

packages/ui/feature-connections/src/lib/add-edit-connection-button/add-edit-connection-button.component.ts

@@ -91,6 +91,7 @@ export class AddEditConnectionButtonComponent {
   isEditConnectionButton = false;
   @Input()
   triggerName: string;
+  @Input({ required: true }) pieceDisplayName: string;
   @Output()
   connectionPropertyValueChanged: EventEmitter<{
     propertyKey: string;
@@ -186,6 +187,7 @@ export class AddEditConnectionButtonComponent {
       pieceAuthProperty: this
         .authProperty as CustomAuthProperty<CustomAuthProps>,
       pieceName: this.pieceName,
+      pieceDisplayName: this.pieceDisplayName,
     };
 
     return this.dialogService
@@ -215,6 +217,7 @@ export class AddEditConnectionButtonComponent {
     const dialogData: BasicAuthDialogData = {
       pieceAuthProperty: this.authProperty as BasicAuthProperty,
       pieceName: this.pieceName,
+      pieceDisplayName: this.pieceDisplayName,
     };
     return this.dialogService
       .open(BasicAuthConnectionDialogComponent, {
@@ -231,6 +234,7 @@ export class AddEditConnectionButtonComponent {
       pieceName: this.pieceName,
       displayName: this.authProperty.displayName,
       description: this.authProperty.description || '',
+      pieceDisplayName: this.pieceDisplayName,
     };
     return this.dialogService
       .open(SecretTextConnectionDialogComponent, {
@@ -290,6 +294,7 @@ export class AddEditConnectionButtonComponent {
           pieceAuthProperty: this.authProperty as OAuth2Property<OAuth2Props>,
           pieceName: this.pieceName,
           redirectUrl: frontEndUrl + '/redirect',
+          pieceDisplayName: this.pieceDisplayName,
         };
 
         return this.dialogService
@@ -340,6 +345,7 @@ export class AddEditConnectionButtonComponent {
             isTriggerAppWebhook: isTriggerAppWebhook,
             connectionType: pieceOAuth2Details.connectionType,
             frontendUrl,
+            pieceDisplayName: this.pieceDisplayName,
           };
           return this.dialogService
             .open(ManagedOAuth2ConnectionDialogComponent, {
@@ -410,6 +416,7 @@ export class AddEditConnectionButtonComponent {
           pieceAuthProperty: this
             .authProperty as CustomAuthProperty<CustomAuthProps>,
           connectionToUpdate: customAuthConnection,
+          pieceDisplayName: this.pieceDisplayName,
         };
         return this.dialogService
           .open(CustomAuthConnectionDialogComponent, {
@@ -434,6 +441,7 @@ export class AddEditConnectionButtonComponent {
           displayName: this.authProperty.displayName,
           description: this.authProperty.description || '',
           connectionName: connection!.name,
+          pieceDisplayName: this.pieceDisplayName,
         };
         return this.dialogService
           .open(SecretTextConnectionDialogComponent, {
@@ -456,6 +464,7 @@ export class AddEditConnectionButtonComponent {
           pieceName: this.pieceName,
           pieceAuthProperty: this.authProperty as BasicAuthProperty,
           connectionToUpdate: connection,
+          pieceDisplayName: this.pieceDisplayName,
         };
 
         return this.dialogService
@@ -487,6 +496,7 @@ export class AddEditConnectionButtonComponent {
                 pieceAuthProperty: this.authProperty,
                 pieceName: this.pieceName,
                 redirectUrl: frontendUrl + '/redirect',
+                pieceDisplayName: this.pieceDisplayName,
               };
               return this.dialogService
                 .open(OAuth2ConnectionDialogComponent, {
@@ -510,6 +520,7 @@ export class AddEditConnectionButtonComponent {
                       isTriggerAppWebhook: false,
                       connectionType: pieceOAuth2Details.connectionType,
                       frontendUrl,
+                      pieceDisplayName: this.pieceDisplayName,
                     };
                     return this.dialogService
                       .open(ManagedOAuth2ConnectionDialogComponent, {