Introduce Search feature for embedded workflows

Author: jeffibm

src/dialog-editor/components/modal-field/field.html

@@ -6,7 +6,7 @@ <h4 class="modal-title" id="myModalLabel" translate>Edit Field Details</h4>
 </div>
 
 <div class="modal-body">
-  <div class="dialog-editor-tab-notification" ng-if="vm.modalNotification().error">
+  <div class="dialog-editor-tab-notification error" ng-if="vm.modalNotification().error">
     <i class="pficon pficon-error-circle-o"></i>
     {{vm.modalNotification().message}}
   </div>

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,13 +89,37 @@ 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;
           });
         }
       },
 
       /** 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;
       }
     };
   }

src/dialog-editor/components/tree-selector/tree-selector.html

@@ -42,18 +42,37 @@
     </div>
     <div ng-if="$ctrl.treeOptions.automationType==$ctrl.treeOptions.automationTypes.workflow">
       <div ng-if="$ctrl.treeOptions.data">
-        <ul class="nav nav-list workflows_list_wrapper">
-          <li class="workflows_list_header">
+        <div class="nav nav-list workflows_list_wrapper">
+          <div class="list_search_wrapper">
+            <span class="pficon pficon-search"></span>
+            <input type="text" class="form-control"
+                   ng-model="$ctrl.treeOptions.searchQuery"
+                   placeholder="Search by Repository or Workflow Name"
+                   ng-change="$ctrl.treeOptions.filterResults()"/>
+            <span class="pficon pficon-close"
+                  ng-if="$ctrl.treeOptions.searchQuery"
+                  title="Clear"
+                  ng-click="$ctrl.treeOptions.clearSearchQuery()"></span>
+          </div>
+          <div class="workflows_list_header">
             <div class="col-md-6">Repository</div>
             <div class="col-md-6">Workflow Name</div>
-          </li>
-          <li class="workflow_item" ng-repeat="workflow in $ctrl.treeOptions.data">
-            <div class="workflow_item_row" ng-click="$ctrl.treeOptions.onSelect(workflow)">
-              <div class="col-md-6">{{workflow.configuration_script_source.name}}</div>
-              <div class="col-md-6">{{workflow.name}}</div>
+          </div>
+          <div class="workflow_list_content">
+            <div class="workflow_list_content_notification" ng-if="$ctrl.treeOptions.filteredWorkflows.length === 0">
+              <div class="dialog-editor-tab-notification info">
+                <i class="pficon pficon-info"></i>
+                No records found
+              </div>
             </div>
-          </li>
-        </ul>
+            <div class="workflow_item" ng-repeat="workflow in $ctrl.treeOptions.filteredWorkflows">
+              <div class="workflow_item_row" ng-click="$ctrl.treeOptions.onSelect(workflow)">
+                <div class="col-md-6">{{workflow.configuration_script_source.name}}</div>
+                <div class="col-md-6">{{workflow.name}}</div>
+              </div>
+            </div>
+            
+        </div>
       </div>
     </div>
   </div>

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

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 {