diff --git a/src/dialog-editor/components/modal-field-template/drop-down-list.html b/src/dialog-editor/components/modal-field-template/drop-down-list.html index fcc33cf727..1d7dfdb5c0 100644 --- a/src/dialog-editor/components/modal-field-template/drop-down-list.html +++ b/src/dialog-editor/components/modal-field-template/drop-down-list.html @@ -114,14 +114,25 @@
-
-
- +
+ +
+
-
+
+ + + + + +
+
diff --git a/src/dialog-editor/components/modal-field/modalFieldComponent.ts b/src/dialog-editor/components/modal-field/modalFieldComponent.ts index 992d51ff07..6a0ec29144 100644 --- a/src/dialog-editor/components/modal-field/modalFieldComponent.ts +++ b/src/dialog-editor/components/modal-field/modalFieldComponent.ts @@ -21,15 +21,50 @@ class ModalFieldController extends ModalController { public validation: any; public $onInit() { + + const emsWorkflowsEnabled = this.treeOptions.emsWorkflowsEnabled === 'true' ? true : false; + + /** Function to load the selected workflow if configuration_script_id is available. */ + if (emsWorkflowsEnabled && this.modalData.resource_action && this.modalData.resource_action.configuration_script_id) { + this.loadWorkflow(this.modalData.resource_action.configuration_script_id); + }; + this.treeOptions = { ...this.treeOptions, show: false, includeDomain: false, data: null, + automationType: null, + automationTypes: { + automate: 'embedded_automate', + workflow: 'embedded_workflow', + }, + emsWorkflowsEnabled: emsWorkflowsEnabled, + + /** Function to reset the modalData while changin the Automation Type. */ + onAutomationTypeChange: () => { + this.treeOptions.automationType = this.modalData.automation_type; + }, + + /** Function to display the automation_type select box + * 'Embedded Automate' will be displayed, by default. + * When the workflows are enabled, and automation_type === embedded_automate, 'Embedded Automate' select box will be displayed. + * Else, 'Embedded Workflow' will be selected. + */ + displayAutomationType: () => { + let displayAutomate = true; + if(emsWorkflowsEnabled) { + displayAutomate = this.modalData.automation_type === this.treeOptions.automationTypes.automate; + } + return {automate: displayAutomate, workflow: !displayAutomate}; + }, + + /** Function to open the modal box and load the automate tree. */ toggle: () => { this.treeOptions.show = ! this.treeOptions.show; + this.treeOptions.automationType = this.treeOptions.automationTypes.automate; if (this.treeOptions.show) { const fqname = this.showFullyQualifiedName(this.modalData.resource_action) || null; @@ -41,6 +76,21 @@ class ModalFieldController extends ModalController { } }, + /** Function to open the modal box and load the workflows list. */ + toggleWorkflows: () => { + this.treeOptions.show = ! this.treeOptions.show; + this.treeOptions.automationType = this.treeOptions.automationTypes.workflow; + + if (this.treeOptions.show) { + this.treeOptions.loadAvailableWorkflows().then((data) => { + this.treeOptions.data = data.resources.filter((item: any) => item.payload); + const workflow = this.treeOptions.data.find((item) => item.id === this.modalData.resource_action.configuration_script_id); + this.treeOptions.selected = workflow ? workflow.name : null; + }); + } + }, + + /** Function to handle the onclick event of an item in tree. */ onSelect: (node) => { this.treeSelectorSelect(node, this.modalData); } @@ -48,31 +98,65 @@ class ModalFieldController extends ModalController { } public showFullyQualifiedName(resourceAction) { - if (resourceAction.ae_namespace && resourceAction.ae_class && resourceAction.ae_instance) { + if (!resourceAction) { + return ''; + } + const actionKeys = ['ae_namespace', 'ae_class', 'ae_instance']; + const keysPresent = actionKeys.every((item) => resourceAction.hasOwnProperty(item)); + + if (keysPresent && resourceAction.ae_namespace && resourceAction.ae_class && resourceAction.ae_instance) { return `${resourceAction.ae_namespace}/${resourceAction.ae_class}/${resourceAction.ae_instance}`; } else { return ''; } } - public treeSelectorSelect(node, elementData) { + /** Function to extract the values needed for embedded_automate during onclick event of an item from the tree */ + public onEmbeddedAutomateSelect(node, elementData) { const fqname = node.fqname.split('/'); if (this.treeOptions.includeDomain === false) { fqname.splice(1, 1); } + if (elementData.resource_action) { + elementData.resource_action = { + ...elementData.resource_action, + ae_instance: fqname.pop(), + ae_class: fqname.pop(), + ae_namespace: fqname.filter(String).join('/'), + }; + } + } - elementData.resource_action = { - ...elementData.resource_action, - ae_instance: fqname.pop(), - ae_class: fqname.pop(), - ae_namespace: fqname.filter(String).join('/'), - }; + /** Function to extract the values needed for embedded_workflow during onclick event of an item from the list */ + public onEmbeddedWorkflowsSelect(workflow, elementData) { + if (elementData.resource_action) { + elementData.resource_action = { + ...elementData.resource_action, + configuration_script_id: workflow.id, + workflow_name: workflow.name, + }; + } + } + /** Function to extract the values needed for entry points during onclick event of an item from the tree or list */ + public treeSelectorSelect(node, elementData) { + if (this.treeOptions.automationType === this.treeOptions.automationTypes.automate) { + this.onEmbeddedAutomateSelect(node, elementData); + } else if (this.treeOptions.automationType === this.treeOptions.automationTypes.workflow) { + this.onEmbeddedWorkflowsSelect(node, elementData); + } this.treeOptions.show = false; } public modalFieldIsValid() { return this.validation.validateField(this.modalData); } + + /** Function to load a selected workflow. */ + public loadWorkflow(id: number) { + this.treeOptions.loadWorkflow(id).then(({data, status}) => { + this.modalData.resource_action.workflow_name = status ? data.name : ''; + }); + } } diff --git a/src/dialog-editor/components/modal/modalComponent.ts b/src/dialog-editor/components/modal/modalComponent.ts index d83be498de..faee10226d 100644 --- a/src/dialog-editor/components/modal/modalComponent.ts +++ b/src/dialog-editor/components/modal/modalComponent.ts @@ -81,6 +81,13 @@ class ModalController { } } + /** Function to set automationType in modalFieldData. */ + private setAutomationType(modalFieldData: any) { + const automationType = modalFieldData.resource_action && modalFieldData.resource_action.configuration_script_id ? 'embedded_workflow' : 'embedded_automate'; + modalFieldData.automation_type = automationType; + return modalFieldData; + } + public loadModalFieldData(tab: number, box: number, field: number) { if (typeof tab !== 'undefined' && typeof box !== 'undefined' && @@ -88,7 +95,7 @@ class ModalController { let tabList = this.DialogEditor.getDialogTabs(); let boxList = tabList[tab]; let fieldList = boxList.dialog_groups[box]; - return fieldList.dialog_fields[field]; + return this.setAutomationType(fieldList.dialog_fields[field]); } } diff --git a/src/dialog-editor/components/tree-selector/tree-selector.html b/src/dialog-editor/components/tree-selector/tree-selector.html index 02f57f848b..48f30bf4f2 100644 --- a/src/dialog-editor/components/tree-selector/tree-selector.html +++ b/src/dialog-editor/components/tree-selector/tree-selector.html @@ -1,28 +1,53 @@ -
- -
- - -
- -
- -
-
- - +
+
+
+ + Select Embededded Automate + + + Select Embededded Workflow + +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+ + +
+
+
+
+
+
    +
  • + {{workflow.name}} +
    • +
+
+
diff --git a/src/dialog-editor/services/dialogValidationService.ts b/src/dialog-editor/services/dialogValidationService.ts index 447474a5ac..06fdb16547 100644 --- a/src/dialog-editor/services/dialogValidationService.ts +++ b/src/dialog-editor/services/dialogValidationService.ts @@ -49,7 +49,7 @@ export default class DialogValidationService { field => ({ status: (field.type !== 'DialogFieldTagControl') || tagHasCategory(field), errorMessage: __('Category needs to be set for TagControl field'), local: true }), - field => ({ status: ! (field.dynamic && _.isEmpty(field.resource_action.ae_class)), + field => ({ status: ! (field.dynamic && !field.resource_action.configuration_script_id && _.isEmpty(field.resource_action.ae_class)), errorMessage: __('Entry Point needs to be set for Dynamic elements'), local: true }), field => ({ status: ! ((field.type === 'DialogFieldDropDownList' || diff --git a/src/dialog-user/services/dialogData.ts b/src/dialog-user/services/dialogData.ts index 6453829fb5..5f0540f120 100644 --- a/src/dialog-user/services/dialogData.ts +++ b/src/dialog-user/services/dialogData.ts @@ -33,14 +33,14 @@ export default class DialogDataService { options, values, }) { - let dropDownValues = values.map((option) => { + let dropDownValues = values && values.map((option) => { const value = this.convertDropdownValue(option[0], data_type); const description = (!Number.isInteger(option[1]) ? option[1] : parseInt(option[1], 10)); return [value, description]; }); - if (options.sort_by !== 'none') { + if (values && options.sort_by !== 'none') { return this.updateFieldSortOrder({ options, values: dropDownValues, diff --git a/src/styles/dialog-editor-boxes.scss b/src/styles/dialog-editor-boxes.scss index 61069bdb49..ec91bd5bc2 100644 --- a/src/styles/dialog-editor-boxes.scss +++ b/src/styles/dialog-editor-boxes.scss @@ -137,3 +137,73 @@ .draggable-field-dropdown { z-index: initial; } + +.entry_point_selector_types { + + .automation_type_selector { + margin-bottom: 20px !important; + } + .entry_point { + margin-top: 20px; + } +} + + +l.nav.nav-list.workflows { + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + + li { + border-bottom: 1px solid lightgray; + padding: 10px; + } +} + +.tree_selector_wrapper { + display: flex; + flex-direction: column; + border: 1px solid lightgray; + margin-top: 10px; + + .tree_selector_title_wrapper { + display: flex; + flex-direction: row; + background: lightgray; + padding: 5px; + + .tree_selector_dialog_title { + display: flex; + flex-grow: 1; + font-weight: bold; + padding: 5px 0; + font-size: 14px; + } + .tree_selector_action { + display: flex; + justify-content: center; + align-items: center; + min-width: 30px; + } + } + .tree_selector_content_wrapper { + display: flex; + flex-direction: column; + padding: 10px; + + ul.workflows_list_wrapper { + display: flex; + + li.workflow_item { + display: flex; + flex-grow: 1; + padding: 5px; + + &:hover { + background: #e4e5e6; + cursor: pointer; + } + + } + } + } +} diff --git a/src/styles/ui-components.scss b/src/styles/ui-components.scss index e6cee44210..29d8fdc619 100644 --- a/src/styles/ui-components.scss +++ b/src/styles/ui-components.scss @@ -6,7 +6,7 @@ /* Begin Patternfly Tab overrides used in the Dialog Editor */ .dialog-editor-tab-list { - margin-bottom: 20px; + margin-bottom: 20px !important; } .delete-tab {