diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts
index 39e9e83b05..cb01bd94fc 100644
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@@ -1,4 +1,5 @@
import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
export const Layout = styled.div`
min-width: 1200px;
@@ -166,7 +167,7 @@ export const Span = styled.span(
`
);
-export const Hyperlink = styled.a(
+export const Hyperlink = styled(Link)(
({ theme }) => css`
position: relative;
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index 9be24aa71d..9d7acc2a1b 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -58,7 +58,7 @@ const App: React.FC = () => {
-
+
UI for Apache Kafka
@@ -86,12 +86,8 @@ const App: React.FC = () => {
/>
{areClustersFulfilled ? (
-
-
+
+
) : (
diff --git a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
index 54538de4a7..fd060f57cf 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 = () => {
/>
)}
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 cb26131eef..575b02a28a 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', () => () => KsqlDb
);
describe('Cluster', () => {
const renderComponent = (pathname: string) =>
render(
-
+
,
{ 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 2a7e19bd94..14b0ba8d8c 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`] = `
Tasks
Config
@@ -122,7 +122,7 @@ exports[`Details view matches snapshot 1`] = `
Object {
"hash": "",
"key": "test",
- "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+ "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "",
},
],
@@ -135,7 +135,7 @@ exports[`Details view matches snapshot 1`] = `
"location": Object {
"hash": "",
"key": "test",
- "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+ "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "",
},
"push": [Function],
@@ -146,7 +146,7 @@ exports[`Details view matches snapshot 1`] = `
Object {
"hash": "",
"key": "test",
- "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+ "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "",
}
}
@@ -158,8 +158,8 @@ exports[`Details view matches snapshot 1`] = `
"connectName": "my-connect",
"connectorName": "my-connector",
},
- "path": "/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
- "url": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+ "path": "/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
+ "url": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
}
}
/>
diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
index b2725929e1..683f1e9cc1 100644
--- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
@@ -507,14 +507,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
>
hdfs-source-connector
@@ -560,14 +560,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
color="gray"
>
test-topic
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 8708a2cea3..e7547f2547 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(
-
+
,
{ 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 9049a19f7e..5db4628857 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 = () => {
diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx
index 2a2b7d6184..3387f916cf 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx
@@ -12,7 +12,7 @@ import theme from 'theme/theme';
const mockStore = configureStore();
describe('KsqlDb Query Component', () => {
- const pathname = `ui/clusters/local/ksql-db/query`;
+ const pathname = `clusters/local/ksql-db/query`;
it('Renders result', () => {
const initialState: Partial = {
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 41eaedf927..16a7f70957 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 = `ui/clusters/local/ksql-db`;
+ const pathname = `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 0a9e235e9b..91c5e2823d 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": "ui/clusters/local/ksql-db",
+ "pathname": "clusters/local/ksql-db",
}
}
>
@@ -21,7 +21,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
"listen": [Function],
"location": Object {
"hash": "",
- "pathname": "ui/clusters/local/ksql-db",
+ "pathname": "clusters/local/ksql-db",
"search": "",
},
"push": [Function],
diff --git a/kafka-ui-react-app/src/components/Nav/Nav.tsx b/kafka-ui-react-app/src/components/Nav/Nav.tsx
index c28465e705..12108fe435 100644
--- a/kafka-ui-react-app/src/components/Nav/Nav.tsx
+++ b/kafka-ui-react-app/src/components/Nav/Nav.tsx
@@ -13,7 +13,7 @@ interface Props {
const Nav: React.FC = ({ areClustersFulfilled, clusters }) => (