chore: Search improvements (#10801)

- Adds pagination support for search.
- Use composition API on all search related component.
- Minor UI improvements.
- Adds missing specs

Loom video
https://www.loom.com/share/5b01afa5c9204e7d97ff81b215621dde?sid=82ca6d22-ca8c-4d5e-8740-ba06ca4051ba

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -1,73 +1,59 @@
-<script>
+<script setup>
+import { ref, useTemplateRef, onMounted, watch, nextTick } from 'vue';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ReadMore from './ReadMore.vue';
 
-export default {
-  components: {
-    ReadMore,
+const props = defineProps({
+  author: {
+    type: String,
+    default: '',
   },
-  props: {
-    author: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    searchTerm: {
-      type: String,
-      default: '',
-    },
+  content: {
+    type: String,
+    default: '',
   },
-  setup() {
-    const { formatMessage, highlightContent } = useMessageFormatter();
-    return {
-      formatMessage,
-      highlightContent,
-    };
+  searchTerm: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      isOverflowing: false,
-    };
-  },
-  computed: {
-    messageContent() {
-      return this.formatMessage(this.content);
-    },
-  },
-  mounted() {
-    this.$watch(() => {
-      return this.$refs.messageContainer;
-    }, this.setOverflow);
+});
 
-    this.$nextTick(this.setOverflow);
-  },
-  methods: {
-    setOverflow() {
-      const wrap = this.$refs.messageContainer;
-      if (wrap) {
-        const message = wrap.querySelector('.message-content');
-        this.isOverflowing = message.offsetHeight > 150;
-      }
-    },
-    escapeHtml(html) {
-      var text = document.createTextNode(html);
-      var p = document.createElement('p');
-      p.appendChild(text);
-      return p.innerText;
-    },
-    prepareContent(content = '') {
-      const escapedText = this.escapeHtml(content);
-      return this.highlightContent(
-        escapedText,
-        this.searchTerm,
-        'searchkey--highlight'
-      );
-    },
-  },
+const { highlightContent } = useMessageFormatter();
+
+const messageContainer = useTemplateRef('messageContainer');
+const isOverflowing = ref(false);
+
+const setOverflow = () => {
+  const wrap = messageContainer.value;
+  if (wrap) {
+    const message = wrap.querySelector('.message-content');
+    isOverflowing.value = message.offsetHeight > 150;
+  }
 };
+
+const escapeHtml = html => {
+  var text = document.createTextNode(html);
+  var p = document.createElement('p');
+  p.appendChild(text);
+  return p.innerText;
+};
+
+const prepareContent = (content = '') => {
+  const escapedText = escapeHtml(content);
+  return highlightContent(
+    escapedText,
+    props.searchTerm,
+    'searchkey--highlight'
+  );
+};
+
+onMounted(() => {
+  watch(() => {
+    return messageContainer.value;
+  }, setOverflow);
+
+  nextTick(setOverflow);
+});
 </script>
 
 <template>