adding model search text box - not wired up yet

Author: robertpatrick

electron/app/locales/en/webui.json

@@ -1029,6 +1029,7 @@
   "aux-image-pusher-create-failed-title":"Push Image Failed",
   "aux-image-pusher-create-failed-error-message":"Unable to push image {{imageTag}}: {{error}}.",
 
+  "model-page-design-view-search-label": "Search Model",
   "model-page-button-validateModel": "Validate Model",
   "model-page-hints-validateModel": "Validate Model Files",
   "model-page-button-prepareModel": "Prepare Model",

webui/src/js/viewModels/model-design-view.js

@@ -16,6 +16,7 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, jsYaml,
     this.dataProvider = {};
     this.disableStartButton = ko.observable(false);
     this.wrcBackendTriggerChange = false;
+    this.searchModelElement = undefined;
 
     this.connected = () => {
       accUtils.announce('Model design view loaded.', 'assertive');
@@ -50,6 +51,15 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, jsYaml,
           });
         }
       }
+
+      const element = document.getElementById('modelDesignSearchInput');
+      if (element) {
+        wktLogger.debug('Found modelDesignSearchInput');
+        this.searchModelElement = element;
+        this.searchModelElement.addEventListener('searchModel', this.handleSearchModelEvent);
+      } else {
+        wktLogger.error('Failed to find modelDesignSearchInput');
+      }
     };
 
     this.disconnected = function() {
@@ -61,6 +71,10 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, jsYaml,
         wktLogger.debug('disconnected() dataProvider = %s', JSON.stringify(this.dataProvider));
         this.designer.deactivateProvider(this.dataProvider);
       }
+
+      if (this.searchModelElement) {
+        this.searchModelElement.removeEventListener('searchModel', this.handleSearchModelEvent);
+      }
     };
 
     this.labelMapper = (labelId, payload) => {
@@ -238,6 +252,15 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, jsYaml,
       document.querySelector('oj-button#start-wrc-button span').style.cursor = 'wait';
       return window.api.ipc.invoke('wrc-set-home-and-start', rcHome);
     };
+
+    this.handleSearchModelEvent = (event) => {
+      const searchModelText = event.detail.value;
+      wktLogger.debug('received searchModel event: %s', searchModelText);
+
+      // Once the WRC change is available, call the method to pass the search text and return.
+      //
+      // this.designer.simpleSearch(searchModelText);
+    };
   }
 
   /*

webui/src/js/viewModels/model-page-impl.js

@@ -34,6 +34,10 @@ define([],
       };
 
       this.selectedItem = ko.observable('model-code-view');
+      this.inDesignView = ko.computed(() => {
+        return this.selectedItem() === 'model-design-view';
+      });
+
       this.dataProvider = new ArrayDataProvider(navData.slice(1), {keyAttributes: 'path'});
 
       let router = args.parentRouter.createChildRouter(navData, {history: 'skip'});
@@ -44,6 +48,25 @@ define([],
       this.selectedItem.subscribe((newValue) => {
         router.go({path: newValue});
       });
+
+      this.disableSearch = ko.observable(false);
+      this.enterKeyPressedInSearchInput = (event) => {
+        if (event.detail.originalEvent.keyCode === 13) {
+          this.searchModel();
+        }
+      };
+
+      this.searchModel = () => {
+        const searchModelElement = document.getElementById('modelDesignSearchInput');
+        if (searchModelElement && searchModelElement.value) {
+          const payload = {
+            detail: {
+              value: searchModelElement.value
+            }
+          };
+          searchModelElement.dispatchEvent(new CustomEvent('searchModel', payload));
+        }
+      };
     }
 
     /*

webui/src/js/views/model-page.html

@@ -2,7 +2,7 @@
  Copyright (c) 2021, 2022, Oracle and/or its affiliates.
  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
  -->
-<div class="wkt-content-layout">
+<div id="modelPage" class="wkt-content-layout">
   <div class="wkt-content-top-bar">
     <oj-tab-bar class="oj-sm-condense oj-tabbar wkt-tab-bar"
                 selection="{{selectedItem}}"
@@ -15,6 +15,23 @@
         </li>
       </template>
     </oj-tab-bar>
+    <oj-bind-if test="[[inDesignView() === true]]">
+      <oj-input-text id="modelDesignSearchInput"
+                     disabled="[[disableSearch]]"
+                     on-value-changed="[[enterKeyPressedInSearchInput]]"
+                     label-hint="[[labelMapper('design-view-search-label')]]">
+        <oj-button
+                id="searchModelButton"
+                disabled="[[disableSearch]]"
+                slot="end"
+                display="icons"
+                chroming="borderless"
+                on-oj-action="[[searchModel]]">
+          <span slot="endIcon" class="oj-ux-ico-search" role="img"></span>
+        </oj-button>
+      </oj-input-text>
+    </oj-bind-if>
+
     <oj-button id="validateModelButton"
                disabled="[[disableValidate]]"
                chroming="callToAction"