From c28ee0f08b24db31f19d7ab239ae140d326e2b2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mau=20Rodr=C3=ADguez=20Morales?=
 <3047213+yvaeltercero@users.noreply.github.com>
Date: Tue, 15 Mar 2022 07:45:42 -0600
Subject: [PATCH] Fix breadcrumbs behaviour for connectors (#1693)

Co-authored-by: Mau Rodriguez Morales <mrodriguezmorales@provectus.com>
Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
---
 .../src/components/Connect/Connect.tsx               | 12 +++++++++++-
 kafka-ui-react-app/src/lib/paths.ts                  |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Connect/Connect.tsx b/kafka-ui-react-app/src/components/Connect/Connect.tsx
index 311535a044..a3106dbbc2 100644
--- a/kafka-ui-react-app/src/components/Connect/Connect.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Connect.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { Switch } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
 import {
   clusterConnectorsPath,
+  clusterConnectsPath,
   clusterConnectorNewPath,
   clusterConnectConnectorPath,
   clusterConnectConnectorEditPath,
+  clusterConnectConnectorsPath,
 } from 'lib/paths';
 import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
@@ -43,6 +45,14 @@ const Connect: React.FC = () => (
         )}
         component={DetailsContainer}
       />
+      <Redirect
+        from={clusterConnectConnectorsPath(':clusterName', ':connectName')}
+        to={clusterConnectorsPath(':clusterName')}
+      />
+      <Redirect
+        from={`${clusterConnectsPath(':clusterName')}/:connectName`}
+        to={clusterConnectorsPath(':clusterName')}
+      />
     </Switch>
   </div>
 );
diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts
index 5a2b41458c..9aec5dc358 100644
--- a/kafka-ui-react-app/src/lib/paths.ts
+++ b/kafka-ui-react-app/src/lib/paths.ts
@@ -85,7 +85,7 @@ export const clusterConnectorsPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/connectors`;
 export const clusterConnectorNewPath = (clusterName: ClusterName) =>
   `${clusterConnectorsPath(clusterName)}/create-new`;
-const clusterConnectConnectorsPath = (
+export const clusterConnectConnectorsPath = (
   clusterName: ClusterName,
   connectName: ConnectName
 ) => `${clusterConnectsPath(clusterName)}/${connectName}/connectors`;