From 9b63cd2b976272d3c291e21e6988c77da742d47d Mon Sep 17 00:00:00 2001
From: Kai Volland <volland@terrestris.de>
Date: Thu, 16 May 2024 11:09:03 +0200
Subject: [PATCH] feat: render urls as anchor element

---
 src/Grid/PropertyGrid/PropertyGrid.example.md |  2 +-
 src/Grid/PropertyGrid/PropertyGrid.spec.tsx   | 17 ++++++++++++++++-
 src/Grid/PropertyGrid/PropertyGrid.tsx        | 13 ++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/Grid/PropertyGrid/PropertyGrid.example.md b/src/Grid/PropertyGrid/PropertyGrid.example.md
index fab00fc9eb..f1b63978aa 100644
--- a/src/Grid/PropertyGrid/PropertyGrid.example.md
+++ b/src/Grid/PropertyGrid/PropertyGrid.example.md
@@ -12,7 +12,7 @@ const feature = new OlFeature({
 const attributeObject = {
   foo: 'bar',
   foo2: 'bar2',
-  foo3: 'bar3',
+  foo3: 'https://terrestris.github.io/react-geo/',
   foo9: 'bar9',
   name: 'Point'
 };
diff --git a/src/Grid/PropertyGrid/PropertyGrid.spec.tsx b/src/Grid/PropertyGrid/PropertyGrid.spec.tsx
index a5c4319f7b..0bc4e35b4b 100644
--- a/src/Grid/PropertyGrid/PropertyGrid.spec.tsx
+++ b/src/Grid/PropertyGrid/PropertyGrid.spec.tsx
@@ -15,7 +15,8 @@ describe('<PropertyGrid />', () => {
     foo: 'bar',
     bvb: 'yarmolenko',
     mip: 'map',
-    name: 'Point'
+    name: 'Point',
+    link: 'https://www.example.com'
   };
 
   testFeature.setProperties(attributeObject);
@@ -69,4 +70,18 @@ describe('<PropertyGrid />', () => {
     expect(screen.getByText('name')).toBeVisible();
     expect(screen.getByText('Point')).toBeVisible();
   });
+
+  it('renders urls as links', () => {
+    render(
+      <PropertyGrid
+        feature={testFeature}
+      />
+    );
+
+    const link = screen.getByText('https://www.example.com');
+    expect(link).toBeVisible();
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute('href', 'https://www.example.com');
+  });
+
 });
diff --git a/src/Grid/PropertyGrid/PropertyGrid.tsx b/src/Grid/PropertyGrid/PropertyGrid.tsx
index 14d6328794..0f4cb185d5 100644
--- a/src/Grid/PropertyGrid/PropertyGrid.tsx
+++ b/src/Grid/PropertyGrid/PropertyGrid.tsx
@@ -86,6 +86,10 @@ const PropertyGrid: React.FC<PropertyGridProps> = ({
     });
   }, [attributeFilter, attributeNames, feature]);
 
+  const isUrl = (value: string) => {
+    return /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(value);
+  };
+
   const columns = useMemo(() => {
     return [{
       title: attributeNameColumnTitle,
@@ -96,7 +100,14 @@ const PropertyGrid: React.FC<PropertyGridProps> = ({
       title: attributeValueColumnTitle,
       dataIndex: 'attributeValue',
       key: 'attributeValue',
-      width: `${100 - attributeNameColumnWidthInPercent}%`
+      width: `${100 - attributeNameColumnWidthInPercent}%`,
+      render: (value: any) => {
+        if (isUrl(value)) {
+          return <a href={value} target="_blank">{value}</a>;
+        } else {
+          return value;
+        }
+      }
     }];
   }, [attributeNameColumnTitle, attributeNameColumnWidthInPercent, attributeValueColumnTitle]);