From e6308767ec9487faaff4b02bdcf4282247bd41d7 Mon Sep 17 00:00:00 2001
From: Jason Madigan <jason@jasonmadigan.com>
Date: Fri, 28 Jun 2024 14:20:03 +0100
Subject: [PATCH] ResourceLinks

---
 src/components/ExamplePage.tsx | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/components/ExamplePage.tsx b/src/components/ExamplePage.tsx
index 211727d..1193377 100644
--- a/src/components/ExamplePage.tsx
+++ b/src/components/ExamplePage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useParams, useHistory, useLocation } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import {
@@ -15,7 +15,7 @@ import {
   Td,
   Tbody,
 } from '@patternfly/react-table';
-import { useK8sWatchResource, K8sResourceCommon, NamespaceBar } from '@openshift-console/dynamic-plugin-sdk';
+import { useK8sWatchResource, K8sResourceCommon, NamespaceBar, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import './example.css';
 
 interface Resource {
@@ -48,23 +48,8 @@ const ExamplePage: React.FC = () => {
   const { t } = useTranslation('plugin__console-plugin-template');
   const { ns } = useParams<{ ns: string }>();
   const history = useHistory();
-  const location = useLocation();
   const [namespace, setNamespace] = React.useState<string>(ns || '');
 
-  // Inline function to extract namespace from URL
-  const useNamespaceFromURL = (): string => {
-    const match = location.pathname.match(/\/k8s\/ns\/([^/]+)/);
-    return match ? match[1] : '';
-  };
-
-  React.useEffect(() => {
-    const extractedNamespace = useNamespaceFromURL();
-    if (extractedNamespace && extractedNamespace !== namespace) {
-      setNamespace(extractedNamespace);
-    }
-    console.log(`Initial namespace: ${namespace}`);
-  }, [location.pathname]);
-
   const handleNamespaceChange = (newNamespace: string) => {
     console.log(`Namespace changed to: ${newNamespace}`);
     setNamespace(newNamespace);
@@ -72,6 +57,10 @@ const ExamplePage: React.FC = () => {
     history.push(url);
   };
 
+  React.useEffect(() => {
+    console.log(`Initial namespace: ${namespace}`);
+  }, []);
+
   React.useEffect(() => {
     console.log(`Namespace updated: ${namespace}`);
   }, [namespace]);
@@ -100,8 +89,12 @@ const ExamplePage: React.FC = () => {
           <Tbody>
             {data.map((item) => (
               <Tr key={item.metadata.uid}>
-                <Td dataLabel={t('Name')}>{item.metadata.name}</Td>
-                <Td dataLabel={t('Namespace')}>{item.metadata.namespace}</Td>
+                <Td dataLabel={t('Name')}>
+                  <ResourceLink groupVersionKind={resource.gvk} name={item.metadata.name} title={item.metadata.uid} />
+                </Td>
+                <Td dataLabel={t('Namespace')}>
+                  <ResourceLink groupVersionKind={{group: resource.gvk.group, version: resource.gvk.version, kind: "Namespace"}} name={item.metadata.namespace} title={item.metadata.namespace} />
+                </Td>
                 <Td dataLabel={t('Age')}>{formatTimestamp(item.metadata.creationTimestamp)}</Td>
                 {resource.name === 'Gateways' && (
                   <Td dataLabel={t('Address')}>