Merge pull request #2704 from FAIRsharing/invalid_links_2699

"Fixed" URL problems #2699.

Author: knirirr

src/components/Records/Record/AdditionalInfo/DatasetArray.vue

@@ -17,21 +17,19 @@
           fa-question-circle
         </v-icon>
       </template>
-      {{ getDescription('head') }}
+      {{ getDescription("head") }}
     </v-tooltip>
     <b class="text-h6 text-capitalize">{{ setTitle(cleanString(title)) }}</b>
     <div
-      v-for="(item,index) in currentField"
-      :key="item.name+'_'+index"
+      v-for="(item, index) in currentField"
+      :key="item.name + '_' + index"
     >
       <!--  URLs    -->
       <div
         v-for="(key, keyindex) in Object.keys(item)"
-        :key="key+'_'+keyindex"
+        :key="key + '_' + keyindex"
       >
-        <div
-          class="d-flex flex-row align-center min-height-40"
-        >
+        <div class="d-flex flex-row align-center min-height-40">
           <v-tooltip
             v-if="getDescription(item[key])"
             bottom
@@ -44,52 +42,39 @@
             </template>
             {{ getDescription(item[key]) }}
           </v-tooltip>
-          <b class="width-200 text-capitalize">{{ setTitle(cleanString(key)) }}</b>
-          <div
-            v-if="checkRegex(item[key])"
-            class="d-flex full-width ml-md-12 ml-13"
-          >
-            <!-- See: https://github.com/FAIRsharing/fairsharing.github.io/issues/2021 -->
-            <a
-              class="underline-effect"
-              :href="item[key]"
-              target="_blank"
-            >
-              {{ item[key] }}
-            </a>
-          </div>
+          <b class="width-200 text-capitalize">{{
+            setTitle(cleanString(key))
+          }}</b>
+          <!-- eslint-disable vue/no-v-html -->
           <div
-            v-else
             class="d-flex full-width ml-md-12 ml-13"
-          >
-            {{ item[key] }}
-          </div>
+            v-html="toHyperLink(item[key])"
+          />
+          <!-- eslint-enable vue/no-v-html -->
         </div>
       </div>
 
-
-      <v-divider v-if="currentField.length-1!==index" />
+      <v-divider v-if="currentField.length - 1 !== index" />
     </div>
   </div>
 </template>
 
 <script>
-import stringUtils from '@/utils/stringUtils'
-
+import stringUtils from "@/utils/stringUtils";
 
 export default {
   name: "DatasetArray",
   mixins: [stringUtils],
   props: {
-    title: {default: null, type: String},
-    currentField: {default: () => [], type: Array},
-    currentKey: {default: null, type: String},
-    currentTooltips: {default: () => {}, type: Object},
+    title: { default: null, type: String },
+    currentField: { default: () => [], type: Array },
+    currentKey: { default: null, type: String },
+    currentTooltips: { default: () => {}, type: Object },
   },
   computed: {
     getCurrentKey() {
       return this.currentKey;
-    }
+    },
   },
   methods: {
     setTitle(title) {
@@ -98,41 +83,39 @@ export default {
         "dmp development": "DMP Development",
         "updating of dmp": "Updating of DMP",
         "mandated dmp creation": "Mandated DMP creation",
-        "url": "URL"
-      }
-      if (titles[title])
-        return titles[title]
+        url: "URL",
+      };
+      if (titles[title]) return titles[title];
       else {
-        return title
+        return title;
       }
     },
     getUpdatedTypeTitle() {
       switch (this.getCurrentKey) {
         case "data_curation":
-          return "Steps"
+          return "Steps";
         case "data_deposition_condition":
-          return "Restrictions"
+          return "Restrictions";
         default:
-          return "Type"
+          return "Type";
       }
     },
-    getUpdatedNameTitle(){
+    getUpdatedNameTitle() {
       switch (this.getCurrentKey) {
         case "resource_sustainability":
-          return "Plan"
+          return "Plan";
         default:
-          return "Name"
+          return "Name";
       }
     },
     getDescription(field) {
       let _module = this;
-      if (field === 'head') {
-        return _module.currentTooltips['description'] || false;
-      }
-      else if (_module.currentTooltips['properties'] !== undefined) {
-        if (_module.currentTooltips['properties'][field] !== undefined) {
-          if (_module.currentTooltips['properties'][field]['description']) {
-            return _module.currentTooltips['properties'][field]['description']
+      if (field === "head") {
+        return _module.currentTooltips["description"] || false;
+      } else if (_module.currentTooltips["properties"] !== undefined) {
+        if (_module.currentTooltips["properties"][field] !== undefined) {
+          if (_module.currentTooltips["properties"][field]["description"]) {
+            return _module.currentTooltips["properties"][field]["description"];
           }
         }
       }
@@ -141,14 +124,13 @@ export default {
     // This is to see if the string is a URL, for the purpose of hyperlinking any which are found
     // in the record's metadata.
     checkRegex(string) {
-      const expression = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+      const expression =
+        /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
       const regex = new RegExp(expression);
       return string.match(regex);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/utils/stringUtils.js

@@ -14,6 +14,13 @@ const stringUtils = {
     truncate(str, n) {
       return str.length > n ? str.substr(0, n - 1) + "..." : str;
     },
+    toHyperLink(str) {
+      let pattern1 =
+        /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+      let link = str.replace(pattern1, "<a href='$1'>$1</a>");
+
+      return link;
+    },
   },
   filters: {
     capitalize(str) {

tests/unit/utils/stringUtils.spec.js

@@ -30,4 +30,8 @@ describe("stringUtils.js", function(){
         expect(stringUtils.filters.pretty('{"this":"that"}')).toBe("\\this\\: \\that\\");
     })
 
+    it("converts text in strings to urls", () => {
+      expect(stringUtils.methods.toHyperLink('link to https://sirwilliamhope.org')).toBe("link to <a href='https://sirwilliamhope.org'>https://sirwilliamhope.org</a>");
+    })
+
 })