From aff6446a280de50a497cfc6f5a2eb792791b4208 Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 27 Jun 2022 15:12:37 +0200 Subject: [PATCH] Move activity properties to bottom panel --- .../src/components.d.ts | 1 - .../designer/form-panel/form-panel.tsx | 51 ++++++------ .../input-control-switch.tsx | 2 +- .../slide-over-panel/slide-over-panel.tsx | 16 +--- .../activity-properties-editor.tsx | 2 +- .../workflow-definition-editor.tsx | 78 +++++++++---------- .../shared/monaco-editor/monaco-editor.scss | 2 +- .../shared/monaco-editor/monaco-editor.tsx | 2 +- 8 files changed, 68 insertions(+), 86 deletions(-) diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts index 114937dd7..f91d61451 100644 --- a/src/designer/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/elsa-workflows-designer/src/components.d.ts @@ -788,7 +788,6 @@ declare namespace LocalJSX { "expand"?: boolean; "headerText"?: string; "onCollapsed"?: (event: CustomEvent) => void; - "onSubmitted"?: (event: CustomEvent) => void; "selectedTab"?: TabDefinition; "tabs"?: Array; } diff --git a/src/designer/elsa-workflows-designer/src/components/designer/form-panel/form-panel.tsx b/src/designer/elsa-workflows-designer/src/components/designer/form-panel/form-panel.tsx index 570fb5576..05539cd92 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/form-panel/form-panel.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/form-panel/form-panel.tsx @@ -55,13 +55,13 @@ export class FormPanel { -
-
-
-
- {actions.map(action => { + {actions.length > 0 ? ( +
+
+ {actions.map(action => { - if (action.display) - return action.display(action); + if (action.display) + return action.display(action); - const cssClass = action.isPrimary - ? 'text-white bg-blue-600 hover:bg-blue-700 border-transparent focus:ring-blue-500' - : action.isDangerous ? 'text-white bg-red-600 hover:bg-red-700 border-transparent focus:ring-red-500' - : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500'; + const cssClass = action.isPrimary + ? 'text-white bg-blue-600 hover:bg-blue-700 border-transparent focus:ring-blue-500' + : action.isDangerous ? 'text-white bg-red-600 hover:bg-red-700 border-transparent focus:ring-red-500' + : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500'; - const buttonType = action.type == ActionType.Submit ? 'submit' : 'button'; + const buttonType = action.type == ActionType.Submit ? 'submit' : 'button'; - const cancelHandler = () => { - }; + const cancelHandler = () => { + }; - const defaultHandler = (e: any, action: ActionDefinition) => this.actionInvoked.emit({action: action}); - const clickHandler = !!action.onClick ? action.onClick : action.type == ActionType.Cancel ? cancelHandler : defaultHandler; + const defaultHandler = (e: any, action: ActionDefinition) => this.actionInvoked.emit({action: action}); + const clickHandler = !!action.onClick ? action.onClick : action.type == ActionType.Cancel ? cancelHandler : defaultHandler; - return - })} -
-
+ return + })} +
+
) : undefined} ); diff --git a/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx b/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx index 1c91e151f..227c25104 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/input-control-switch/input-control-switch.tsx @@ -35,7 +35,7 @@ export class InputControlSwitch { @Prop() defaultSyntax: string = SyntaxNames.Literal; @Prop() supportedSyntaxes: Array = ['JavaScript', 'Liquid']; // TODO: Get available syntaxes from some more centralized settings. @Prop() isReadOnly?: boolean; - @Prop() codeEditorHeight: string = '10em'; + @Prop() codeEditorHeight: string = '16em'; @Prop() codeEditorSingleLineMode: boolean = false; @Prop() context?: IntellisenseContext; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/slide-over-panel/slide-over-panel.tsx b/src/designer/elsa-workflows-designer/src/components/designer/slide-over-panel/slide-over-panel.tsx index a05e8b8c5..b65ff4485 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/slide-over-panel/slide-over-panel.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/slide-over-panel/slide-over-panel.tsx @@ -13,10 +13,7 @@ export class SlideOverPanel { @Prop({mutable: true}) public selectedTab?: TabDefinition; @Prop() public actions: Array = []; @Prop() public expand: boolean; - @Event() public collapsed: EventEmitter; - @Event() public submitted: EventEmitter; - @Method() public async show(): Promise { @@ -58,11 +55,6 @@ export class SlideOverPanel { // Hide panel. await this.hide(); - - // Raise Form Submitted event to apply changes. - const formData = new FormData(this.formElement); - - this.submitted.emit(formData); }; private onTransitionEnd = (e: TransitionEvent) => { @@ -78,12 +70,6 @@ export class SlideOverPanel { this.selectedTab = tab; } - private onSubmit(e: Event) { - e.preventDefault(); - const formData = new FormData(e.target as HTMLFormElement); - this.submitted.emit(formData); - } - private renderPanel() { const isVisible = this.isVisible; const isHiding = this.isHiding; @@ -108,7 +94,7 @@ export class SlideOverPanel {
-
this.onSubmit(e)} + this.formElement = el} method="post">
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx index 5d64becce..436b86241 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx @@ -130,7 +130,7 @@ export class ActivityPropertiesEditor { if (selectedTabIndex < 0) selectedTabIndex = 0; - const actions = [DefaultActions.Delete(this.onDeleteActivity)]; + const actions = []; // [DefaultActions.Delete(this.onDeleteActivity)]; const mainTitle = activity.id; const subTitle = activityDescriptor.displayName; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx index 376251c54..134686bd4 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx @@ -1,22 +1,10 @@ -import {Component, h, Listen, Prop, State, Event, EventEmitter, Method, Watch, Element} from '@stencil/core'; -import {debounce, camelCase} from 'lodash'; +import {Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch} from '@stencil/core'; +import {camelCase, debounce} from 'lodash'; import {Container} from "typedi"; import {PanelPosition, PanelStateChangedArgs} from '../panel/models'; -import { - Activity, - ActivityDescriptor, - ActivitySelectedArgs, ChildActivitySelectedArgs, - ContainerSelectedArgs, - EditChildActivityArgs, - GraphUpdatedArgs, - WorkflowDefinition -} from '../../../models'; -import { - ActivityIdUpdatedArgs, - ActivityUpdatedArgs, - DeleteActivityRequestedArgs -} from './activity-properties-editor'; -import {PluginRegistry, ActivityNameFormatter, ActivityDriverRegistry, EventBus, findActivity, walkActivities, flattenList, flatten, ActivityNode, createActivityMap} from '../../../services'; +import {Activity, ActivityDescriptor, ActivitySelectedArgs, ChildActivitySelectedArgs, ContainerSelectedArgs, EditChildActivityArgs, GraphUpdatedArgs, WorkflowDefinition} from '../../../models'; +import {ActivityIdUpdatedArgs, ActivityUpdatedArgs, DeleteActivityRequestedArgs} from './activity-properties-editor'; +import {ActivityDriverRegistry, ActivityNameFormatter, createActivityMap, EventBus, flatten, flattenList, PluginRegistry, walkActivities} from '../../../services'; import {MonacoEditorSettings} from "../../../services/monaco-editor-settings"; import {Flowchart} from "../../activities/flowchart/models"; import {ActivityPropertyChangedEventArgs, WorkflowDefinitionPropsUpdatedArgs, WorkflowDefinitionUpdatedArgs, WorkflowEditorEventTypes} from "./models"; @@ -76,13 +64,13 @@ export class WorkflowDefinitionEditor { } @Listen('collapsed') - private async handlePanelCollapsed() { - this.selectedActivity = null; + private async handlePanelCollapsed(e: CustomEvent) { + //this.selectedActivity = null; } @Listen('containerSelected') private async handleContainerSelected(e: CustomEvent) { - this.selectedActivity = null; + this.selectedActivity = this.getCurrentContainer(); } @Listen('activitySelected') @@ -134,7 +122,7 @@ export class WorkflowDefinitionEditor { await this.canvas.importGraph(childActivity); } - this.selectedActivity = null; + this.selectedActivity = this.getCurrentContainer(); } @Method() @@ -166,8 +154,10 @@ export class WorkflowDefinitionEditor { this.workflowDefinitionState = workflowDefinition; this.nodeMap = createActivityMap(flatten(walkActivities(workflowDefinition.root))); - if (this.currentWorkflowPath.length == 0) + if (this.currentWorkflowPath.length == 0) { this.currentWorkflowPath = [{activityId: workflowDefinition.root.id, portName: null}]; + this.selectedActivity = this.getCurrentContainer(); + } } @Method() @@ -242,18 +232,22 @@ export class WorkflowDefinitionEditor { this.onActivityEditorPanelStateChanged(e.detail)}> + onExpandedStateChanged={e => this.onWorkflowEditorPanelStateChanged(e.detail)}>
- {this.renderSelectedObject()} + this.onWorkflowPropsUpdated(e)} + />
this.onActivityEditorPanelStateChanged(e.detail)}> -
-
- + class="elsa-activity-editor-container" + position={PanelPosition.Bottom} + onExpandedStateChanged={e => this.onActivityEditorPanelStateChanged(e.detail)}> +
+ {this.renderSelectedObject()} +
+
); @@ -266,12 +260,7 @@ export class WorkflowDefinitionEditor { variables={this.workflowDefinitionState.variables} onActivityUpdated={e => this.onActivityUpdated(e)} onActivityIdUpdated={e => this.onActivityIdUpdated(e)} - onDeleteActivityRequested={e => this.onDeleteActivityRequested(e)}/> - - return this.onWorkflowPropsUpdated(e)} - />; + onDeleteActivityRequested={e => this.onDeleteActivityRequested(e)}/>; } private getWorkflowDefinitionInternal = async (): Promise => { @@ -338,6 +327,15 @@ export class WorkflowDefinitionEditor { return newName; }; + private getCurrentContainer = (): Activity => { + const currentItem = this.currentWorkflowPath.length > 0 ? this.currentWorkflowPath[this.currentWorkflowPath.length - 1] : null; + + if (!currentItem) + return this.workflowDefinitionState.root; + + return this.nodeMap[currentItem.activityId]; + }; + private onActivityPickerPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('activity-picker-closed', e.expanded) private onWorkflowEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('object-editor-closed', e.expanded) private onActivityEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('activity-editor-closed', e.expanded) @@ -351,15 +349,14 @@ export class WorkflowDefinitionEditor { const activityDescriptor: ActivityDescriptor = JSON.parse(json); const newName = await this.generateUniqueActivityName(activityDescriptor); - const newActivity: Activity = { + // Make sure the node hash is up to date so that it can be found by the activity template. + this.nodeMap[newName] = { id: newName, typeName: activityDescriptor.activityType, metadata: {}, applicationProperties: {} }; - this.nodeMap[newName] = newActivity; - await this.canvas.addActivity({ descriptor: activityDescriptor, id: newName, @@ -391,12 +388,11 @@ export class WorkflowDefinitionEditor { this.currentWorkflowPath = [...workflowPath]; } - private onWorkflowPropsUpdated = (e: CustomEvent) => this.saveChangesDebounced() private onDeleteActivityRequested = (e: CustomEvent) => { this.deleteActivity(e.detail.activity); - this.selectedActivity = null; + this.selectedActivity = this.getCurrentContainer(); }; private onNavigateHierarchy = async (e: CustomEvent) => { diff --git a/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.scss b/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.scss index 813562323..16c349dd9 100644 --- a/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.scss +++ b/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.scss @@ -1,7 +1,7 @@ .monaco-editor-host { display: block; position: relative; - min-height: 6em; + min-height: 12em; } .monaco-editor-container { diff --git a/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx b/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx index 82464f34a..a2e9867d6 100644 --- a/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/shared/monaco-editor/monaco-editor.tsx @@ -23,7 +23,7 @@ export class MonacoEditor { private editor: any; @Prop() public monacoLibPath?: string; - @Prop() public editorHeight: string = '5em'; + @Prop() public editorHeight: string = '10em'; @Prop() public value: string; @Prop() public language: string; @Prop() public singleLineMode: boolean = false;