NO-ISSUE: Adapting code for decoupling tasks (#2592)

* Adapting code for decoupling tasks * Changes related with decoupling
openshift-assisted · Jul 12, 2024 · 7267cff · 7267cff
1 parent 9564741
commit 7267cff
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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>
 );