diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index 98bc1a8ce..1a83332f4 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -43,6 +43,9 @@ export namespace Components { interface ElsaControl { "content": VNode | string | Element; } + interface ElsaCopyButton { + "value": string; + } interface ElsaDesignerTree { "activityBorderColor"?: (activity: ActivityModel) => string; "activityContextMenu"?: ActivityContextMenuState; @@ -248,11 +251,6 @@ export namespace Components { } interface ElsaWorkflowBlueprintPropertiesPanel { "culture": string; - "expandButtonPosition": number; - "serverUrl": string; - "workflowBlueprint": WorkflowBlueprint; - } - interface ElsaWorkflowBlueprintSidePanel { "serverUrl": string; "workflowId": string; } @@ -372,6 +370,12 @@ declare global { prototype: HTMLElsaControlElement; new (): HTMLElsaControlElement; }; + interface HTMLElsaCopyButtonElement extends Components.ElsaCopyButton, HTMLStencilElement { + } + var HTMLElsaCopyButtonElement: { + prototype: HTMLElsaCopyButtonElement; + new (): HTMLElsaCopyButtonElement; + }; interface HTMLElsaDesignerTreeElement extends Components.ElsaDesignerTree, HTMLStencilElement { } var HTMLElsaDesignerTreeElement: { @@ -594,12 +598,6 @@ declare global { prototype: HTMLElsaWorkflowBlueprintPropertiesPanelElement; new (): HTMLElsaWorkflowBlueprintPropertiesPanelElement; }; - interface HTMLElsaWorkflowBlueprintSidePanelElement extends Components.ElsaWorkflowBlueprintSidePanel, HTMLStencilElement { - } - var HTMLElsaWorkflowBlueprintSidePanelElement: { - prototype: HTMLElsaWorkflowBlueprintSidePanelElement; - new (): HTMLElsaWorkflowBlueprintSidePanelElement; - }; interface HTMLElsaWorkflowBlueprintViewerScreenElement extends Components.ElsaWorkflowBlueprintViewerScreen, HTMLStencilElement { } var HTMLElsaWorkflowBlueprintViewerScreenElement: { @@ -674,6 +672,7 @@ declare global { "elsa-confirm-dialog": HTMLElsaConfirmDialogElement; "elsa-context-menu": HTMLElsaContextMenuElement; "elsa-control": HTMLElsaControlElement; + "elsa-copy-button": HTMLElsaCopyButtonElement; "elsa-designer-tree": HTMLElsaDesignerTreeElement; "elsa-dropdown-button": HTMLElsaDropdownButtonElement; "elsa-dropdown-property": HTMLElsaDropdownPropertyElement; @@ -711,7 +710,6 @@ declare global { "elsa-webhook-definition-editor-screen": HTMLElsaWebhookDefinitionEditorScreenElement; "elsa-webhook-definitions-list-screen": HTMLElsaWebhookDefinitionsListScreenElement; "elsa-workflow-blueprint-properties-panel": HTMLElsaWorkflowBlueprintPropertiesPanelElement; - "elsa-workflow-blueprint-side-panel": HTMLElsaWorkflowBlueprintSidePanelElement; "elsa-workflow-blueprint-viewer-screen": HTMLElsaWorkflowBlueprintViewerScreenElement; "elsa-workflow-definition-editor-notifications": HTMLElsaWorkflowDefinitionEditorNotificationsElement; "elsa-workflow-definition-editor-screen": HTMLElsaWorkflowDefinitionEditorScreenElement; @@ -750,6 +748,9 @@ declare namespace LocalJSX { interface ElsaControl { "content"?: VNode | string | Element; } + interface ElsaCopyButton { + "value"?: string; + } interface ElsaDesignerTree { "activityBorderColor"?: (activity: ActivityModel) => string; "activityContextMenu"?: ActivityContextMenuState; @@ -957,11 +958,6 @@ declare namespace LocalJSX { } interface ElsaWorkflowBlueprintPropertiesPanel { "culture"?: string; - "expandButtonPosition"?: number; - "serverUrl"?: string; - "workflowBlueprint"?: WorkflowBlueprint; - } - interface ElsaWorkflowBlueprintSidePanel { "serverUrl"?: string; "workflowId"?: string; } @@ -1042,6 +1038,7 @@ declare namespace LocalJSX { "elsa-confirm-dialog": ElsaConfirmDialog; "elsa-context-menu": ElsaContextMenu; "elsa-control": ElsaControl; + "elsa-copy-button": ElsaCopyButton; "elsa-designer-tree": ElsaDesignerTree; "elsa-dropdown-button": ElsaDropdownButton; "elsa-dropdown-property": ElsaDropdownProperty; @@ -1079,7 +1076,6 @@ declare namespace LocalJSX { "elsa-webhook-definition-editor-screen": ElsaWebhookDefinitionEditorScreen; "elsa-webhook-definitions-list-screen": ElsaWebhookDefinitionsListScreen; "elsa-workflow-blueprint-properties-panel": ElsaWorkflowBlueprintPropertiesPanel; - "elsa-workflow-blueprint-side-panel": ElsaWorkflowBlueprintSidePanel; "elsa-workflow-blueprint-viewer-screen": ElsaWorkflowBlueprintViewerScreen; "elsa-workflow-definition-editor-notifications": ElsaWorkflowDefinitionEditorNotifications; "elsa-workflow-definition-editor-screen": ElsaWorkflowDefinitionEditorScreen; @@ -1104,6 +1100,7 @@ declare module "@stencil/core" { "elsa-confirm-dialog": LocalJSX.ElsaConfirmDialog & JSXBase.HTMLAttributes; "elsa-context-menu": LocalJSX.ElsaContextMenu & JSXBase.HTMLAttributes; "elsa-control": LocalJSX.ElsaControl & JSXBase.HTMLAttributes; + "elsa-copy-button": LocalJSX.ElsaCopyButton & JSXBase.HTMLAttributes; "elsa-designer-tree": LocalJSX.ElsaDesignerTree & JSXBase.HTMLAttributes; "elsa-dropdown-button": LocalJSX.ElsaDropdownButton & JSXBase.HTMLAttributes; "elsa-dropdown-property": LocalJSX.ElsaDropdownProperty & JSXBase.HTMLAttributes; @@ -1141,7 +1138,6 @@ declare module "@stencil/core" { "elsa-webhook-definition-editor-screen": LocalJSX.ElsaWebhookDefinitionEditorScreen & JSXBase.HTMLAttributes; "elsa-webhook-definitions-list-screen": LocalJSX.ElsaWebhookDefinitionsListScreen & JSXBase.HTMLAttributes; "elsa-workflow-blueprint-properties-panel": LocalJSX.ElsaWorkflowBlueprintPropertiesPanel & JSXBase.HTMLAttributes; - "elsa-workflow-blueprint-side-panel": LocalJSX.ElsaWorkflowBlueprintSidePanel & JSXBase.HTMLAttributes; "elsa-workflow-blueprint-viewer-screen": LocalJSX.ElsaWorkflowBlueprintViewerScreen & JSXBase.HTMLAttributes; "elsa-workflow-definition-editor-notifications": LocalJSX.ElsaWorkflowDefinitionEditorNotifications & JSXBase.HTMLAttributes; "elsa-workflow-definition-editor-screen": LocalJSX.ElsaWorkflowDefinitionEditorScreen & JSXBase.HTMLAttributes; diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-blueprint-view/readme.md b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-blueprint-view/readme.md index 568418166..88028b9ff 100644 --- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-blueprint-view/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-blueprint-view/readme.md @@ -26,10 +26,8 @@ graph TD; elsa-workflow-blueprint-viewer-screen --> elsa-flyout-panel elsa-workflow-blueprint-viewer-screen --> elsa-tab-header elsa-workflow-blueprint-viewer-screen --> elsa-tab-content - elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-side-panel + elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-properties-panel elsa-workflow-blueprint-viewer-screen --> context-consumer - elsa-workflow-blueprint-side-panel --> elsa-workflow-blueprint-properties-panel - elsa-workflow-blueprint-side-panel --> context-consumer elsa-workflow-blueprint-properties-panel --> context-consumer style elsa-studio-workflow-blueprint-view fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-view/readme.md b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-view/readme.md index 28a7b9091..a9719eca2 100644 --- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-view/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-view/readme.md @@ -25,6 +25,8 @@ graph TD; elsa-workflow-instance-viewer-screen --> elsa-workflow-instance-journal elsa-workflow-instance-viewer-screen --> elsa-designer-tree elsa-workflow-instance-viewer-screen --> context-consumer + elsa-workflow-instance-journal --> elsa-copy-button + elsa-workflow-instance-journal --> elsa-workflow-definition-editor-notifications elsa-workflow-instance-journal --> elsa-flyout-panel elsa-workflow-instance-journal --> elsa-tab-header elsa-workflow-instance-journal --> elsa-tab-content diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/elsa-workflow-blueprint-properties-panel.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/elsa-workflow-blueprint-properties-panel.tsx index d3d5ff1e5..75158dab3 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/elsa-workflow-blueprint-properties-panel.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/elsa-workflow-blueprint-properties-panel.tsx @@ -1,6 +1,5 @@ import {Component, Prop, h, State, Watch, Host} from '@stencil/core'; -import {enter, leave} from "el-transition" -import {WorkflowBlueprint, WorkflowDefinition, WorkflowDefinitionSummary} from "../../../../models"; +import {WorkflowBlueprint, WorkflowDefinitionSummary} from "../../../../models"; import {i18n} from "i18next"; import {loadTranslations} from "../../../i18n/i18n-loader"; import {resources} from "./localizations"; @@ -13,111 +12,58 @@ import Tunnel from "../../../../data/dashboard"; }) export class ElsaWorkflowBlueprintPropertiesPanel { - @Prop() workflowBlueprint: WorkflowBlueprint; + @Prop() workflowId: string; @Prop() culture: string; @Prop() serverUrl: string; - @Prop() expandButtonPosition = 1; + @State() workflowBlueprint: WorkflowBlueprint; @State() publishedVersion: number; - @State() expanded: boolean; private i18next: i18n; - el: HTMLElement; - @Watch('workflowBlueprint') - async workflowDefinitionChangedHandler(newWorkflow: WorkflowDefinition, oldWorkflow: WorkflowDefinition) { - if (newWorkflow.version !== oldWorkflow.version || newWorkflow.isPublished !== oldWorkflow.isPublished || newWorkflow.isLatest !== oldWorkflow.isLatest) - await this.loadPublishedVersion(); + @Watch('workflowId') + async workflowIdChangedHandler(newWorkflowId: string) { + await this.loadWorkflowBlueprint(newWorkflowId); + await this.loadPublishedVersion(); } async componentWillLoad() { this.i18next = await loadTranslations(this.culture, resources); + await this.loadWorkflowBlueprint(); await this.loadPublishedVersion(); } render() { const t = (x, params?) => this.i18next.t(x, params); - const {workflowBlueprint, expanded, expandButtonPosition} = this; + const {workflowBlueprint} = this; const name = workflowBlueprint.name || this.i18next.t("Untitled"); const {isPublished} = workflowBlueprint; - const expandPositionClass = expandButtonPosition == 1 ? "elsa-right-12" : "elsa-right-28"; return ( - - +
+
{t('Id')}
+
{workflowBlueprint.id || '-'}
+
+
+
{t('Version')}
+
{workflowBlueprint.version}
+
+
+
{t('PublishedVersion')}
+
{this.publishedVersion || '-'}
+
+
+
{t('Status')}
+
{isPublished ? t('Published') : t('Draft')}
+
+ - ); + ) } createClient() { @@ -128,21 +74,22 @@ export class ElsaWorkflowBlueprintPropertiesPanel { const elsaClient = await this.createClient(); const {workflowBlueprint} = this; - const publishedWorkflowDefinitions = await elsaClient.workflowDefinitionsApi.getMany([workflowBlueprint.id], {isPublished: true}); - const publishedDefinition: WorkflowDefinitionSummary = workflowBlueprint.isPublished ? workflowBlueprint : publishedWorkflowDefinitions.find(x => x.definitionId == workflowBlueprint.id); + if (workflowBlueprint.isPublished) { + const publishedWorkflowDefinitions = await elsaClient.workflowDefinitionsApi.getMany([workflowBlueprint.id], {isPublished: true}); + const publishedDefinition: WorkflowDefinitionSummary = workflowBlueprint.isPublished ? workflowBlueprint : publishedWorkflowDefinitions.find(x => x.definitionId == workflowBlueprint.id); - if (publishedDefinition) { - this.publishedVersion = publishedDefinition.version; + if (publishedDefinition) { + this.publishedVersion = publishedDefinition.version; + } + } else { + this.publishedVersion = 0; } } - toggle = () => { - if (this.expanded) { - leave(this.el).then(() => this.expanded = false); - } else { - this.expanded = true; - enter(this.el); - } + async loadWorkflowBlueprint(workflowId = this.workflowId) { + const elsaClient = await this.createClient(); + + this.workflowBlueprint = await elsaClient.workflowRegistryApi.get(workflowId, {isLatest: true}); } } diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/readme.md index 6e042340a..846a2dfab 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/readme.md @@ -7,19 +7,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------ | ----------- | ------------------- | ----------- | -| `culture` | `culture` | | `string` | `undefined` | -| `expandButtonPosition` | `expand-button-position` | | `number` | `1` | -| `serverUrl` | `server-url` | | `string` | `undefined` | -| `workflowBlueprint` | -- | | `WorkflowBlueprint` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ----------- | -------- | ----------- | +| `culture` | `culture` | | `string` | `undefined` | +| `serverUrl` | `server-url` | | `string` | `undefined` | +| `workflowId` | `workflow-id` | | `string` | `undefined` | ## Dependencies ### Used by - - [elsa-workflow-blueprint-side-panel](../elsa-workflow-blueprint-side-panel) + - [elsa-workflow-blueprint-viewer-screen](../elsa-workflow-blueprint-viewer-screen) ### Depends on @@ -29,7 +28,7 @@ ```mermaid graph TD; elsa-workflow-blueprint-properties-panel --> context-consumer - elsa-workflow-blueprint-side-panel --> elsa-workflow-blueprint-properties-panel + elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-properties-panel style elsa-workflow-blueprint-properties-panel fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/elsa-workflow-blueprint-side-panel.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/elsa-workflow-blueprint-side-panel.tsx deleted file mode 100644 index 4025fd93c..000000000 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/elsa-workflow-blueprint-side-panel.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import {Component, h, Prop, State, Watch} from '@stencil/core'; -import {WorkflowBlueprint} from "../../../../models"; -import {createElsaClient} from "../../../../services"; -import Tunnel from "../../../../data/dashboard"; - -@Component({ - tag: 'elsa-workflow-blueprint-side-panel', - shadow: false, -}) -export class ElsaWorkflowBlueprintSidePanel { - - @Prop() workflowId: string; - @Prop() serverUrl: string; - @State() workflowBlueprint: WorkflowBlueprint; - - @Watch('workflowId') - async workflowIdChangedHandler(newWorkflowId: string) { - await this.loadWorkflowBlueprint(newWorkflowId); - } - - render() { - return ( - - ); - } - - async componentWillLoad() { - await this.loadWorkflowBlueprint(); - } - - createClient() { - return createElsaClient(this.serverUrl); - } - - async loadWorkflowBlueprint(workflowId = this.workflowId) { - const elsaClient = await this.createClient(); - - this.workflowBlueprint = await elsaClient.workflowRegistryApi.get(workflowId, {isLatest: true}); - } -} - -Tunnel.injectProps(ElsaWorkflowBlueprintSidePanel, ['serverUrl']); diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/readme.md deleted file mode 100644 index 7701d583c..000000000 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/readme.md +++ /dev/null @@ -1,39 +0,0 @@ -# elsa-workflow-blueprint-side-panel - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------ | ------------- | ----------- | -------- | ----------- | -| `serverUrl` | `server-url` | | `string` | `undefined` | -| `workflowId` | `workflow-id` | | `string` | `undefined` | - - -## Dependencies - -### Used by - - - [elsa-workflow-blueprint-viewer-screen](../elsa-workflow-blueprint-viewer-screen) - -### Depends on - -- [elsa-workflow-blueprint-properties-panel](../elsa-workflow-blueprint-properties-panel) -- context-consumer - -### Graph -```mermaid -graph TD; - elsa-workflow-blueprint-side-panel --> elsa-workflow-blueprint-properties-panel - elsa-workflow-blueprint-side-panel --> context-consumer - elsa-workflow-blueprint-properties-panel --> context-consumer - elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-side-panel - style elsa-workflow-blueprint-side-panel fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/elsa-workflow-blueprint-viewer-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/elsa-workflow-blueprint-viewer-screen.tsx index 26af2860f..9ec57055c 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/elsa-workflow-blueprint-viewer-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/elsa-workflow-blueprint-viewer-screen.tsx @@ -150,12 +150,16 @@ export class ElsaWorkflowBlueprintViewerScreen { renderCanvas() { return (
- this.designer = el} - mode={WorkflowDesignerMode.Blueprint}/> + this.designer = el} + mode={WorkflowDesignerMode.Blueprint} + /> General - +
diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/readme.md index b62020283..f7513ef44 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/readme.md @@ -39,7 +39,7 @@ Type: `Promise` - [elsa-flyout-panel](../../../shared/elsa-flyout-panel) - [elsa-tab-header](../../../shared/elsa-tab-header) - [elsa-tab-content](../../../shared/elsa-tab-content) -- [elsa-workflow-blueprint-side-panel](../elsa-workflow-blueprint-side-panel) +- [elsa-workflow-blueprint-properties-panel](../elsa-workflow-blueprint-properties-panel) - context-consumer ### Graph @@ -49,10 +49,8 @@ graph TD; elsa-workflow-blueprint-viewer-screen --> elsa-flyout-panel elsa-workflow-blueprint-viewer-screen --> elsa-tab-header elsa-workflow-blueprint-viewer-screen --> elsa-tab-content - elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-side-panel + elsa-workflow-blueprint-viewer-screen --> elsa-workflow-blueprint-properties-panel elsa-workflow-blueprint-viewer-screen --> context-consumer - elsa-workflow-blueprint-side-panel --> elsa-workflow-blueprint-properties-panel - elsa-workflow-blueprint-side-panel --> context-consumer elsa-workflow-blueprint-properties-panel --> context-consumer elsa-studio-workflow-blueprint-view --> elsa-workflow-blueprint-viewer-screen style elsa-workflow-blueprint-viewer-screen fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/elsa-workflow-editor-notifications.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/elsa-workflow-editor-notifications.tsx index 6b22becec..7d7ae0245 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/elsa-workflow-editor-notifications.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/elsa-workflow-editor-notifications.tsx @@ -20,7 +20,7 @@ export class ElsaWorkflowEditorNotifications { disconnectedCallback() { eventBus.detach(EventTypes.WorkflowPublished, this.onWorkflowPublished); - eventBus.detach(EventTypes.WorkflowRetracted, this.onWorkflowRetracted); + eventBus.detach(EventTypes.WorkflowRetracted, this.onWorkflowRetracted); eventBus.detach(EventTypes.WorkflowImported, this.onWorkflowImported); eventBus.detach(EventTypes.ClipboardPermissionDenied, this.onClipboardPermissionsDenied); eventBus.detach(EventTypes.ClipboardCopied, this.onClipboardCopied); @@ -30,5 +30,7 @@ export class ElsaWorkflowEditorNotifications { onWorkflowRetracted = (workflowDefinition: WorkflowDefinition) => toastNotificationService.show('Workflow Retracted', `Workflow successfully retracted at version ${workflowDefinition.version}.`, 1500); onWorkflowImported = () => toastNotificationService.show('Workflow Imported', `Workflow successfully imported.`, 1500); onClipboardPermissionsDenied = () => toastNotificationService.show('Clipboard Error', `Clipboard pemission denied.`, 1500); - onClipboardCopied = () => toastNotificationService.show('Copy to Clipboard', `Activities successfully copied to Clipboard.`, 1500); + onClipboardCopied = (title: string, body: string) => { + toastNotificationService.show(title || 'Copy to Clipboard', body || 'Activities successfully copied to Clipboard.', 1500); + } } diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/readme.md index 93f3e0c27..f6a2646aa 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/readme.md @@ -10,11 +10,13 @@ ### Used by - [elsa-workflow-definition-editor-screen](../elsa-workflow-definition-editor-screen) + - [elsa-workflow-instance-journal](../../workflow-instance-viewer/elsa-workflow-instance-journal) ### Graph ```mermaid graph TD; elsa-workflow-definition-editor-screen --> elsa-workflow-definition-editor-notifications + elsa-workflow-instance-journal --> elsa-workflow-definition-editor-notifications style elsa-workflow-definition-editor-notifications fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx index 82ead214b..b2dfddaaa 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx @@ -7,7 +7,7 @@ import { PagedList, WorkflowBlueprint, WorkflowExecutionLogRecord, WorkflowInstance, - WorkflowModel, + WorkflowModel, WorkflowStatus, } from "../../../../models"; import {activityIconProvider} from "../../../../services/activity-icon-provider"; import {createElsaClient} from "../../../../services/elsa-client"; @@ -86,6 +86,24 @@ export class ElsaWorkflowInstanceJournal { return map[eventName] || 'gray'; } + getStatusColor(status: WorkflowStatus) { + switch (status) { + default: + case WorkflowStatus.Idle: + return 'gray'; + case WorkflowStatus.Running: + return 'rose'; + case WorkflowStatus.Suspended: + return 'blue'; + case WorkflowStatus.Finished: + return 'green'; + case WorkflowStatus.Faulted: + return 'red'; + case WorkflowStatus.Cancelled: + return 'yellow'; + } + } + onRecordClick(record: WorkflowExecutionLogRecord) { this.selectActivityRecordInternal(record); this.recordSelected.emit(record); @@ -101,6 +119,7 @@ export class ElsaWorkflowInstanceJournal { return ( {this.renderPanel()} + ); } @@ -239,12 +258,18 @@ export class ElsaWorkflowInstanceJournal {
-
Activity ID
+
+ Activity ID + +
{record.activityId}
{outcomes.length > 0 ? (
-
Outcomes
+
+ Outcomes + +
@@ -258,7 +283,8 @@ export class ElsaWorkflowInstanceJournal { {!!record.message && !exception ? (
- Message + Message +
{record.message} @@ -268,7 +294,8 @@ export class ElsaWorkflowInstanceJournal { {!!exception ? ( [
- Exception + Exception +
{renderExceptionMessage(exception)} @@ -276,7 +303,8 @@ export class ElsaWorkflowInstanceJournal {
,
- Exception Details + Exception Details + 
 clip(e.currentTarget)}>{JSON.stringify(exception, null, 1)}
@@ -285,7 +313,10 @@ export class ElsaWorkflowInstanceJournal { ) : undefined} {collection.map(filteredRecordData, (v, k) => (
-
{k}
+
+ {k} + + 
 clip(e.currentTarget)}>{v}
@@ -330,6 +361,7 @@ export class ElsaWorkflowInstanceJournal { const {workflowInstance, workflowBlueprint} = this; const {finishedAt, lastExecutedAt, faultedAt} = workflowInstance; const format = 'DD-MM-YYYY HH:mm:ss'; + const eventColor = this.getStatusColor(workflowInstance.workflowStatus); return (
@@ -355,7 +387,15 @@ export class ElsaWorkflowInstanceJournal {
Workflow Status
-
{workflowInstance.workflowStatus || '-'}
+
+ + + + {workflowInstance.workflowStatus || '-'} + +
Created
diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/readme.md index 6120b1ad5..a6fc23808 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/readme.md @@ -45,6 +45,8 @@ Type: `Promise` ### Depends on +- [elsa-copy-button](../../../shared/elsa-copy-button) +- [elsa-workflow-definition-editor-notifications](../../workflow-definition-editor/elsa-workflow-definition-editor-notifications) - [elsa-flyout-panel](../../../shared/elsa-flyout-panel) - [elsa-tab-header](../../../shared/elsa-tab-header) - [elsa-tab-content](../../../shared/elsa-tab-content) @@ -52,6 +54,8 @@ Type: `Promise` ### Graph ```mermaid graph TD; + elsa-workflow-instance-journal --> elsa-copy-button + elsa-workflow-instance-journal --> elsa-workflow-definition-editor-notifications elsa-workflow-instance-journal --> elsa-flyout-panel elsa-workflow-instance-journal --> elsa-tab-header elsa-workflow-instance-journal --> elsa-tab-content diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/readme.md b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/readme.md index d8c890d9b..89a9156b3 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/readme.md +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/readme.md @@ -45,6 +45,8 @@ graph TD; elsa-workflow-instance-viewer-screen --> elsa-workflow-instance-journal elsa-workflow-instance-viewer-screen --> elsa-designer-tree elsa-workflow-instance-viewer-screen --> context-consumer + elsa-workflow-instance-journal --> elsa-copy-button + elsa-workflow-instance-journal --> elsa-workflow-definition-editor-notifications elsa-workflow-instance-journal --> elsa-flyout-panel elsa-workflow-instance-journal --> elsa-tab-header elsa-workflow-instance-journal --> elsa-tab-content diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/elsa-copy-button.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/elsa-copy-button.tsx new file mode 100644 index 000000000..b480344ea --- /dev/null +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/elsa-copy-button.tsx @@ -0,0 +1,40 @@ +import {Component, h, Host, Prop} from '@stencil/core'; +import {eventBus} from "../../../services"; +import {EventTypes} from "../../../models"; + +@Component({ + tag: 'elsa-copy-button', + shadow: false, +}) +export class ElsaCopyButton { + @Prop() value: string; + + render() { + return ( + + + + ); + } + + onCopyClick = async (e) => { + e.stopPropagation(); + + this.checkClipboardPermissions(); + + await navigator.clipboard.writeText(this.value); + await eventBus.emit(EventTypes.ClipboardCopied, this, undefined, 'Data copied to clipboard.'); + } + + checkClipboardPermissions = () => { + navigator.permissions.query({name: 'clipboard-read'}).then((result) => { + if (result.state == 'denied') + eventBus.emit(EventTypes.ClipboardPermissionDenied, this); + }); + } + +} diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/readme.md b/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/readme.md new file mode 100644 index 000000000..fe4ae7ca5 --- /dev/null +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/readme.md @@ -0,0 +1,30 @@ +# elsa-copy-button + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ----------- | +| `value` | `value` | | `string` | `undefined` | + + +## Dependencies + +### Used by + + - [elsa-workflow-instance-journal](../../screens/workflow-instance-viewer/elsa-workflow-instance-journal) + +### Graph +```mermaid +graph TD; + elsa-workflow-instance-journal --> elsa-copy-button + style elsa-copy-button fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx index 1b9f5b410..6576e297c 100644 --- a/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx @@ -17,7 +17,9 @@ export class ElsaFlyoutPanel { async componentDidLoad() { this.headerTabs = Array.from(this.el.querySelectorAll('elsa-tab-header')); this.headerTabs.forEach(element => { - element.onclick = () => {this.selectTab(element.tab)}; + element.onclick = () => { + this.selectTab(element.tab) + }; }) this.contentTabs = Array.from(this.el.querySelectorAll('elsa-tab-content')); if (this.headerTabs.length > 0) { @@ -57,7 +59,7 @@ export class ElsaFlyoutPanel { data-transition-leave="elsa-transform elsa-transition elsa-ease-in-out elsa-duration-300 sm:elsa-duration-700" data-transition-leave-start="elsa-translate-x-0" data-transition-leave-end="elsa-translate-x-full" - class="elsa-w-screen elsa-max-w-lg elsa-h-full"> + class="elsa-w-screen elsa-max-w-lg elsa-h-full ">
-
-
+ class="elsa-h-full elsa-flex elsa-flex-col elsa-py-6 elsa-bg-white elsa-shadow-xl elsa-bg-white"> +
- +
+ +
-
diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-tab-content/elsa-tab-content.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-tab-content/elsa-tab-content.tsx index 5e51e4ba0..31597f000 100644 --- a/src/designer/elsa-workflows-studio/src/components/shared/elsa-tab-content/elsa-tab-content.tsx +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-tab-content/elsa-tab-content.tsx @@ -11,7 +11,7 @@ export class ElsaTabContent { render() { return ( -
+