From 46d96a70808a51af99dea48649502e93ffc1aee4 Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Tue, 27 Jul 2021 17:27:59 +0200 Subject: [PATCH] Fix tab display and interaction --- .../elsa-activity-editor-modal.tsx | 72 ++++++++++--------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx index 42d765673..51c4d8e39 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx @@ -30,12 +30,11 @@ export class ElsaActivityEditorModal { @State() workflowStorageDescriptors: Array = []; @State() activityModel: ActivityModel; @State() activityDescriptor: ActivityDescriptor; - @State() selectedTabName: string = 'Properties'; + @State() renderProps: ActivityEditorRenderProps = {}; i18next: i18n; dialog: HTMLElsaModalDialogElement; form: HTMLFormElement; formContext: FormContext; - renderProps: ActivityEditorRenderProps = {}; // Force a new key every time we show the editor to make sure Stencil creates new components. // This prevents the issue where the designer has e.g. one activity where the user edits the properties, cancels out, then opens the editor again, seeing the entered value still there. @@ -98,22 +97,25 @@ export class ElsaActivityEditorModal { renderContent: () => this.renderStorageTab(activityModel, activityDescriptor) }); - let selectedTabName = this.selectedTabName; - - if (tabs.findIndex(x => x.tabName === selectedTabName) < 0) { - this.selectedTabName = selectedTabName = tabs[0].tabName; - } - this.renderProps = { activityDescriptor, activityModel, propertyCategories, defaultProperties, tabs, - selectedTabName, + selectedTabName: this.renderProps.selectedTabName }; eventBus.emit(EventTypes.ActivityEditorDisplaying, this, this.renderProps); + + let selectedTabName = this.renderProps.selectedTabName + tabs = this.renderProps.tabs; + + if (!selectedTabName) + this.renderProps.selectedTabName = tabs[0].tabName; + + if (tabs.findIndex(x => x.tabName === selectedTabName) < 0) + this.renderProps.selectedTabName = selectedTabName = tabs[0].tabName; } async onCancelClick() { @@ -131,7 +133,7 @@ export class ElsaActivityEditorModal { onTabClick = (e: Event, tab: TabModel) => { e.preventDefault(); - this.selectedTabName = tab.tabName; + this.renderProps = {...this.renderProps, selectedTabName: tab.tabName}; }; onShowActivityEditor = async (activity: ActivityModel, animate: boolean) => { @@ -140,8 +142,8 @@ export class ElsaActivityEditorModal { this.activityDescriptor = state.activityDescriptors.find(x => x.type == activity.type); this.workflowStorageDescriptors = state.workflowStorageDescriptors; this.formContext = new FormContext(this.activityModel, newValue => this.activityModel = newValue); - this.selectedTabName = t('Properties'); this.timestamp = new Date(); + this.renderProps = {}; await this.dialog.show(animate); }; @@ -211,7 +213,12 @@ export class ElsaActivityEditorModal { } renderTabs(tabs: Array) { - return tabs.map(x => ); + return tabs.map(x => + ( +
+ +
+ )); } renderStorageTab(activityModel: ActivityModel, activityDescriptor: ActivityDescriptor) { @@ -230,24 +237,21 @@ export class ElsaActivityEditorModal { } return ( -
-
+
+ {section('Workflow Context')} + {checkBox(formContext, 'loadWorkflowContext', 'Load Workflow Context', activityModel.loadWorkflowContext, 'When enabled, this will load the workflow context into memory before executing this activity.', 'loadWorkflowContext')} + {checkBox(formContext, 'saveWorkflowContext', 'Save Workflow Context', activityModel.saveWorkflowContext, 'When enabled, this will save the workflow context back into storage after executing this activity.', 'saveWorkflowContext')} - {section('Workflow Context')} - {checkBox(formContext, 'loadWorkflowContext', 'Load Workflow Context', activityModel.loadWorkflowContext, 'When enabled, this will load the workflow context into memory before executing this activity.', 'loadWorkflowContext')} - {checkBox(formContext, 'saveWorkflowContext', 'Save Workflow Context', activityModel.saveWorkflowContext, 'When enabled, this will save the workflow context back into storage after executing this activity.', 'saveWorkflowContext')} + {section('Workflow Instance')} + {checkBox(formContext, 'persistWorkflow', 'Save Workflow Instance', activityModel.persistWorkflow, 'When enabled, this will save the workflow instance back into storage right after executing this activity.', 'persistWorkflow')} - {section('Workflow Instance')} - {checkBox(formContext, 'persistWorkflow', 'Save Workflow Instance', activityModel.persistWorkflow, 'When enabled, this will save the workflow instance back into storage right after executing this activity.', 'persistWorkflow')} + {Object.keys(outputProperties).length > 0 ? ( + [section('Activity Output', 'Configure the desired storage for each output property of this activity.'), outputProperties.map(renderPropertyStorageSelectField)] + ) : undefined} - {Object.keys(outputProperties).length > 0 ? ( - [section('Activity Output', 'Configure the desired storage for each output property of this activity.'), outputProperties.map(renderPropertyStorageSelectField)] - ) : undefined} - - {Object.keys(inputProperties).length > 0 ? ( - [section('Activity Input', 'Configure the desired storage for each input property of this activity.'), inputProperties.map(renderPropertyStorageSelectField)] - ) : undefined} -
+ {Object.keys(inputProperties).length > 0 ? ( + [section('Activity Input', 'Configure the desired storage for each input property of this activity.'), inputProperties.map(renderPropertyStorageSelectField)] + ) : undefined}
); } @@ -257,12 +261,10 @@ export class ElsaActivityEditorModal { const t = this.t; return ( -
-
- {textInput(formContext, 'name', t('Tabs.Common.Fields.Name.Label'), activityModel.name, t('Tabs.Common.Fields.Name.Hint'), 'activityName')} - {textInput(formContext, 'displayName', t('Tabs.Common.Fields.DisplayName.Label'), activityModel.displayName, t('Tabs.Common.Fields.DisplayName.Hint'), 'activityDisplayName')} - {textArea(formContext, 'description', t('Tabs.Common.Fields.Description.Label'), activityModel.description, t('Tabs.Common.Fields.Description.Hint'), 'activityDescription')} -
+
+ {textInput(formContext, 'name', t('Tabs.Common.Fields.Name.Label'), activityModel.name, t('Tabs.Common.Fields.Name.Hint'), 'activityName')} + {textInput(formContext, 'displayName', t('Tabs.Common.Fields.DisplayName.Label'), activityModel.displayName, t('Tabs.Common.Fields.DisplayName.Hint'), 'activityDisplayName')} + {textArea(formContext, 'description', t('Tabs.Common.Fields.Description.Label'), activityModel.description, t('Tabs.Common.Fields.Description.Hint'), 'activityDescription')}
); } @@ -277,7 +279,7 @@ export class ElsaActivityEditorModal { const t = this.t; return ( -
+
{propertyDescriptors.map(property => this.renderPropertyEditor(activityModel, property))}
); @@ -288,7 +290,7 @@ export class ElsaActivityEditorModal { const descriptors = propertyDescriptors.filter(x => x.category == category); const key = `activity-settings:${activityModel.activityId}:${category}`; - return
+ return
{descriptors.map(property => this.renderPropertyEditor(activityModel, property))}
; }