feedback-to-code/mozzarella huggingface dataset:
Repository: provectus/kafka-ui
Issue: SR: Display a clear warning message if a schema already exists
Labels: type/bug
good first issue
scope/frontend
status/accepted

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

(Write your answer here.)
If you try to create a schema with a name that already exists now is displaying an unclear message (the same for already existing name, invalid syntax, incorrect schema`s type).

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

(Describe your proposed solution here.)
Display a clear warning message what the problem is, i.e. for this case, 'There is already a schema with the name XXX'.
 
### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

(Write your answer here.)

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

(Write your answer here.)


Issue comments:
Related #1387. 
Connectors error messages are broken as well
![image](https://user-images.githubusercontent.com/1494347/151330767-32c21223-e5a7-447b-be65-7bccafcf6d09.png)

Topic creation:
<img width="541" alt="image" src="https://user-images.githubusercontent.com/1494347/153438290-dfc64d0e-8cd6-4235-8ec5-4d16f2df39a3.png">


Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/redux/actions/__test__/thunks/connectors.spec.ts b/kafka-ui-react-app/src/redux/actions/__test__/thunks/connectors.spec.ts
index c72e15653ad..aa20ed6313c 100644
--- a/kafka-ui-react-app/src/redux/actions/__test__/thunks/connectors.spec.ts
+++ b/kafka-ui-react-app/src/redux/actions/__test__/thunks/connectors.spec.ts
@@ -192,7 +192,7 @@ describe('Thunks', () => {
         actions.createConnectorAction.failure({
           alert: {
             subject: 'local-first',
-            title: 'Kafka Connect Connector Create',
+            title: `Connector with name ${connectorName} already exists`,
             response: {
               status: 404,
               statusText: 'Not Found',
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/connectors.ts b/kafka-ui-react-app/src/redux/actions/thunks/connectors.ts
index 35124e7ceb5..76aec393cec 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/connectors.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/connectors.ts
@@ -111,7 +111,7 @@ export const createConnector =
       const response = await getResponse(error);
       const alert: FailurePayload = {
         subject: [clusterName, connectName].join('-'),
-        title: `Kafka Connect Connector Create`,
+        title: `Connector with name ${newConnector.name} already exists`,
         response,
       };
       dispatch(actions.createConnectorAction.failure({ alert }));


Test patch:
Repository: provectus/kafka-ui
Issue: Implement a debounce timeout on message text search
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

We shouldn't instantly send a new request for each symbol typed.

Issue comments:

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 b0679486cef..d753f33cfb5 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
@@ -22,6 +22,7 @@ import { BASE_PARAMS } from 'lib/constants';
 import Input from 'components/common/Input/Input';
 import Select from 'components/common/Select/Select';
 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';
@@ -348,14 +349,10 @@ const Filters: React.FC<FiltersProps> = ({
     <S.FiltersWrapper>
       <div>
         <S.FilterInputs>
-          <Input
-            inputSize="M"
-            id="searchText"
-            type="text"
-            leftIcon="fas fa-search"
+          <Search
             placeholder="Search"
             value={query}
-            onChange={({ target: { value } }) => setQuery(value)}
+            handleSearch={(value: string) => setQuery(value)}
           />
           <S.SeekTypeSelectorWrapper>
             <Select


Test patch:
Repository: provectus/kafka-ui
Issue: Clear all doesn't work for Offset in Messages
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
Clear all in Search line on Messages tab of Topics works for everything except Offset.

**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.)
-->
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate local - > Topics-> Messages
2. Input some value for offset in Search line and push the button Submit
3. Click Clear all
4. Observe: the inputed value is still in the Search line.
5. Even if put another value into Search line e.g. for Timestamp, Submit and after click Clear all -  the value of previous Offset search appears.

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
Clear all fields of Search line including Offset one.

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:
#1808
@lazzy-panda please take a look

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 939444d69fe..a38e5e8a27a 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
@@ -168,6 +168,7 @@ const Filters: React.FC<FiltersProps> = ({
 
   const handleClearAllFilters = () => {
     setCurrentSeekType(SeekType.OFFSET);
+    setOffset('');
     setQuery('');
     changeSeekDirection(SeekDirection.FORWARD);
     getSelectedPartitionsFromSeekToParam(searchParams, partitions);


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

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
There is no info about a table in KSQL tables overview.

**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.)
-->
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to local/KSQL DB
2. Click on + of a stream or table
3. Observe: phrease Expanded content instead of the details of stream/table

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
Details of stream/config (configuration)
**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->
<img width="1201" alt="Screenshot 2022-04-19 at 20 44 08" src="https://user-images.githubusercontent.com/92585878/164085491-c90b7e1f-4360-4ee5-9900-503f58b61baf.png">


**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/KsqlDb/List/ListItem.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
index 105051abd1f..65390caa2cc 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
@@ -1,5 +1,3 @@
-import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import React from 'react';
 
 interface Props {
@@ -8,30 +6,12 @@ interface Props {
 }
 
 const ListItem: React.FC<Props> = ({ accessors, data }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const toggleIsOpen = React.useCallback(() => {
-    setIsOpen((prevState) => !prevState);
-  }, []);
-
   return (
-    <>
-      <tr>
-        <td>
-          <IconButtonWrapper onClick={toggleIsOpen}>
-            <MessageToggleIcon isOpen={isOpen} />
-          </IconButtonWrapper>
-        </td>
-        {accessors.map((accessor) => (
-          <td key={accessor}>{data[accessor]}</td>
-        ))}
-      </tr>
-      {isOpen && (
-        <tr>
-          <td colSpan={accessors.length + 1}>Expanding content</td>
-        </tr>
-      )}
-    </>
+    <tr>
+      {accessors.map((accessor: string) => (
+        <td key={accessor}>{data[accessor]}</td>
+      ))}
+    </tr>
   );
 };
 


Test patch:
Repository: provectus/kafka-ui
Issue: Inconsistency  in Warning message for KSQL DB
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
The error/warning message disappears in several minutes but on other pages it stays until you close it. 

**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.)
-->
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to local/KSQL DB
2. Push the button Execute KSQL Request
3. Input some request e.g. SELECT * from ridersNearMountainView WHERE distanceInMiles <= 10;
4. Observe: the warning message appears and disappear in several seconds.
1) It`s inconvenient because it`s big and you can`t read it all and correct your request;
2) on other pages of the application a warning message appears and you have to click x to close it, it doesn't disappear by itself. 

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
The warning message stays until you close it by clicking x
**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/KsqlDb/Query/Query.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx
index 4e00ed97b94..ce344508f31 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/Query.tsx
@@ -124,10 +124,6 @@ const Query: FC = () => {
                   createdAt: now(),
                 })
               );
-
-              setTimeout(() => {
-                dispatch(alertDissmissed(id));
-              }, AUTO_DISMISS_TIME);
               break;
             }
             case 'Schema': {


Test patch:
Repository: provectus/kafka-ui
Issue: Double topic message display on consequent pages
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
(A clear and concise description of what the bug is.)
The last message on page 1 of topic messages gets displayed on page 2

**Set up**
(How do you run the app?)
Windows build

**Steps to Reproduce**
Steps to reproduce the behavior:
1. Topics
2. Select a Topic
3. Messages
4. See message 99
5. Click "Next"
6. See message 99 on Page 2

**Expected behavior**
(A clear and concise description of what you expected to happen)
The last message from Page 1 (99) should not be displayed on Page 2

**Screenshots**
(If applicable, add screenshots to help explain your problem)

**Additional context**
(Add any other context about the problem here)
Maybe a feature, not a bug designed to let users see the last message on previous page

Issue comments:
@GneyHabub I guess we have to adjust (off by one) `seekTo` param value when clicking on `next` button
We have to adjust the offset off by one: +1 in case of "oldest first" and -1 in case of "newest first".

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
index 81268bdeb69..cf6aaf07eca 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
@@ -39,10 +39,11 @@ const MessagesTable: React.FC = () => {
         return { offset: 0, partition: parseInt(partition, 10) };
       });
 
+      const seekDirection = searchParams.get('seekDirection');
+      const isBackward = seekDirection === SeekDirection.BACKWARD;
+
       const messageUniqs = map(groupBy(messages, 'partition'), (v) =>
-        searchParams.get('seekDirection') === SeekDirection.BACKWARD
-          ? minBy(v, 'offset')
-          : maxBy(v, 'offset')
+        isBackward ? minBy(v, 'offset') : maxBy(v, 'offset')
       ).map((message) => ({
         offset: message?.offset || 0,
         partition: message?.partition || 0,
@@ -54,7 +55,11 @@ const MessagesTable: React.FC = () => {
           (v) => maxBy(v, 'offset')
         )
       )
-        .map(({ offset, partition }) => `${partition}::${offset}`)
+        .map(({ offset, partition }) => {
+          const offsetQuery = isBackward ? offset : offset + 1;
+
+          return `${partition}::${offsetQuery}`;
+        })
         .join(',');
 
       searchParams.set('seekTo', nextSeekTo);


Test patch:
Repository: provectus/kafka-ui
Issue: Table Row with dropdown is jumping on mouse over action
Labels: type/bug
good first issue
scope/frontend
status/accepted

**Describe the bug**
Table Row with dropdown is jumping on mouse over action

**Expected behavior**
Check all the tables and fix. Use visibility hidden instead of removing dropdown 

Issue comments:
@workshur I can't reproduce, could you please tell in which exact table this happens?

Tables with action button in a row. It jumps on row hover/mouse out 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
index c8d4a14533d..95214624d3b 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
@@ -24,4 +24,5 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
 
 export const ActionsTd = styled(Td)`
   overflow: visible;
+  width: 50px;
 `;
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index 6c4ec05b57f..334ff6a917d 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -185,6 +185,8 @@ const List: React.FC<TopicsListProps> = ({
         setRecreateTopicConfirmationVisible,
       ] = React.useState(false);
 
+      const isHidden = internal || isReadOnly || !hovered;
+
       const deleteTopicHandler = React.useCallback(() => {
         deleteTopic(clusterName, name);
       }, [name]);
@@ -200,8 +202,8 @@ const List: React.FC<TopicsListProps> = ({
 
       return (
         <>
-          {!internal && !isReadOnly && hovered ? (
-            <div className="has-text-right">
+          <div className="has-text-right">
+            {!isHidden && (
               <Dropdown label={<VerticalElipsisIcon />} right>
                 {cleanUpPolicy === CleanUpPolicy.DELETE && (
                   <DropdownItem onClick={clearTopicMessagesHandler} danger>
@@ -223,8 +225,8 @@ const List: React.FC<TopicsListProps> = ({
                   Recreate Topic
                 </DropdownItem>
               </Dropdown>
-            </div>
-          ) : null}
+            )}
+          </div>
           <ConfirmationModal
             isOpen={isDeleteTopicConfirmationVisible}
             onCancel={() => setDeleteTopicConfirmationVisible(false)}


Test patch:
Repository: provectus/kafka-ui
Issue: Hosts mismatched on the brokers page
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
On the brokers page we have 6 brokers specified but only 6 hosts are returned. broker 1 (b-1.xxx) is missing.

**Set up**
Docker image is on the latest using very basic config with only broker links specified with READ_ONLY = true.


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Specify 6 brokers in the configuration
2. Start the app
3. See that the brokers are not mapped correctly in the table

**Expected behavior**
I expect to see 6 brokers mapped correctly in the table

**Screenshots**
![image](https://user-images.githubusercontent.com/100605011/158861627-0e5ccb15-03e3-4363-9c4e-aa9a5c0d2b73.png)

**Additional context**
A quick inspect element shows me that the API does in fact respond with all 6 brokers intact. This makes me think it is likely an issue in the frontend where the brokers are filtered/modified in some way.


Issue comments:
Hello there felix-roo! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
@felix-roo hey, thanks for reaching out! We'll take a look.
Can't find the bug, everything seems to work normally.
@simonyandev I could reproduce it, one of the brokers should be offline.
<img width="1439" alt="image" src="https://user-images.githubusercontent.com/1494347/164317650-3f41cc4f-532f-4d8c-a792-90ea72c53ba4.png">


Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 506856d14af..6d20911714f 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -128,17 +128,21 @@ const Brokers: React.FC = () => {
 
           {diskUsage &&
             diskUsage.length !== 0 &&
-            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => (
-              <tr key={brokerId}>
-                <td>{brokerId}</td>
-                <td>
-                  <BytesFormatted value={segmentSize} />
-                </td>
-                <td>{segmentCount}</td>
-                <td>{items && items[brokerId]?.port}</td>
-                <td>{items && items[brokerId]?.host}</td>
-              </tr>
-            ))}
+            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
+              const brokerItem = items?.find((item) => item.id === brokerId);
+
+              return (
+                <tr key={brokerId}>
+                  <td>{brokerId}</td>
+                  <td>
+                    <BytesFormatted value={segmentSize} />
+                  </td>
+                  <td>{segmentCount}</td>
+                  <td>{brokerItem?.port}</td>
+                  <td>{brokerItem?.host}</td>
+                </tr>
+              );
+            })}
         </tbody>
       </Table>
     </>


Test patch:
Repository: provectus/kafka-ui
Issue: Dashboard table is messed up
Labels: type/bug
scope/frontend
status/accepted

**Describe the bug**

When many clusters are defined in configuration, the dashboard looks messed up:

- multiple tables instead of 1
- cluster ordering is out-of-order (that was fixed earlier for left side list)
- columns are not aligned


**Set up**
- Docker-compose with configuration set via environment variables (v0.4.0 tag from Docker Hub)


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Add 10+ clusters to the list
2. Look at the dashboard

**Expected behavior**
Dashboard looks clean (single table, columns aligned, clusters ordered same as in configuration)

**Screenshots**
![Screenshot from 2022-05-10 13-56-03](https://user-images.githubusercontent.com/985805/167540497-a9c27bea-cbc4-4b80-8ff9-95a3c7222f6a.png)


**Additional context**
- Screenshot cannot show ordering issue due to needing to mask cluster names for privacy




Issue comments:
PS: thanks for working on this project, it is the best UI for looking at Kafka cluster data I've seen so far.
Hey Alex, thanks for the feedback, glad you like the new release :)

We'll take a look into the problem. We've done a lot of frontend refactoring recently, so this might be the reason.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
index f33e9c4746e..e921609c1a4 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
@@ -84,7 +84,7 @@ const ClustersWidget: React.FC<Props> = ({
           <tbody>
             {chunkItem.data.map((cluster) => (
               <tr key={cluster.name}>
-                <S.TableCell maxWidth="99px">
+                <S.TableCell maxWidth="99px" width="350">
                   {cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
                   {cluster.name}
                 </S.TableCell>


Test patch:
Repository: provectus/kafka-ui
Issue: Indicators CSS adjustments
Labels: good first issue
scope/frontend
status/accepted
type/chore

Wrapped panes should inherit first & last child css (border-radius)
<img width="1242" alt="bruh" src="https://user-images.githubusercontent.com/1494347/168567644-39c32c0a-5acf-4e1e-9d70-2a535bf60ad9.png">


Issue comments:
![image](https://user-images.githubusercontent.com/1494347/169537439-cb4e05a1-0c30-4fdc-8ff0-77818b65055d.png)
Lower one looks weird

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx
index 33e8265526e..7a3bb44dbe2 100644
--- a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx
+++ b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx
@@ -38,27 +38,8 @@ export const IndicatorsWrapper = styled.div`
   display: flex;
   gap: 1px;
   flex-wrap: wrap;
-
-  > ${IndicatorWrapper} {
-    &:first-child {
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
-    }
-
-    &:last-child {
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
-    }
-  }
-
-  @media screen and (max-width: 1023px) {
-    > ${IndicatorWrapper} {
-      &:first-child,
-      &:last-child {
-        border-radius: 0;
-      }
-    }
-  }
+  border-radius: 8px;
+  overflow: auto;
 `;
 
 export const SectionTitle = styled.h5`


Test patch: