Fix to Test Panel

This commit is contained in:
axeleron007 2021-09-16 18:25:44 +03:00
parent cb73a5295c
commit 00dfe2603e
6 changed files with 84 additions and 67 deletions

View file

@ -309,7 +309,6 @@ export namespace Components {
interface ElsaWorkflowPropertiesPanel {
"culture": string;
"expandButtonPosition": number;
"selectTestActivity": (activityId?: string) => Promise<void>;
"serverUrl": string;
"workflowDefinition": WorkflowDefinition;
}
@ -328,6 +327,12 @@ export namespace Components {
"serverUrl": string;
"workflowDefinition": WorkflowDefinition;
}
interface ElsaWorkflowTestPanel {
"culture": string;
"selectTestActivity": (activityId?: string) => Promise<void>;
"serverUrl": string;
"workflowDefinition": WorkflowDefinition;
}
}
declare global {
interface HTMLElsaActivityEditorModalElement extends Components.ElsaActivityEditorModal, HTMLStencilElement {
@ -666,6 +671,12 @@ declare global {
prototype: HTMLElsaWorkflowSettingsModalElement;
new (): HTMLElsaWorkflowSettingsModalElement;
};
interface HTMLElsaWorkflowTestPanelElement extends Components.ElsaWorkflowTestPanel, HTMLStencilElement {
}
var HTMLElsaWorkflowTestPanelElement: {
prototype: HTMLElsaWorkflowTestPanelElement;
new (): HTMLElsaWorkflowTestPanelElement;
};
interface HTMLElementTagNameMap {
"elsa-activity-editor-modal": HTMLElsaActivityEditorModalElement;
"elsa-activity-picker-modal": HTMLElsaActivityPickerModalElement;
@ -723,6 +734,7 @@ declare global {
"elsa-workflow-publish-button": HTMLElsaWorkflowPublishButtonElement;
"elsa-workflow-registry-list-screen": HTMLElsaWorkflowRegistryListScreenElement;
"elsa-workflow-settings-modal": HTMLElsaWorkflowSettingsModalElement;
"elsa-workflow-test-panel": HTMLElsaWorkflowTestPanelElement;
}
}
declare namespace LocalJSX {
@ -1032,6 +1044,11 @@ declare namespace LocalJSX {
"serverUrl"?: string;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaWorkflowTestPanel {
"culture"?: string;
"serverUrl"?: string;
"workflowDefinition"?: WorkflowDefinition;
}
interface IntrinsicElements {
"elsa-activity-editor-modal": ElsaActivityEditorModal;
"elsa-activity-picker-modal": ElsaActivityPickerModal;
@ -1089,6 +1106,7 @@ declare namespace LocalJSX {
"elsa-workflow-publish-button": ElsaWorkflowPublishButton;
"elsa-workflow-registry-list-screen": ElsaWorkflowRegistryListScreen;
"elsa-workflow-settings-modal": ElsaWorkflowSettingsModal;
"elsa-workflow-test-panel": ElsaWorkflowTestPanel;
}
}
export { LocalJSX as JSX };
@ -1151,6 +1169,7 @@ declare module "@stencil/core" {
"elsa-workflow-publish-button": LocalJSX.ElsaWorkflowPublishButton & JSXBase.HTMLAttributes<HTMLElsaWorkflowPublishButtonElement>;
"elsa-workflow-registry-list-screen": LocalJSX.ElsaWorkflowRegistryListScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowRegistryListScreenElement>;
"elsa-workflow-settings-modal": LocalJSX.ElsaWorkflowSettingsModal & JSXBase.HTMLAttributes<HTMLElsaWorkflowSettingsModalElement>;
"elsa-workflow-test-panel": LocalJSX.ElsaWorkflowTestPanel & JSXBase.HTMLAttributes<HTMLElsaWorkflowTestPanelElement>;
}
}
}

View file

@ -64,7 +64,8 @@ export class ElsaWorkflowDefinitionEditorScreen {
i18next: i18n;
el: HTMLElement;
designer: HTMLElsaDesignerTreeElement;
propertiesPanel: HTMLElsaWorkflowPropertiesPanelElement;
testPanel: HTMLElsaWorkflowTestPanelElement;
flyoutPanel: HTMLElsaFlyoutPanelElement;
@Method()
async getServerUrl(): Promise<string> {
@ -384,13 +385,13 @@ export class ElsaWorkflowDefinitionEditorScreen {
async onActivitySelected(e: CustomEvent<ActivityModel>) {
this.selectedActivityId = e.detail.activityId;
await this.propertiesPanel.selectTestActivity(this.selectedActivityId);
await this.testPanel.selectTestActivity(this.selectedActivityId);
}
async onActivityDeselected(e: CustomEvent<ActivityModel>) {
if (this.selectedActivityId == e.detail.activityId)
this.selectedActivityId = null;
await this.propertiesPanel.selectTestActivity(null);
await this.testPanel.selectTestActivity(null);
}
onConnectionContextMenuButtonClicked(e: CustomEvent<ActivityContextMenuState>) {
@ -449,7 +450,7 @@ export class ElsaWorkflowDefinitionEditorScreen {
onActivityDeselected={e => this.onActivityDeselected(e)}
class="elsa-flex-1"
ref={el => this.designer = el}/>
{this.renderPropertiesPanel()}
{this.renderPanel()}
{this.renderWorkflowSettingsButton()}
{this.renderActivityContextMenu()}
{this.renderConnectionContextMenu()}
@ -622,17 +623,21 @@ export class ElsaWorkflowDefinitionEditorScreen {
};
}
private renderPropertiesPanel() {
private renderPanel() {
return (
<elsa-flyout-panel
expandButtonPosition={2}
>
<elsa-flyout-panel ref={el => this.flyoutPanel = el}>
<elsa-tab-header tab="general" slot="header">General</elsa-tab-header>
<elsa-tab-content tab="general" slot="content">
<elsa-workflow-properties-panel
workflowDefinition={this.workflowDefinition}
/>
</elsa-tab-content>
<elsa-tab-header tab="test" slot="header">Test</elsa-tab-header>
<elsa-tab-content tab="test" slot="content">
<elsa-workflow-test-panel ref={el => this.testPanel = el}
workflowDefinition={this.workflowDefinition}
/>
</elsa-tab-content>
</elsa-flyout-panel>
);
}

View file

@ -9,10 +9,7 @@
'PublishedVersion': 'Published Version',
'Status': 'Status',
'Published': 'Published',
'Draft': 'Draft',
'Properties': '{{name}} Properties',
'ExecuteWorkflow': 'Execute Workflow',
'UseAsSchema': 'Use as Schema'
'Draft': 'Draft'
}
},
'nl-NL': {
@ -25,10 +22,7 @@
'PublishedVersion': 'Gepubliceerde Versie',
'Status': 'Status',
'Published': 'Published',
'Draft': 'Draft',
'Properties': '{{name}} Properties',
'ExecuteWorkflow': 'Werkstroom uitvoeren',
'UseAsSchema': 'Gebruik als schema'
'Draft': 'Draft'
}
}
};

View file

@ -39,6 +39,7 @@ export class ElsaWorkflowTestPanel {
const message = this.workflowTestActivityMessages.find(x => x.activityId == activityId)
const messageInternal = !!message ? message : null;
this.selectTestActivityMessageInternal(messageInternal);
this.render();
}
@Watch('workflowDefinition')
@ -108,27 +109,19 @@ export class ElsaWorkflowTestPanel {
return (
<Host>
<div class="elsa-h-full elsa-flex elsa-flex-col elsa-py-6 elsa-bg-white elsa-shadow-xl elsa-overflow-y-scroll elsa-bg-white">
<div class="elsa-h-full">
<div class="elsa-p-6">
<div class="elsa-px-4 elsa-py-3 elsa-bg-gray-50 elsa-text-left sm:px-6">
<button type="button"
onClick={() => this.onExecuteWorkflowClick()}
class="elsa-ml-0 elsa-w-full elsa-inline-flex elsa-justify-center elsa-rounded-md elsa-border elsa-border-transparent elsa-shadow-sm elsa-px-4 elsa-py-2 elsa-bg-blue-600 elsa-text-base elsa-font-medium elsa-text-white hover:elsa-bg-blue-700 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 sm:elsa-ml-3 sm:elsa-w-auto sm:elsa-text-sm">
{t('ExecuteWorkflow')}
</button>
</div>
{this.renderActivityTestMessage()}
</div>
</div>
</div>
<button type="button"
onClick={() => this.onExecuteWorkflowClick()}
class="elsa-ml-0 elsa-w-full elsa-inline-flex elsa-justify-center elsa-rounded-md elsa-border elsa-border-transparent elsa-shadow-sm elsa-px-4 elsa-py-2 elsa-bg-blue-600 elsa-text-base elsa-font-medium elsa-text-white hover:elsa-bg-blue-700 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 sm:elsa-ml-3 sm:elsa-w-auto sm:elsa-text-sm">
{t('ExecuteWorkflow')}
</button>
{this.renderActivityTestMessage()}
</Host>
);
}
renderActivityTestMessage() {
debugger
const {testActivity} = this;
if (testActivity == undefined)
@ -169,34 +162,31 @@ export class ElsaWorkflowTestPanel {
const isInboundRequest = dataKey === "Inbound Request";
return (
<dl
class="elsa-mt-2 elsa-border-t elsa-border-b elsa-border-gray-200 elsa-divide-y elsa-divide-gray-200">
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{'Correlation Id'}</dt>
<dd class="elsa-text-gray-900">{testActivity.correlationId}</dd>
</div>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{t('Status')}</dt>
<dd class="elsa-text-gray-900 elsa-break-all">{testActivity.status || '-'}</dd>
</div>
{collection.map(filteredData, (v, k) => (
<div>
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500 elsa-capitalize">{k}</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">{v}</dd>
</div>
{isInboundRequest ?
<div class="elsa-px-4 elsa-py-3 elsa-bg-gray-50 elsa-text-left sm:px-6">
<button type="button"
onClick={() => this.onUseAsSchemaClick()}
class="elsa-ml-0 elsa-w-full elsa-inline-flex elsa-justify-center elsa-rounded-md elsa-border elsa-border-transparent elsa-shadow-sm elsa-px-4 elsa-py-2 elsa-bg-blue-600 elsa-text-base elsa-font-medium elsa-text-white hover:elsa-bg-blue-700 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 sm:elsa-ml-3 sm:elsa-w-auto sm:elsa-text-sm">
{t('UseAsSchema')}
</button>
</div>
:
null
}
<dl class="elsa-border-b elsa-border-gray-200 elsa-divide-y elsa-divide-gray-200">
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{'Correlation Id'}</dt>
<dd class="elsa-text-gray-900">{testActivity.correlationId}</dd>
</div>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{t('Status')}</dt>
<dd class="elsa-text-gray-900">{testActivity.status}</dd>
</div>
{collection.map(filteredData, (v, k) => (
<div>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{k}</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">{v}</dd>
</div>
{isInboundRequest ?
<button type="button"
onClick={() => this.onUseAsSchemaClick()}
class="elsa-ml-0 elsa-w-full elsa-inline-flex elsa-justify-center elsa-rounded-md elsa-border elsa-border-transparent elsa-shadow-sm elsa-px-4 elsa-py-2 elsa-bg-blue-600 elsa-text-base elsa-font-medium elsa-text-white hover:elsa-bg-blue-700 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 sm:elsa-ml-3 sm:elsa-w-auto sm:elsa-text-sm">
{t('UseAsSchema')}
</button>
:
null
}
</div>
))}
{this.renderActivityTestError()}
</dl>
@ -216,8 +206,8 @@ export class ElsaWorkflowTestPanel {
return;
return (
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500 elsa-capitalize">{t('Error')}</dt>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{t('Error')}</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">{testActivity.error}</dd>
</div>
);

View file

@ -0,0 +1,15 @@
export const resources = {
'en': {
default: {
'ExecuteWorkflow': 'Execute Workflow',
'UseAsSchema': 'Use as Schema'
}
},
'nl-NL': {
default: {
'ExecuteWorkflow': 'Werkstroom uitvoeren',
'UseAsSchema': 'Gebruik als schema'
}
}
};

View file

@ -91,12 +91,6 @@ export class ElsaWorkflowInstanceJournal {
this.recordSelected.emit(record);
}
onTabClick(e: Event, tab: Tab) {
e.preventDefault();
this.selectedTabId = tab.id;
}
render() {
return (
<Host>