Merge branch 'fix/hashtag-opening' into 'develop'

Open hashtag in same tab

See merge request pleroma/pleroma-fe!540

src/components/status/status.js

@@ -10,7 +10,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js'
+import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { filter, find, unescape } from 'lodash'
 
 const Status = {
@@ -282,7 +282,7 @@ const Status = {
       }
       if (target.tagName === 'A') {
         if (target.className.match(/mention/)) {
-          const href = target.getAttribute('href')
+          const href = target.href
           const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
           if (attn) {
             event.stopPropagation()
@@ -292,7 +292,14 @@ const Status = {
             return
           }
         }
-        window.open(target.href, '_blank')
+        if (target.className.match(/hashtag/)) {
+          // Extract tag name from link url
+          const tag = extractTagFromUrl(target.href)
+          if (tag) {
+            const link = this.generateTagLink(tag)
+            this.$router.push(link)
+          }
+        }
       }
     },
     toggleReplying () {
@@ -348,6 +355,9 @@ const Status = {
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    },
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)

src/components/status/status.vue

@@ -56,7 +56,7 @@
               </div>
               <h4 class="replies" v-if="inConversation && !noReplyLinks">
                 <small v-if="replies.length">Replies:</small>
-                <small class="reply-link" v-for="reply in replies">
+                <small class="reply-link" v-bind:key="reply.id" v-for="reply in replies">
                   <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}&nbsp;</a>
                 </small>
               </h4>

src/services/matcher/matcher.service.js

@@ -0,0 +1,23 @@
+export const mentionMatchesUrl = (attention, url) => {
+  if (url === attention.statusnet_profile_url) {
+    return true
+  }
+  const [namepart, instancepart] = attention.screen_name.split('@')
+  const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
+
+  return !!url.match(matchstring)
+}
+
+/**
+ * Extract tag name from pleroma or mastodon url.
+ * i.e https://bikeshed.party/tag/photo or https://quey.org/tags/sky
+ * @param {string} url
+ */
+export const extractTagFromUrl = (url) => {
+  const regex = /tag[s]*\/(\w+)$/g
+  const result = regex.exec(url)
+  if (!result) {
+    return false
+  }
+  return result[1]
+}

src/services/mention_matcher/mention_matcher.js

@@ -1,9 +0,0 @@
-
-export const mentionMatchesUrl = (attention, url) => {
-  if (url === attention.statusnet_profile_url) {
-    return true
-  }
-  const [namepart, instancepart] = attention.screen_name.split('@')
-  const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
-  return !!url.match(matchstring)
-}

test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js

@@ -241,7 +241,7 @@ describe('API Entities normalizer', () => {
         notice: makeMockStatusQvitter({ id: 444 }),
         from_profile: makeMockUserQvitter({ id: 'spurdo' })
       })
-      expect(parseNotification(notif)).to.have.property('id', '123')
+      expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('seen', false)
       expect(parseNotification(notif)).to.have.deep.property('status.id', '444')
       expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
@@ -259,7 +259,7 @@ describe('API Entities normalizer', () => {
         is_seen: 1,
         from_profile: makeMockUserQvitter({ id: 'spurdo' })
       })
-      expect(parseNotification(notif)).to.have.property('id', '123')
+      expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('type', 'like')
       expect(parseNotification(notif)).to.have.property('seen', true)
       expect(parseNotification(notif)).to.have.deep.property('status.id', '4412')

test/unit/specs/services/matcher/matcher.spec.js

@@ -1,4 +1,4 @@
-import * as MentionMatcher from 'src/services/mention_matcher/mention_matcher.js'
+import * as MatcherService from 'src/services/matcher/matcher.service.js'
 
 const localAttn = () => ({
   id: 123,
@@ -16,48 +16,67 @@ const externalAttn = () => ({
   statusnet_profile_url: 'https://instance.com/users/person'
 })
 
-describe('MentionMatcher', () => {
+describe('MatcherService', () => {
-  describe.only('mentionMatchesUrl', () => {
+  describe('mentionMatchesUrl', () => {
     it('should match local mention', () => {
       const attention = localAttn()
       const url = 'https://instance.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match a local mention with same name but different instance', () => {
       const attention = localAttn()
       const url = 'https://website.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
     })
 
     it('should match external pleroma mention', () => {
       const attention = externalAttn()
       const url = 'https://instance.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match external pleroma mention with same name but different instance', () => {
       const attention = externalAttn()
       const url = 'https://website.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
     })
 
     it('should match external mastodon mention', () => {
       const attention = externalAttn()
       const url = 'https://instance.com/@person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match external mastodon mention with same name but different instance', () => {
       const attention = externalAttn()
       const url = 'https://website.com/@person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
+    })
+  })
+  describe('extractTagFromUrl', () => {
+    it('should return tag name from valid pleroma url', () => {
+      const url = 'https://website.com/tag/photo'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql('photo')
+    })
+
+    it('should return tag name from valid mastodon url', () => {
+      const url = 'https://website.com/tags/sky'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql('sky')
+    })
+
+    it('should not return string but false if invalid url', () => {
+      const url = 'https://website.com/users/sky'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql(false)
     })
   })
 })