Convert url based tag values into links (#2710)

- Fixes #2098

Author: jlewin

src/components/EnhancedMap/PropertyList/PropertyList.jsx

@@ -5,6 +5,7 @@ import _isObject from "lodash/isObject";
 import _map from "lodash/map";
 import _truncate from "lodash/truncate";
 import { FormattedMessage } from "react-intl";
+import { valueOrExternalLink } from "../../../utils/linkUtils";
 import SvgSymbol from "../../SvgSymbol/SvgSymbol";
 import messages from "./Messages";
 
@@ -69,7 +70,7 @@ const PropertyList = (props) => {
           <td
             className={classNames("value", { "mr-border-none mr-break-words mr-pb-1": darkMode })}
           >
-            {value}
+            {valueOrExternalLink(key, value)}
           </td>
         </tr>
       );

src/components/OSMElementTags/OSMElementTags.jsx

@@ -12,6 +12,7 @@ import SvgSymbol from "../SvgSymbol/SvgSymbol";
 import messages from "./Messages";
 import "./OSMElementTags.scss";
 import { useQuery } from "react-query";
+import { valueOrExternalLink } from "../../utils/linkUtils";
 
 const OSM_SERVER = window.env.REACT_APP_OSM_SERVER;
 
@@ -86,7 +87,7 @@ const OSMElementTags = (props) => {
   const tagsValues = _map(element.tag, ({ k, v }) => (
     <Fragment key={k}>
       <dt>{k}</dt>
-      <dd>{v}</dd>
+      <dd>{valueOrExternalLink(k, v)}</dd>
     </Fragment>
   ));
 

src/components/TagDiffVisualization/TagDiffVisualization.jsx

@@ -10,6 +10,7 @@ import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import xmlLang from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
 import highlightColors from "react-syntax-highlighter/dist/esm/styles/hljs/agate";
 import vkbeautify from "vkbeautify";
+import { valueOrExternalLink } from "../../utils/linkUtils";
 import BusySpinner from "../BusySpinner/BusySpinner";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
 import messages from "./Messages";
@@ -309,7 +310,7 @@ export class TagDiffVisualization extends Component {
         key={`${change.name}_value`}
       >
         <div className="mr-px-2 mr-overflow-x-hidden mr-truncate mr-text-base" title={change.value}>
-          {change.value}
+          {valueOrExternalLink(change.name, change.value)}
         </div>
       </li>
     ));
@@ -371,7 +372,7 @@ export class TagDiffVisualization extends Component {
             className="mr-px-2 mr-overflow-x-hidden mr-truncate mr-text-base"
             title={change.newValue}
           >
-            {change.newValue}
+            {valueOrExternalLink(change.name, change.newValue)}
           </div>
         )}
       </li>

src/utils/linkUtils.tsx

@@ -0,0 +1,31 @@
+/**
+ * Converts linkable field values to external links, otherwise returns plain text
+ */
+export function valueOrExternalLink(key, value) {
+  const linkableFields = ["contact:website", "website", "url"];
+
+  // If the key is one of the known linkable fields and valid, inject a link rather than the raw value
+  if (linkableFields.includes(key) && isValidUrl(value)) {
+    return (
+      <a target="_blank" rel="noopener noreferrer" href={value}>
+        {value}
+      </a>
+    );
+  }
+
+  // Otherwise, return the value as plain text
+  return <>{value}</>;
+}
+
+// Parse and test for usable urls
+function isValidUrl(urlText) {
+  try {
+    // Validate that the url is well-formed
+    const url = new URL(urlText);
+    // Only allow http and https protocols
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    // If URL is invalid, just return false
+  }
+  return false;
+}