Add table search filter clear button

- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
  style guide

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5

9 files changed, 81 insertions, 35 deletions

diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 9ebf4680..eeb909a8 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -12,12 +12,22 @@
         </b-input-group-prepend>
         <b-form-input
           :id="`searchInput-${_uid}`"
+          ref="searchInput"
           v-model="filter"
           class="search-input"
           type="text"
           :placeholder="placeholder"
           @input="onChangeInput"
-        ></b-form-input>
+        >
+        </b-form-input>
+        <b-button
+          v-if="filter"
+          variant="link"
+          :aria-label="$t('global.ariaLabel.clearSearch')"
+          @click="onClearSearch"
+        >
+          <icon-close :title="$t('global.ariaLabel.clearSearch')" />
+        </b-button>
       </b-input-group>
     </b-form-group>
   </div>
@@ -25,9 +35,11 @@
 
 <script>
 import IconSearch from '@carbon/icons-vue/es/search/16';
+import IconClose from '@carbon/icons-vue/es/close/20';
+
 export default {
   name: 'Search',
-  components: { IconSearch },
+  components: { IconSearch, IconClose },
   props: {
     placeholder: {
       type: String,
@@ -44,6 +56,11 @@ export default {
   methods: {
     onChangeInput() {
       this.$emit('changeSearch', this.filter);
+    },
+    onClearSearch() {
+      this.filter = '';
+      this.$emit('clearSearch');
+      this.$refs.searchInput.focus();
     }
   }
 };
@@ -60,4 +77,16 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
+
+.btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0.4rem 1rem;
+  z-index: 4;
+  svg {
+    margin-left: 0;
+    vertical-align: sub;
+  }
+}
 </style>
diff --git a/src/components/Mixins/SearchFilterMixin.js b/src/components/Mixins/SearchFilterMixin.js
new file mode 100644
index 00000000..856975dc
--- /dev/null
+++ b/src/components/Mixins/SearchFilterMixin.js
@@ -0,0 +1,17 @@
+const SearchFilterMixin = {
+  data() {
+    return {
+      searchFilter: null
+    };
+  },
+  methods: {
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
+    },
+    onClearSearchInput() {
+      this.searchFilter = null;
+    }
+  }
+};
+
+export default SearchFilterMixin;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 538b46e2..e0da709a 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -19,6 +19,7 @@
       "selected": "Selected"
     },
     "ariaLabel": {
+      "clearSearch": "Clear search input",
       "hidePassword": "Hide password",
       "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
       "tooltip": "Tooltip",
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index e7d4895a..cf5d4787 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -6,6 +6,7 @@
         <search
           :placeholder="$t('pageEventLogs.table.searchLogs')"
           @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
         />
       </b-col>
       <b-col sm="3" class="d-flex flex-column justify-content-end">
@@ -161,6 +162,7 @@ import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: {
@@ -183,7 +185,8 @@ export default {
     LoadingBarMixin,
     TableFilterMixin,
     TableDataFormatterMixin,
-    TableSortMixin
+    TableSortMixin,
+    SearchFilterMixin
   ],
   data() {
     return {
@@ -239,7 +242,6 @@ export default {
       ],
       filterStartDate: null,
       filterEndDate: null,
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -353,9 +355,6 @@ export default {
       this.filterStartDate = fromDate;
       this.filterEndDate = toDate;
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     },
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 97116ca2..ec7c1637 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -70,10 +73,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -108,7 +112,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -134,9 +137,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 0b6e1a35..98e2fb5e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.fans')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -69,10 +72,11 @@ import StatusIcon from '@/components/Global/StatusIcon';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -107,7 +111,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -133,9 +136,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 77a1e3c8..0eb2f608 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -2,7 +2,10 @@
   <page-section :section-title="$t('pageHardwareStatus.powerSupplies')">
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -92,10 +95,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -130,7 +134,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -156,9 +159,6 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6ab1343a..5a27cca7 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -3,7 +3,10 @@
     <!-- Search -->
     <b-row>
       <b-col sm="6" md="5" xl="4">
-        <search @changeSearch="onChangeSearchInput" />
+        <search
+          @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
+        />
       </b-col>
       <b-col sm="6" md="3" xl="2">
         <table-cell-count
@@ -99,10 +102,11 @@ import TableCellCount from '@/components/Global/TableCellCount';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   components: { PageSection, IconChevron, TableCellCount, StatusIcon, Search },
-  mixins: [TableDataFormatterMixin, TableSortMixin],
+  mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
   data() {
     return {
       fields: [
@@ -137,7 +141,6 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null,
       searchTotalFilteredRows: 0
     };
   },
@@ -158,9 +161,6 @@ export default {
     });
   },
   methods: {
-    onChangeSearchInput(searchValue) {
-      this.searchFilter = searchValue;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 3915ff20..c2343591 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -6,6 +6,7 @@
         <search
           :placeholder="$t('pageSensors.searchForSensors')"
           @changeSearch="onChangeSearchInput"
+          @clearSearch="onClearSearchInput"
         />
       </b-col>
       <b-col sm="3" md="3" xl="2">
@@ -107,6 +108,7 @@ import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
 
 export default {
   name: 'Sensors',
@@ -124,7 +126,8 @@ export default {
     BVTableSelectableMixin,
     LoadingBarMixin,
     TableDataFormatterMixin,
-    TableSortMixin
+    TableSortMixin,
+    SearchFilterMixin
   ],
   data() {
     return {
@@ -215,9 +218,6 @@ export default {
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
     },
-    onChangeSearchInput(event) {
-      this.searchFilter = event;
-    },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     }