Merge pull request #3361 from activepieces/feat/show-back-and-folder-…

…name-in-builder-flag

feat: introduce flag to hide/show back button and folder name in builder for embedding

docs/platform/embedding.mdx

@@ -33,9 +33,13 @@ activepieces.configure({
 | prefix | ❌ | You can choose a URL prefix for generating URLs. URL prefixes for embedding follow this pattern: `<embedding_url_prefix>/<Activepieces_url>`. For example, if the prefix is `/automation` and the Activepieces URL is `/flows`, the corresponding vendor URL will be `/automations/flows`.
 | initialRoute | ❌ | Its value must be one of the following: `/flows`, `/runs`, `/connections`, `/flows/:id`, `/runs/:id`. Any other path will result in a 404 page. If left undefined, it will redirect to `/flows`.
 | hideSidebar | ❌ | Its value can be either false or true, and it controls the visibility of the sidebar in the dashboard, by default it is false.
+| disableNavigationInBuilder | ❌ | Its value can be either false or true, and it hide the folder name and back button in the builder, by default it is false.
 
 
-## Step 2: Add an iframe
+## Step 2: Generate a JWT token
+Follow the instructions in the [managed users](https://www.activepieces.com/docs/platform/managed-users) page
+
+## Step 3: Add an iframe
 
 Add an iframe into your html, set its source to `<your_instance_url>/embed`. If you are using the cloud, just use `https://cloud.activepieces.com/embed`.
 

packages/ee/components/src/lib/embed-redirect/embed-redirect.component.ts

@@ -66,6 +66,7 @@ export class EmbedRedirectComponent implements OnDestroy, OnInit {
         hideSideNav: event.data.data.hideSidebar,
         isEmbedded: true,
         prefix: event.data.data.prefix,
+        disableNavigationInBuilder: event.data.data.disableNavigationInBuilder,
       });
       this.router.navigate([event.data.data.initialRoute], {
         skipLocationChange: true,

packages/ee/embed-sdk/README.md

@@ -5,3 +5,7 @@ This library was generated with [Nx](https://nx.dev).
 ## Building
 
 Run `nx build ee-embed-sdk` to build the library.
+
+## Bundling
+
+Run `nx bundle ee-embed-sdk` to build the library.

packages/ee/embed-sdk/src/index.ts

@@ -35,7 +35,8 @@ export interface ActivepiecesVendorInit {
   data: {
     prefix: string;
     initialRoute: string;
-    hideSidebar:boolean
+    hideSidebar: boolean;
+    disableNavigationInBuilder: boolean;
   };
 }
 export const jwtTokenQueryParamName = "jwtToken"
@@ -44,23 +45,27 @@ export const jwtTokenQueryParamName = "jwtToken"
 class ActivepiecesEmbedded {
   _prefix = '';
   _initialRoute = '';
-  _hideSidebar=false;
+  _hideSidebar = false;
+  _disableNavigationInBuilder = true;
   iframeParentOrigin = window.location.origin;
   handleVendorNavigation?: (data: { route: string }) => void;
   handleClientNavigation?: (data: { route: string }) => void;
   parentOrigin = window.location.origin;
   configure({
     prefix,
     initialRoute,
-    hideSidebar
+    hideSidebar,
+    disableNavigationInBuilder
   }: {
     prefix?: string;
     initialRoute?: string;
-    hideSidebar?:boolean
+    hideSidebar?: boolean;
+    disableNavigationInBuilder?: boolean;
   }) {
     this._prefix = prefix || '/';
     this._initialRoute = initialRoute || '/';
-    this._hideSidebar= hideSidebar || false;
+    this._hideSidebar = hideSidebar || false;
+    this._disableNavigationInBuilder = disableNavigationInBuilder === undefined ? true : disableNavigationInBuilder;
     setIframeChecker(this);
   }
 }
@@ -82,7 +87,8 @@ const setIframeChecker = (client: ActivepiecesEmbedded) => {
                 data: {
                   prefix: client._prefix,
                   initialRoute: client._initialRoute,
-                  hideSidebar : client._hideSidebar
+                  hideSidebar: client._hideSidebar,
+                  disableNavigationInBuilder: client._disableNavigationInBuilder,
                 },
               };
               iframeWindow.postMessage(apEvent, '*');

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

@@ -5,6 +5,7 @@ export type EmbeddingState = {
   isEmbedded: boolean;
   hideSideNav: boolean;
   prefix: string;
+  disableNavigationInBuilder: boolean;
 };
 @Injectable({
   providedIn: 'root',
@@ -16,6 +17,7 @@ export class EmbeddingService {
       isEmbedded: false,
       hideSideNav: false,
       prefix: '',
+      disableNavigationInBuilder: false,
     });
   }
   getState() {
@@ -30,6 +32,9 @@ export class EmbeddingService {
   getIsInEmbedding$() {
     return this.getState$().pipe(map((res) => res.isEmbedded));
   }
+  getShowFolderNameAndBackButton$() {
+    return this.getState$().pipe(map((res) => !res.disableNavigationInBuilder));
+  }
 
   activepiecesRouteChanged(route: string) {
     window.parent.postMessage(

packages/ui/feature-builder-header/src/lib/flow-builder-header.component.html

@@ -1,4 +1,5 @@
-<nav class="navbar-container navbar-expand ap-relative">
+<nav class="navbar-container ap-bg-header ap-py-4 ap-pr-3 navbar-expand ap-relative"
+  [class.ap-pl-3]="(showBackButtonAndFolderName$ | async )=== false">
   <div class="ap-absolute ap-w-full ap-flex ap-items-center ap-justify-center ap-p-3 ap-pointer-events-none">
     <div class="ap-h-[30px]">
       <img [src]=" (fullLogo$| async) ||'assets/img/custom/logo/full-logo.svg'" class="ap-max-w-full ap-h-full">
@@ -9,18 +10,21 @@
 
   <div class="ap-flex ap-items-center">
     <div class="ap-flex ap-items-center ap-gap-2">
-      <ap-icon-button [width]="7" [height]="14" iconFilename="back.svg" tooltipText="Home" i18n-tooltipText
-        (buttonClicked)="redirectHome(false)" (auxclick)="redirectHome(true)"></ap-icon-button>
+      <ap-icon-button *ngIf="showBackButtonAndFolderName$ | async" [width]="7" [height]="14" iconFilename="back.svg"
+        tooltipText="Home" i18n-tooltipText (buttonClicked)="redirectHome(false)"
+        (auxclick)="redirectHome(true)"></ap-icon-button>
       <div class="ap-flex-grow ap-flex ap-items-center ap-gap-2" #spacer>
-        <div class="ap-typography-body-1 ap-truncate ap-max-w-[150px] ap-cursor-pointer hover:ap-text-[#000000]"
-          #folderName (click)="openDashboardToFolder()" [matTooltip]="
+        <ng-container *ngIf="showBackButtonAndFolderName$ | async">
+          <div class="ap-typography-body-1 ap-truncate ap-max-w-[150px] ap-cursor-pointer hover:ap-text-[#000000]"
+            #folderName (click)="openDashboardToFolder()" [matTooltip]="
             folderName.scrollWidth > folderName.clientWidth
               ? (folderDisplayName$ | async) || ''
               : ''
           ">
-          {{ folderDisplayName$ | async }}
-        </div>
-        <div class="ap-typography-body-1 ap-text-placeholder">/</div>
+            {{ folderDisplayName$ | async }}
+          </div>
+          <div class="ap-typography-body-1 ap-text-placeholder">/</div>
+        </ng-container>
         <ap-editable-text [editing]="editingFlowName" (editingChanges)="changeEditValue($event)"
           [value]="(flow$ | async)?.version?.displayName || ''" (valueChanges)="saveFlowName($event)" [disableEditing]="
             (isInDebugMode$ | async | defaultTrue) ||
@@ -62,13 +66,16 @@
           </div>
         </button>
         <ap-share-flow-template-dialog></ap-share-flow-template-dialog>
-        <button mat-menu-item *ngIf="flow$ | async as flow" (click)="deleteFlow(flow)">
-          <div class="ap-flex ap-gap-3 ap-items-center">
-            <svg-icon src="assets/img/custom/trash.svg" class="ap-fill-danger ap-w-[20px] ap-h-[20px]"
-              [applyClass]="true"></svg-icon>
-            <span class="ap-text-danger" i18n>Delete</span>
-          </div>
-        </button>
+        <ng-container *ngIf="(showBackButtonAndFolderName$ | async ) === false">
+          <button mat-menu-item *ngIf="flow$ | async as flow" (click)="deleteFlow(flow)">
+            <div class="ap-flex ap-gap-3 ap-items-center">
+              <svg-icon src="assets/img/custom/trash.svg" class="ap-fill-danger ap-w-[20px] ap-h-[20px]"
+                [applyClass]="true"></svg-icon>
+              <span class="ap-text-danger" i18n>Delete</span>
+            </div>
+          </button>
+        </ng-container>
+
       </mat-menu>
     </div>
 

packages/ui/feature-builder-header/src/lib/flow-builder-header.component.scss

@@ -1,9 +1,6 @@
 @import "../../../core/src/assets/scss/variables.scss";
 
 .navbar-container {
-  padding: 0.75rem 0.875rem 0.75rem 0rem !important;
-  position: relative;
-  background-color: $header;
   box-shadow: 0px 1px 0px $line;
 }
 

packages/ui/feature-builder-header/src/lib/flow-builder-header.component.ts

@@ -44,6 +44,7 @@ export class FlowBuilderHeaderComponent implements OnInit {
   fullLogo$: Observable<string>;
   setTitle$: Observable<void>;
   isInEmbedded$: Observable<boolean>;
+  showBackButtonAndFolderName$: Observable<boolean>;
   constructor(
     public dialogService: MatDialog,
     private store: Store,
@@ -57,6 +58,8 @@ export class FlowBuilderHeaderComponent implements OnInit {
     private navigationService: NavigationService
   ) {
     this.isInEmbedded$ = this.embeddingService.getIsInEmbedding$();
+    this.showBackButtonAndFolderName$ =
+      this.embeddingService.getShowFolderNameAndBackButton$();
     this.fullLogo$ = this.flagService
       .getLogos()
       .pipe(map((logos) => logos.fullLogoUrl));