Incremental work on workflow instance viewer

src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx

@@ -111,12 +111,12 @@ export class VariablesEditor {
  const newVariableName = this.generateNewVariableName();
  const variable = {name: newVariableName, type: 'Object', value: null};
 
- this.modalDialogInstance = this.modalDialogService.show(() => <elsa-variable-editor-dialog-content variable={variable} />, [this.saveAction])
+ this.modalDialogInstance = this.modalDialogService.show(() => <elsa-variable-editor-dialog-content variable={variable}/>, {actions: [this.saveAction]})
  };
 
  private onEditClick = async (e: Event, variable: Variable) => {
  e.preventDefault();
- this.modalDialogInstance = this.modalDialogService.show(() => <elsa-variable-editor-dialog-content variable={variable} />, [this.saveAction]);
+ this.modalDialogInstance = this.modalDialogService.show(() => <elsa-variable-editor-dialog-content variable={variable}/>, {actions: [this.saveAction]});
  };
 
  private onDeleteClick = (e: Event, variable: Variable) => {
@@ -125,12 +125,7 @@ export class VariablesEditor {
  this.updateVariablesState(variables);
  };
 
- private onSaveClick = () => {
-
- }
-
  private onVariableChanged = async (a: ModalActionClickArgs) => {
- debugger;
  const updatedVariable = await (a.instance.modalDialogContentRef as HTMLElsaVariableEditorDialogContentElement).getVariable();
  let variables = this.variables;
  const variableExists = !!variables.find(x => x == updatedVariable);

src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/modal-dialog-container.tsx

@@ -1,6 +1,7 @@
-import {Component, Host, h} from '@stencil/core';
+import {Component, h, Host} from '@stencil/core';
 import state from './state';
 import {ModalDialogInstance} from "./models";
+import {ModalType} from "./modal-type";
 
 @Component({
  tag: 'elsa-modal-dialog-container',
@@ -20,10 +21,15 @@ export class ModalDialogContainer {
  return (
  <Host>
  {instances.map(instance => {
- const actions = instance.actions ?? [];
+ const options = instance.options;
+ const actions = options?.actions ?? [];
+ const modalType = options?.modalType ?? ModalType.Default;
+ const size = options?.size ?? 'sm:max-w-6xl';
+
  return (<elsa-modal-dialog
  ref={el => instance.modalDialogRef = el}
- type={instance.modalType}
+ type={modalType}
+ size={size}
  modalDialogInstance={instance}
  content={instance.content}
  actions={actions}

src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/models.ts

@@ -2,9 +2,7 @@ import {ModalType} from "./modal-type";
 
 export interface ModalDialogInstance {
  content: () => any;
- actions: Array<ModalActionDefinition>;
- modalType: ModalType;
- autoHide: boolean;
+ options?: ShowModalDialogOptions;
  modalDialogRef?: HTMLElement;
  modalDialogContentRef?: HTMLElement;
  actionInvoked?: (args: ModalActionClickArgs) => void;
@@ -32,6 +30,13 @@ export enum ModalActionType {
  Cancel
 }
 
+export interface ShowModalDialogOptions {
+ actions?: Array<ModalActionDefinition>;
+ modalType?: ModalType;
+ autoHide?: boolean;
+ size?: string;
+}
+
 export class DefaultModalActions {
 
  public static Cancel = (handler?: (args: ModalActionClickArgs) => void): ModalActionDefinition => ({

src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/services.ts

@@ -1,18 +1,16 @@
 import 'reflect-metadata';
 import {Service} from "typedi";
 import state from "./state";
-import {ModalActionDefinition, ModalDialogInstance} from "./models";
+import {ModalActionDefinition, ModalDialogInstance, ShowModalDialogOptions} from "./models";
 import {ModalType} from "../../../components/shared/modal-dialog";
 
 @Service()
 export class ModalDialogService {
 
- show(content: () => any, actions?: Array<ModalActionDefinition>, modalType?: ModalType, autoHide?: boolean): ModalDialogInstance {
+ show(content: () => any, options?: ShowModalDialogOptions): ModalDialogInstance {
  const newInstance: ModalDialogInstance = {
  content: content,
- actions: actions ?? [],
- modalType: modalType ?? ModalType.Default,
- autoHide: autoHide ?? true
+ options: options
  };
 
  let instances: Array<ModalDialogInstance> = state.instances;

src/designer/elsa-workflows-designer/src/modules/activity-definitions/components/browser.tsx

@@ -61,45 +61,49 @@ export class ActivityDefinitionBrowser {
  private async onDeleteClick(e: MouseEvent, ActivityDefinition: ActivityDefinitionSummary) {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to delete this activity definition?"),
- [DefaultModalActions.Delete(async () =>
- {
+ {
+ actions: [DefaultModalActions.Delete(async () => {
  await this.activityDefinitionsApi.delete(ActivityDefinition);
  await this.loadActivityDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  }
 
  private onDeleteManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to delete selected activity definitions?"),
- [DefaultModalActions.Delete(async () =>
- {
+ {
+ actions: [DefaultModalActions.Delete(async () => {
  await this.activityDefinitionsApi.deleteMany({definitionIds: this.selectedActivityDefinitionIds});
  await this.loadActivityDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onPublishManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to publish selected activity definitions?"),
- [DefaultModalActions.Publish(async () =>
- {
+ {
+ actions: [DefaultModalActions.Publish(async () => {
  await this.activityDefinitionsApi.publishMany({definitionIds: this.selectedActivityDefinitionIds});
  await this.loadActivityDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onUnpublishManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to unpublish selected activity definitions?"),
- [DefaultModalActions.Unpublish(async () =>
- {
+ {
+ actions: [DefaultModalActions.Unpublish(async () => {
  await this.activityDefinitionsApi.unpublishMany({definitionIds: this.selectedActivityDefinitionIds});
  await this.loadActivityDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onActivityDefinitionClick = async (e: MouseEvent, ActivityDefinition: ActivityDefinitionSummary) => {

src/designer/elsa-workflows-designer/src/modules/activity-definitions/plugin.tsx

@@ -119,8 +119,8 @@ export class ActivityDefinitionsPlugin implements Plugin {
  const actions = [closeAction, newAction];
 
  this.activityDefinitionBrowserInstance = this.modalDialogService.show(() =>
- <elsa-activity-definition-browser onActivityDefinitionSelected={this.onActivityDefinitionSelected} onNewActivityDefinitionSelected={this.onNewActivityDefinitionClick}/>,
- actions)
+  <elsa-activity-definition-browser onActivityDefinitionSelected={this.onActivityDefinitionSelected} onNewActivityDefinitionSelected={this.onNewActivityDefinitionClick}/>,
+ {actions})
  }
 
  private onActivityDefinitionSelected = async (e: CustomEvent<ActivityDefinitionSummary>) => {

src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx

@@ -60,41 +60,47 @@ export class WorkflowDefinitionBrowser {
  private async onDeleteClick(e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to delete this workflow definition?"),
- [DefaultModalActions.Delete(()=>{}), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ {
+ actions: [DefaultModalActions.Delete(() => {
+ }), DefaultModalActions.Cancel()],
+ modalType: ModalType.Confirmation
+ });
  }
 
  private onDeleteManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to delete selected workflow definitions?"),
- [DefaultModalActions.Delete(async () =>
- {
+ {
+ actions: [DefaultModalActions.Delete(async () => {
  await this.api.deleteMany({definitionIds: this.selectedWorkflowDefinitionIds});
  await this.loadWorkflowDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onPublishManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to publish selected workflow definitions?"),
- [DefaultModalActions.Publish(async () =>
- {
+ {
+ actions: [DefaultModalActions.Publish(async () => {
  await this.api.publishMany({definitionIds: this.selectedWorkflowDefinitionIds});
  await this.loadWorkflowDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onUnpublishManyClick = async () => {
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to unpublish selected workflow definitions?"),
- [DefaultModalActions.Unpublish(async () =>
- {
+ {
+ actions: [DefaultModalActions.Unpublish(async () => {
  await this.api.unpublishMany({definitionIds: this.selectedWorkflowDefinitionIds});
  await this.loadWorkflowDefinitions();
  }), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ modalType: ModalType.Confirmation
+ });
  };
 
  private onWorkflowDefinitionClick = async (e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) => {
@@ -103,8 +109,6 @@ export class WorkflowDefinitionBrowser {
  };
 
  private async loadWorkflowDefinitions() {
- const latestVersionOptions: VersionOptions = {isLatest: true};
- const publishedVersionOptions: VersionOptions = {isPublished: true};
 
  // TODO: Load only json-based workflow definitions for now.
  // Later, also allow CLR-based workflows to be "edited" (publish / unpublish / position activities / set variables, etc.)
@@ -123,7 +127,7 @@ export class WorkflowDefinitionBrowser {
  this.publishedWorkflowDefinitions = await this.api.list({
  materializerName,
  definitionIds: unpublishedWorkflowDefinitionIds,
- versionOptions: publishedVersionOptions,
+ versionOptions: {isPublished: true},
  });
 
  this.workflowDefinitions = latestWorkflowDefinitions;

src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx

@@ -2,7 +2,7 @@ import {Component, Event, EventEmitter, h, Prop, Watch} from '@stencil/core';
 import {Container} from "typedi";
 import {EventBus} from "../../../services";
 import {WorkflowDefinition} from "../models/entities";
-import {WorkflowDefinitionsApi} from "../../workflow-definitions/services/api";
+import {WorkflowDefinitionsApi} from "../services/api";
 import {DeleteIcon, RevertIcon, PublishedIcon} from "../../../components/icons/tooling";
 import moment from "moment";
 import {ModalDialogService, DefaultModalActions, DefaultContents, ModalType} from "../../../components/shared/modal-dialog";
@@ -37,8 +37,10 @@ export class WorkflowDefinitionVersionHistory {
  e.preventDefault();
  this.modalDialogService.show(
  () => DefaultContents.Warning("Are you sure you want to delete this version?"),
- [DefaultModalActions.Delete(() => this.deleteVersionClicked.emit(version)), DefaultModalActions.Cancel()],
- ModalType.Confirmation);
+ {
+ modalType: ModalType.Confirmation,
+ actions: [DefaultModalActions.Delete(() => this.deleteVersionClicked.emit(version)), DefaultModalActions.Cancel()]
+ });
  };
 
  onRevertVersionClick = (e: Event, version: WorkflowDefinition) => {
@@ -51,20 +53,20 @@ export class WorkflowDefinitionVersionHistory {
  <div>
  <table>
  <thead>
-  <tr>
-  <th/>
-  <th>Version</th>
-  <th>Created</th>
-  <th/>
-  <th/>
-  </tr>
+ <tr>
+ <th/>
+ <th>Version</th>
+ <th>Created</th>
+ <th/>
+ <th/>
+ </tr>
  </thead>
  <tbody>
  {this.workflowVersions.map(v => {
  let menuItems = [];
  menuItems.push({text: 'Delete', clickHandler: e => this.onDeleteVersionClick(e, v), icon: <DeleteIcon/>});
 
- if(!v.isLatest)
+ if (!v.isLatest)
  menuItems.push({text: 'Revert', clickHandler: e => this.onRevertVersionClick(e, v), icon: <RevertIcon/>});
 
  return (

src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx

@@ -136,7 +136,7 @@ export class WorkflowDefinitionsPlugin implements Plugin {
 
  this.workflowDefinitionBrowserInstance = this.modalDialogService.show(() =>
  <elsa-workflow-definition-browser onWorkflowDefinitionSelected={this.onWorkflowDefinitionSelected} onNewWorkflowDefinitionSelected={this.onNewWorkflowDefinitionClick}/>,
- actions)
+ {actions})
  }
 
  private onWorkflowDefinitionSelected = async (e: CustomEvent<WorkflowDefinitionSummary>) => {

src/designer/elsa-workflows-designer/src/modules/workflow-instances/components/browser.tsx

@@ -49,16 +49,14 @@ export class WorkflowInstanceBrowser {
  @State() private orderBy?: OrderBy;
 
  async componentWillLoad() {
- await this.loadWorkflows();
+ await this.loadWorkflowDefinitions();
  await this.loadWorkflowInstances();
  }
 
  public render() {
  const publishedOrLatestWorkflows = this.publishedOrLatestWorkflows;
  const workflowInstances = this.workflowInstances;
  const totalCount = workflowInstances.totalCount
- const closeAction = DefaultModalActions.Close();
- const actions = [closeAction];
 
  const filterProps: FilterProps = {
  pageSizeFilter: {
@@ -184,9 +182,10 @@ export class WorkflowInstanceBrowser {
  };
 
  this.workflowInstances = await this.workflowInstancesApi.list(request);
+ debugger;
  }
 
- private loadWorkflows = async () => {
+ private loadWorkflowDefinitions = async () => {
  const versionOptions: VersionOptions = {allVersions: true};
  const workflows = await this.workflowDefinitionsApi.list({versionOptions});
  this.publishedOrLatestWorkflows = this.selectLatestWorkflows(workflows.items);