Add searchbox in settings page (#338)

* Add searchbox in setting page

Signed-off-by: Andy Lee <andy.lee@suse.com>

* update based on comment

Signed-off-by: Andy Lee <andy.lee@suse.com>

* PR feedback

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/list/harvesterhci.io.setting.vue

@@ -85,7 +85,7 @@ export default {
   },
 
   data() {
-    return { initSettings: [] };
+    return { initSettings: [], searchQuery: '' };
   },
 
   computed: {
@@ -135,9 +135,19 @@ export default {
         {{ t('harvester.setting.modifiedMessage') }}
       </div>
     </Banner>
-
+    <div class="fixed-header-actions harvester-settings-search">
+      <div class="search row">
+        <input
+          v-model="searchQuery"
+          type="search"
+          class="input-sm search-box"
+          :aria-label="t('sortableTable.searchLabel')"
+          :placeholder="t('sortableTable.search')"
+        >
+      </div>
+    </div>
     <Tabbed
-      class="mt-30"
+      class="mt-15"
     >
       <Tab
         name="advanced"
@@ -146,6 +156,7 @@ export default {
       >
         <Settings
           :settings="settings"
+          :search-query="searchQuery"
           category="advanced"
         />
       </Tab>
@@ -156,6 +167,7 @@ export default {
       >
         <Settings
           :settings="settings"
+          :search-query="searchQuery"
           category="ui"
         />
       </Tab>
@@ -167,4 +179,20 @@ export default {
 .settings-banner {
   margin-top: 0;
 }
+
+.harvester-settings-search {
+  padding: 0;
+}
+
+.search {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.search-box {
+  height: 40px;
+  margin-left: 10px;
+  min-width: 180px;
+}
+
 </style>