Merge pull request #4393 from activepieces/feat/hide-flow-actioins

feat(embed): ability to hide flow actions

docs/embedding/configuration/initialize-embed.mdx

@@ -19,7 +19,7 @@ The following scripts shouldn't contain async or defer attributes.
 </Tip>
 
 ```html
-<script src="https://cdn.activepieces.com/sdk/embed/0.2.2.js">
+<script src="https://cdn.activepieces.com/sdk/embed/0.2.3.js">
 </script>
 <script>
 activepieces.configure(
@@ -31,7 +31,8 @@ activepieces.configure(
       containerId: "container",
       builder:{
         disableNavigation:false,
-        hideLogo: false
+        hideLogo: false,
+        hideFlowActions: false
       },
       dashboard: {
         hideSidebar:true
@@ -52,7 +53,7 @@ activepieces.configure(
 | containerId | ❌ | string | The html element's id that is going to be containing Activepieces's iframe. |
 | jwtToken | ✅  |  string | The jwt token you generated to authenticate your users to Activepieces. |
 | instanceUrl| ✅ |  string | The url of the instance hosting Activepieces, could be https://cloud.activepieces.com if you are a cloud user. |
-| prefix | ❌ | string | Some customers have an embedding prefix, like this `<embedding_url_prefix>/<Activepieces_url>`. For example if the prefix is `/automations` and the Activepieces url is `/flows` the full url would be `/automations/flows`. |
+| prefix | ❌ | string | Some customers have an embedding prefix, like this `<embedding_url_prefix>/<Activepieces_url>`. For example if the prefix is `/automation` and the Activepieces url is `/flows` the full url would be `/automation/flows`. |
 | hideSidebar | ❌ | boolean | Controls the visibility of the sidebar in the dashboard, by default it is false. |
 | disableNavigation | ❌ |  boolean | Hides the folder name and back button in the builder, by default it is false. |
 | hideFolders | ❌ | boolean | Hides all things related to folders in both the flows table and builder by default it is false. |

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

@@ -66,6 +66,8 @@ export class EmbedRedirectComponent implements OnDestroy, OnInit {
         hideSideNav: event.data.data.hideSidebar,
         isEmbedded: true,
         hideLogoInBuilder: event.data.data.hideLogoInBuilder || false,
+        hideFlowActionsInBuilder:
+          event.data.data.hideFlowActionsInBuilder || false,
         prefix: event.data.data.prefix,
         disableNavigationInBuilder: event.data.data.disableNavigationInBuilder,
         hideFolders: event.data.data.hideFolders || false,

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

@@ -47,6 +47,7 @@ export interface ActivepiecesVendorInit {
     initialRoute: string;
     hideSidebar: boolean;
     hideLogoInBuilder?: boolean;
+    hideFlowActionsInBuilder?: boolean;
     disableNavigationInBuilder: boolean;
     hideFolders?: boolean;
   };
@@ -60,6 +61,7 @@ class ActivepiecesEmbedded {
   _hideSidebar = false;
   _hideFolders = false;
   _hideLogoInBuilder = false;
+  _hideFlowActionsInBuilder = false;
   _disableNavigationInBuilder = true;
   _connectionsIframeInitialized = false;
   _resolveNewConnectionDialogClosed?: (result: ActivepiecesNewConnectionDialogClosed['data']) => void;
@@ -83,6 +85,7 @@ class ActivepiecesEmbedded {
       builder?: {
         disableNavigation: boolean
         hideLogo?: boolean;
+        hideFlowActions?: boolean;
       },
       dashboard?: {
         hideSidebar?: boolean;
@@ -98,6 +101,7 @@ class ActivepiecesEmbedded {
     this._disableNavigationInBuilder = embedding?.builder?.disableNavigation ?? false;
     this._hideFolders = embedding?.hideFolders ?? false;
     this._hideLogoInBuilder = embedding?.builder?.hideLogo ?? false;
+    this._hideFlowActionsInBuilder = embedding?.builder?.hideFlowActions ?? false;
     if (embedding?.containerId) {
       this._initializeBuilderAndDashboardIframe({
         containerSelector: `#${embedding.containerId}`,
@@ -113,38 +117,37 @@ class ActivepiecesEmbedded {
       containerSelector: string,
       jwtToken: string
     }) => {
-      this._addGracePeriodBeforeMethod({
-        condition: () => {
-          return !!document.querySelector(containerSelector);
-        },
-        method: () => {
-          const iframeContainer = document.querySelector(containerSelector);
-          if(iframeContainer)
-          {
-            const iframeWindow = this.connectToEmbed({ jwtToken, iframeContainer }).contentWindow;
-            this._checkForVendorRouteChanges(iframeWindow);
-            this._checkForClientRouteChanges(iframeWindow);
-          }
-        },
-        errorMessage: 'container not found'
-      })
+    this._addGracePeriodBeforeMethod({
+      condition: () => {
+        return !!document.querySelector(containerSelector);
+      },
+      method: () => {
+        const iframeContainer = document.querySelector(containerSelector);
+        if (iframeContainer) {
+          const iframeWindow = this.connectToEmbed({ jwtToken, iframeContainer }).contentWindow;
+          this._checkForVendorRouteChanges(iframeWindow);
+          this._checkForClientRouteChanges(iframeWindow);
+        }
+      },
+      errorMessage: 'container not found'
+    })
 
   };
 
 
   private _initializeConnectionsIframe = ({ jwtToken }: { jwtToken: string }) => {
 
-   return this._addGracePeriodBeforeMethod({
-      condition: ()=>{
+    return this._addGracePeriodBeforeMethod({
+      condition: () => {
         return !!document.body;
       },
-      method:()=>{
-      this._connectionsIframe = this.connectToEmbed({ jwtToken, iframeContainer: document.body, callbackAfterAuthentication: () => { this._connectionsIframeInitialized = true } });
-      const connectionsIframeStyle = ['display:none', 'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%', 'border:none'].join(';');
-      this._connectionsIframe.style.cssText = connectionsIframeStyle;
-      this._checkIfNewConnectionDialogClosed();
+      method: () => {
+        this._connectionsIframe = this.connectToEmbed({ jwtToken, iframeContainer: document.body, callbackAfterAuthentication: () => { this._connectionsIframeInitialized = true } });
+        const connectionsIframeStyle = ['display:none', 'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%', 'border:none'].join(';');
+        this._connectionsIframe.style.cssText = connectionsIframeStyle;
+        this._checkIfNewConnectionDialogClosed();
       },
-      errorMessage:'document body not found while trying to add connections iframe'
+      errorMessage: 'document body not found while trying to add connections iframe'
     });
 
   }
@@ -179,7 +182,8 @@ class ActivepiecesEmbedded {
                   hideSidebar: this._hideSidebar,
                   disableNavigationInBuilder: this._disableNavigationInBuilder,
                   hideFolders: this._hideFolders,
-                  hideLogoInBuilder: this._hideLogoInBuilder
+                  hideLogoInBuilder: this._hideLogoInBuilder,
+                  hideFlowActionsInBuilder: this._hideFlowActionsInBuilder
                 },
               };
               iframeWindow.postMessage(apEvent, '*');
@@ -203,9 +207,9 @@ class ActivepiecesEmbedded {
   async connect({ pieceName }: { pieceName: string }) {
 
     return this._addGracePeriodBeforeMethod({
-      errorMessage:'connections iframe not initialized',
-      condition:()=>this._connectionsIframeInitialized,
-      method:()=>{
+      errorMessage: 'connections iframe not initialized',
+      condition: () => this._connectionsIframeInitialized,
+      method: () => {
         if (!this._connectionsIframe || !this._doesFrameHaveWindow(this._connectionsIframe)) {
           console.error('Activepieces: connections iframe not found, please make sure you enabled embedded dialiogs in the configure method');
           return;
@@ -224,7 +228,7 @@ class ActivepiecesEmbedded {
         });
       }
     });
-      
+
   }
 
 
@@ -311,41 +315,39 @@ class ActivepiecesEmbedded {
   private _removeTrailingSlashes(str: string) {
     return str.endsWith('/') ? str.slice(0, -1) : str;
   }
- /**Adds a grace period before executing the method depending on the condition */
-  private _addGracePeriodBeforeMethod( 
-    { method, 
+  /**Adds a grace period before executing the method depending on the condition */
+  private _addGracePeriodBeforeMethod(
+    { method,
       condition,
-      errorMessage } :
-    { method:()=>void, 
-      condition: ()=>boolean,
-     /**Error message to show when grace period passes */
-     errorMessage:string }
-    )
-  {
-    return new Promise((resolve, reject) => {
-      let checkCounter= 0;
-      if(condition())
+      errorMessage }:
       {
+        method: () => void,
+        condition: () => boolean,
+        /**Error message to show when grace period passes */
+        errorMessage: string
+      }
+  ) {
+    return new Promise((resolve, reject) => {
+      let checkCounter = 0;
+      if (condition()) {
         resolve(method());
         return;
       }
-     const checker= setInterval(()=>{
-        if(checkCounter>=this.MAX_CONTAINER_CHECK_COUNT)
-        {
+      const checker = setInterval(() => {
+        if (checkCounter >= this.MAX_CONTAINER_CHECK_COUNT) {
           console.error(`Activepieces: ${errorMessage}`);
           reject(`Activepieces: ${errorMessage}`);
           return;
         }
         checkCounter++;
-        if(condition())
-        {
+        if (condition()) {
           console
           clearInterval(checker);
           resolve(method());
         }
       }, this.HUNDRED_MILLISECONDS);
     },);
-   
+
   }
 
 }

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

@@ -7,6 +7,7 @@ export type EmbeddingState = {
   hideLogoInBuilder: boolean;
   disableNavigationInBuilder: boolean;
   hideFolders: boolean;
+  hideFlowActionsInBuilder: boolean;
 };
 @Injectable({
   providedIn: 'root',
@@ -21,6 +22,7 @@ export class EmbeddingService {
       prefix: '',
       disableNavigationInBuilder: false,
       hideFolders: false,
+      hideFlowActionsInBuilder: false,
     });
   }
   getState() {
@@ -43,6 +45,10 @@ export class EmbeddingService {
     return this.getState$().pipe(map((res) => res.hideLogoInBuilder));
   }
 
+  getHideFLowActionsInBuilder$() {
+    return this.getState$().pipe(map((res) => res.hideFlowActionsInBuilder));
+  }
+
   getHideFolders$() {
     return this.getState$().pipe(map((res) => res.hideFolders));
   }

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

@@ -32,11 +32,13 @@
           " [allowClick]="true" [cssClasses]="'ap-typography-body-1 !ap-font-semibold'"
           class="ap-text-title"></ap-editable-text>
       </div>
+      @if ((hideFlowActions$ | async) === false) {
       <div *ngIf="(isInReadOnlyMode$ | async) === false" class="ap-p-1 ap-cursor-pointer" [matMenuTriggerFor]="menu"
         xPosition="after">
         <svg-icon [svgStyle]="{ width: '18px', height: '18px' }" src="assets/img/custom/chevron.svg">
         </svg-icon>
       </div>
+      }
       <mat-menu #menu="matMenu">
         <button mat-menu-item (click)="editingFlowName = true">
           <div class="ap-flex ap-gap-3 ap-items-center">

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

@@ -60,6 +60,7 @@ export class FlowBuilderHeaderComponent implements OnInit {
   showNavigation$: Observable<boolean>;
   goToFolder = $localize`Go to folder`;
   hideLogo$ = this.embeddingService.getHideLogoInBuilder$();
+  hideFlowActions$ = this.embeddingService.getHideFLowActionsInBuilder$();
   hideFolders$ = this.embeddingService.getHideFolders$();
   constructor(
     public matDialog: MatDialog,