From 765e572d06ae5a81bda4a58bb53baa2807b79322 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Thu, 21 Jul 2022 17:28:58 +0200
Subject: [PATCH] Add New buttons to browser modals

---
 .../elsa-workflows-designer/src/components.d.ts |  1 +
 .../src/modules/activity-definitions/plugin.tsx |  2 +-
 .../workflow-definitions/components/browser.tsx | 17 ++++++++++++-----
 .../src/modules/workflow-definitions/plugin.tsx |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index 3b195b81c..dd6f06981 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -906,6 +906,7 @@ declare namespace LocalJSX {
         "variables"?: Array<Variable>;
     }
     interface ElsaWorkflowDefinitionBrowser {
+        "onNewWorkflowDefinitionSelected"?: (event: CustomEvent<any>) => void;
         "onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
     }
     interface ElsaWorkflowDefinitionEditor {
diff --git a/src/designer/elsa-workflows-designer/src/modules/activity-definitions/plugin.tsx b/src/designer/elsa-workflows-designer/src/modules/activity-definitions/plugin.tsx
index 441cd8472..7f605a209 100644
--- a/src/designer/elsa-workflows-designer/src/modules/activity-definitions/plugin.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/activity-definitions/plugin.tsx
@@ -53,7 +53,7 @@ export class ActivityDefinitionsPlugin implements Plugin {
 
     studioComponentStore.modalComponents = [
       ...studioComponentStore.modalComponents,
-      () => <elsa-activity-definition-browser ref={el => this.activityDefinitionBrowserElement = el} onActivityDefinitionSelected={this.onActivityDefinitionSelected}/>];
+      () => <elsa-activity-definition-browser ref={el => this.activityDefinitionBrowserElement = el} onActivityDefinitionSelected={this.onActivityDefinitionSelected} onNewActivityDefinitionSelected={this.onNewActivityDefinitionClick}/>];
   }
 
   async initialize(): Promise<void> {
diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx
index 672f44242..953873ef8 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx
@@ -27,7 +27,8 @@ export class WorkflowDefinitionBrowser {
     this.api = Container.get(WorkflowDefinitionsApi);
   }
 
-  @Event() public workflowDefinitionSelected: EventEmitter<WorkflowDefinitionSummary>;
+  @Event() workflowDefinitionSelected: EventEmitter<WorkflowDefinitionSummary>;
+  @Event() public newWorkflowDefinitionSelected: EventEmitter;
   @State() private workflowDefinitions: PagedList<WorkflowDefinitionSummary> = { items: [], totalCount: 0 };
   @State() private publishedWorkflowDefinitions: PagedList<WorkflowDefinitionSummary> = { items: [], totalCount: 0 };
   @State() private selectedWorkflowDefinitionIds: Array<string> = [];
@@ -38,16 +39,21 @@ export class WorkflowDefinitionBrowser {
   @State() private selectAllChecked: boolean;
 
   @Method()
-  public async show() {
+  async show() {
     await this.modalDialog.show();
     await this.loadWorkflowDefinitions();
   }
 
   @Method()
-  public async hide() {
+  async hide() {
     await this.modalDialog.hide();
   }
 
+  private onNewDefinitionClick = async () => {
+    this.newWorkflowDefinitionSelected.emit();
+    await this.hide();
+  };
+
   private async onPublishClick(e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) {
     await this.api.publish(workflowDefinition);
     await this.loadWorkflowDefinitions();
@@ -116,7 +122,7 @@ export class WorkflowDefinitionBrowser {
     this.workflowDefinitions = latestWorkflowDefinitions;
   }
 
-  onPaginated = async (e: CustomEvent<PagerData>) => {
+  private onPaginated = async (e: CustomEvent<PagerData>) => {
     this.currentPage = e.detail.page;
     await this.loadWorkflowDefinitions();
   };
@@ -177,7 +183,8 @@ export class WorkflowDefinitionBrowser {
     const publishedWorkflowDefinitions = this.publishedWorkflowDefinitions.items;
     const totalCount = workflowDefinitions.totalCount;
     const closeAction = DefaultActions.Close();
-    const actions = [closeAction];
+    const newAction = DefaultActions.New(this.onNewDefinitionClick);
+    const actions = [closeAction, newAction];
 
     const filterProps: FilterProps = {
       pageSizeFilter: {
diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
index 95ee85d3a..b8e6e3e29 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
@@ -50,7 +50,7 @@ export class WorkflowDefinitionsPlugin implements Plugin {
 
     studioComponentStore.modalComponents = [
       ...studioComponentStore.modalComponents,
-      () => <elsa-workflow-definition-browser ref={el => this.workflowDefinitionBrowserElement = el} onWorkflowDefinitionSelected={this.onWorkflowDefinitionSelected}/>];
+      () => <elsa-workflow-definition-browser ref={el => this.workflowDefinitionBrowserElement = el} onWorkflowDefinitionSelected={this.onWorkflowDefinitionSelected} onNewWorkflowDefinitionSelected={this.onNewWorkflowDefinitionClick}/>];
   }
 
   async initialize(): Promise<void> {