SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Added copy functionality to instance journal. Fixed registry panel issue. Fixed flyout panel scroll issue. (#1593)

Browse source
This commit is contained in:
simona-taran 2021-10-01 20:45:36 +03:00 committed by GitHub
parent 9a663fa606
commit ac3ffb607b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 218 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/designer/elsa-workflows-studio/src/components.d.ts vendored
View file

@ -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<HTMLElsaConfirmDialogElement>;
"elsa-context-menu": LocalJSX.ElsaContextMenu & JSXBase.HTMLAttributes<HTMLElsaContextMenuElement>;
"elsa-control": LocalJSX.ElsaControl & JSXBase.HTMLAttributes<HTMLElsaControlElement>;
"elsa-copy-button": LocalJSX.ElsaCopyButton & JSXBase.HTMLAttributes<HTMLElsaCopyButtonElement>;
"elsa-designer-tree": LocalJSX.ElsaDesignerTree & JSXBase.HTMLAttributes<HTMLElsaDesignerTreeElement>;
"elsa-dropdown-button": LocalJSX.ElsaDropdownButton & JSXBase.HTMLAttributes<HTMLElsaDropdownButtonElement>;
"elsa-dropdown-property": LocalJSX.ElsaDropdownProperty & JSXBase.HTMLAttributes<HTMLElsaDropdownPropertyElement>;
@ -1141,7 +1138,6 @@ declare module "@stencil/core" {
"elsa-webhook-definition-editor-screen": LocalJSX.ElsaWebhookDefinitionEditorScreen & JSXBase.HTMLAttributes<HTMLElsaWebhookDefinitionEditorScreenElement>;
"elsa-webhook-definitions-list-screen": LocalJSX.ElsaWebhookDefinitionsListScreen & JSXBase.HTMLAttributes<HTMLElsaWebhookDefinitionsListScreenElement>;
"elsa-workflow-blueprint-properties-panel": LocalJSX.ElsaWorkflowBlueprintPropertiesPanel & JSXBase.HTMLAttributes<HTMLElsaWorkflowBlueprintPropertiesPanelElement>;
"elsa-workflow-blueprint-side-panel": LocalJSX.ElsaWorkflowBlueprintSidePanel & JSXBase.HTMLAttributes<HTMLElsaWorkflowBlueprintSidePanelElement>;
"elsa-workflow-blueprint-viewer-screen": LocalJSX.ElsaWorkflowBlueprintViewerScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowBlueprintViewerScreenElement>;
"elsa-workflow-definition-editor-notifications": LocalJSX.ElsaWorkflowDefinitionEditorNotifications & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorNotificationsElement>;
"elsa-workflow-definition-editor-screen": LocalJSX.ElsaWorkflowDefinitionEditorScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorScreenElement>;

4
src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-blueprint-view/readme.md
View file

@ -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
```

2
src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-view/readme.md
View file

@ -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

141
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/elsa-workflow-blueprint-properties-panel.tsx
View file

@ -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 (
<Host>
<button type="button"
onClick={this.toggle}
class={`${expanded ? "hidden" : expandPositionClass} workflow-settings-button elsa-fixed elsa-top-20 elsa-inline-flex elsa-items-center elsa-p-2 elsa-rounded-full elsa-border elsa-border-transparent elsa-bg-white shadow elsa-text-gray-400 hover:elsa-text-blue-500 focus:elsa-text-blue-500 hover:elsa-ring-2 hover:elsa-ring-offset-2 hover:elsa-ring-blue-500 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 elsa-z-10`}>
<svg xmlns="http://www.w3.org/2000/svg" class="elsa-h-8 elsa-w-8" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"/>
</svg>
</button>
<section
class={`${this.expanded ? '' : 'hidden'} elsa-fixed elsa-top-4 elsa-right-0 elsa-bottom-0 elsa-overflow-hidden`}
aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
<div class="elsa-absolute elsa-inset-0 elsa-overflow-hidden">
<div class="elsa-absolute elsa-inset-0" aria-hidden="true"/>
<div
class="elsa-fixed elsa-inset-y-0 elsa-top-16 elsa-right-0 max-elsa-w-full elsa-flex">
<div
ref={el => this.el = el}
data-transition-enter="elsa-transform elsa-transition elsa-ease-in-out elsa-duration-300 sm:elsa-duration-700"
data-transition-enter-start="elsa-translate-x-full"
data-transition-enter-end="elsa-translate-x-0"
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">
<button type="button"
onClick={this.toggle}
class="workflow-settings-button elsa-absolute elsa-top-4 elsa-left-2 elsa-inline-flex elsa-items-center elsa-p-2 elsa-rounded-full elsa-border elsa-border-transparent elsa-bg-white shadow elsa-text-gray-400 hover:elsa-text-blue-500 focus:elsa-text-blue-500 hover:elsa-ring-2 hover:elsa-ring-offset-2 hover:elsa-ring-blue-500 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 elsa-z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="elsa-h-8 elsa-w-8" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
</svg>
</button>
<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-mt-16 elsa-p-6">
<div class="elsa-font-medium elsa-leading-8 elsa-overflow-hidden">
<p
class="elsa-overflow-ellipsis">{t('Properties', {name: workflowBlueprint.displayName || name})}</p>
</div>
<div>
<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">{t('Name')}</dt>
<dd class="elsa-text-gray-900">{name}</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('Id')}</dt>
<dd class="elsa-text-gray-900 elsa-break-all">{workflowBlueprint.id || '-'}</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('Version')}</dt>
<dd class="elsa-text-gray-900">{workflowBlueprint.version}</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('PublishedVersion')}</dt>
<dd class="elsa-text-gray-900">{this.publishedVersion || '-'}</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={`${isPublished ? 'elsa-text-green-600' : 'elsa-text-yellow-700'}`}>{isPublished ? t('Published') : t('Draft')}</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<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">{t('Name')}</dt>
<dd class="elsa-text-gray-900">{name}</dd>
</div>
</section>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">{t('Id')}</dt>
<dd class="elsa-text-gray-900 elsa-break-all">{workflowBlueprint.id || '-'}</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('Version')}</dt>
<dd class="elsa-text-gray-900">{workflowBlueprint.version}</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('PublishedVersion')}</dt>
<dd class="elsa-text-gray-900">{this.publishedVersion || '-'}</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={`${isPublished ? 'elsa-text-green-600' : 'elsa-text-yellow-700'}`}>{isPublished ? t('Published') : t('Draft')}</dd>
</div>
</dl>
</Host>
);
)
}
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});
}
}

15
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-properties-panel/readme.md
View file

@ -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
```

44
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/elsa-workflow-blueprint-side-panel.tsx
View file

@ -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 (
<elsa-workflow-blueprint-properties-panel
workflowBlueprint={this.workflowBlueprint}
/>
);
}
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']);

39
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-side-panel/readme.md
View file

@ -1,39 +0,0 @@
# elsa-workflow-blueprint-side-panel
<!-- Auto Generated Below -->
## 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/)*

10
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/elsa-workflow-blueprint-viewer-screen.tsx
View file

@ -150,12 +150,16 @@ export class ElsaWorkflowBlueprintViewerScreen {
renderCanvas() {
return (
<div class="elsa-flex-1 elsa-flex">
<elsa-designer-tree model={this.workflowModel} class="elsa-flex-1" ref={el => this.designer = el}
mode={WorkflowDesignerMode.Blueprint}/>
<elsa-designer-tree
model={this.workflowModel}
class="elsa-flex-1"
ref={el => this.designer = el}
mode={WorkflowDesignerMode.Blueprint}
/>
<elsa-flyout-panel>
<elsa-tab-header tab="general" slot="header">General</elsa-tab-header>
<elsa-tab-content tab="general" slot="content">
<elsa-workflow-blueprint-side-panel workflowId={this.workflowDefinitionId}/>
<elsa-workflow-blueprint-properties-panel workflowId={this.workflowDefinitionId}/>
</elsa-tab-content>
</elsa-flyout-panel>
</div>

6
src/designer/elsa-workflows-studio/src/components/screens/workflow-blueprint-viewer/elsa-workflow-blueprint-viewer-screen/readme.md
View file

@ -39,7 +39,7 @@ Type: `Promise<string>`
- [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

6
src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/elsa-workflow-editor-notifications.tsx
View file

@ -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);
}
}

2
src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-notifications/readme.md
View file

@ -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
```

56
src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/elsa-workflow-instance-journal.tsx
View file

@ -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 (
<Host>
{this.renderPanel()}
<elsa-workflow-definition-editor-notifications/>
</Host>
);
}
@ -239,12 +258,18 @@ export class ElsaWorkflowInstanceJournal {
<dl class="sm:elsa-divide-y sm:elsa-divide-gray-200">
<div class="elsa-grid elsa-grid-cols-2 elsa-gap-x-4 elsa-gap-y-8 sm:elsa-grid-cols-2">
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">Activity ID</dt>
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">
<span>Activity ID</span>
<elsa-copy-button value={record.activityId}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2">{record.activityId}</dd>
</div>
{outcomes.length > 0 ? (
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">Outcomes</dt>
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">
<span>Outcomes</span>
<elsa-copy-button value={outcomes.join(', ')}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2">
<div
class="elsa-flex elsa-flex-col elsa-space-y-4 sm:elsa-space-y-0 sm:elsa-flex-row sm:elsa-space-x-4">
@ -258,7 +283,8 @@ export class ElsaWorkflowInstanceJournal {
{!!record.message && !exception ? (
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">
Message
<span>Message</span>
<elsa-copy-button value={record.message}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900">
{record.message}
@ -268,7 +294,8 @@ export class ElsaWorkflowInstanceJournal {
{!!exception ? (
[<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">
Exception
<span>Exception</span>
<elsa-copy-button value={exception.Type + '\n' + exception.Message}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900">
{renderExceptionMessage(exception)}
@ -276,7 +303,8 @@ export class ElsaWorkflowInstanceJournal {
</div>,
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500">
Exception Details
<span>Exception Details</span>
<elsa-copy-button value={JSON.stringify(exception, null, 1)}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-overflow-x-auto">
<pre onClick={e => clip(e.currentTarget)}>{JSON.stringify(exception, null, 1)}</pre>
@ -285,7 +313,10 @@ export class ElsaWorkflowInstanceJournal {
) : undefined}
{collection.map(filteredRecordData, (v, k) => (
<div class="sm:elsa-col-span-2">
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500 elsa-capitalize">{k}</dt>
<dt class="elsa-text-sm elsa-font-medium elsa-text-gray-500 elsa-capitalize">
<span>{k}</span>
<elsa-copy-button value={v}/>
</dt>
<dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">
<pre onClick={e => clip(e.currentTarget)}>{v}</pre>
</dd>
@ -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 (
<dl class="elsa-border-b elsa-border-gray-200 elsa-divide-y elsa-divide-gray-200">
@ -355,7 +387,15 @@ export class ElsaWorkflowInstanceJournal {
</div>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">Workflow Status</dt>
<dd class="elsa-text-gray-900 elsa-break-all">{workflowInstance.workflowStatus || '-'}</dd>
<dd class="elsa-text-gray-900 elsa-break-all">
<span class="elsa-relative elsa-inline-flex elsa-items-center elsa-rounded-full">
<span class="elsa-flex-shrink-0 elsa-flex elsa-items-center elsa-justify-center">
<span class={`elsa-w-2-5 elsa-h-2-5 elsa-rounded-full elsa-bg-${eventColor}-500`}
aria-hidden="true"/>
</span>
<span class="elsa-ml-3.5">{workflowInstance.workflowStatus || '-'}</span>
</span>
</dd>
</div>
<div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
<dt class="elsa-text-gray-500">Created</dt>

4
src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-journal/readme.md
View file

@ -45,6 +45,8 @@ Type: `Promise<void>`
### 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<void>`
### 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

2
src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/readme.md
View file

@ -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

40
src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/elsa-copy-button.tsx Normal file
View file

@ -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 (
<Host class="elsa-align-text-top elsa-inline-block">
<button type="button" class="hover:elsa-text-blue-500 focus:elsa-text-green-600 elsa-pl-0.5" onClick={this.onCopyClick}>
<svg xmlns="http://www.w3.org/2000/svg" class="elsa-h-4 elsa-w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
</svg>
</button>
</Host>
);
}
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);
});
}
}

30
src/designer/elsa-workflows-studio/src/components/shared/elsa-copy-button/readme.md Normal file
View file

@ -0,0 +1,30 @@
# elsa-copy-button
<!-- Auto Generated Below -->
## 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/)*

16
src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx
View file

@ -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 ">
<button type="button"
onClick={this.toggle}
class="workflow-settings-button elsa-absolute elsa-top-4 elsa-left-2 elsa-inline-flex elsa-items-center elsa-p-2 elsa-rounded-full elsa-border elsa-border-transparent elsa-bg-white shadow elsa-text-gray-400 hover:elsa-text-blue-500 focus:elsa-text-blue-500 hover:elsa-ring-2 hover:elsa-ring-offset-2 hover:elsa-ring-blue-500 focus:elsa-outline-none focus:elsa-ring-2 focus:elsa-ring-offset-2 focus:elsa-ring-blue-500 elsa-z-10">
@ -68,20 +70,20 @@ export class ElsaFlyoutPanel {
</svg>
</button>
<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-mt-8 elsa-p-6">
class="elsa-h-full elsa-flex elsa-flex-col elsa-py-6 elsa-bg-white elsa-shadow-xl elsa-bg-white">
<div class="elsa-h-full elsa-mt-8 elsa-p-6">
<div class="elsa-border-b elsa-border-gray-200">
<nav class="-elsa-mb-px elsa-flex elsa-space-x-8" aria-label="Tabs">
<slot name="header"/>
</nav>
</div>
<slot name="content" />
<section class="elsa-overflow-auto elsa-h-full">
<slot name="content"/>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</Host>

2
src/designer/elsa-workflows-studio/src/components/shared/elsa-tab-content/elsa-tab-content.tsx
View file

@ -11,7 +11,7 @@ export class ElsaTabContent {
render() {
return (
<Host>
<div class={this.active ? '' : 'elsa-hidden'}>
<div class={`${this.active ? '' : 'elsa-hidden'} elsa-overflow-y-auto elsa-h-full`}>
<slot/>
</div>
</Host>