Use back link instead of breadcrumbs (#2430)

* Use back link instead of breadcrumbs

* Unify topic pages

* Unify topic page actions

* fix

* Remove unused test

kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx

@@ -8,6 +8,7 @@ import {
   clusterBrokerMetricsRelativePath,
   ClusterBrokerParam,
   clusterBrokerPath,
+  clusterBrokersPath,
 } from 'lib/paths';
 import { useClusterStats } from 'lib/hooks/api/clusters';
 import { useBrokers } from 'lib/hooks/api/brokers';
@@ -31,7 +32,11 @@ const Broker: React.FC = () => {
   );
   return (
     <>
-      <PageHeading text={`Broker ${brokerId}`} />
+      <PageHeading
+        text={`Broker ${brokerId}`}
+        backTo={clusterBrokersPath(clusterName)}
+        backText="Brokers"
+      />
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator label="Segment Size">

kafka-ui-react-app/src/components/Brokers/Brokers.tsx

@@ -3,26 +3,11 @@ import { Route, Routes } from 'react-router-dom';
 import { getNonExactPath, RouteParams } from 'lib/paths';
 import BrokersList from 'components/Brokers/BrokersList/BrokersList';
 import Broker from 'components/Brokers/Broker/Broker';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
 const Brokers: React.FC = () => (
   <Routes>
-    <Route
-      index
-      element={
-        <BreadcrumbRoute>
-          <BrokersList />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={getNonExactPath(RouteParams.brokerId)}
-      element={
-        <BreadcrumbRoute>
-          <Broker />
-        </BreadcrumbRoute>
-      }
-    />
+    <Route index element={<BrokersList />} />
+    <Route path={getNonExactPath(RouteParams.brokerId)} element={<Broker />} />
   </Routes>
 );
 

kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -60,7 +60,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Broker" />
+      <PageHeading text="Brokers" />
       <Metrics.Wrapper>
         <Metrics.Section title="Uptime">
           <Metrics.Indicator label="Total Broker">

kafka-ui-react-app/src/components/Cluster/Cluster.tsx

@@ -14,9 +14,6 @@ import {
   getNonExactPath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
-import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.provider';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { useClusters } from 'lib/hooks/api/clusters';
 import Brokers from 'components/Brokers/Brokers';
@@ -60,84 +57,53 @@ const Cluster: React.FC = () => {
   }, [clusterName, data]);
 
   return (
-    <BreadcrumbProvider>
-      <Breadcrumb />
-      <Suspense fallback={<PageLoader />}>
-        <ClusterContext.Provider value={contextValue}>
-          <Routes>
+    <Suspense fallback={<PageLoader />}>
+      <ClusterContext.Provider value={contextValue}>
+        <Routes>
+          <Route
+            path={getNonExactPath(clusterBrokerRelativePath)}
+            element={<Brokers />}
+          />
+          <Route
+            path={getNonExactPath(clusterTopicsRelativePath)}
+            element={<Topics />}
+          />
+          <Route
+            path={getNonExactPath(clusterConsumerGroupsRelativePath)}
+            element={<ConsumerGroups />}
+          />
+          {contextValue.hasSchemaRegistryConfigured && (
             <Route
-              path={getNonExactPath(clusterBrokerRelativePath)}
-              element={
-                <BreadcrumbRoute>
-                  <Brokers />
-                </BreadcrumbRoute>
-              }
+              path={getNonExactPath(clusterSchemasRelativePath)}
+              element={<Schemas />}
             />
+          )}
+          {contextValue.hasKafkaConnectConfigured && (
             <Route
-              path={getNonExactPath(clusterTopicsRelativePath)}
-              element={
-                <BreadcrumbRoute>
-                  <Topics />
-                </BreadcrumbRoute>
-              }
+              path={getNonExactPath(clusterConnectsRelativePath)}
+              element={<Connect />}
             />
+          )}
+          {contextValue.hasKafkaConnectConfigured && (
             <Route
-              path={getNonExactPath(clusterConsumerGroupsRelativePath)}
-              element={
-                <BreadcrumbRoute>
-                  <ConsumerGroups />
-                </BreadcrumbRoute>
-              }
+              path={getNonExactPath(clusterConnectorsRelativePath)}
+              element={<Connect />}
             />
-            {contextValue.hasSchemaRegistryConfigured && (
-              <Route
-                path={getNonExactPath(clusterSchemasRelativePath)}
-                element={
-                  <BreadcrumbRoute>
-                    <Schemas />
-                  </BreadcrumbRoute>
-                }
-              />
-            )}
-            {contextValue.hasKafkaConnectConfigured && (
-              <Route
-                path={getNonExactPath(clusterConnectsRelativePath)}
-                element={
-                  <BreadcrumbRoute>
-                    <Connect />
-                  </BreadcrumbRoute>
-                }
-              />
-            )}
-            {contextValue.hasKafkaConnectConfigured && (
-              <Route
-                path={getNonExactPath(clusterConnectorsRelativePath)}
-                element={
-                  <BreadcrumbRoute>
-                    <Connect />
-                  </BreadcrumbRoute>
-                }
-              />
-            )}
-            {contextValue.hasKsqlDbConfigured && (
-              <Route
-                path={getNonExactPath(clusterKsqlDbRelativePath)}
-                element={
-                  <BreadcrumbRoute>
-                    <KsqlDb />
-                  </BreadcrumbRoute>
-                }
-              />
-            )}
+          )}
+          {contextValue.hasKsqlDbConfigured && (
             <Route
-              path="/"
-              element={<Navigate to={clusterBrokerRelativePath} replace />}
+              path={getNonExactPath(clusterKsqlDbRelativePath)}
+              element={<KsqlDb />}
             />
-          </Routes>
-          <Outlet />
-        </ClusterContext.Provider>
-      </Suspense>
-    </BreadcrumbProvider>
+          )}
+          <Route
+            path="/"
+            element={<Navigate to={clusterBrokerRelativePath} replace />}
+          />
+        </Routes>
+        <Outlet />
+      </ClusterContext.Provider>
+    </Suspense>
   );
 };
 

kafka-ui-react-app/src/components/Connect/Connect.tsx

@@ -9,7 +9,6 @@ import {
   getNonExactPath,
   clusterConnectorsPath,
 } from 'lib/paths';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 import useAppParams from 'lib/hooks/useAppParams';
 
 import ListPage from './List/ListPage';
@@ -22,37 +21,15 @@ const Connect: React.FC = () => {
 
   return (
     <Routes>
-      <Route
-        index
-        element={
-          <BreadcrumbRoute>
-            <ListPage />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={clusterConnectorNewRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <New />
-          </BreadcrumbRoute>
-        }
-      />
+      <Route index element={<ListPage />} />
+      <Route path={clusterConnectorNewRelativePath} element={<New />} />
       <Route
         path={clusterConnectConnectorEditRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <Edit />
-          </BreadcrumbRoute>
-        }
+        element={<Edit />}
       />
       <Route
         path={getNonExactPath(clusterConnectConnectorRelativePath)}
-        element={
-          <BreadcrumbRoute>
-            <DetailsPage />
-          </BreadcrumbRoute>
-        }
+        element={<DetailsPage />}
       />
       <Route
         path={clusterConnectConnectorsRelativePath}

kafka-ui-react-app/src/components/Connect/Details/DetailsPage.tsx

@@ -7,6 +7,7 @@ import {
   clusterConnectConnectorPath,
   clusterConnectConnectorTasksPath,
   clusterConnectConnectorTasksRelativePath,
+  clusterConnectorsPath,
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
 import Navbar from 'components/common/Navigation/Navbar.styled';
@@ -24,7 +25,11 @@ const DetailsPage: React.FC = () => {
 
   return (
     <div>
-      <PageHeading text={connectorName}>
+      <PageHeading
+        text={connectorName}
+        backTo={clusterConnectorsPath(clusterName)}
+        backText="Connectors"
+      >
         <Actions />
       </PageHeading>
       <Navbar role="navigation">

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -4,7 +4,11 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
+import {
+  clusterConnectConnectorPath,
+  clusterConnectorsPath,
+  ClusterNameRoute,
+} from 'lib/paths';
 import yup from 'lib/yupExtended';
 import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
@@ -91,7 +95,11 @@ const New: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading text="Create new connector" />
+      <PageHeading
+        text="Create new connector"
+        backTo={clusterConnectorsPath(clusterName)}
+        backText="Connectors"
+      />
       <S.NewConnectFormStyled
         onSubmit={handleSubmit(onSubmit)}
         aria-label="Create connect form"

kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx

@@ -3,7 +3,6 @@ import { Route, Routes } from 'react-router-dom';
 import Details from 'components/ConsumerGroups/Details/Details';
 import ListContainer from 'components/ConsumerGroups/List/ListContainer';
 import ResetOffsets from 'components/ConsumerGroups/Details/ResetOffsets/ResetOffsets';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 import {
   clusterConsumerGroupResetOffsetsRelativePath,
   RouteParams,
@@ -12,29 +11,11 @@ import {
 const ConsumerGroups: React.FC = () => {
   return (
     <Routes>
-      <Route
-        index
-        element={
-          <BreadcrumbRoute>
-            <ListContainer />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={RouteParams.consumerGroupID}
-        element={
-          <BreadcrumbRoute>
-            <Details />
-          </BreadcrumbRoute>
-        }
-      />
+      <Route index element={<ListContainer />} />
+      <Route path={RouteParams.consumerGroupID} element={<Details />} />
       <Route
         path={clusterConsumerGroupResetOffsetsRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <ResetOffsets />
-          </BreadcrumbRoute>
-        }
+        element={<ResetOffsets />}
       />
     </Routes>
   );

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import useAppParams from 'lib/hooks/useAppParams';
 import {
   clusterConsumerGroupResetRelativePath,
+  clusterConsumerGroupsPath,
   ClusterGroupParam,
 } from 'lib/paths';
 import PageLoader from 'components/common/PageLoader/PageLoader';
@@ -64,7 +65,11 @@ const Details: React.FC = () => {
   return (
     <div>
       <div>
-        <PageHeading text={consumerGroupID}>
+        <PageHeading
+          text={consumerGroupID}
+          backTo={clusterConsumerGroupsPath(clusterName)}
+          backText="Consumers"
+        >
           {!isReadOnly && (
             <Dropdown>
               <DropdownItem onClick={onResetOffsets}>Reset offset</DropdownItem>

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ConsumerGroupOffsetsResetType } from 'generated-sources';
-import { ClusterGroupParam } from 'lib/paths';
+import { clusterConsumerGroupsPath, ClusterGroupParam } from 'lib/paths';
 import {
   Controller,
   FormProvider,
@@ -170,7 +170,11 @@ const ResetOffsets: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading text="Reset offsets" />
+      <PageHeading
+        text="Reset offsets"
+        backTo={clusterConsumerGroupsPath(clusterName)}
+        backText="Consumers"
+      />
       <S.Wrapper>
         <form onSubmit={handleSubmit(onSubmit)}>
           <S.MainSelectors>

kafka-ui-react-app/src/components/KsqlDb/KsqlDb.tsx

@@ -3,27 +3,12 @@ import { Route, Routes } from 'react-router-dom';
 import { clusterKsqlDbQueryRelativePath } from 'lib/paths';
 import List from 'components/KsqlDb/List/List';
 import Query from 'components/KsqlDb/Query/Query';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
 const KsqlDb: React.FC = () => {
   return (
     <Routes>
-      <Route
-        path="/*"
-        element={
-          <BreadcrumbRoute>
-            <List />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={clusterKsqlDbQueryRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <Query />
-          </BreadcrumbRoute>
-        }
-      />
+      <Route path="/*" element={<List />} />
+      <Route path={clusterKsqlDbQueryRelativePath} element={<Query />} />
     </Routes>
   );
 };

kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx

@@ -8,9 +8,10 @@ import {
 import { getKsqlExecution } from 'redux/reducers/ksqlDb/selectors';
 import { BASE_PARAMS } from 'lib/constants';
 import { KsqlResponse, KsqlTableResponse } from 'generated-sources';
-import { ClusterNameRoute } from 'lib/paths';
+import { clusterKsqlDbPath, ClusterNameRoute } from 'lib/paths';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import { showAlert, showSuccessAlert } from 'lib/errorHandling';
+import PageHeading from 'components/common/PageHeading/PageHeading';
 
 import type { FormValues } from './QueryForm/QueryForm';
 import * as S from './Query.styled';
@@ -200,6 +201,11 @@ const Query: FC = () => {
 
   return (
     <>
+      <PageHeading
+        text="Query"
+        backText="KSQL DB"
+        backTo={clusterKsqlDbPath(clusterName)}
+      />
       <QueryForm
         fetching={fetching}
         hasResults={!!KSQLTable}

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -4,6 +4,7 @@ import {
   ClusterSubjectParam,
   clusterSchemaEditPageRelativePath,
   clusterSchemaSchemaComparePageRelativePath,
+  clusterSchemasPath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
@@ -74,7 +75,11 @@ const Details: React.FC = () => {
   }
   return (
     <>
-      <PageHeading text={schema.subject}>
+      <PageHeading
+        text={schema.subject}
+        backText="Schema Registry"
+        backTo={clusterSchemasPath(clusterName)}
+      >
         {!isReadOnly && (
           <>
             <Button

kafka-ui-react-app/src/components/Schemas/Diff/Diff.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { SchemaSubject } from 'generated-sources';
-import { clusterSchemaComparePath, ClusterSubjectParam } from 'lib/paths';
+import {
+  clusterSchemaComparePath,
+  clusterSchemasPath,
+  ClusterSubjectParam,
+} from 'lib/paths';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import DiffViewer from 'components/common/DiffViewer/DiffViewer';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -13,6 +17,7 @@ import Select from 'components/common/Select/Select';
 import { useAppDispatch } from 'lib/hooks/redux';
 import { resetLoaderById } from 'redux/reducers/loader/loaderSlice';
 import useAppParams from 'lib/hooks/useAppParams';
+import PageHeading from 'components/common/PageHeading/PageHeading';
 
 import * as S from './Diff.styled';
 
@@ -66,109 +71,120 @@ const Diff: React.FC<DiffProps> = ({ versions, areVersionsFetched }) => {
   } = methods;
 
   return (
-    <S.Section>
-      {areVersionsFetched ? (
-        <S.DiffBox>
-          <S.DiffTilesWrapper>
-            <S.DiffTile>
-              <S.DiffVersionsSelect>
-                <Controller
-                  defaultValue={leftVersion}
-                  control={control}
-                  rules={{ required: true }}
-                  name="schemaType"
-                  render={({ field: { name } }) => (
-                    <Select
-                      id="left-select"
-                      name={name}
-                      value={
-                        leftVersion === '' ? versions[0].version : leftVersion
-                      }
-                      onChange={(event) => {
-                        navigate(
-                          clusterSchemaComparePath(clusterName, subject)
-                        );
-                        searchParams.set('leftVersion', event.toString());
-                        searchParams.set(
-                          'rightVersion',
+    <>
+      <PageHeading
+        text={`${subject} compare versions`}
+        backText="Schema Registry"
+        backTo={clusterSchemasPath(clusterName)}
+      />
+      <S.Section>
+        {areVersionsFetched ? (
+          <S.DiffBox>
+            <S.DiffTilesWrapper>
+              <S.DiffTile>
+                <S.DiffVersionsSelect>
+                  <Controller
+                    defaultValue={leftVersion}
+                    control={control}
+                    rules={{ required: true }}
+                    name="schemaType"
+                    render={({ field: { name } }) => (
+                      <Select
+                        id="left-select"
+                        name={name}
+                        value={
+                          leftVersion === '' ? versions[0].version : leftVersion
+                        }
+                        onChange={(event) => {
+                          navigate(
+                            clusterSchemaComparePath(clusterName, subject)
+                          );
+                          searchParams.set('leftVersion', event.toString());
+                          searchParams.set(
+                            'rightVersion',
+                            rightVersion === ''
+                              ? versions[0].version
+                              : rightVersion
+                          );
+                          navigate({
+                            search: `?${searchParams.toString()}`,
+                          });
+                          setLeftVersion(event.toString());
+                        }}
+                        minWidth="100%"
+                        disabled={isSubmitting}
+                        options={versions.map((type) => ({
+                          value: type.version,
+                          label: `Version ${type.version}`,
+                        }))}
+                      />
+                    )}
+                  />
+                </S.DiffVersionsSelect>
+              </S.DiffTile>
+              <S.DiffTile>
+                <S.DiffVersionsSelect>
+                  <Controller
+                    defaultValue={rightVersion}
+                    control={control}
+                    rules={{ required: true }}
+                    name="schemaType"
+                    render={({ field: { name } }) => (
+                      <Select
+                        id="right-select"
+                        name={name}
+                        value={
                           rightVersion === ''
                             ? versions[0].version
                             : rightVersion
-                        );
-                        navigate({
-                          search: `?${searchParams.toString()}`,
-                        });
-                        setLeftVersion(event.toString());
-                      }}
-                      minWidth="100%"
-                      disabled={isSubmitting}
-                      options={versions.map((type) => ({
-                        value: type.version,
-                        label: `Version ${type.version}`,
-                      }))}
-                    />
-                  )}
-                />
-              </S.DiffVersionsSelect>
-            </S.DiffTile>
-            <S.DiffTile>
-              <S.DiffVersionsSelect>
-                <Controller
-                  defaultValue={rightVersion}
-                  control={control}
-                  rules={{ required: true }}
-                  name="schemaType"
-                  render={({ field: { name } }) => (
-                    <Select
-                      id="right-select"
-                      name={name}
-                      value={
-                        rightVersion === '' ? versions[0].version : rightVersion
-                      }
-                      onChange={(event) => {
-                        navigate(
-                          clusterSchemaComparePath(clusterName, subject)
-                        );
-                        searchParams.set(
-                          'leftVersion',
-                          leftVersion === '' ? versions[0].version : leftVersion
-                        );
-                        searchParams.set('rightVersion', event.toString());
-                        navigate({
-                          search: `?${searchParams.toString()}`,
-                        });
-                        setRightVersion(event.toString());
-                      }}
-                      minWidth="100%"
-                      disabled={isSubmitting}
-                      options={versions.map((type) => ({
-                        value: type.version,
-                        label: `Version ${type.version}`,
-                      }))}
-                    />
-                  )}
-                />
-              </S.DiffVersionsSelect>
-            </S.DiffTile>
-          </S.DiffTilesWrapper>
-          <S.DiffWrapper>
-            <DiffViewer
-              value={[
-                getSchemaContent(versions, leftVersion),
-                getSchemaContent(versions, rightVersion),
-              ]}
-              setOptions={{
-                autoScrollEditorIntoView: true,
-              }}
-              isFixedHeight={false}
-              schemaType={getSchemaType(versions)}
-            />
-          </S.DiffWrapper>
-        </S.DiffBox>
-      ) : (
-        <PageLoader />
-      )}
-    </S.Section>
+                        }
+                        onChange={(event) => {
+                          navigate(
+                            clusterSchemaComparePath(clusterName, subject)
+                          );
+                          searchParams.set(
+                            'leftVersion',
+                            leftVersion === ''
+                              ? versions[0].version
+                              : leftVersion
+                          );
+                          searchParams.set('rightVersion', event.toString());
+                          navigate({
+                            search: `?${searchParams.toString()}`,
+                          });
+                          setRightVersion(event.toString());
+                        }}
+                        minWidth="100%"
+                        disabled={isSubmitting}
+                        options={versions.map((type) => ({
+                          value: type.version,
+                          label: `Version ${type.version}`,
+                        }))}
+                      />
+                    )}
+                  />
+                </S.DiffVersionsSelect>
+              </S.DiffTile>
+            </S.DiffTilesWrapper>
+            <S.DiffWrapper>
+              <DiffViewer
+                value={[
+                  getSchemaContent(versions, leftVersion),
+                  getSchemaContent(versions, rightVersion),
+                ]}
+                setOptions={{
+                  autoScrollEditorIntoView: true,
+                }}
+                isFixedHeight={false}
+                schemaType={getSchemaType(versions)}
+              />
+            </S.DiffWrapper>
+          </S.DiffBox>
+        ) : (
+          <PageLoader />
+        )}
+      </S.Section>
+    </>
   );
 };
 

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -5,7 +5,11 @@ import {
   CompatibilityLevelCompatibilityEnum,
   SchemaType,
 } from 'generated-sources';
-import { clusterSchemaPath, ClusterSubjectParam } from 'lib/paths';
+import {
+  clusterSchemaPath,
+  clusterSchemasPath,
+  ClusterSubjectParam,
+} from 'lib/paths';
 import { NewSchemaSubjectRaw } from 'redux/interfaces';
 import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
@@ -99,7 +103,11 @@ const Edit: React.FC = () => {
   }
   return (
     <FormProvider {...methods}>
-      <PageHeading text="Edit schema" />
+      <PageHeading
+        text="Edit"
+        backText="Schema Registry"
+        backTo={clusterSchemasPath(clusterName)}
+      />
       <S.EditWrapper>
         <form onSubmit={handleSubmit(onSubmit)}>
           <div>

kafka-ui-react-app/src/components/Schemas/New/New.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { NewSchemaSubjectRaw } from 'redux/interfaces';
 import { FormProvider, useForm, Controller } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
-import { ClusterNameRoute, clusterSchemaPath } from 'lib/paths';
+import {
+  ClusterNameRoute,
+  clusterSchemaPath,
+  clusterSchemasPath,
+} from 'lib/paths';
 import { SchemaType } from 'generated-sources';
 import { SCHEMA_NAME_VALIDATION_PATTERN } from 'lib/constants';
 import { useNavigate } from 'react-router-dom';
@@ -63,7 +67,11 @@ const New: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading text="Create new schema" />
+      <PageHeading
+        text="Create"
+        backText="Schema Registry"
+        backTo={clusterSchemasPath(clusterName)}
+      />
       <S.Form onSubmit={handleSubmit(onSubmit)}>
         <div>
           <InputLabel>Subject *</InputLabel>

kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx

@@ -22,7 +22,7 @@ describe('New Component', () => {
   });
 
   it('renders component', () => {
-    expect(screen.getByText('Create new schema')).toBeInTheDocument();
+    expect(screen.getByText('Create')).toBeInTheDocument();
   });
   it('submit button will be disabled while form fields are not filled', () => {
     const submitBtn = screen.getByRole('button', { name: /submit/i });

kafka-ui-react-app/src/components/Schemas/Schemas.tsx

@@ -11,50 +11,17 @@ import Details from 'components/Schemas/Details/Details';
 import New from 'components/Schemas/New/New';
 import Edit from 'components/Schemas/Edit/Edit';
 import DiffContainer from 'components/Schemas/Diff/DiffContainer';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
 const Schemas: React.FC = () => {
   return (
     <Routes>
-      <Route
-        index
-        element={
-          <BreadcrumbRoute>
-            <List />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={clusterSchemaNewRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <New />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={RouteParams.subject}
-        element={
-          <BreadcrumbRoute>
-            <Details />
-          </BreadcrumbRoute>
-        }
-      />
-      <Route
-        path={clusterSchemaEditRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <Edit />
-          </BreadcrumbRoute>
-        }
-      />
+      <Route index element={<List />} />
+      <Route path={clusterSchemaNewRelativePath} element={<New />} />
+      <Route path={RouteParams.subject} element={<Details />} />
+      <Route path={clusterSchemaEditRelativePath} element={<Edit />} />
       <Route
         path={clusterSchemaSchemaDiffRelativePath}
-        element={
-          <BreadcrumbRoute>
-            <DiffContainer />
-          </BreadcrumbRoute>
-        }
+        element={<DiffContainer />}
       />
     </Routes>
   );

kafka-ui-react-app/src/components/Topics/List/ActionsCell.tsx

@@ -6,7 +6,11 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import { ClusterNameRoute } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import { clearTopicMessages } from 'redux/reducers/topicMessages/topicMessagesSlice';
-import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownItemHint,
+} from 'components/common/Dropdown';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   topicKeys,
@@ -26,7 +30,7 @@ const ActionsCell: React.FC<CellContext<Topic, unknown>> = ({ row }) => {
   const deleteTopic = useDeleteTopic(clusterName);
   const recreateTopic = useRecreateTopic({ clusterName, topicName: name });
 
-  const isHidden = internal || isReadOnly;
+  const disabled = internal || isReadOnly;
 
   const clearTopicMessagesHandler = async () => {
     await dispatch(
@@ -38,15 +42,19 @@ const ActionsCell: React.FC<CellContext<Topic, unknown>> = ({ row }) => {
   const isCleanupDisabled = cleanUpPolicy !== CleanUpPolicy.DELETE;
 
   return (
-    <Dropdown disabled={isHidden}>
+    <Dropdown disabled={disabled}>
       <DropdownItem
         disabled={isCleanupDisabled}
         onClick={clearTopicMessagesHandler}
         confirm="Are you sure want to clear topic messages?"
         danger
-        title="Cleanup is alowed only for topics with DELETE policy"
       >
         Clear Messages
+        <DropdownItemHint>
+          Clearing messages is only allowed for topics
+          <br />
+          with DELETE policy
+        </DropdownItemHint>
       </DropdownItem>
       <DropdownItem
         onClick={recreateTopic.mutateAsync}
@@ -67,14 +75,16 @@ const ActionsCell: React.FC<CellContext<Topic, unknown>> = ({ row }) => {
             Are you sure want to remove <b>{name}</b> topic?
           </>
         }
-        title={
-          isTopicDeletionAllowed
-            ? 'The topic deletion is restricted by app configuration'
-            : ''
-        }
         danger
       >
         Remove Topic
+        {!isTopicDeletionAllowed && (
+          <DropdownItemHint>
+            The topic deletion is restricted at the application
+            <br />
+            configuration level
+          </DropdownItemHint>
+        )}
       </DropdownItem>
     </Dropdown>
   );

kafka-ui-react-app/src/components/Topics/List/ListPage.tsx

@@ -47,7 +47,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="All Topics">
+      <PageHeading text="Topics">
         {!isReadOnly && (
           <Button
             buttonType="primary"

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TopicFormData } from 'redux/interfaces';
 import { useForm, FormProvider } from 'react-hook-form';
-import { ClusterNameRoute } from 'lib/paths';
+import { ClusterNameRoute, clusterTopicsPath } from 'lib/paths';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -45,7 +45,11 @@ const New: React.FC = () => {
 
   return (
     <>
-      <PageHeading text={search ? 'Copy Topic' : 'Create new Topic'} />
+      <PageHeading
+        text={search ? 'Copy' : 'Create'}
+        backText="Topics"
+        backTo={clusterTopicsPath(clusterName)}
+      />
       <FormProvider {...methods}>
         <TopicForm
           topicName={name}

kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx

@@ -48,18 +48,14 @@ describe('New', () => {
 
   it('checks header for create new', async () => {
     await act(() => renderComponent(clusterTopicNewPath(clusterName)));
-    expect(
-      screen.getByRole('heading', { name: 'Create new Topic' })
-    ).toHaveTextContent('Create new Topic');
+    expect(screen.getByRole('heading', { name: 'Create' })).toBeInTheDocument();
   });
 
   it('checks header for copy', async () => {
     await act(() =>
       renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`)
     );
-    expect(
-      screen.getByRole('heading', { name: 'Copy Topic' })
-    ).toHaveTextContent('Copy Topic');
+    expect(screen.getByRole('heading', { name: 'Copy' })).toBeInTheDocument();
   });
 
   it('validates form', async () => {

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/__test__/TopicConsumerGroups.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/__test__/TopicConsumerGroups.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
-import TopicConsumerGroups from 'components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups';
+import TopicConsumerGroups from 'components/Topics/Topic/ConsumerGroups/TopicConsumerGroups';
 import { clusterTopicConsumerGroupsPath } from 'lib/paths';
 import { useTopicConsumerGroups } from 'lib/hooks/api/topics';
 import { ConsumerGroup } from 'generated-sources';

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -1,201 +0,0 @@
-import React, { Suspense } from 'react';
-import { NavLink, Route, Routes, useNavigate } from 'react-router-dom';
-import {
-  RouteParamsClusterTopic,
-  clusterTopicMessagesRelativePath,
-  clusterTopicSettingsRelativePath,
-  clusterTopicConsumerGroupsRelativePath,
-  clusterTopicEditRelativePath,
-  clusterTopicSendMessageRelativePath,
-  clusterTopicStatisticsRelativePath,
-} from 'lib/paths';
-import ClusterContext from 'components/contexts/ClusterContext';
-import PageHeading from 'components/common/PageHeading/PageHeading';
-import { Button } from 'components/common/Button/Button';
-import styled from 'styled-components';
-import Navbar from 'components/common/Navigation/Navbar.styled';
-import { useAppDispatch } from 'lib/hooks/redux';
-import useAppParams from 'lib/hooks/useAppParams';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownItemHint,
-} from 'components/common/Dropdown';
-import {
-  useDeleteTopic,
-  useRecreateTopic,
-  useTopicDetails,
-} from 'lib/hooks/api/topics';
-import { clearTopicMessages } from 'redux/reducers/topicMessages/topicMessagesSlice';
-import { CleanUpPolicy } from 'generated-sources';
-import PageLoader from 'components/common/PageLoader/PageLoader';
-
-import Messages from './Messages/Messages';
-import Overview from './Overview/Overview';
-import Settings from './Settings/Settings';
-import TopicConsumerGroups from './ConsumerGroups/TopicConsumerGroups';
-import Statistics from './Statistics/Statistics';
-
-const HeaderControlsWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-self: center;
-  gap: 26px;
-`;
-
-const Details: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
-  const navigate = useNavigate();
-  const deleteTopic = useDeleteTopic(clusterName);
-  const recreateTopic = useRecreateTopic({ clusterName, topicName });
-  const { data } = useTopicDetails({ clusterName, topicName });
-
-  const { isReadOnly, isTopicDeletionAllowed } =
-    React.useContext(ClusterContext);
-
-  const deleteTopicHandler = async () => {
-    await deleteTopic.mutateAsync(topicName);
-    navigate('../..');
-  };
-
-  return (
-    <div>
-      <PageHeading text={topicName}>
-        <HeaderControlsWrapper>
-          <Routes>
-            <Route
-              path={clusterTopicMessagesRelativePath}
-              element={
-                <Button
-                  buttonSize="M"
-                  buttonType="primary"
-                  to={`../${clusterTopicSendMessageRelativePath}`}
-                  disabled={isReadOnly}
-                >
-                  Produce Message
-                </Button>
-              }
-            />
-          </Routes>
-          {!isReadOnly && !data?.internal && (
-            <Routes>
-              <Route
-                index
-                element={
-                  <Dropdown>
-                    <DropdownItem
-                      onClick={() => navigate(clusterTopicEditRelativePath)}
-                    >
-                      Edit settings
-                      <DropdownItemHint>
-                        Pay attention! This operation has
-                        <br />
-                        especially important consequences.
-                      </DropdownItemHint>
-                    </DropdownItem>
-                    {data?.cleanUpPolicy === CleanUpPolicy.DELETE && (
-                      <DropdownItem
-                        onClick={() =>
-                          dispatch(
-                            clearTopicMessages({ clusterName, topicName })
-                          ).unwrap()
-                        }
-                        confirm="Are you sure want to clear topic messages?"
-                        danger
-                      >
-                        Clear messages
-                      </DropdownItem>
-                    )}
-                    <DropdownItem
-                      onClick={recreateTopic.mutateAsync}
-                      confirm={
-                        <>
-                          Are you sure want to recreate <b>{topicName}</b>{' '}
-                          topic?
-                        </>
-                      }
-                      danger
-                    >
-                      Recreate Topic
-                    </DropdownItem>
-                    {isTopicDeletionAllowed && (
-                      <DropdownItem
-                        onClick={deleteTopicHandler}
-                        confirm={
-                          <>
-                            Are you sure want to remove <b>{topicName}</b>{' '}
-                            topic?
-                          </>
-                        }
-                        danger
-                      >
-                        Remove Topic
-                      </DropdownItem>
-                    )}
-                  </Dropdown>
-                }
-              />
-            </Routes>
-          )}
-        </HeaderControlsWrapper>
-      </PageHeading>
-      <Navbar role="navigation">
-        <NavLink
-          to="."
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
-          end
-        >
-          Overview
-        </NavLink>
-        <NavLink
-          to={clusterTopicMessagesRelativePath}
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
-        >
-          Messages
-        </NavLink>
-        <NavLink
-          to={clusterTopicConsumerGroupsRelativePath}
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
-        >
-          Consumers
-        </NavLink>
-        <NavLink
-          to={clusterTopicSettingsRelativePath}
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
-        >
-          Settings
-        </NavLink>
-        <NavLink
-          to={clusterTopicStatisticsRelativePath}
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
-        >
-          Statistics
-        </NavLink>
-      </Navbar>
-      <Suspense fallback={<PageLoader />}>
-        <Routes>
-          <Route index element={<Overview />} />
-          <Route
-            path={clusterTopicMessagesRelativePath}
-            element={<Messages />}
-          />
-          <Route
-            path={clusterTopicSettingsRelativePath}
-            element={<Settings />}
-          />
-          <Route
-            path={clusterTopicConsumerGroupsRelativePath}
-            element={<TopicConsumerGroups />}
-          />
-          <Route
-            path={clusterTopicStatisticsRelativePath}
-            element={<Statistics />}
-          />
-        </Routes>
-      </Suspense>
-    </div>
-  );
-};
-
-export default Details;

kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx

@@ -1,11 +1,10 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  margin: 32px auto;
+  margin-top: 16px;
   padding: 16px;
-  border: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
+  border-top: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
   box-sizing: border-box;
-  border-radius: 8px;
   width: 768px;
 
   & > div {

kafka-ui-react-app/src/components/Topics/Topic/Edit/Edit.tsx

@@ -10,7 +10,6 @@ import { RouteParamsClusterTopic } from 'lib/paths';
 import { useNavigate } from 'react-router-dom';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { topicFormValidationSchema } from 'lib/yupExtended';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import topicParamsTransformer from 'components/Topics/Topic/Edit/topicParamsTransformer';
 import { MILLISECONDS_IN_WEEK } from 'lib/constants';
@@ -63,7 +62,6 @@ const Edit: React.FC = () => {
 
   return (
     <>
-      <PageHeading text={`Edit ${topicName}`} />
       <FormProvider {...methods}>
         <TopicForm
           topicName={topicName}

kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx

@@ -62,17 +62,13 @@ describe('Edit Component', () => {
     await act(() => renderComponent());
   });
 
-  it('renders component', async () => {
-    expect(screen.getByText(`Edit ${topicName}`)).toBeInTheDocument();
-  });
-
   it('renders DangerZone component', async () => {
     expect(screen.getByText(`DangerZone`)).toBeInTheDocument();
   });
 
   it('submits form correctly', async () => {
     await act(() => renderComponent());
-    const btn = screen.getAllByText(/Save/i)[0];
+    const btn = screen.getAllByText(/Update topic/i)[0];
     const field = screen.getByRole('spinbutton', {
       name: 'Min In Sync Replicas * Min In Sync Replicas *',
     });

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddEditFilterContainer.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Input from 'components/common/Input/Input';
 import { FormProvider, Controller, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { Button } from 'components/common/Button/Button';
 import { FormError } from 'components/common/Input/Input.styled';
-import { AddMessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/AddFilter';
+import { AddMessageFilters } from 'components/Topics/Topic/Messages/Filters/AddFilter';
 import Editor from 'components/common/Editor/Editor';
 import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddFilter.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
-import { FilterEdit } from 'components/Topics/Topic/Details/Messages/Filters/FilterModal';
-import SavedFilters from 'components/Topics/Topic/Details/Messages/Filters/SavedFilters';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
+import SavedFilters from 'components/Topics/Topic/Messages/Filters/SavedFilters';
 import SavedIcon from 'components/common/Icons/SavedIcon';
 import QuestionIcon from 'components/common/Icons/QuestionIcon';
 import useModal from 'lib/hooks/useModal';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/EditFilter.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
-import { FilterEdit } from 'components/Topics/Topic/Details/Messages/Filters/FilterModal';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
 
 import AddEditFilterContainer from './AddEditFilterContainer';
 import * as S from './Filters.styled';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/FilterModal.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
-import AddFilter from 'components/Topics/Topic/Details/Messages/Filters/AddFilter';
-import EditFilter from 'components/Topics/Topic/Details/Messages/Filters/EditFilter';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import AddFilter from 'components/Topics/Topic/Messages/Filters/AddFilter';
+import EditFilter from 'components/Topics/Topic/Messages/Filters/EditFilter';
 
 export interface FilterModalProps {
   toggleIsOpen(): void;

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts

@@ -134,7 +134,7 @@ export const MessageFilterModal = styled.div`
   background: ${({ theme }) => theme.modal.backgroundColor};
   position: absolute;
   left: 25%;
-  border: 1px solid ${({ theme }) => theme.breadcrumb};
+  border: 1px solid ${({ theme }) => theme.modal.border.contrast};
   box-shadow: ${({ theme }) => theme.modal.shadow};
   padding: 16px;
   z-index: 1;
@@ -147,7 +147,7 @@ export const InfoModal = styled.div`
   background: ${({ theme }) => theme.modal.backgroundColor};
   position: absolute;
   left: 25%;
-  border: 1px solid ${({ theme }) => theme.breadcrumb};
+  border: 1px solid ${({ theme }) => theme.modal.border.contrast};
   box-shadow: ${({ theme }) => theme.modal.shadow};
   padding: 32px;
   z-index: 1;
@@ -182,7 +182,6 @@ export const FilterTitle = styled.h3`
 
 export const CreatedFilter = styled.p`
   margin: 25px 0 10px;
-  color: ${({ theme }) => theme.breadcrumb};
   font-size: 14px;
   line-height: 20px;
 `;
@@ -190,11 +189,8 @@ export const CreatedFilter = styled.p`
 export const SavedFiltersContainer = styled.div`
   overflow-y: auto;
   height: 195px;
-  // display: flex;
-  // flex-direction: column;
   justify-content: space-around;
   padding-left: 10px;
-  // gap: 10px;
 `;
 
 export const SavedFilterName = styled.div`

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -22,8 +22,8 @@ import { Button } from 'components/common/Button/Button';
 import Search from 'components/common/Search/Search';
 import FilterModal, {
   FilterEdit,
-} from 'components/Topics/Topic/Details/Messages/Filters/FilterModal';
-import { SeekDirectionOptions } from 'components/Topics/Topic/Details/Messages/Messages';
+} from 'components/Topics/Topic/Messages/Filters/FilterModal';
+import { SeekDirectionOptions } from 'components/Topics/Topic/Messages/Messages';
 import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
 import useModal from 'lib/hooks/useModal';
 import { RouteParamsClusterTopic } from 'lib/paths';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { Button } from 'components/common/Button/Button';
 
 interface InfoModalProps {

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import AddEditFilterContainer, {
   AddEditFilterContainerProps,
-} from 'components/Topics/Topic/Details/Messages/Filters/AddEditFilterContainer';
+} from 'components/Topics/Topic/Messages/Filters/AddEditFilterContainer';
 import { render } from 'lib/testHelpers';
 import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
 
 describe('AddEditFilterContainer component', () => {
   const defaultSubmitBtn = 'Submit Button';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import AddFilter, {
   FilterModalProps,
-} from 'components/Topics/Topic/Details/Messages/Filters/AddFilter';
+} from 'components/Topics/Topic/Messages/Filters/AddFilter';
 import { render } from 'lib/testHelpers';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
 import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/EditFilter.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import EditFilter, {
   EditFilterProps,
-} from 'components/Topics/Topic/Details/Messages/Filters/EditFilter';
+} from 'components/Topics/Topic/Messages/Filters/EditFilter';
 import { render } from 'lib/testHelpers';
 import { screen, fireEvent, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FilterEdit } from 'components/Topics/Topic/Details/Messages/Filters/FilterModal';
+import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
 
 const editFilter: FilterEdit = {
   index: 0,

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/FilterModal.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import FilterModal, {
   FilterModalProps,
-} from 'components/Topics/Topic/Details/Messages/Filters/FilterModal';
+} from 'components/Topics/Topic/Messages/Filters/FilterModal';
 import { render } from 'lib/testHelpers';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
 import { screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/Filters.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { SeekDirectionOptions } from 'components/Topics/Topic/Details/Messages/Messages';
+import { SeekDirectionOptions } from 'components/Topics/Topic/Messages/Messages';
 import Filters, {
   FiltersProps,
   SeekTypeOptions,
-} from 'components/Topics/Topic/Details/Messages/Filters/Filters';
+} from 'components/Topics/Topic/Messages/Filters/Filters';
 import { EventSourceMock, render, WithRoute } from 'lib/testHelpers';
 import { act, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/Filters.styled.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.styled.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'lib/testHelpers';
-import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
+import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { screen } from '@testing-library/react';
 import theme from 'theme/theme';
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/InfoModal.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/InfoModal.spec.tsx

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import React from 'react';
-import InfoModal from 'components/Topics/Topic/Details/Messages/Filters/InfoModal';
+import InfoModal from 'components/Topics/Topic/Messages/Filters/InfoModal';
 
 describe('InfoModal component', () => {
   it('closes InfoModal', () => {

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/SavedFilters.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import SavedFilters, {
   Props,
-} from 'components/Topics/Topic/Details/Messages/Filters/SavedFilters';
-import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/Filters';
+} from 'components/Topics/Topic/Messages/Filters/SavedFilters';
+import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
 import {
   screen,
   waitFor,

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import MessageContent, {
   MessageContentProps,
-} from 'components/Topics/Topic/Details/Messages/MessageContent/MessageContent';
+} from 'components/Topics/Topic/Messages/MessageContent/MessageContent';
 import { TopicMessageTimestampTypeEnum } from 'generated-sources';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/FiltersContainer.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import FiltersContainer from 'components/Topics/Topic/Details/Messages/Filters/FiltersContainer';
+import FiltersContainer from 'components/Topics/Topic/Messages/Filters/FiltersContainer';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 
-jest.mock(
-  'components/Topics/Topic/Details/Messages/Filters/Filters',
-  () => () => <div>mock-Filters</div>
-);
+jest.mock('components/Topics/Topic/Messages/Filters/Filters', () => () => (
+  <div>mock-Filters</div>
+));
 
 describe('FiltersContainer', () => {
   it('renders Filters component', () => {

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Message.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
-import Message, {
-  Props,
-} from 'components/Topics/Topic/Details/Messages/Message';
+import Message, { Props } from 'components/Topics/Topic/Messages/Message';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
@@ -11,7 +9,7 @@ import { formatTimestamp } from 'lib/dateTimeHelpers';
 const messageContentText = 'messageContentText';
 
 jest.mock(
-  'components/Topics/Topic/Details/Messages/MessageContent/MessageContent',
+  'components/Topics/Topic/Messages/MessageContent/MessageContent',
   () => () =>
     (
       <tr>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx

@@ -4,7 +4,7 @@ import { render, EventSourceMock, WithRoute } from 'lib/testHelpers';
 import Messages, {
   SeekDirectionOptions,
   SeekDirectionOptionsObj,
-} from 'components/Topics/Topic/Details/Messages/Messages';
+} from 'components/Topics/Topic/Messages/Messages';
 import { SeekDirection, SeekType } from 'generated-sources';
 import userEvent from '@testing-library/user-event';
 import { clusterTopicMessagesPath } from 'lib/paths';

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
-import MessagesTable from 'components/Topics/Topic/Details/Messages/MessagesTable';
+import MessagesTable from 'components/Topics/Topic/Messages/MessagesTable';
 import { SeekDirection, SeekType, TopicMessage } from 'generated-sources';
 import TopicMessagesContext, {
   ContextProps,

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/utils.spec.ts → kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/utils.spec.ts

@@ -4,7 +4,7 @@ import {
   getOffsetFromSeekToParam,
   getTimestampFromSeekToParam,
   getSelectedPartitionsFromSeekToParam,
-} from 'components/Topics/Topic/Details/Messages/Filters/utils';
+} from 'components/Topics/Topic/Messages/Filters/utils';
 import { SeekType, Partition } from 'generated-sources';
 
 const options: Option[] = [

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { render, WithRoute } from 'lib/testHelpers';
-import Overview from 'components/Topics/Topic/Details/Overview/Overview';
+import Overview from 'components/Topics/Topic/Overview/Overview';
 import theme from 'theme/theme';
 import { CleanUpPolicy, Topic } from 'generated-sources';
 import ClusterContext from 'components/contexts/ClusterContext';
 import userEvent from '@testing-library/user-event';
 import { clusterTopicPath } from 'lib/paths';
-import { Replica } from 'components/Topics/Topic/Details/Overview/Overview.styled';
+import { Replica } from 'components/Topics/Topic/Overview/Overview.styled';
 import { useTopicDetails } from 'lib/hooks/api/topics';
 import {
   externalTopicPayload,

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/ConfigListItem.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Settings/__test__/ConfigListItem.spec.tsx

@@ -3,7 +3,7 @@ import { render } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
 import ConfigListItem, {
   ListItemProps,
-} from 'components/Topics/Topic/Details/Settings/ConfigListItem';
+} from 'components/Topics/Topic/Settings/ConfigListItem';
 
 const setupComponent = (props: ListItemProps) => {
   render(

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Settings/__test__/Settings.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
-import Settings from 'components/Topics/Topic/Details/Settings/Settings';
+import Settings from 'components/Topics/Topic/Settings/Settings';
 import { clusterTopicSettingsPath } from 'lib/paths';
 import { topicConfigPayload } from 'lib/fixtures/topics';
 import { useTopicConfig } from 'lib/hooks/api/topics';
@@ -13,15 +13,11 @@ jest.mock('lib/hooks/api/topics', () => ({
   useTopicConfig: jest.fn(),
 }));
 
-jest.mock(
-  'components/Topics/Topic/Details/Settings/ConfigListItem',
-  () => () =>
-    (
-      <tr>
-        <td>ConfigListItemMock</td>
-      </tr>
-    )
-);
+jest.mock('components/Topics/Topic/Settings/ConfigListItem', () => () => (
+  <tr>
+    <td>ConfigListItemMock</td>
+  </tr>
+));
 
 describe('Settings', () => {
   const renderComponent = () => {

kafka-ui-react-app/src/components/Topics/Topic/Details/Statistics/__test__/Metrics.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Statistics/__test__/Metrics.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { render, WithRoute } from 'lib/testHelpers';
-import Statistics from 'components/Topics/Topic/Details/Statistics/Statistics';
+import Statistics from 'components/Topics/Topic/Statistics/Statistics';
 import { clusterTopicStatisticsPath } from 'lib/paths';
 import {
   useTopicAnalysis,

kafka-ui-react-app/src/components/Topics/Topic/Details/Statistics/__test__/Statistics.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/Statistics/__test__/Statistics.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { render, WithRoute } from 'lib/testHelpers';
-import Statistics from 'components/Topics/Topic/Details/Statistics/Statistics';
+import Statistics from 'components/Topics/Topic/Statistics/Statistics';
 import { clusterTopicStatisticsPath } from 'lib/paths';
 import { useTopicAnalysis } from 'lib/hooks/api/topics';
 

kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx

@@ -1,36 +1,204 @@
 import React, { Suspense } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import { NavLink, Route, Routes, useNavigate } from 'react-router-dom';
 import {
+  RouteParamsClusterTopic,
+  clusterTopicMessagesRelativePath,
+  clusterTopicSettingsRelativePath,
+  clusterTopicConsumerGroupsRelativePath,
   clusterTopicEditRelativePath,
   clusterTopicSendMessageRelativePath,
+  clusterTopicStatisticsRelativePath,
+  clusterTopicsPath,
+  clusterTopicSendMessagePath,
 } from 'lib/paths';
-import PageLoader from 'components/common/PageLoader/PageLoader';
-import { resetTopicMessages } from 'redux/reducers/topicMessages/topicMessagesSlice';
+import ClusterContext from 'components/contexts/ClusterContext';
+import PageHeading from 'components/common/PageHeading/PageHeading';
+import { Button } from 'components/common/Button/Button';
+import Navbar from 'components/common/Navigation/Navbar.styled';
 import { useAppDispatch } from 'lib/hooks/redux';
+import useAppParams from 'lib/hooks/useAppParams';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownItemHint,
+} from 'components/common/Dropdown';
+import {
+  useDeleteTopic,
+  useRecreateTopic,
+  useTopicDetails,
+} from 'lib/hooks/api/topics';
+import {
+  clearTopicMessages,
+  resetTopicMessages,
+} from 'redux/reducers/topicMessages/topicMessagesSlice';
+import { CleanUpPolicy } from 'generated-sources';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 
-import SendMessage from './SendMessage/SendMessage';
-import Details from './Details/Details';
+import Messages from './Messages/Messages';
+import Overview from './Overview/Overview';
+import Settings from './Settings/Settings';
+import TopicConsumerGroups from './ConsumerGroups/TopicConsumerGroups';
+import Statistics from './Statistics/Statistics';
 import Edit from './Edit/Edit';
+import SendMessage from './SendMessage/SendMessage';
 
 const Topic: React.FC = () => {
   const dispatch = useAppDispatch();
+  const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
+  const navigate = useNavigate();
+  const deleteTopic = useDeleteTopic(clusterName);
+  const recreateTopic = useRecreateTopic({ clusterName, topicName });
+  const { data } = useTopicDetails({ clusterName, topicName });
+
+  const { isReadOnly, isTopicDeletionAllowed } =
+    React.useContext(ClusterContext);
+
+  const deleteTopicHandler = async () => {
+    await deleteTopic.mutateAsync(topicName);
+    navigate('../..');
+  };
+
   React.useEffect(() => {
     return () => {
       dispatch(resetTopicMessages());
     };
   }, []);
 
+  const canCleanup = data?.cleanUpPolicy === CleanUpPolicy.DELETE;
+
   return (
-    <Suspense fallback={<PageLoader />}>
-      <Routes>
-        <Route path="*" element={<Details />} />
-        <Route path={clusterTopicEditRelativePath} element={<Edit />} />
-        <Route
-          path={clusterTopicSendMessageRelativePath}
-          element={<SendMessage />}
-        />
-      </Routes>
-    </Suspense>
+    <>
+      <PageHeading
+        text={topicName}
+        backText="Topics"
+        backTo={clusterTopicsPath(clusterName)}
+      >
+        <Button
+          buttonSize="M"
+          buttonType="primary"
+          to={clusterTopicSendMessagePath(clusterName, topicName)}
+          disabled={isReadOnly}
+        >
+          Produce Message
+        </Button>
+        <Dropdown disabled={isReadOnly || data?.internal}>
+          <DropdownItem onClick={() => navigate(clusterTopicEditRelativePath)}>
+            Edit settings
+            <DropdownItemHint>
+              Pay attention! This operation has
+              <br />
+              especially important consequences.
+            </DropdownItemHint>
+          </DropdownItem>
+
+          <DropdownItem
+            onClick={() =>
+              dispatch(clearTopicMessages({ clusterName, topicName })).unwrap()
+            }
+            confirm="Are you sure want to clear topic messages?"
+            disabled={!canCleanup}
+            danger
+          >
+            Clear messages
+            <DropdownItemHint>
+              Clearing messages is only allowed for topics
+              <br />
+              with DELETE policy
+            </DropdownItemHint>
+          </DropdownItem>
+
+          <DropdownItem
+            onClick={recreateTopic.mutateAsync}
+            confirm={
+              <>
+                Are you sure want to recreate <b>{topicName}</b> topic?
+              </>
+            }
+            danger
+          >
+            Recreate Topic
+          </DropdownItem>
+          <DropdownItem
+            onClick={deleteTopicHandler}
+            confirm={
+              <>
+                Are you sure want to remove <b>{topicName}</b> topic?
+              </>
+            }
+            disabled={!isTopicDeletionAllowed}
+            danger
+          >
+            Remove Topic
+            {!isTopicDeletionAllowed && (
+              <DropdownItemHint>
+                The topic deletion is restricted at the application
+                <br />
+                configuration level
+              </DropdownItemHint>
+            )}
+          </DropdownItem>
+        </Dropdown>
+      </PageHeading>
+      <Navbar role="navigation">
+        <NavLink
+          to="."
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+          end
+        >
+          Overview
+        </NavLink>
+        <NavLink
+          to={clusterTopicMessagesRelativePath}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Messages
+        </NavLink>
+        <NavLink
+          to={clusterTopicConsumerGroupsRelativePath}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Consumers
+        </NavLink>
+        <NavLink
+          to={clusterTopicSettingsRelativePath}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Settings
+        </NavLink>
+        <NavLink
+          to={clusterTopicStatisticsRelativePath}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Statistics
+        </NavLink>
+      </Navbar>
+      <Suspense fallback={<PageLoader />}>
+        <Routes>
+          <Route index element={<Overview />} />
+          <Route
+            path={clusterTopicMessagesRelativePath}
+            element={<Messages />}
+          />
+          <Route
+            path={clusterTopicSettingsRelativePath}
+            element={<Settings />}
+          />
+          <Route
+            path={clusterTopicConsumerGroupsRelativePath}
+            element={<TopicConsumerGroups />}
+          />
+          <Route
+            path={clusterTopicStatisticsRelativePath}
+            element={<Statistics />}
+          />
+          <Route path={clusterTopicEditRelativePath} element={<Edit />} />
+          <Route
+            path={clusterTopicSendMessageRelativePath}
+            element={<SendMessage />}
+          />
+        </Routes>
+      </Suspense>
+    </>
   );
 };
 

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx → kafka-ui-react-app/src/components/Topics/Topic/__test__/Topic.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ClusterContext from 'components/contexts/ClusterContext';
-import Details from 'components/Topics/Topic/Details/Details';
+import Details from 'components/Topics/Topic/Topic';
 import { render, WithRoute } from 'lib/testHelpers';
 import {
   clusterTopicConsumerGroupsPath,
@@ -40,20 +40,20 @@ jest.mock('lib/hooks/redux', () => ({
   useAppDispatch: useDispatchMock,
 }));
 
-jest.mock('components/Topics/Topic/Details/Overview/Overview', () => () => (
+jest.mock('components/Topics/Topic/Overview/Overview', () => () => (
   <>OverviewMock</>
 ));
-jest.mock('components/Topics/Topic/Details/Messages/Messages', () => () => (
+jest.mock('components/Topics/Topic/Messages/Messages', () => () => (
   <>MessagesMock</>
 ));
-jest.mock('components/Topics/Topic/Details/Settings/Settings', () => () => (
+jest.mock('components/Topics/Topic/Settings/Settings', () => () => (
   <>SettingsMock</>
 ));
 jest.mock(
-  'components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups',
+  'components/Topics/Topic/ConsumerGroups/TopicConsumerGroups',
   () => () => <>ConsumerGroupsMock</>
 );
-jest.mock('components/Topics/Topic/Details/Statistics/Statistics', () => () => (
+jest.mock('components/Topics/Topic/Statistics/Statistics', () => () => (
   <>StatisticsMock</>
 ));
 
@@ -98,9 +98,9 @@ describe('Details', () => {
   });
   describe('Action Bar', () => {
     describe('when it has readonly flag', () => {
-      it('does not render the Action button a Topic', () => {
+      it('renders disabled the Action button a Topic', () => {
         renderComponent(true);
-        expect(screen.queryByText('Produce Message')).not.toBeInTheDocument();
+        expect(screen.getByText('Produce Message')).toBeDisabled();
       });
     });
 

kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { render, WithRoute } from 'lib/testHelpers';
-import { screen } from '@testing-library/react';
-import Topic from 'components/Topics/Topic/Topic';
-import {
-  clusterTopicPath,
-  clusterTopicEditPath,
-  clusterTopicSendMessagePath,
-  getNonExactPath,
-} from 'lib/paths';
-import { useAppDispatch } from 'lib/hooks/redux';
-
-const topicText = {
-  edit: 'Edit',
-  send: 'Send Message',
-  detail: 'Details',
-  loading: 'Loading',
-};
-
-jest.mock('components/Topics/Topic/Edit/Edit', () => () => (
-  <div>{topicText.edit}</div>
-));
-jest.mock('components/Topics/Topic/SendMessage/SendMessage', () => () => (
-  <div>{topicText.send}</div>
-));
-jest.mock('components/Topics/Topic/Details/Details', () => () => (
-  <div>{topicText.detail}</div>
-));
-
-jest.mock('lib/hooks/redux', () => ({
-  ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: jest.fn(),
-}));
-const useDispatchMock = jest.fn(jest.fn());
-
-describe('Topic Component', () => {
-  beforeEach(() => {
-    (useAppDispatch as jest.Mock).mockImplementation(() => useDispatchMock);
-  });
-
-  const renderComponent = (pathname: string) =>
-    render(
-      <WithRoute path={getNonExactPath(clusterTopicPath())}>
-        <Topic />
-      </WithRoute>,
-      { initialEntries: [pathname] }
-    );
-
-  it('renders Edit page', () => {
-    renderComponent(clusterTopicEditPath('local', 'myTopicName'));
-    expect(screen.getByText(topicText.edit)).toBeInTheDocument();
-  });
-
-  it('renders Send Message page', () => {
-    renderComponent(clusterTopicSendMessagePath('local', 'myTopicName'));
-    expect(screen.getByText(topicText.send)).toBeInTheDocument();
-  });
-
-  it('renders Details Container page', () => {
-    renderComponent(clusterTopicPath('local', 'myTopicName'));
-    expect(screen.getByText(topicText.detail)).toBeInTheDocument();
-  });
-
-  it('resets topic messages after unmount', () => {
-    const component = renderComponent(clusterTopicPath('local', 'myTopicName'));
-    component.unmount();
-    expect(useDispatchMock).toHaveBeenCalledTimes(1);
-  });
-});

kafka-ui-react-app/src/components/Topics/Topics.tsx

@@ -6,7 +6,6 @@ import {
   getNonExactPath,
   RouteParams,
 } from 'lib/paths';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
 import New from './New/New';
 import ListPage from './List/ListPage';
@@ -14,38 +13,10 @@ import Topic from './Topic/Topic';
 
 const Topics: React.FC = () => (
   <Routes>
-    <Route
-      index
-      element={
-        <BreadcrumbRoute>
-          <ListPage />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={clusterTopicNewRelativePath}
-      element={
-        <BreadcrumbRoute>
-          <New />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={clusterTopicCopyRelativePath}
-      element={
-        <BreadcrumbRoute>
-          <New />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={getNonExactPath(RouteParams.topicName)}
-      element={
-        <BreadcrumbRoute>
-          <Topic />
-        </BreadcrumbRoute>
-      }
-    />
+    <Route index element={<ListPage />} />
+    <Route path={clusterTopicNewRelativePath} element={<New />} />
+    <Route path={clusterTopicCopyRelativePath} element={<New />} />
+    <Route path={getNonExactPath(RouteParams.topicName)} element={<Topic />} />
   </Routes>
 );
 

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -232,20 +232,20 @@ const TopicForm: React.FC<Props> = ({
         <CustomParams isSubmitting={isSubmitting} />
         <S.ButtonWrapper>
           <Button
-            type="submit"
+            type="button"
             buttonType="primary"
             buttonSize="L"
-            disabled={!isValid || isSubmitting || !isDirty}
+            onClick={onCancel}
           >
-            {isEditing ? 'Save' : 'Create topic'}
+            Cancel
           </Button>
           <Button
-            type="button"
+            type="submit"
             buttonType="primary"
             buttonSize="L"
-            onClick={onCancel}
+            disabled={!isValid || isSubmitting || !isDirty}
           >
-            Cancel
+            {isEditing ? 'Update topic' : 'Create topic'}
           </Button>
         </S.ButtonWrapper>
       </fieldset>

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.context.ts

@@ -1,16 +0,0 @@
-import { createContext } from 'react';
-
-export interface BreadcrumbEntry {
-  link: string;
-  path: string[];
-}
-
-interface BreadcrumbContextInterface extends BreadcrumbEntry {
-  handleRouteChange: (match: { url: string; path: string }) => void;
-}
-
-export const BreadcrumbContext = createContext<BreadcrumbContextInterface>({
-  link: '',
-  path: [],
-  handleRouteChange: () => {},
-});

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.provider.tsx

@@ -1,53 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import capitalize from 'lodash/capitalize';
-
-import { BreadcrumbContext, BreadcrumbEntry } from './Breadcrumb.context';
-
-const mapLocationToPath = (
-  splittedLocation: string[],
-  splittedRoutePath: string[]
-) =>
-  splittedLocation.map((item, index) =>
-    splittedRoutePath[index]?.charAt(0) !== ':'
-      ? item.split('-').map(capitalize).join(' ')
-      : item
-  );
-
-export const BreadcrumbProvider: React.FC<PropsWithChildren<unknown>> = ({
-  children,
-}) => {
-  const [state, setState] = useState<BreadcrumbEntry>({
-    link: '',
-    path: [],
-  });
-
-  const handleRouteChange = (params: { url: string; path: string }) => {
-    setState((prevState) => {
-      const newState = { ...prevState };
-      const splittedRoutePath = params.path.split('/');
-      const splittedLocation = params.url.split('/');
-
-      if (prevState.link !== params.url) {
-        newState.link = params.url;
-        newState.path = mapLocationToPath(splittedLocation, splittedRoutePath);
-      }
-
-      if (prevState.path.length < params.path.split('/').length) {
-        newState.path = mapLocationToPath(splittedLocation, splittedRoutePath);
-      }
-
-      return newState;
-    });
-  };
-
-  return (
-    <BreadcrumbContext.Provider
-      value={{
-        ...state,
-        handleRouteChange,
-      }}
-    >
-      {children}
-    </BreadcrumbContext.Provider>
-  );
-};

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.route.tsx

@@ -1,52 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { Params, Location, useLocation, useParams } from 'react-router-dom';
-
-import { BreadcrumbContext } from './Breadcrumb.context';
-
-const getRoutePath = (location: Location, params: Params): string => {
-  const { pathname } = location;
-
-  if (!Object.keys(params).length) {
-    return pathname; // we don't need to replace anything
-  }
-
-  let path = pathname;
-  Object.entries(params).forEach(([paramName, paramValue]) => {
-    if (paramValue) {
-      path = path.replace(paramValue, `:${paramName}`);
-    }
-  });
-  return path;
-};
-
-const BreadcrumbRouteInternal: React.FC = () => {
-  const location = useLocation();
-  const params = useParams();
-  const path = getRoutePath(location, params);
-  const context = useContext(BreadcrumbContext);
-
-  useEffect(() => {
-    context.handleRouteChange({
-      url: location.pathname,
-      path,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname]);
-
-  return null;
-};
-
-interface BreadcrumbRoutProps {
-  children: React.ReactNode;
-}
-
-export const BreadcrumbRoute: React.FC<BreadcrumbRoutProps> = ({
-  children,
-}) => {
-  return (
-    <>
-      {children}
-      <BreadcrumbRouteInternal />
-    </>
-  );
-};

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.styled.ts

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-export const BreadcrumbWrapper = styled.ul`
-  display: flex;
-  padding-left: 16px;
-  padding-top: 1em;
-
-  font-size: 12px;
-
-  & li:not(:last-child)::after {
-    content: '/';
-    color: ${({ theme }) => theme.breadcrumb};
-    margin: 0 8px;
-  }
-`;

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -1,49 +0,0 @@
-import React, { useContext } from 'react';
-import { Link } from 'react-router-dom';
-import { clusterPath } from 'lib/paths';
-import { BREADCRUMB_DEFINITIONS } from 'lib/constants';
-
-import { BreadcrumbWrapper } from './Breadcrumb.styled';
-import { BreadcrumbContext } from './Breadcrumb.context';
-
-const basePathEntriesLength = clusterPath().split('/').length;
-
-export interface BreadcrumbDefinitions {
-  [key: string]: string;
-}
-
-const Breadcrumb: React.FC = () => {
-  const breadcrumbContext = useContext(BreadcrumbContext);
-
-  const links = React.useMemo(
-    () => breadcrumbContext.path.slice(basePathEntriesLength),
-    [breadcrumbContext.path]
-  );
-
-  const getPathPredicate = (index: number) =>
-    `${breadcrumbContext.link
-      .split('/')
-      .slice(0, basePathEntriesLength + index + 1)
-      .join('/')}`;
-
-  if (links.length < 2) {
-    return null;
-  }
-
-  return (
-    <BreadcrumbWrapper role="list">
-      {links.slice(0, links.length - 1).map((link, index) => (
-        <li key={link}>
-          <Link to={getPathPredicate(index)}>
-            {BREADCRUMB_DEFINITIONS[link] || link}
-          </Link>
-        </li>
-      ))}
-      <li>
-        <span>{links[links.length - 1]}</span>
-      </li>
-    </BreadcrumbWrapper>
-  );
-};
-
-export default Breadcrumb;

kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.provider';
-import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
-import { render, WithRoute } from 'lib/testHelpers';
-import { clusterTopicNewPath, clusterTopicPath } from 'lib/paths';
-
-const createTopicPath = clusterTopicNewPath('local');
-const createTopicRoutePath = clusterTopicNewPath();
-
-const topicName = 'topic-name';
-
-const topicPath = clusterTopicPath('secondLocal', topicName);
-const topicRoutePath = clusterTopicPath();
-
-describe('Breadcrumb component', () => {
-  const setupComponent = (pathname: string, routePath: string) =>
-    render(
-      <BreadcrumbProvider>
-        <Breadcrumb />
-        <WithRoute path={routePath}>
-          <BreadcrumbRoute>
-            <div />
-          </BreadcrumbRoute>
-        </WithRoute>
-      </BreadcrumbProvider>,
-      { initialEntries: [pathname] }
-    );
-
-  it('renders the list of links', async () => {
-    const { getByText } = setupComponent(createTopicPath, createTopicRoutePath);
-    expect(getByText('All Topics')).toBeInTheDocument();
-    expect(getByText('Create New Topic')).toBeInTheDocument();
-  });
-  it('renders the topic overview', async () => {
-    const { getByText } = setupComponent(topicPath, topicRoutePath);
-    expect(getByText('All Topics')).toBeInTheDocument();
-    expect(getByText(topicName)).toBeInTheDocument();
-  });
-});

kafka-ui-react-app/src/components/common/ControlPanel/ControlPanel.styled.ts

@@ -8,7 +8,7 @@ export const ControlPanelWrapper = styled.div<Props>`
   display: flex;
   align-items: center;
   padding: 0px 16px;
-  margin: 16px 0px;
+  margin: 0px 0px 16px;
   width: 100%;
   gap: 16px;
   & > *:first-child {

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.styled.ts

@@ -62,7 +62,6 @@ export const DropdownButton = styled.button`
   display: flex;
   cursor: pointer;
   align-self: center;
-  float: right;
 
   &:disabled {
     opacity: 0.5;
@@ -77,5 +76,12 @@ export const DangerItem = styled.div`
 export const DropdownItemHint = styled.div`
   color: ${({ theme }) => theme.topicMetaData.color.label};
   font-size: 12px;
+  line-height: 1.4;
   margin-top: 5px;
 `;
+
+export const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: end;
+`;

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx

@@ -21,7 +21,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, disabled, children }) => {
   };
 
   return (
-    <>
+    <S.Wrapper>
       <S.DropdownButton
         onClick={handleClick}
         ref={ref}
@@ -42,7 +42,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, disabled, children }) => {
       >
         {children}
       </S.Dropdown>
-    </>
+    </S.Wrapper>
   );
 };
 

kafka-ui-react-app/src/components/common/Form/Form.styled.ts

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const StyledForm = styled.form`
-  padding: 0 16px;
+  padding: 16px;
   max-width: 800px;
-  margin: 0 auto;
 `;

kafka-ui-react-app/src/components/common/PageHeading/PageHeading.styled.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+export const Breadcrumbs = styled.div`
+  display: flex;
+  align-items: baseline;
+`;
+
+export const BackLink = styled(NavLink)`
+  color: ${({ theme }) => theme.pageHeading.backLink.color.normal};
+  position: relative;
+
+  &:hover {
+    ${({ theme }) => theme.pageHeading.backLink.color.hover};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: -11px;
+    bottom: 2px;
+    border-left: 1px solid ${({ theme }) => theme.pageHeading.dividerColor};
+    height: 20px;
+    transform: rotate(14deg);
+  }
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+
+  & > div {
+    display: flex;
+    gap: 16px;
+  }
+
+  & > ${Breadcrumbs} {
+    gap: 20px;
+  }
+`;

kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx

@@ -1,33 +1,31 @@
-import styled from 'styled-components';
 import React, { PropsWithChildren } from 'react';
 import Heading from 'components/common/heading/Heading.styled';
 
-interface Props {
+import * as S from './PageHeading.styled';
+
+interface PageHeadingProps {
   text: string;
-  className?: string;
+  backTo?: string;
+  backText?: string;
 }
 
-const PageHeading: React.FC<PropsWithChildren<Props>> = ({
+const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   text,
-  className,
+  backTo,
+  backText,
   children,
 }) => {
+  const isBackButtonVisible = backTo && backText;
+
   return (
-    <div className={className}>
-      <Heading>{text}</Heading>
+    <S.Wrapper>
+      <S.Breadcrumbs>
+        {isBackButtonVisible && <S.BackLink to={backTo}>{backText}</S.BackLink>}
+        <Heading>{text}</Heading>
+      </S.Breadcrumbs>
       <div>{children}</div>
-    </div>
+    </S.Wrapper>
   );
 };
 
-export default styled(PageHeading)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-
-  & > div {
-    display: flex;
-    gap: 16px;
-  }
-`;
+export default PageHeading;

kafka-ui-react-app/src/lib/constants.ts

@@ -1,5 +1,4 @@
 import { ConfigurationParameters } from 'generated-sources';
-import { BreadcrumbDefinitions } from 'components/common/Breadcrumb/Breadcrumb';
 
 declare global {
   interface Window {
@@ -59,10 +58,6 @@ export const GIT_REPO_LATEST_RELEASE_LINK =
 export const GIT_TAG = process.env.VITE_TAG;
 export const GIT_COMMIT = process.env.VITE_COMMIT;
 
-export const BREADCRUMB_DEFINITIONS: BreadcrumbDefinitions = {
-  Ksqldb: 'ksqlDB',
-};
-
 export enum AsyncRequestStatus {
   initial = 'initial',
   pending = 'pending',

kafka-ui-react-app/src/theme/theme.ts

@@ -95,8 +95,16 @@ const theme = {
       color: Colors.neutral[20],
     },
   },
+  pageHeading: {
+    dividerColor: Colors.neutral[30],
+    backLink: {
+      color: {
+        normal: Colors.brand[70],
+        hover: Colors.brand[60],
+      },
+    },
+  },
   panelColor: Colors.neutral[0],
-  breadcrumb: Colors.neutral[30],
   connectEditWarning: Colors.yellow[10],
   dropdown: {
     backgroundColor: Colors.neutral[0],
@@ -143,7 +151,7 @@ const theme = {
     },
     variants: {
       1: {
-        fontSize: '24px',
+        fontSize: '20px',
         lineHeight: '32px',
       },
       2: {
@@ -293,6 +301,7 @@ const theme = {
     border: {
       top: Colors.neutral[5],
       bottom: Colors.neutral[5],
+      contrast: Colors.neutral[30],
     },
     overlay: Colors.transparency[10],
     shadow: Colors.transparency[20],