diff --git a/src/dialog-editor/components/modal-field/field.html b/src/dialog-editor/components/modal-field/field.html
index 1ef7be19d..cafbd9709 100644
--- a/src/dialog-editor/components/modal-field/field.html
+++ b/src/dialog-editor/components/modal-field/field.html
@@ -6,7 +6,7 @@
-
+
{{vm.modalNotification().message}}
diff --git a/src/dialog-editor/components/modal-field/modalFieldComponent.ts b/src/dialog-editor/components/modal-field/modalFieldComponent.ts
index db81c3618..88b5fbfd3 100644
--- a/src/dialog-editor/components/modal-field/modalFieldComponent.ts
+++ b/src/dialog-editor/components/modal-field/modalFieldComponent.ts
@@ -19,6 +19,7 @@ class ModalFieldController extends ModalController {
public treeOptions: any;
public modalData: any;
public validation: any;
+ public searchQuery: string = '';
public $onInit() {
@@ -41,6 +42,8 @@ class ModalFieldController extends ModalController {
workflow: 'embedded_workflow',
},
emsWorkflowsEnabled: emsWorkflowsEnabled,
+ searchQuery: '',
+ filteredWorkflows: [],
/** Function to reset the modalData while changin the Automation Type. */
onAutomationTypeChange: () => {
@@ -86,6 +89,7 @@ class ModalFieldController extends ModalController {
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;
+ this.treeOptions.filteredWorkflows = this.treeOptions.data;
});
}
},
@@ -93,6 +97,29 @@ class ModalFieldController extends ModalController {
/** Function to handle the onclick event of an item in tree. */
onSelect: (node) => {
this.treeSelectorSelect(node, this.modalData);
+ },
+
+ /** Function to filter the API results with Repository or Workflow Name. */
+ filterResults: () => {
+ if ( this.treeOptions.searchQuery.length === 0) {
+ this.treeOptions.filteredWorkflows = this.treeOptions.data;
+ } else {
+ const query = this.treeOptions.searchQuery.toLowerCase().trim();
+ this.treeOptions.filteredWorkflows = this.treeOptions.data.filter((workflow) =>
+ (workflow.configuration_script_source && workflow.configuration_script_source.name
+ ? workflow.configuration_script_source.name.toLowerCase().includes(query)
+ : false) ||
+ (workflow.name
+ ? workflow.name.toLowerCase().includes(query)
+ : false)
+ );
+ }
+ },
+
+ /** Function to clear the search text and reset the list. */
+ clearSearchQuery: () => {
+ this.treeOptions.searchQuery = '';
+ this.treeOptions.filteredWorkflows = this.treeOptions.data;
}
};
}
diff --git a/src/dialog-editor/components/tree-selector/tree-selector.html b/src/dialog-editor/components/tree-selector/tree-selector.html
index 053db7230..3fc875e24 100644
--- a/src/dialog-editor/components/tree-selector/tree-selector.html
+++ b/src/dialog-editor/components/tree-selector/tree-selector.html
@@ -42,18 +42,37 @@
diff --git a/src/styles/dialog-editor-boxes.scss b/src/styles/dialog-editor-boxes.scss
index d2f59d396..d1b5865ff 100644
--- a/src/styles/dialog-editor-boxes.scss
+++ b/src/styles/dialog-editor-boxes.scss
@@ -190,38 +190,80 @@ l.nav.nav-list.workflows {
flex-direction: column;
padding: 10px;
- ul.workflows_list_wrapper {
+ .workflows_list_wrapper {
display: flex;
flex-direction: column;
border: 1px solid lightgray;
- li.workflows_list_header {
+ .list_search_wrapper {
+ display: flex;
+ flex-direction: row;
+
+ span {
+ border: 0;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.pficon-search {
+ color: gray;
+ }
+ &.pficon-close {
+ color: #000;
+ cursor: pointer;
+ }
+ }
+
+ input {
+ border: 0;
+ flex-grow: 1;
+ box-shadow: none;
+ height: 30px;
+ }
+ }
+
+ .workflows_list_header {
background: lightgray;
padding: 10px 0;
font-weight: bold;
}
- li.workflow_item {
+ .workflow_list_content {
display: flex;
flex-grow: 1;
- padding: 5px;
- border-bottom: 1px solid lightgray;
+ overflow-y: auto;
+ max-height: 400px;
+ flex-direction: column;
- &:last-child {
- border-bottom: 0 !important;
+ .workflow_list_content_notification {
+ padding: 20px;
+ display: flex;
+ justify-content: center;
}
- .workflow_item_row {
+ .workflow_item {
display: flex;
flex-grow: 1;
- margin-left: -5px;
+ padding: 5px;
+ border-bottom: 1px solid lightgray;
+
+ &:last-child {
+ border-bottom: 0 !important;
+ }
+
+ .workflow_item_row {
+ display: flex;
+ flex-grow: 1;
+ margin-left: -5px;
+ }
+
+ &:hover {
+ background: #e4e5e6;
+ cursor: pointer;
+ }
}
-
- &:hover {
- background: #e4e5e6;
- cursor: pointer;
- }
-
}
}
}
diff --git a/src/styles/ui-components.scss b/src/styles/ui-components.scss
index e21d6e4a3..db6256931 100644
--- a/src/styles/ui-components.scss
+++ b/src/styles/ui-components.scss
@@ -8,17 +8,26 @@
.dialog-editor-tab-notification {
color: #363636;
font-weight: bold;
- background: #ffe6e7;
- border: 1px solid #cd0000;
padding: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
+ flex-grow: 1;
i {
font-size: 16px;
}
+
+ &.error {
+ background: #ffe6e7;
+ border: 1px solid #cd0000;
+ }
+
+ &.info {
+ background: lightgray;
+ border: 1px solid gray;
+ }
}
.dialog-editor-tab-list {