From 6a1053b2f49fdd6c3403dd64e5d5813f011e1b45 Mon Sep 17 00:00:00 2001
From: Mgrdich <46796009+Mgrdich@users.noreply.github.com>
Date: Mon, 21 Mar 2022 21:00:11 +0400
Subject: [PATCH] Fixed frontend routing (#1745)

* Revert "Issue-1184: fix logo link and remove redundant path segment "ui" (#1658)"

This reverts commit b08e22915d5d5c18d6a576fbe119ad44599db0d5.

* changing them dashboard logo from an anchor tag to a react-router dom link

* Dashboard element redirect to the same place
---
 kafka-ui-react-app/src/components/App.tsx        |  8 ++++++--
 .../src/components/Cluster/Cluster.tsx           |  4 ++--
 .../Cluster/__tests__/Cluster.spec.tsx           |  2 +-
 .../__snapshots__/Actions.spec.tsx.snap          | 12 ++++++------
 .../__snapshots__/Details.spec.tsx.snap          | 16 ++++++++--------
 .../Connect/__tests__/Connect.spec.tsx           |  2 +-
 .../components/ConsumerGroups/ConsumerGroups.tsx |  6 +++---
 .../components/KsqlDb/__test__/KsqlDb.spec.tsx   |  2 +-
 .../__test__/__snapshots__/KsqlDb.spec.tsx.snap  |  4 ++--
 .../Topics/List/__tests__/List.spec.tsx          |  4 ++--
 .../components/Topics/Topic/Details/Details.tsx  | 15 +++++++++------
 .../src/components/Topics/Topic/Topic.tsx        |  6 +++---
 .../Breadcrumb/__tests__/Breadcrumb.spec.tsx     |  8 ++++----
 .../src/lib/__test__/paths.spec.ts               |  4 +++-
 kafka-ui-react-app/src/lib/paths.ts              |  2 +-
 15 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index 9d7acc2a1b..bfc6e65f1b 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -86,8 +86,12 @@ const App: React.FC = () => {
           />
           {areClustersFulfilled ? (
             <Switch>
-              <Route exact path={['/', '/clusters']} component={Dashboard} />
-              <Route path="/clusters/:clusterName" component={ClusterPage} />
+              <Route
+                exact
+                path={['/', '/ui', '/ui/clusters']}
+                component={Dashboard}
+              />
+              <Route path="/ui/clusters/:clusterName" component={ClusterPage} />
             </Switch>
           ) : (
             <PageLoader />
diff --git a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
index fd060f57cf..54538de4a7 100644
--- a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
+++ b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
@@ -99,8 +99,8 @@ const Cluster: React.FC = () => {
             />
           )}
           <Redirect
-            from="/clusters/:clusterName"
-            to="/clusters/:clusterName/brokers"
+            from="/ui/clusters/:clusterName"
+            to="/ui/clusters/:clusterName/brokers"
           />
         </Switch>
       </ClusterContext.Provider>
diff --git a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx
index 575b02a28a..cb26131eef 100644
--- a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx
+++ b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx
@@ -29,7 +29,7 @@ jest.mock('components/KsqlDb/KsqlDb', () => () => <div>KsqlDb</div>);
 describe('Cluster', () => {
   const renderComponent = (pathname: string) =>
     render(
-      <Route path="/clusters/:clusterName">
+      <Route path="/ui/clusters/:clusterName">
         <Cluster />
       </Route>,
       { pathname, store }
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap
index fa7c98dc99..2d1cd9580c 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap
@@ -145,7 +145,7 @@ exports[`Actions view matches snapshot 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
@@ -338,7 +338,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
@@ -516,7 +516,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
@@ -709,7 +709,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
@@ -902,7 +902,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
@@ -1080,7 +1080,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
     </span>
   </button>
   <a
-    href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
+    href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
     onClick={[Function]}
   >
     <button
diff --git a/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap
index a54a1897fb..5183fc4747 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`Details view matches snapshot 1`] = `
     <a
       aria-current="page"
       className="is-active"
-      href="/clusters/my-cluster/connects/my-connect/connectors/my-connector"
+      href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector"
       onClick={[Function]}
       style={Object {}}
     >
@@ -102,14 +102,14 @@ exports[`Details view matches snapshot 1`] = `
     </a>
     <a
       aria-current={null}
-      href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/tasks"
+      href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/tasks"
       onClick={[Function]}
     >
       Tasks
     </a>
     <a
       aria-current={null}
-      href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/config"
+      href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/config"
       onClick={[Function]}
     >
       Config
@@ -126,7 +126,7 @@ exports[`Details view matches snapshot 1`] = `
           Object {
             "hash": "",
             "key": "test",
-            "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+            "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
             "search": "",
           },
         ],
@@ -139,7 +139,7 @@ exports[`Details view matches snapshot 1`] = `
         "location": Object {
           "hash": "",
           "key": "test",
-          "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+          "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
           "search": "",
         },
         "push": [Function],
@@ -150,7 +150,7 @@ exports[`Details view matches snapshot 1`] = `
       Object {
         "hash": "",
         "key": "test",
-        "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+        "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
         "search": "",
       }
     }
@@ -162,8 +162,8 @@ exports[`Details view matches snapshot 1`] = `
           "connectName": "my-connect",
           "connectorName": "my-connector",
         },
-        "path": "/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
-        "url": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+        "path": "/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
+        "url": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
       }
     }
   />
diff --git a/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx b/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx
index e7547f2547..8708a2cea3 100644
--- a/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx
+++ b/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx
@@ -27,7 +27,7 @@ jest.mock('components/Connect/Edit/EditContainer', () => () => (
 describe('Connect', () => {
   const renderComponent = (pathname: string) =>
     render(
-      <Route path="/clusters/:clusterName">
+      <Route path="/ui/clusters/:clusterName">
         <Connect />
       </Route>,
       { pathname, store }
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx
index 5db4628857..9049a19f7e 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx
@@ -25,16 +25,16 @@ const ConsumerGroups: React.FC = () => {
       <Switch>
         <BreadcrumbRoute
           exact
-          path="/clusters/:clusterName/consumer-groups"
+          path="/ui/clusters/:clusterName/consumer-groups"
           component={List}
         />
         <BreadcrumbRoute
           exact
-          path="/clusters/:clusterName/consumer-groups/:consumerGroupID"
+          path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID"
           component={Details}
         />
         <BreadcrumbRoute
-          path="/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets"
+          path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets"
           component={ResetOffsets}
         />
       </Switch>
diff --git a/kafka-ui-react-app/src/components/KsqlDb/__test__/KsqlDb.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/__test__/KsqlDb.spec.tsx
index 16a7f70957..41eaedf927 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/__test__/KsqlDb.spec.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/__test__/KsqlDb.spec.tsx
@@ -4,7 +4,7 @@ import KsqlDb from 'components/KsqlDb/KsqlDb';
 import { StaticRouter } from 'react-router';
 
 describe('KsqlDb Component', () => {
-  const pathname = `clusters/local/ksql-db`;
+  const pathname = `ui/clusters/local/ksql-db`;
 
   describe('KsqlDb', () => {
     const setupComponent = () => (
diff --git a/kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap b/kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap
index 91c5e2823d..0a9e235e9b 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
   context={Object {}}
   location={
     Object {
-      "pathname": "clusters/local/ksql-db",
+      "pathname": "ui/clusters/local/ksql-db",
     }
   }
 >
@@ -21,7 +21,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
         "listen": [Function],
         "location": Object {
           "hash": "",
-          "pathname": "clusters/local/ksql-db",
+          "pathname": "ui/clusters/local/ksql-db",
           "search": "",
         },
         "push": [Function],
diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
index 3e6ca15129..4b07c5f2d0 100644
--- a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
@@ -131,10 +131,10 @@ describe('List', () => {
     const mockDeleteTopics = jest.fn();
     const mockClearTopicsMessages = jest.fn();
     jest.useFakeTimers();
-    const pathname = '/clusters/local/topics';
+    const pathname = '/ui/clusters/local/topics';
     const component = mount(
       <StaticRouter location={{ pathname }}>
-        <Route path="/clusters/:clusterName">
+        <Route path="/ui/clusters/:clusterName">
           <ClusterContext.Provider
             value={{
               isReadOnly: false,
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
index 982fe4fdeb..b3fe6b6e19 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
@@ -94,7 +94,10 @@ const Details: React.FC<Props> = ({
     <div>
       <PageHeading text={topicName}>
         <HeaderControlsWrapper>
-          <Route exact path="/clusters/:clusterName/topics/:topicName/messages">
+          <Route
+            exact
+            path="/ui/clusters/:clusterName/topics/:topicName/messages"
+          >
             <Button
               buttonSize="M"
               buttonType="primary"
@@ -105,7 +108,7 @@ const Details: React.FC<Props> = ({
             </Button>
           </Route>
           {!isReadOnly && !isInternal && (
-            <Route path="/clusters/:clusterName/topics/:topicName">
+            <Route path="/ui/clusters/:clusterName/topics/:topicName">
               <Dropdown label={<VerticalElipsisIcon />} right>
                 <DropdownItem
                   onClick={() =>
@@ -200,22 +203,22 @@ const Details: React.FC<Props> = ({
       <Switch>
         <Route
           exact
-          path="/clusters/:clusterName/topics/:topicName/messages"
+          path="/ui/clusters/:clusterName/topics/:topicName/messages"
           component={Messages}
         />
         <Route
           exact
-          path="/clusters/:clusterName/topics/:topicName/settings"
+          path="/ui/clusters/:clusterName/topics/:topicName/settings"
           component={SettingsContainer}
         />
         <Route
           exact
-          path="/clusters/:clusterName/topics/:topicName"
+          path="/ui/clusters/:clusterName/topics/:topicName"
           component={OverviewContainer}
         />
         <Route
           exact
-          path="/clusters/:clusterName/topics/:topicName/consumer-groups"
+          path="/ui/clusters/:clusterName/topics/:topicName/consumer-groups"
           component={TopicConsumerGroupsContainer}
         />
       </Switch>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
index e2180b9d39..3b821658d2 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
@@ -35,16 +35,16 @@ const Topic: React.FC<TopicProps> = ({
     <Switch>
       <Route
         exact
-        path="/clusters/:clusterName/topics/:topicName/edit"
+        path="/ui/clusters/:clusterName/topics/:topicName/edit"
         component={EditContainer}
       />
       <Route
         exact
-        path="/clusters/:clusterName/topics/:topicName/message"
+        path="/ui/clusters/:clusterName/topics/:topicName/message"
         component={SendMessage}
       />
       <Route
-        path="/clusters/:clusterName/topics/:topicName"
+        path="/ui/clusters/:clusterName/topics/:topicName"
         component={DetailsContainer}
       />
     </Switch>
diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx
index b0d67d72a1..2012305ef0 100644
--- a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx
@@ -4,11 +4,11 @@ import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.prov
 import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 import { render } from 'lib/testHelpers';
 
-const createTopicPath = '/clusters/local/topics/create-new';
-const createTopicRoutePath = '/clusters/:clusterName/topics/create-new';
+const createTopicPath = '/ui/clusters/local/topics/create-new';
+const createTopicRoutePath = '/ui/clusters/:clusterName/topics/create-new';
 
-const topicPath = '/clusters/secondLocal/topics/topic-name';
-const topicRoutePath = '/clusters/:clusterName/topics/:topicName';
+const topicPath = '/ui/clusters/secondLocal/topics/topic-name';
+const topicRoutePath = '/ui/clusters/:clusterName/topics/:topicName';
 
 describe('Breadcrumb component', () => {
   const setupComponent = (pathname: string, routePath: string) =>
diff --git a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
index 96deab97e4..3103114233 100644
--- a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
+++ b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
@@ -15,7 +15,9 @@ describe('Paths', () => {
     );
   });
   it('clusterPath', () => {
-    expect(paths.clusterPath(clusterName)).toEqual(`/clusters/${clusterName}`);
+    expect(paths.clusterPath(clusterName)).toEqual(
+      `/ui/clusters/${clusterName}`
+    );
   });
   it('clusterBrokersPath', () => {
     expect(paths.clusterBrokersPath(clusterName)).toEqual(
diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts
index 9aec5dc358..efa8fda48a 100644
--- a/kafka-ui-react-app/src/lib/paths.ts
+++ b/kafka-ui-react-app/src/lib/paths.ts
@@ -12,7 +12,7 @@ export const gitCommitPath = (commit: string) =>
   `${GIT_REPO_LINK}/commit/${commit}`;
 
 export const clusterPath = (clusterName: ClusterName) =>
-  `/clusters/${clusterName}`;
+  `/ui/clusters/${clusterName}`;
 
 // Brokers
 export const clusterBrokersPath = (clusterName: ClusterName) =>