Make links in query result panel clickable (#2428)

.changeset/long-feet-melt.md

@@ -0,0 +1,3 @@
+---
+'@finos/legend-shared': patch
+---

.changeset/rotten-tigers-cheat.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Make links in query result panel clickable.

packages/legend-query-builder/src/components/QueryBuilderResultPanel.tsx

@@ -67,6 +67,7 @@ import {
   type PlainObject,
   prettyDuration,
   filterByType,
+  isValidURL,
 } from '@finos/legend-shared';
 import { forwardRef, useRef, useState } from 'react';
 import {
@@ -713,7 +714,13 @@ const QueryResultCellRenderer = observer(
           onMouseUp={(event) => mouseUp(event)}
           onMouseOver={(event) => mouseOver(event)}
         >
-          <span>{cellValue}</span>
+          {isValidURL(cellValue) ? (
+            <a href={cellValue} target="_blank" rel="noreferrer">
+              {cellValue}
+            </a>
+          ) : (
+            <span>{cellValue}</span>
+          )}
         </div>
       </ContextMenu>
     );

packages/legend-shared/src/network/NetworkUtils.ts

@@ -39,6 +39,12 @@ const compressData = (data: object | string): Blob =>
   new Blob([deflate(isObject(data) ? JSON.stringify(data) : data)]);
 
 export const URL_SEPARATOR = '/';
+/**
+ *  Reference: https://uibakery.io/regex-library/url
+ */
+const URL_REGEX = new RegExp(
+  '^https?://(?:www.)?[-a-zA-Z0-9@:%._+~#=]{1,256}.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$',
+);
 export const HttpStatus = StatusCodes;
 export const CHARSET = 'charset=utf-8';
 
@@ -586,3 +592,5 @@ export const buildUrl = (parts: string[]): string =>
     .join(URL_SEPARATOR);
 
 export const sanitizeURL = (val: string): string => sanitizeUrl(val);
+
+export const isValidURL = (val: string): boolean => URL_REGEX.test(val);