linkify messages as component in admin interface

admin/src/components/ContributionMessages/LinkifyMessage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="mt-2">
+    <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
+      <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
+      <span v-else>{{ text }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkifyMessage',
+  props: {
+    linkifiedMessage: {
+      type: Array,
+      required: true,
+    },
+  },
+}
+</script>

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js

@@ -125,4 +125,68 @@ describe('ContributionMessagesListItem', () => {
       })
     })
   })
+
+  describe('links in contribtion message', () => {
+    const propsData = {
+      message: {
+        id: 111,
+        message: 'Lorem ipsum?',
+        createdAt: '2022-08-29T12:23:27.000Z',
+        updatedAt: null,
+        type: 'DIALOG',
+        userFirstName: 'Peter',
+        userLastName: 'Lustig',
+        userId: 107,
+        __typename: 'ContributionMessage',
+      },
+    }
+
+    const ModeratorItemWrapper = () => {
+      return mount(ContributionMessagesListItem, {
+        localVue,
+        mocks,
+        propsData,
+      })
+    }
+
+    let messageField
+
+    describe('message of only one link', () => {
+      beforeEach(() => {
+        propsData.message.message = 'https://gradido.net/de/'
+        wrapper = ModeratorItemWrapper()
+        messageField = wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)')
+      })
+
+      it('contains the link as text', () => {
+        expect(messageField.text()).toBe('https://gradido.net/de/')
+      })
+
+      it('contains a link to the given address', () => {
+        expect(messageField.find('a').attributes('href')).toBe('https://gradido.net/de/')
+      })
+    })
+
+    describe('message with text and two links', () => {
+      beforeEach(() => {
+        propsData.message.message = `Here you find all you need to know about Gradido: https://gradido.net/de/
+and here is the link to the repository: https://github.com/gradido/gradido`
+        wrapper = ModeratorItemWrapper()
+        messageField = wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)')
+      })
+
+      it('contains the whole text', () => {
+        expect(messageField.text())
+          .toBe(`Here you find all you need to know about Gradido: https://gradido.net/de/
+and here is the link to the repository: https://github.com/gradido/gradido`)
+      })
+
+      it('contains the two links', () => {
+        expect(messageField.findAll('a').at(0).attributes('href')).toBe('https://gradido.net/de/')
+        expect(messageField.findAll('a').at(1).attributes('href')).toBe(
+          'https://github.com/gradido/gradido',
+        )
+      })
+    })
+  })
 })

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue

@@ -5,32 +5,27 @@
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
       <small class="ml-4 text-success">{{ $t('moderator') }}</small>
-      <div class="mt-2">
-        <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
-          <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
-          <span v-else>{{ text }}</span>
-        </span>
-      </div>
+      <linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
     </div>
     <div v-else class="text-left is-not-moderator">
       <b-avatar variant="info"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <div class="mt-2">
-        <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
-          <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
-          <span v-else>{{ text }}</span>
-        </span>
-      </div>
+      <linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
     </div>
   </div>
 </template>
 <script>
-const PATTERN =
+import LinkifyMessage from '@/components/ContributionMessages/LinkifyMessage.vue'
+
+const LINK_PATTERN =
   /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
 
 export default {
   name: 'ContributionMessagesListItem',
+  components: {
+    LinkifyMessage,
+  },
   props: {
     message: {
       type: Object,
@@ -42,7 +37,7 @@ export default {
       const linkified = []
       let string = this.message.message
       let match
-      while ((match = string.match(PATTERN))) {
+      while ((match = string.match(LINK_PATTERN))) {
         if (match.index > 0)
           linkified.push({ type: 'text', text: string.substring(0, match.index) })
         linkified.push({ type: 'link', text: match[0] })