replace wildcard tooltip with static text, replace the instructions text (#2383)

* replace wildcard tooltip with static text, replace the instructions text

Author: soujay

src/Frontend/src/components/audit/AuditList.vue

@@ -159,6 +159,11 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
       <div class="row">
         <FiltersPanel />
       </div>
+      <div class="row">
+        <div class="col format-showing-tip">
+          <div>Use <i class="fa fa-asterisk asterisk" /> as a wildcard. Eg: <i class="fa fa-asterisk asterisk"></i>World! or Hello<i class="fa fa-asterisk asterisk"></i> finds Hello World!</div>
+        </div>
+      </div>
       <div class="row">
         <ResultsCount :displayed="messages.length" :total="totalCount" />
       </div>
@@ -297,4 +302,9 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
 .retry-issued {
   background-image: url("@/assets/status_retry_issued.svg");
 }
+.format-showing-tip {
+  display: flex;
+  align-items: flex-end;
+  font-style: italic;
+}
 </style>

src/Frontend/src/components/audit/FiltersPanel.vue

@@ -3,16 +3,15 @@ import FilterInput from "@/components/FilterInput.vue";
 import { storeToRefs } from "pinia";
 import { FieldNames, useAuditStore } from "@/stores/AuditStore.ts";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
-import { computed, useTemplateRef } from "vue";
+import { computed } from "vue";
 import DatePickerRange from "@/components/audit/DatePickerRange.vue";
-import { Tippy, TippyComponent } from "vue-tippy";
 
 const store = useAuditStore();
 const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
 const endpointNames = computed(() => {
   return [...new Set(endpoints.value.map((endpoint) => endpoint.name))].sort();
 });
-const wildcardTooltipRef = useTemplateRef<TippyComponent | null>("wildcardTooltipRef");
+
 const sortByItemsMap = new Map([
   ["Latest sent", `${FieldNames.TimeSent},desc`],
   ["Oldest sent", `${FieldNames.TimeSent},asc`],
@@ -53,30 +52,14 @@ function findKeyByValue(searchValue: string) {
   }
   return "";
 }
-
-function toggleWildcardToolTip(show: boolean) {
-  if (show) {
-    wildcardTooltipRef.value?.show();
-  } else {
-    wildcardTooltipRef.value?.hide();
-  }
-}
 </script>
 
 <template>
   <div class="filters">
     <div class="filter">
       <div class="filter-label"></div>
       <div class="filter-component text-search-container">
-        <Tippy ref="wildcardTooltipRef" trigger="click" :hideOnClick="false">
-          <template #content>
-            <h4>Use <i class="fa fa-asterisk asterisk" /> to do wildcard searches</h4>
-            <p>
-              Example: <i><i class="fa fa-asterisk asterisk" />World!</i> or <i>Hello<i class="fa fa-asterisk asterisk" /></i>, to look for <i>Hello World!</i>
-            </p>
-          </template>
-          <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" @focus="() => toggleWildcardToolTip(true)" @blur="() => toggleWildcardToolTip(false)" @input="() => toggleWildcardToolTip(false)" />
-        </Tippy>
+        <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" />
       </div>
     </div>
     <div class="filter">
@@ -94,7 +77,7 @@ function toggleWildcardToolTip(show: boolean) {
     <div class="filter">
       <div class="filter-label">Show:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
+        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Max results to display" v-model="selectedItemsPerPage" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
     <div class="filter">
@@ -107,10 +90,6 @@ function toggleWildcardToolTip(show: boolean) {
 </template>
 
 <style scoped>
-.asterisk {
-  color: #04b9ff;
-  font-size: 1.2rem;
-}
 .filters {
   background-color: #f3f3f3;
   border: #8c8c8c 1px solid;