From a0264f5116c70f8a0cec4e24e890bdc1ab829dd8 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Tue, 28 May 2024 10:53:20 -0500
Subject: [PATCH 1/4] fix widget link issues

---
 src/Components/DnDLayout/GridTile.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Components/DnDLayout/GridTile.tsx b/src/Components/DnDLayout/GridTile.tsx
index e0281ea..509d586 100644
--- a/src/Components/DnDLayout/GridTile.tsx
+++ b/src/Components/DnDLayout/GridTile.tsx
@@ -30,6 +30,7 @@ import { getWidget } from '../Widgets/widgetDefaults';
 import { useAtomValue } from 'jotai';
 import classNames from 'classnames';
 import HeaderIcon from '../Icons/HeaderIcon';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 export type SetWidgetAttribute = <T extends string | number | boolean>(id: string, attributeName: keyof ExtendedLayoutItem, value: T) => void;
 
@@ -53,6 +54,7 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
   const widgetMapping = useAtomValue(widgetMappingAtom);
   const { headerLink } = widgetConfig.config || {};
   const hasHeader = headerLink && headerLink.href && headerLink.title;
+  const chrome = useChrome();
 
   const widgetData = useMemo(() => {
     return getWidget(widgetMapping, widgetType, () => setIsLoaded(true));
@@ -62,6 +64,14 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
     return null;
   }
 
+  const widgetLink = (href: string) => {
+    if (href.includes('https://')) {
+      return href;
+    } else {
+      return `${window.location.origin}${chrome.isBeta() ? '/preview' : ''}${href}`;
+    }
+  };
+
   const { node, module, scope } = widgetData;
 
   const dropdownItems = useMemo(() => {
@@ -192,7 +202,8 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
                   <Button
                     className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0"
                     variant="link"
-                    onClick={() => window.open(headerLink.href, '_blank')}
+                    component="a"
+                    href={headerLink.href ? widgetLink(headerLink.href) : undefined}
                   >
                     {headerLink.title}
                   </Button>

From 793ea1c338822ce6b7fe9c21178a19b77a759289 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Wed, 29 May 2024 08:56:27 -0500
Subject: [PATCH 2/4] use react-router-dom link

---
 src/Components/DnDLayout/GridTile.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Components/DnDLayout/GridTile.tsx b/src/Components/DnDLayout/GridTile.tsx
index 509d586..5879386 100644
--- a/src/Components/DnDLayout/GridTile.tsx
+++ b/src/Components/DnDLayout/GridTile.tsx
@@ -21,6 +21,7 @@ import {
 import { CompressIcon, EllipsisVIcon, ExpandIcon, GripVerticalIcon, LockIcon, MinusCircleIcon, UnlockIcon } from '@patternfly/react-icons';
 import React, { useMemo, useState } from 'react';
 import clsx from 'clsx';
+import { Link } from 'react-router-dom';
 
 import './GridTile.scss';
 import { Layout } from 'react-grid-layout';
@@ -199,14 +200,11 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
               )}
               {hasHeader && isLoaded && (
                 <FlexItem>
-                  <Button
-                    className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0"
-                    variant="link"
-                    component="a"
-                    href={headerLink.href ? widgetLink(headerLink.href) : undefined}
-                  >
-                    {headerLink.title}
-                  </Button>
+                  {headerLink.href && (
+                    <Link className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" to={widgetLink(headerLink.href)}>
+                      {headerLink.title}
+                    </Link>
+                  )}
                 </FlexItem>
               )}
             </Flex>

From 31d676dec581fca0211213b0806cd77ea115cbfe Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Thu, 30 May 2024 09:29:03 -0500
Subject: [PATCH 3/4] fix styling:

---
 src/Components/DnDLayout/GridTile.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/DnDLayout/GridTile.tsx b/src/Components/DnDLayout/GridTile.tsx
index 5879386..762b19c 100644
--- a/src/Components/DnDLayout/GridTile.tsx
+++ b/src/Components/DnDLayout/GridTile.tsx
@@ -201,8 +201,10 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
               {hasHeader && isLoaded && (
                 <FlexItem>
                   {headerLink.href && (
-                    <Link className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" to={widgetLink(headerLink.href)}>
-                      {headerLink.title}
+                    <Link to={widgetLink(headerLink.href)}>
+                      <Button className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" variant="link">
+                        {headerLink.title}
+                      </Button>
                     </Link>
                   )}
                 </FlexItem>

From 0613def2e85ad94a50edd32499f77985d7efd76d Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Wed, 3 Jul 2024 16:15:39 -0500
Subject: [PATCH 4/4] use diff link based off url type

---
 src/Components/DnDLayout/GridTile.tsx | 28 +++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Components/DnDLayout/GridTile.tsx b/src/Components/DnDLayout/GridTile.tsx
index 762b19c..30e6e8e 100644
--- a/src/Components/DnDLayout/GridTile.tsx
+++ b/src/Components/DnDLayout/GridTile.tsx
@@ -65,11 +65,21 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
     return null;
   }
 
-  const widgetLink = (href: string) => {
+  const widgetLink = (href: string, linkTitle: string | undefined) => {
     if (href.includes('https://')) {
-      return href;
+      return (
+        <Button component="a" href={href} className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" variant="link">
+          {linkTitle}
+        </Button>
+      );
     } else {
-      return `${window.location.origin}${chrome.isBeta() ? '/preview' : ''}${href}`;
+      return (
+        <Link to={href}>
+          <Button className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" variant="link">
+            {linkTitle}
+          </Button>
+        </Link>
+      );
     }
   };
 
@@ -198,17 +208,7 @@ const GridTile = ({ widgetType, isDragging, setIsDragging, setWidgetAttribute, w
               ) : (
                 <Skeleton width="50%" />
               )}
-              {hasHeader && isLoaded && (
-                <FlexItem>
-                  {headerLink.href && (
-                    <Link to={widgetLink(headerLink.href)}>
-                      <Button className="pf-v5-u-font-weight-bold pf-v5-u-font-size-xs pf-v5-u-p-0" variant="link">
-                        {headerLink.title}
-                      </Button>
-                    </Link>
-                  )}
-                </FlexItem>
-              )}
+              {hasHeader && isLoaded && <FlexItem>{headerLink.href && widgetLink(headerLink.href, headerLink.title)}</FlexItem>}
             </Flex>
           </Flex>
         </Flex>