feedback-to-code/mozzarella huggingface dataset:
Repository: provectus/kafka-ui
Issue: Implement a tooltip with smart filters documentation
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

filter examples, etc.

Issue comments:
![image](https://user-images.githubusercontent.com/1494347/168826481-93afd5f2-4764-43f6-8d1b-d816b914b701.png)


5. multiline filters are also allowed:
```
def name = value.name  
def age = value.age
name == 'iliax' && age == 30
```


Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
index d3036cd1372..b86b8776063 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
@@ -41,7 +41,18 @@ const InfoModal: React.FC<InfoModalProps> = ({ toggleIsOpen }) => {
           `headers.sentBy == &quot;some system&quot; &&
           headers[&quot;sentAt&quot;] == &quot;2020-01-01&quot;`
         </S.ListItem>
-        <S.ListItem>multiS.ListItemne filters are also allowed:</S.ListItem>
+        <S.ListItem>multiline filters are also allowed:</S.ListItem>
+        <S.InfoParagraph>
+          ```
+          <br />
+          def name = value.name
+          <br />
+          def age = value.age
+          <br />
+          name == &quot;iliax&quot; && age == 30
+          <br />
+          ```
+        </S.InfoParagraph>
       </ol>
       <S.ButtonContainer>
         <Button


Test patch:
Repository: provectus/kafka-ui
Issue: Messages count is not updated after filtering Topic/Messages
Labels: scope/frontend
status/accepted
type/chore

**Describe the bug**
After submitting the filter, if one message is shown, the count of Messages should also be one.

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Login to system
2. Open the Topic profile
3. Turn to Messages tab
4. Press Add filters
5. Submit f.ex. 'value == null && valueAsText != null' filter 

**Expected behavior**
Messages count should be changed according to filtered messages count in case of added filter as it works for Offset filtering

**Screenshots**
<img width="1715" alt="filtered messages count" src="https://user-images.githubusercontent.com/104780608/169747893-c6f3eceb-244a-4252-8fb6-b3e18a9e9aa9.png">






Issue comments:
#1438 #1230

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 7a0cb748f30..9eb7884b761 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
@@ -524,7 +524,7 @@ const Filters: React.FC<FiltersProps> = ({
           <S.MetricsIcon>
             <i className="far fa-file-alt" />
           </S.MetricsIcon>
-          <span>{messagesConsumed} messages</span>
+          <span>{messagesConsumed} messages consumed</span>
         </S.Metric>
       </S.FiltersMetrics>
     </S.FiltersWrapper>


Test patch:
Repository: provectus/kafka-ui
Issue: No error displayed in case of wrong header submitting with Message producing 
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
User should be notified about filled wrong value/format for Headers within Message produce form

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Login too system
2. Navigate t Topic's profile
3. Turn to Messages tab
4. Produce Meesage
5. Enter wrong value/format within Headers
6. Press Send

**Expected behavior**
Should display error message about wrong header 

**Screenshots**

https://user-images.githubusercontent.com/104780608/169745897-4b200628-a29c-4646-b095-4d49e0eaffea.mov







Issue comments:

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 a4087a36cf5..35894e9bfb9 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
@@ -102,8 +102,14 @@ const SendMessage: React.FC = () => {
   }) => {
     if (messageSchema) {
       const { partition, key, content } = data;
-      const headers = data.headers ? JSON.parse(data.headers) : undefined;
       const errors = validateMessage(key, content, messageSchema);
+      if (data.headers) {
+        try {
+          JSON.parse(data.headers);
+        } catch (error) {
+          errors.push('Wrong header format');
+        }
+      }
       if (errors.length > 0) {
         const errorsHtml = errors.map((e) => `<li>${e}</li>`).join('');
         dispatch(
@@ -117,7 +123,7 @@ const SendMessage: React.FC = () => {
         );
         return;
       }
-
+      const headers = data.headers ? JSON.parse(data.headers) : undefined;
       try {
         await messagesApiClient.sendTopicMessages({
           clusterName,


Test patch:
Repository: provectus/kafka-ui
Issue: UI improvement for partition dropdown field within Topic/Messages
Labels: type/enhancement
scope/frontend
status/accepted

**Describe the bug**
'x' icon for removing partition value is displayed by default, but could be better to show it with hovering on

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Login to system
2. Navigate to Messages tab for a Topic
3. Check the partition dropdown within filtering section


**Expected behavior**
'x' icon for partition dropdown field could be displayed not by default but only with hover on dropdown

**Screenshots**
<img width="1715" alt="x icon" src="https://user-images.githubusercontent.com/104780608/169801566-f19e98c9-834c-471a-97e1-e96ca9523404.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/common/MultiSelect/MultiSelect.styled.ts b/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts
index f4767bd76df..0052a99411b 100644
--- a/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts
+++ b/kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts
@@ -8,7 +8,6 @@ const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
 
   & > .dropdown-container {
     height: 32px;
-
     * {
       cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
     }
@@ -17,6 +16,14 @@ const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
       height: 32px;
       color: ${({ disabled, theme }) =>
         disabled ? theme.select.color.disabled : theme.select.color.active};
+      & > .clear-selected-button {
+        display: none;
+      }
+      &:hover {
+        & > .clear-selected-button {
+          display: block;
+        }
+      }
     }
   }
 `;


Test patch:
Repository: provectus/kafka-ui
Issue: Rename connects to connectors
Labels: good first issue
scope/frontend
status/accepted
type/chore

**Describe the bug**
Connectors should be instead of Connects within Kafka connects


**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Kafka connect

**Expected behavior**
Connectors, Failed Connectors, Failed Tasks should be displayed

**Screenshots**
<img width="1717" alt="connects vc connectors" src="https://user-images.githubusercontent.com/104780608/170475292-58c1849e-cead-4d42-9ba9-4de19dcc77ab.png">






Issue comments:
I'll take this one.
@doomcrewinc hey, thanks!

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/List/List.tsx b/kafka-ui-react-app/src/components/Connect/List/List.tsx
index 0f1ab074b0c..d7e911c1901 100644
--- a/kafka-ui-react-app/src/components/Connect/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Connect/List/List.tsx
@@ -70,8 +70,8 @@ const List: React.FC<ListProps> = ({
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator
-            label="Connects"
-            title="Connects"
+            label="Connectors"
+            title="Connectors"
             fetching={areConnectsFetching}
           >
             {connectors.length}


Test patch:
Repository: provectus/kafka-ui
Issue: UI: Double "v" in version name
Labels: scope/backend
scope/frontend
status/accepted
type/chore

Please remove the extra "v", we do have one in version name itself.
<img width="310" alt="image" src="https://user-images.githubusercontent.com/1494347/169289884-421b2f60-018a-4ebf-a6ff-a30f8fdc7447.png">





Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/pom.xml b/kafka-ui-api/pom.xml
index e2b6ceddb98..9665aad565f 100644
--- a/kafka-ui-api/pom.xml
+++ b/kafka-ui-api/pom.xml
@@ -396,7 +396,7 @@
                         <configuration>
                             <workingDirectory>../kafka-ui-react-app</workingDirectory>
                             <environmentVariables>
-                                <REACT_APP_TAG>v${project.version}</REACT_APP_TAG>
+                                <REACT_APP_TAG>${project.version}</REACT_APP_TAG>
                                 <REACT_APP_COMMIT>${git.commit.id.abbrev}</REACT_APP_COMMIT>
                             </environmentVariables>
                         </configuration>
diff --git a/kafka-ui-contract/pom.xml b/kafka-ui-contract/pom.xml
index 1bbe2d8a275..581999c2953 100644
--- a/kafka-ui-contract/pom.xml
+++ b/kafka-ui-contract/pom.xml
@@ -138,7 +138,7 @@
                         <configuration>
                             <workingDirectory>../kafka-ui-react-app</workingDirectory>
                             <environmentVariables>
-                                <REACT_APP_TAG>v${project.version}</REACT_APP_TAG>
+                                <REACT_APP_TAG>${project.version}</REACT_APP_TAG>
                             </environmentVariables>
                         </configuration>
                         <executions>
diff --git a/pom.xml b/pom.xml
index 185ea252e09..e7c5898b15f 100644
--- a/pom.xml
+++ b/pom.xml
@@ -86,5 +86,5 @@
     <artifactId>kafka-ui</artifactId>
     <version>0.0.1-SNAPSHOT</version>
     <name>kafka-ui</name>
-    <description>Kafka metrics for UI panel</description>
+    <description>Web UI for Apache Kafka</description>
 </project>


Test patch:
Repository: provectus/kafka-ui
Issue: Fix the error messages about fields requiredness within Create a new Topic form
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Please update the error messages for required fields to be more clear and simple

**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. Press 'Submit' button

**Expected behavior**
Error messages about fields requiredness should be understandable for user

**Screenshots**
<img width="1717" alt="Create a topic-error messages" src="https://user-images.githubusercontent.com/104780608/170308942-29ee1640-d9fd-4d58-aa36-f354435db81a.png">


**Additional context**
Linked to https://github.com/provectus/kafka-ui/issues/1885


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/lib/yupExtended.ts b/kafka-ui-react-app/src/lib/yupExtended.ts
index f93b15de442..db185821095 100644
--- a/kafka-ui-react-app/src/lib/yupExtended.ts
+++ b/kafka-ui-react-app/src/lib/yupExtended.ts
@@ -52,13 +52,32 @@ export const topicFormValidationSchema = yup.object().shape({
       TOPIC_NAME_VALIDATION_PATTERN,
       'Only alphanumeric, _, -, and . allowed'
     ),
-  partitions: yup.number().min(1).required(),
-  replicationFactor: yup.number().min(1).required(),
-  minInsyncReplicas: yup.number().min(1).required(),
+  partitions: yup
+    .number()
+    .min(1)
+    .required()
+    .typeError('Number of partitions is required and must be a number'),
+  replicationFactor: yup
+    .number()
+    .min(1)
+    .required()
+    .typeError('Replication factor is required and must be a number'),
+  minInsyncReplicas: yup
+    .number()
+    .min(1)
+    .required()
+    .typeError('Min in sync replicas is required and must be a number'),
   cleanupPolicy: yup.string().required(),
-  retentionMs: yup.number().min(-1, 'Must be greater than or equal to -1'),
+  retentionMs: yup
+    .number()
+    .min(-1, 'Must be greater than or equal to -1')
+    .typeError('Time to retain data is required and must be a number'),
   retentionBytes: yup.number(),
-  maxMessageBytes: yup.number().min(1).required(),
+  maxMessageBytes: yup
+    .number()
+    .min(1)
+    .required()
+    .typeError('Maximum message size is required and must be a number'),
   customParams: yup.array().of(
     yup.object().shape({
       name: yup.string().required('Custom parameter is required'),


Test patch:
Repository: provectus/kafka-ui
Issue: Topic/Settings and Topic/Consumers are empty with corresponding URLs redirection
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**
The pages stays empty in case of redirecting by URL for Topic/Settings and Topic/Consumers

**Set up**

https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Open the URL of Settings/Consumers tab for Topic (https://www.kafka-ui.provectus.io/ui/clusters/local/topics/LLLLLLLLLL-copy-2/settings)

**Expected behavior**
The topic corresponding tab should open with click on URL

**Screenshots**
<img width="1718" alt="empty settings" src="https://user-images.githubusercontent.com/104780608/171159742-9a17f9b4-9c38-43a8-afd5-c92c796e3d23.png">



**Additional context**
linkes to https://github.com/provectus/kafka-ui/issues/1961


Issue comments:
#1961 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts b/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts
index 311dcdc932a..bd47f08a41f 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts
@@ -138,7 +138,7 @@ const getTopicName = (_: RootState, topicName: TopicName) => topicName;
 export const getTopicByName = createSelector(
   getTopicMap,
   getTopicName,
-  (topics, topicName) => topics[topicName]
+  (topics, topicName) => topics[topicName] || {}
 );
 
 export const getPartitionsByTopicName = createSelector(
@@ -201,9 +201,8 @@ export const getIsTopicInternal = createSelector(
 );
 
 export const getTopicConsumerGroups = createSelector(
-  getTopicMap,
-  getTopicName,
-  (topics, topicName) => topics[topicName].consumerGroups || []
+  getTopicByName,
+  ({ consumerGroups }) => consumerGroups || []
 );
 
 export const getMessageSchemaByTopicName = createSelector(


Test patch:
Repository: provectus/kafka-ui
Issue: Disable "produce message" button for r/o clusters
Labels: type/enhancement
good first issue
scope/frontend
status/accepted


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
index f3d1c33d1a4..69540fdc284 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
@@ -113,6 +113,7 @@ const Details: React.FC<Props> = ({
                   buttonSize="M"
                   buttonType="primary"
                   to={`../${clusterTopicSendMessageRelativePath}`}
+                  disabled={isReadOnly}
                 >
                   Produce Message
                 </Button>


Test patch:
Repository: provectus/kafka-ui
Issue: Remove History from dependencies 
Labels: scope/frontend
status/accepted
type/chore

### Describe the solution you'd like

The history library is a direct dependency of v6 (not a peer dep), so you won't ever import or use it directly. Instead, you'll use the `useNavigate()` hook for all navigation .

https://reactrouter.com/docs/en/v6/upgrading/v5



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/package-lock.json b/kafka-ui-react-app/package-lock.json
index 60907257d40..20f1c48d384 100644
--- a/kafka-ui-react-app/package-lock.json
+++ b/kafka-ui-react-app/package-lock.json
@@ -75,7 +75,6 @@
         "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-react-hooks": "^4.5.0",
         "fetch-mock-jest": "^1.5.1",
-        "history": "^5.0.0",
         "http-proxy-middleware": "^2.0.6",
         "husky": "^7.0.1",
         "jest-sonar-reporter": "^2.0.0",
diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json
index 5b28ae615ef..f30fba154b7 100644
--- a/kafka-ui-react-app/package.json
+++ b/kafka-ui-react-app/package.json
@@ -106,7 +106,6 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "fetch-mock-jest": "^1.5.1",
-    "history": "^5.0.0",
     "http-proxy-middleware": "^2.0.6",
     "husky": "^7.0.1",
     "jest-sonar-reporter": "^2.0.0",


Test patch:
Repository: provectus/kafka-ui
Issue: Loading icon stays with removIng more than one Topics
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
In case of removing more than one Topics the load icon stays in process

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topics
2. Check more than one ToPic
3. Press 'Delete selected topics'

**Expected behavior**
The loading icon should disappear and topics should be removed wIthout refreshing

**Screenshots**

https://user-images.githubusercontent.com/104780608/171255275-b75d6c40-2c5e-4ed7-8dd0-55935cdeef84.mov




Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
index c4a0657970a..70d85d46dc4 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
@@ -557,6 +557,7 @@ describe('topics Slice', () => {
           { type: deleteTopics.pending.type },
           { type: deleteTopic.pending.type },
           { type: deleteTopic.pending.type },
+          { type: fetchTopicsList.pending.type },
           { type: deleteTopics.fulfilled.type },
         ]);
       });
diff --git a/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts b/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
index dfeb437b242..525f7548419 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
@@ -313,6 +313,7 @@ export const deleteTopics = createAsyncThunk<
     topicNames.forEach((topicName) => {
       dispatch(deleteTopic({ clusterName, topicName }));
     });
+    dispatch(fetchTopicsList({ clusterName }));
 
     return undefined;
   } catch (err) {


Test patch:
Repository: provectus/kafka-ui
Issue: Connector't tasks count update is not available without refreshing
Labels: type/bug
good first issue
status/invalid
scope/backend
scope/frontend

**Describe the bug**
Connector tasks count update avaIlable only after refresh

**Set up**
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Kafka connect
2. Open the Connector
3. Edit config
4. Change Topics count
5. Turn to Tasks tab

**Expected behavior**
Tasks updated count update should be available without refreshing the Connector

**Screenshots**

https://user-images.githubusercontent.com/104780608/171347945-66ce9bb7-c97c-4b1d-8e50-7bdc5f425d75.mov





Issue comments:
Seems works as the same 


https://user-images.githubusercontent.com/104780608/172350115-6edab037-7477-4096-ac07-8d96f73f44c7.mov


@armenuikafka unfortunately Kafka-connect API is asynchronous in case of configuration changes applying. After you edit number of tasks - this change will be applied by kafka-connect asynchronously (and it is not specified when actually). So, I think the best thing we can do is to show UI disclaimer popup like "Changes will be applied asynchronously, refresh connector's page to see updates".

cc @Haarolean 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/redux/reducers/connect/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/connect/__test__/reducer.spec.ts
index 3630753b716..61e422d8670 100644
--- a/kafka-ui-react-app/src/redux/reducers/connect/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/connect/__test__/reducer.spec.ts
@@ -726,6 +726,7 @@ describe('Connect slice', () => {
           );
           expect(getTypeAndPayload(store)).toEqual([
             { type: updateConnectorConfig.pending.type, payload: undefined },
+            { type: fetchConnector.pending.type },
             ...getAlertActions(store),
             {
               type: updateConnectorConfig.fulfilled.type,
diff --git a/kafka-ui-react-app/src/redux/reducers/connect/connectSlice.ts b/kafka-ui-react-app/src/redux/reducers/connect/connectSlice.ts
index 9402b3c2e8c..4b0299a6191 100644
--- a/kafka-ui-react-app/src/redux/reducers/connect/connectSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/connect/connectSlice.ts
@@ -322,7 +322,7 @@ export const updateConnectorConfig = createAsyncThunk<
         connectorName,
         requestBody: connectorConfig,
       });
-
+      dispatch(fetchConnector({ clusterName, connectName, connectorName }));
       dispatch(
         showSuccessAlert({
           id: `connector-${connectorName}-${clusterName}`,


Test patch: