feedback-to-code/mozzarella huggingface dataset:
Repository: provectus/kafka-ui
Issue: Not functional Compare Versions for Schema
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**
Compare versions for Schema is not working 


**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Schema Registry
2. Open the Schema
3. Press 'Compare Versions'

**Expected behavior**

- The right path should be displayed
- Comparing should be available


**Screenshots**

https://user-images.githubusercontent.com/104780608/171213052-3ebc5a23-bf15-47bd-b195-893f292c3cc1.mov




Issue comments:
#1961 
#2128

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
index ae11da54b0c..e54683decbd 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import {
   ClusterSubjectParam,
   clusterSchemaEditPageRelativePath,
-  clusterSchemaSchemaDiffRelativePath,
+  clusterSchemaSchemaDiffPageRelativePath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
@@ -90,7 +90,7 @@ const Details: React.FC = () => {
               buttonSize="M"
               buttonType="primary"
               to={{
-                pathname: clusterSchemaSchemaDiffRelativePath,
+                pathname: clusterSchemaSchemaDiffPageRelativePath,
                 search: `leftVersion=${versions[0]?.version}&rightVersion=${versions[0]?.version}`,
               }}
             >
diff --git a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
index e98cd333754..45facd46a9e 100644
--- a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import {
   clusterSchemaEditRelativePath,
   clusterSchemaNewRelativePath,
+  clusterSchemaSchemaDiffRelativePath,
   RouteParams,
 } from 'lib/paths';
 import List from 'components/Schemas/List/List';
@@ -48,7 +49,7 @@ const Schemas: React.FC = () => {
         }
       />
       <Route
-        path={clusterSchemaEditRelativePath}
+        path={clusterSchemaSchemaDiffRelativePath}
         element={
           <BreadcrumbRoute>
             <DiffContainer />


Test patch:
Repository: provectus/kafka-ui
Issue: KSQL table list columns list is broken
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

<img width="1303" alt="image" src="https://user-images.githubusercontent.com/1494347/171866853-95863ace-cef9-4b41-b903-0bb16adae8f5.png">


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
index 8a0e2b42a9c..0e5ccc9facb 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
@@ -73,7 +73,6 @@ const List: FC = () => {
           <Table isFullwidth>
             <thead>
               <tr>
-                <TableHeaderCell title={' '} key="empty cell" />
                 {headers.map(({ Header, accessor }) => (
                   <TableHeaderCell title={Header} key={accessor} />
                 ))}


Test patch:
Repository: provectus/kafka-ui
Issue: Issue related responsive view of Topic/Schema/Connector profile
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
In case of setting responsive view information is not displayed fully within Topic/Schema/Connector profiles

**Set up**
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topic/Schema/Connector profile
2. Make the browser window smaller

**Expected behavior**
If the window becomes smaller, all the information/buttons should be displayed fully as in default view

**Screenshots**

https://user-images.githubusercontent.com/104780608/171427320-b4b1ed17-4a2f-465e-b7cb-3b37a0caadc4.mov



Issue comments:
#1392 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx b/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx
index db26a27deee..4c855859594 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx
@@ -14,6 +14,8 @@ import { Button } from 'components/common/Button/Button';
 
 const ConnectorActionsWrapperStyled = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 8px;
 `;
 
diff --git a/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx b/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx
index 426532ef4cc..da9903067fb 100644
--- a/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx
+++ b/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx
@@ -21,11 +21,10 @@ const PageHeading: React.FC<PropsWithChildren<Props>> = ({
 };
 
 export default styled(PageHeading)`
-  height: 56px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 16px;
+  padding: 16px;
 
   & > div {
     display: flex;


Test patch:
Repository: provectus/kafka-ui
Issue: Sidebar sandwich menu click doesn't work
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

![image](https://user-images.githubusercontent.com/1494347/172137726-51708bf0-cba5-42c7-91bb-fe0f5130fdbb.png)


Issue comments:

Pull request review comments:
Why not use closeSidebar function? If you want to prevent running useEffect on each render, instead of avoiding using closeSidebar you can wrap closeSidebar function In useCallback. Please, check it.
fixed
Should this file be deleted?
restored

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts
index 64f3296861d..94400cea879 100644
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@@ -88,7 +88,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
         bottom: 0;
         right: 0;
         visibility: 'visible';
-        opacity: 1;
+        opacity: 0.7;
         background-color: ${theme.layout.overlay.backgroundColor};
       }
     `}
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index c0740f79417..91b74145e44 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
 import { clusterPath, getNonExactPath } from 'lib/paths';
@@ -25,15 +25,13 @@ const App: React.FC = () => {
   const areClustersFulfilled = useAppSelector(getAreClustersFulfilled);
   const clusters = useAppSelector(getClusterList);
   const [isSidebarVisible, setIsSidebarVisible] = React.useState(false);
-
   const onBurgerClick = () => setIsSidebarVisible(!isSidebarVisible);
-  const closeSidebar = () => setIsSidebarVisible(false);
-
+  const closeSidebar = useCallback(() => setIsSidebarVisible(false), []);
   const location = useLocation();
 
   React.useEffect(() => {
     closeSidebar();
-  }, [closeSidebar, location]);
+  }, [location, closeSidebar]);
 
   React.useEffect(() => {
     dispatch(fetchClusters());


Test patch:
Repository: provectus/kafka-ui
Issue: KSQL response: isWindowed is empty
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

1. run `show tables;`
2. <img width="911" alt="image" src="https://user-images.githubusercontent.com/1494347/171864091-37ef3ed8-549c-429c-a8f5-f041d74d3059.png">


Issue comments:

Pull request review comments:
What are we want to achieve by using  .toString() here
isWindowed is boolean and values are not being displayed so I converted all displayed values to string

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
index 0e5ccc9facb..543aaa43f55 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
@@ -25,6 +25,7 @@ const headers: HeadersType[] = [
   { Header: 'Topic', accessor: 'topic' },
   { Header: 'Key Format', accessor: 'keyFormat' },
   { Header: 'Value Format', accessor: 'valueFormat' },
+  { Header: 'Is Windowed', accessor: 'isWindowed' },
 ];
 
 const accessors = headers.map((header) => header.accessor);
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
index 59ec84095e7..e9d073bb5d5 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
@@ -11,7 +11,7 @@ const ListItem: React.FC<Props> = ({ accessors, data }) => {
   return (
     <tr>
       {accessors.map((accessor) => (
-        <td key={accessor}>{data[accessor]}</td>
+        <td key={accessor}>{data[accessor]?.toString()}</td>
       ))}
     </tr>
   );
diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/renderer/TableRenderer/TableRenderer.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/renderer/TableRenderer/TableRenderer.tsx
index e34b3d25db5..aaf4755b0a2 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/renderer/TableRenderer/TableRenderer.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/renderer/TableRenderer/TableRenderer.tsx
@@ -73,7 +73,7 @@ const TableRenderer: React.FC<Props> = ({ table }) => {
             rows.map((row) => (
               <tr key={row.id}>
                 {row.cells.map((cell) => (
-                  <td key={cell.id}>{cell.value}</td>
+                  <td key={cell.id}>{cell.value.toString()}</td>
                 ))}
               </tr>
             ))


Test patch:
Repository: provectus/kafka-ui
Issue: Brokers page is broken
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**
ChunkLoadError: Loading chunk 317 failed. error appears with navigation to Brokers

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Brokers

**Expected behavior**
Brokers info should display without any error

**Screenshots**

https://user-images.githubusercontent.com/104780608/172392038-4af577fc-e8c7-442c-aa41-2f286f53960a.mov



**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/Cluster/Cluster.tsx b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
index e91b8e8317b..f4da3e984a2 100644
--- a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
+++ b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
@@ -18,6 +18,7 @@ import {
   clusterTopicsRelativePath,
   getNonExactPath,
 } from 'lib/paths';
+import Brokers from 'components/Brokers/Brokers';
 import Topics from 'components/Topics/Topics';
 import Schemas from 'components/Schemas/Schemas';
 import Connect from 'components/Connect/Connect';
@@ -29,8 +30,6 @@ import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.provider';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 
-const Brokers = React.lazy(() => import('components/Brokers/Brokers'));
-
 const Cluster: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const isReadOnly = useSelector(getClustersReadonlyStatus(clusterName));


Test patch:
Repository: provectus/kafka-ui
Issue: Not possible to add message for a topic
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Error appears with creating a message for a Topic

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topic profile
2. Turn to Messages tab
3. Produce message
4. Add Key/Content/Headers
5. Press Send


**Expected behavior**
Message should be added without any error in a console and error message for ui.

**Screenshots**

https://user-images.githubusercontent.com/104780608/172389686-f2be6421-b083-4984-9e99-eb7dee910643.mov







Issue comments:
"partition" selector value is not sent unless specified explicitly by user
the same behavior for #1725

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
index c8898c7ad27..11fa6c08e3e 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
@@ -142,7 +142,7 @@ const SendMessage: React.FC = () => {
             key: !key ? null : key,
             content: !content ? null : content,
             headers,
-            partition,
+            partition: !partition ? 0 : partition,
           },
         });
         dispatch(fetchTopicDetails({ clusterName, topicName }));


Test patch:
Repository: provectus/kafka-ui
Issue: Implement logout button
Labels: type/enhancement
good first issue
scope/backend
scope/frontend
status/accepted


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts
index d854f1f2412..cd79fe62497 100644
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@@ -255,7 +255,7 @@ export const LogoutButton = styled(Button)(
   `
 );
 
-export const LogoutLink = styled(Link)(
+export const LogoutLink = styled.a(
   () => css`
     margin-right: 2px;
   `
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index c26f5514838..1035edb05d6 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -68,7 +68,7 @@ const App: React.FC = () => {
             </S.NavbarBrand>
           </S.NavbarBrand>
           <S.NavbarSocial>
-            <S.LogoutLink to="/logout">
+            <S.LogoutLink href="/logout">
               <S.LogoutButton buttonType="primary" buttonSize="M">
                 Log out
               </S.LogoutButton>


Test patch:
Repository: provectus/kafka-ui
Issue: Topic message info layout is broken
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

<img width="416" alt="image" src="https://user-images.githubusercontent.com/1494347/172599553-28a0079f-ac6c-443d-82e1-e2d6721bfa7c.png">


Issue comments:
Hello, I am newbies and I am willing to help.

I checked the code, the Label box is hardcoded in 50px. Is this you are referring as broken UI?

[  width: 50px;](https://github.com/provectus/kafka-ui/blob/e4dc1134abe45ee72c10d454eb7e4e326c52e194/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts#L59)

@ymlai87416 hi and welcome! Feel free to tackle this.
Yes, "timestamp" and "content" labels are being wrapped.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
index de0967b4ab8..2f3efd7b537 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
@@ -56,7 +56,7 @@ export const Metadata = styled.span`
 export const MetadataLabel = styled.p`
   color: ${({ theme }) => theme.topicMetaData.color.label};
   font-size: 14px;
-  width: 50px;
+  width: 80px;
 `;
 
 export const MetadataValue = styled.p`


Test patch:
Repository: provectus/kafka-ui
Issue: Add asterisk for required  Custom parameter field within Create Topic form
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Please add an asterisk for Custom parameter required field

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topics
2. Press Add a Topic
3. Add Custom Parameter
4. Press submit

**Expected behavior**
The required field should have the asterisk to be filled by user

<img width="1718" alt="required custom parameter" src="https://user-images.githubusercontent.com/104780608/173297195-b600c3b7-b669-496c-ab35-f272bb3b9cbb.png">


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
index 72f28c5c461..2b85b5276c7 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
@@ -67,7 +67,7 @@ const CustomParamField: React.FC<Props> = ({
   return (
     <C.Column>
       <div>
-        <InputLabel>Custom Parameter</InputLabel>
+        <InputLabel>Custom Parameter *</InputLabel>
         <Controller
           control={control}
           rules={{ required: 'Custom Parameter is required.' }}


Test patch:
Repository: provectus/kafka-ui
Issue: Move 'x' icon to be in the top right of error message
Labels: good first issue
scope/frontend
status/accepted
type/chore

**Describe the bug**
Move 'x' icon to be in the top right of error message

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Schema Registry
2. Edit the Schema
3. Let any field empty
4. Submit the schema
5. Check the error message

**Expected behavior**
Move the 'x' icon to be in the top right of error message

**Screenshots**
<img width="1718" alt="error message schema" src="https://user-images.githubusercontent.com/104780608/174236075-9510ae79-9483-4a6c-9598-795a4d40be0e.png">



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts b/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts
index 131fc922437..298f8749032 100644
--- a/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts
+++ b/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts
@@ -9,7 +9,7 @@ export const Alert = styled.div<{ $type: AlertType }>`
   padding: 12px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
   filter: drop-shadow(0px 4px 16px ${({ theme }) => theme.alert.shadow});
   margin-top: 10px;
   line-height: 20px;


Test patch:
Repository: provectus/kafka-ui
Issue: New incoming messages not visible when "Newest first" enabled
Labels: type/bug
good first issue
scope/backend
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
(A clear and concise description of what the bug is.)

When "Newest first" is enabled on Submit we should send request with latest partitions offsets.

**Steps to Reproduce**
Steps to reproduce the behavior:

1. write messages to topic
2. open Messages tab
3. enable "Newest first" mode
4. write new messages
5. click Submit 
6. nothing happened

**Expected behavior**
(A clear and concise description of what you expected to happen)

New submitted messages should be visible. 
To Fix it we should get latest partitions offsets and send as params

**Screenshots**
(If applicable, add screenshots to help explain your problem)


**Additional context**
(Add any other context about the problem here)


Issue comments:
1. When "newest first" is selected or "submit" button is pressed while "newest first" is selected we should use `seekType` as `LATEST` instead of `OFFSET`.
2. The same for "oldest first": `seekType` should be `BEGINNING`.

@Haarolean When we submit a message, it redirects to the topic messages page with the default params, so the seekDirection is reset to FORWARD (Oldest first). I can set the seekType to BEGINNING, but the results are the same. What about the newest first option, seekType=LATEST doesn't help, the new messages still don't appear. I think the problem comes from the back end.
@simonyandev the first part is okay, results should be the same, adjusting the seekDirection to make it clear.

@iliax any ideas about the second part?
@simonyandev We fixed issue with wrong backend behaviour in Newest first mode, so I think you can continue work on UI
@ssiradeghyan PTAL

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index d044fefabf9..5cf9b2af573 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@@ -192,7 +192,17 @@ const Filters: React.FC<FiltersProps> = ({
       setAttempt(attempt + 1);
 
       if (isSeekTypeControlVisible) {
-        props.seekType = isLive ? SeekType.LATEST : currentSeekType;
+        switch (seekDirection) {
+          case SeekDirection.FORWARD:
+            props.seekType = SeekType.BEGINNING;
+            break;
+          case SeekDirection.BACKWARD:
+          case SeekDirection.TAILING:
+            props.seekType = SeekType.LATEST;
+            break;
+          default:
+            props.seekType = currentSeekType;
+        }
         props.seekTo = selectedPartitions.map(({ value }) => {
           const offsetProperty =
             seekDirection === SeekDirection.FORWARD ? 'offsetMin' : 'offsetMax';


Test patch: