Repository: provectus/kafka-ui
Issue: Change spelling of ksqlDB at bread crumbs
Labels: type/bug
good first issue
scope/frontend
status/accepted

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->

There is weird spelling Ksql Db of ksqlDB at the bread crumbs.
**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->
http://issues-1109.internal.kafka-ui.provectus.io/ui/clusters/local/ksql-db

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to KSQL DB 
2. Push the button Execute KSQL Request
3. Observe bread crumbs: Ksql Db / Query

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
ksqlDB as it`s writing on the https://ksqldb.io/
**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx b/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx
index 5196d776006..e957dbb797b 100644
--- a/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx
+++ b/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
diff --git a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
index 3103114233b..abb136b331b 100644
--- a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
+++ b/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', () => {
diff --git a/kafka-ui-react-app/src/lib/constants.ts b/kafka-ui-react-app/src/lib/constants.ts
index 189bdc71974..1366db367a2 100644
--- a/kafka-ui-react-app/src/lib/constants.ts
+++ b/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',
+};
diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts
index efa8fda48ae..ee3152d6ed0 100644
--- a/kafka-ui-react-app/src/lib/paths.ts
+++ b/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`;


Test patch: