From 7267cff3be3d6b6714738b87dbe66a1c28469f6c Mon Sep 17 00:00:00 2001
From: Montse Ortega <ammont82@users.noreply.github.com>
Date: Fri, 12 Jul 2024 07:30:47 +0200
Subject: [PATCH] NO-ISSUE: Adapting code for decoupling tasks (#2592)

* Adapting code for decoupling tasks

* Changes related with decoupling
---
 .../AssistedInstallerDetailCard.tsx           | 25 +++++++++++--------
 .../clusters/ClusterBreadcrumbs.tsx           | 11 ++++----
 .../ocm/components/ui/Buttons/BackButton.tsx  |  6 ++---
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
index ae3704131a..ba842e3227 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
@@ -29,6 +29,7 @@ import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { usePullSecret } from '../../hooks';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeatureDetection } from '../../hooks/use-feature-detection';
+import { BrowserRouter } from 'react-router-dom';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;
@@ -59,12 +60,14 @@ const ClusterLoadFailed = ({ clusterId, error }: { clusterId: Cluster['id']; err
         </Title>
       </CardHeader>
       <CardBody>
-        <ErrorState
-          title="Failed to fetch the cluster"
-          fetchData={fetchCluster}
-          actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
-          content={error}
-        />
+        <BrowserRouter>
+          <ErrorState
+            title="Failed to fetch the cluster"
+            fetchData={fetchCluster}
+            actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+            content={error}
+          />
+        </BrowserRouter>
       </CardBody>
     </Card>
   );
@@ -78,10 +81,12 @@ const LoadingDefaultConfigFailedCard = () => (
       </Title>
     </CardHeader>
     <CardBody>
-      <ErrorState
-        title="Failed to retrieve the default configuration"
-        actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
-      />
+      <BrowserRouter>
+        <ErrorState
+          title="Failed to retrieve the default configuration"
+          actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+        />
+      </BrowserRouter>
     </CardBody>
   </Card>
 );
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
index e2a9090866..711e2e5aef 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
@@ -13,13 +13,12 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
   <PageSection variant={PageSectionVariants.light}>
     {(clusterName || isInOcm) && (
       <Breadcrumb>
-        <BreadcrumbItem>
-          <Link to={'/'}>Clusters</Link>
-        </BreadcrumbItem>
+        <BreadcrumbItem render={() => <Link to={'/'}>Clusters</Link>} />
+
         {clusterName ? (
-          <BreadcrumbItem>
-            <Link to={`${routeBasePath}/clusters`}>Assisted Clusters</Link>
-          </BreadcrumbItem>
+          <BreadcrumbItem
+            render={() => <Link to={`${routeBasePath}/clusters`}>Assisted Clusters</Link>}
+          />
         ) : (
           <BreadcrumbItem isActive>Assisted Clusters</BreadcrumbItem>
         )}
diff --git a/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx b/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
index 1d15371dc9..35bbf58edb 100644
--- a/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
+++ b/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
@@ -10,7 +10,7 @@ export type BackButtonProps = {
   variant?: ButtonProps['variant'];
 };
 export const BackButton = ({ to, variant = 'secondary' }: BackButtonProps) => (
-  <Button variant={variant} component={(props) => <Link to={to} {...props} />}>
-    Back
-  </Button>
+  <Link to={to}>
+    <Button variant={variant}>Back</Button>
+  </Link>
 );