Fix KSQLDB breadcrumbs spelling (#1843)

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

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

@@ -2,12 +2,17 @@ import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import cn from 'classnames';
 import { clusterPath } from 'lib/paths';
+import { BREADCRUMB_DEFINITIONS } from 'lib/constants';
 
 import { BreadcrumbWrapper } from './Breadcrumb.styled';
 import { BreadcrumbContext } from './Breadcrumb.context';
 
 const basePathEntriesLength = clusterPath(':clusterName').split('/').length;
 
+export interface BreadcrumbDefinitions {
+  [key: string]: string;
+}
+
 const Breadcrumb: React.FC = () => {
   const breadcrumbContext = useContext(BreadcrumbContext);
 
@@ -33,7 +38,9 @@ const Breadcrumb: React.FC = () => {
     <BreadcrumbWrapper role="list">
       {links.slice(0, links.length - 1).map((link, index) => (
         <li key={link}>
-          <Link to={getPathPredicate(index)}>{link}</Link>
+          <Link to={getPathPredicate(index)}>
+            {BREADCRUMB_DEFINITIONS[link] || link}
+          </Link>
         </li>
       ))}
       <li

kafka-ui-react-app/src/lib/__test__/paths.spec.ts

@@ -179,12 +179,12 @@ describe('Paths', () => {
 
   it('clusterKsqlDbPath', () => {
     expect(paths.clusterKsqlDbPath(clusterName)).toEqual(
-      `${paths.clusterPath(clusterName)}/ksql-db`
+      `${paths.clusterPath(clusterName)}/ksqldb`
     );
   });
   it('clusterKsqlDbPath with default value', () => {
     expect(paths.clusterKsqlDbPath()).toEqual(
-      `${paths.clusterPath(':clusterName')}/ksql-db`
+      `${paths.clusterPath(':clusterName')}/ksqldb`
     );
   });
   it('clusterKsqlDbQueryPath', () => {

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

@@ -1,4 +1,5 @@
 import { ConfigurationParameters } from 'generated-sources';
+import { BreadcrumbDefinitions } from 'components/common/Breadcrumb/Breadcrumb';
 
 declare global {
   interface Window {
@@ -57,3 +58,7 @@ export const GIT_REPO_LATEST_RELEASE_LINK =
   'https://api.github.com/repos/provectus/kafka-ui/releases/latest';
 export const GIT_TAG = process.env.REACT_APP_TAG;
 export const GIT_COMMIT = process.env.REACT_APP_COMMIT;
+
+export const BREADCRUMB_DEFINITIONS: BreadcrumbDefinitions = {
+  Ksqldb: 'ksqlDB',
+};

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

@@ -127,8 +127,8 @@ export const clusterConnectConnectorConfigPath = (
 
 // KsqlDb
 export const clusterKsqlDbPath = (clusterName: ClusterName = ':clusterName') =>
-  `${clusterPath(clusterName)}/ksql-db`;
+  `${clusterPath(clusterName)}/ksqldb`;
 
 export const clusterKsqlDbQueryPath = (
   clusterName: ClusterName = ':clusterName'
-) => `${clusterPath(clusterName)}/ksql-db/query`;
+) => `${clusterPath(clusterName)}/ksqldb/query`;