From c1d4654816848a6dbceb287ee35bea30652d732c Mon Sep 17 00:00:00 2001
From: Oleg Shuralev <workshur@gmail.com>
Date: Wed, 10 Mar 2021 23:16:06 +0300
Subject: [PATCH] Add cluster wrapper + cleanup

---
 kafka-ui-react-app/src/components/App.tsx     | 30 +++----------------
 .../src/components/Cluster/Cluster.tsx        | 30 +++++++++++++++++++
 .../Schemas/Details/__test__/Details.spec.tsx |  1 +
 .../__snapshots__/Details.spec.tsx.snap       | 16 +++++++---
 4 files changed, 47 insertions(+), 30 deletions(-)
 create mode 100644 kafka-ui-react-app/src/components/Cluster/Cluster.tsx

diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index a5fe4f6f89..66d77f6971 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 import './App.scss';
-import BrokersContainer from './Brokers/BrokersContainer';
-import TopicsContainer from './Topics/TopicsContainer';
 import NavContainer from './Nav/NavContainer';
 import PageLoader from './common/PageLoader/PageLoader';
 import Dashboard from './Dashboard/Dashboard';
-import ConsumersGroupsContainer from './ConsumerGroups/ConsumersGroupsContainer';
-import SchemasContainer from './Schemas/SchemasContainer';
+import Cluster from './Cluster/Cluster';
 
 interface AppProps {
   isClusterListFetched: boolean;
@@ -44,29 +41,10 @@ const App: React.FC<AppProps> = ({
               path={['/', '/ui', '/ui/clusters']}
               component={Dashboard}
             />
-            <Route
-              path="/ui/clusters/:clusterName/brokers"
-              component={BrokersContainer}
-            />
-            <Route
-              path="/ui/clusters/:clusterName/topics"
-              component={TopicsContainer}
-            />
-            <Route
-              path="/ui/clusters/:clusterName/consumer-groups"
-              component={ConsumersGroupsContainer}
-            />
-            <Route
-              path="/ui/clusters/:clusterName/schemas"
-              component={SchemasContainer}
-            />
-            <Redirect
-              from="/ui/clusters/:clusterName"
-              to="/ui/clusters/:clusterName/brokers"
-            />
+            <Route path="/ui/clusters/:clusterName" component={Cluster} />
           </Switch>
         ) : (
-          <PageLoader />
+          <PageLoader fullHeight />
         )}
       </main>
     </div>
diff --git a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
new file mode 100644
index 0000000000..6596f47d0f
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import BrokersContainer from 'components/Brokers/BrokersContainer';
+import TopicsContainer from 'components/Topics/TopicsContainer';
+import ConsumersGroupsContainer from 'components/ConsumerGroups/ConsumersGroupsContainer';
+import Schemas from 'components/Schemas/Schemas';
+
+const Cluster: React.FC = () => (
+  <Switch>
+    <Route
+      path="/ui/clusters/:clusterName/brokers"
+      component={BrokersContainer}
+    />
+    <Route
+      path="/ui/clusters/:clusterName/topics"
+      component={TopicsContainer}
+    />
+    <Route
+      path="/ui/clusters/:clusterName/consumer-groups"
+      component={ConsumersGroupsContainer}
+    />
+    <Route path="/ui/clusters/:clusterName/schemas" component={Schemas} />
+    <Redirect
+      from="/ui/clusters/:clusterName"
+      to="/ui/clusters/:clusterName/brokers"
+    />
+  </Switch>
+);
+
+export default Cluster;
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
index 816f20380c..bc407cdc2f 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
@@ -24,6 +24,7 @@ describe('Details', () => {
   describe('View', () => {
     const setupWrapper = (props: Partial<DetailsProps> = {}) => (
       <Details
+        subject={schema.subject}
         schema={schema}
         clusterName="Test cluster"
         fetchSchemaVersions={jest.fn()}
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
index 90a54dcebc..337111c166 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
@@ -16,7 +16,9 @@ exports[`Details View Initial state matches snapshot 1`] = `
           },
         ]
       }
-    />
+    >
+      test
+    </Breadcrumb>
   </div>
   <div
     className="box"
@@ -121,7 +123,9 @@ exports[`Details View when page with schema versions is loading matches snapshot
           },
         ]
       }
-    />
+    >
+      test
+    </Breadcrumb>
   </div>
   <PageLoader />
 </div>
@@ -143,7 +147,9 @@ exports[`Details View when page with schema versions loaded when schema has vers
           },
         ]
       }
-    />
+    >
+      test
+    </Breadcrumb>
   </div>
   <div
     className="box"
@@ -275,7 +281,9 @@ exports[`Details View when page with schema versions loaded when versions are em
           },
         ]
       }
-    />
+    >
+      test
+    </Breadcrumb>
   </div>
   <div
     className="box"