Repository: provectus/kafka-ui
Issue: Format field previews one per line
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

Setup:
reddit connector, json, topic reddit-comments-json

Add multiple fields to preview:
```
sub : $.payload.subreddit
link : $.payload.link_url
```
The result has no line breaks:
<img width="260" alt="image" src="https://user-images.githubusercontent.com/1494347/220510677-5e20dafa-ab44-444f-b684-73cc03f79e38.png">



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/models/Topic.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/models/Topic.java
index ece16b4cc10..8fb3df086ea 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/models/Topic.java
+++ b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/models/Topic.java
@@ -11,7 +11,7 @@
 @Accessors(chain = true)
 public class Topic {
 
-  private String name, timeToRetainData, maxMessageBytes, messageKey, messageContent, customParameterValue;
+  private String name, timeToRetainData, maxMessageBytes, messageKey, messageValue, customParameterValue;
   private int numberOfPartitions;
   private CustomParameterType customParameterType;
   private CleanupPolicyValue cleanupPolicyValue;
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/ProduceMessagePanel.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/ProduceMessagePanel.java
index e407d4fe3dc..c4e65c65bee 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/ProduceMessagePanel.java
+++ b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/ProduceMessagePanel.java
@@ -12,7 +12,7 @@
 public class ProduceMessagePanel extends BasePage {
 
   protected SelenideElement keyTextArea = $x("//div[@id='key']/textarea");
-  protected SelenideElement contentTextArea = $x("//div[@id='content']/textarea");
+  protected SelenideElement valueTextArea = $x("//div[@id='content']/textarea");
   protected SelenideElement headersTextArea = $x("//div[@id='headers']/textarea");
   protected SelenideElement submitBtn = headersTextArea.$x("../../../..//button[@type='submit']");
   protected SelenideElement partitionDdl = $x("//ul[@name='partition']");
@@ -34,14 +34,14 @@ public ProduceMessagePanel setKeyField(String value) {
   }
 
   @Step
-  public ProduceMessagePanel setContentFiled(String value) {
-    clearByKeyboard(contentTextArea);
-    contentTextArea.setValue(value);
+  public ProduceMessagePanel setValueFiled(String value) {
+    clearByKeyboard(valueTextArea);
+    valueTextArea.setValue(value);
     return this;
   }
 
   @Step
-  public ProduceMessagePanel setHeaderFiled(String value) {
+  public ProduceMessagePanel setHeadersFld(String value) {
     headersTextArea.setValue(value);
     return this;
   }
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java
index a171c728e46..b7d03dcf3a7 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java
+++ b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java
@@ -1,6 +1,5 @@
 package com.provectus.kafka.ui.pages.topics;
 
-import static com.codeborne.selenide.Selenide.$;
 import static com.codeborne.selenide.Selenide.$$x;
 import static com.codeborne.selenide.Selenide.$x;
 import static com.codeborne.selenide.Selenide.sleep;
@@ -296,16 +295,6 @@ public TopicDetails openConsumerGroup(String consumerId) {
     return this;
   }
 
-  @Step
-  public boolean isKeyMessageVisible(String keyMessage) {
-    return keyMessage.equals($("td[title]").getText());
-  }
-
-  @Step
-  public boolean isContentMessageVisible(String contentMessage) {
-    return contentMessage.matches(contentMessageTab.getText().trim());
-  }
-
   private void selectYear(int expectedYear) {
     while (getActualCalendarDate().getYear() > expectedYear) {
       clickByJavaScript(previousMonthButton);
@@ -382,6 +371,13 @@ public TopicDetails.MessageGridItem getMessageByOffset(int offset) {
         .findFirst().orElseThrow();
   }
 
+  @Step
+  public TopicDetails.MessageGridItem getMessageByKey(String key) {
+    return initItems().stream()
+        .filter(e -> e.getKey().equals(key))
+        .findFirst().orElseThrow();
+  }
+
   @Step
   public List<MessageGridItem> getAllMessages() {
     return initItems();
@@ -451,7 +447,7 @@ public String getKey() {
 
     @Step
     public String getValue() {
-      return element.$x("./td[6]/span/p").getText().trim();
+      return element.$x("./td[6]").getAttribute("title");
     }
 
     @Step
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/services/ApiService.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/services/ApiService.java
index ea08f57fe49..a041defc93e 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/services/ApiService.java
+++ b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/services/ApiService.java
@@ -185,7 +185,7 @@ private void sendMessage(String clusterName, Topic topic) {
     createMessage.setKeySerde("String");
     createMessage.setValueSerde("String");
     createMessage.setKey(topic.getMessageKey());
-    createMessage.setContent(topic.getMessageContent());
+    createMessage.setContent(topic.getMessageValue());
     try {
       messageApi().sendTopicMessages(clusterName, topic.getName(), createMessage).block();
     } catch (WebClientResponseException ex) {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
index 7a9df2c16ff..60f09b82933 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
@@ -80,19 +80,20 @@ const Message: React.FC<Props> = ({
     filters?: PreviewFilter[]
   ) => {
     if (!filters?.length || !jsonValue) return jsonValue;
-
     const parsedJson = getParsedJson(jsonValue);
 
     return (
       <>
-        {filters.map((item) => (
-          <span key={`${item.path}--${item.field}`}>
-            {item.field}:{' '}
-            {JSON.stringify(
-              JSONPath({ path: item.path, json: parsedJson, wrap: false })
-            )}
-          </span>
-        ))}
+        {filters.map((item) => {
+          return (
+            <div key={`${item.path}--${item.field}`}>
+              {item.field}:{' '}
+              {JSON.stringify(
+                JSONPath({ path: item.path, json: parsedJson, wrap: false })
+              )}
+            </div>
+          );
+        })}
       </>
     );
   };
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
index 1c190ba9caa..9eb5e6b0627 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts
@@ -58,7 +58,7 @@ export const MetadataLabel = styled.p`
   width: 80px;
 `;
 
-export const MetadataValue = styled.p`
+export const MetadataValue = styled.div`
   color: ${({ theme }) => theme.topicMetaData.color.value};
   font-size: 14px;
 `;
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx
index c01f4af3d41..c96b395f4c7 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
-import Message, { Props } from 'components/Topics/Topic/Messages/Message';
+import Message, {
+  PreviewFilter,
+  Props,
+} from 'components/Topics/Topic/Messages/Message';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
@@ -8,6 +11,9 @@ import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 const messageContentText = 'messageContentText';
 
+const keyTest = '{"payload":{"subreddit":"learnprogramming"}}';
+const contentTest =
+  '{"payload":{"author":"DwaywelayTOP","archived":false,"name":"t3_11jshwd","id":"11jshwd"}}';
 jest.mock(
   'components/Topics/Topic/Messages/MessageContent/MessageContent',
   () => () =>
@@ -28,10 +34,19 @@ describe('Message component', () => {
     content: '{"data": "test"}',
     headers: { header: 'test' },
   };
-
+  const mockKeyFilters: PreviewFilter = {
+    field: 'sub',
+    path: '$.payload.subreddit',
+  };
+  const mockContentFilters: PreviewFilter = {
+    field: 'author',
+    path: '$.payload.author',
+  };
   const renderComponent = (
     props: Partial<Props> = {
       message: mockMessage,
+      keyFilters: [],
+      contentFilters: [],
     }
   ) =>
     render(
@@ -39,8 +54,8 @@ describe('Message component', () => {
         <tbody>
           <Message
             message={props.message || mockMessage}
-            keyFilters={[]}
-            contentFilters={[]}
+            keyFilters={props.keyFilters || []}
+            contentFilters={props.contentFilters || []}
           />
         </tbody>
       </table>
@@ -88,4 +103,24 @@ describe('Message component', () => {
     await userEvent.click(messageToggleIcon);
     expect(screen.getByText(messageContentText)).toBeInTheDocument();
   });
+
+  it('should check if Preview filter showing for key', () => {
+    const props = {
+      message: { ...mockMessage, key: keyTest as string },
+      keyFilters: [mockKeyFilters],
+    };
+    renderComponent(props);
+    const keyFiltered = screen.getByText('sub: "learnprogramming"');
+    expect(keyFiltered).toBeInTheDocument();
+  });
+
+  it('should check if Preview filter showing for Value', () => {
+    const props = {
+      message: { ...mockMessage, content: contentTest as string },
+      contentFilters: [mockContentFilters],
+    };
+    renderComponent(props);
+    const keyFiltered = screen.getByText('author: "DwaywelayTOP"');
+    expect(keyFiltered).toBeInTheDocument();
+  });
 });


Test patch:
diff --git a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/connectors/ConnectorsTest.java b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/connectors/ConnectorsTest.java
index 72fe769e312..9ca3526c710 100644
--- a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/connectors/ConnectorsTest.java
+++ b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/connectors/ConnectorsTest.java
@@ -23,13 +23,13 @@ public class ConnectorsTest extends BaseTest {
   private static final String MESSAGE_KEY = " ";
   private static final Topic TOPIC_FOR_CREATE = new Topic()
       .setName("topic-for-create-connector-" + randomAlphabetic(5))
-      .setMessageContent(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
+      .setMessageValue(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
   private static final Topic TOPIC_FOR_DELETE = new Topic()
       .setName("topic-for-delete-connector-" + randomAlphabetic(5))
-      .setMessageContent(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
+      .setMessageValue(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
   private static final Topic TOPIC_FOR_UPDATE = new Topic()
       .setName("topic-for-update-connector-" + randomAlphabetic(5))
-      .setMessageContent(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
+      .setMessageValue(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
   private static final Connector CONNECTOR_FOR_DELETE = new Connector()
       .setName("connector-for-delete-" + randomAlphabetic(5))
       .setConfig(getResourceAsString("testData/connectors/delete_connector_config.json"));
diff --git a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/MessagesTest.java b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/MessagesTest.java
index 24048386982..3bbc7e7cd3d 100644
--- a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/MessagesTest.java
+++ b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/MessagesTest.java
@@ -28,23 +28,23 @@ public class MessagesTest extends BaseTest {
   private static final Topic TOPIC_FOR_MESSAGES = new Topic()
       .setName("topic-with-clean-message-attribute-" + randomAlphabetic(5))
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final Topic TOPIC_TO_CLEAR_AND_PURGE_MESSAGES = new Topic()
       .setName("topic-to-clear-and-purge-messages-" + randomAlphabetic(5))
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final Topic TOPIC_FOR_CHECK_FILTERS = new Topic()
       .setName("topic-for-check-filters-" + randomAlphabetic(5))
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final Topic TOPIC_TO_RECREATE = new Topic()
       .setName("topic-to-recreate-attribute-" + randomAlphabetic(5))
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final Topic TOPIC_FOR_CHECK_MESSAGES_COUNT = new Topic()
       .setName("topic-for-check-messages-count" + randomAlphabetic(5))
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final List<Topic> TOPIC_LIST = new ArrayList<>();
 
   @BeforeClass(alwaysRun = true)
@@ -65,12 +65,8 @@ public void produceMessageCheck() {
     topicDetails
         .openDetailsTab(MESSAGES);
     produceMessage(TOPIC_FOR_MESSAGES);
-    SoftAssert softly = new SoftAssert();
-    softly.assertTrue(topicDetails.isKeyMessageVisible((TOPIC_FOR_MESSAGES.getMessageKey())),
-        "isKeyMessageVisible()");
-    softly.assertTrue(topicDetails.isContentMessageVisible((TOPIC_FOR_MESSAGES.getMessageContent()).trim()),
-        "isContentMessageVisible()");
-    softly.assertAll();
+    Assert.assertEquals(topicDetails.getMessageByKey(TOPIC_FOR_MESSAGES.getMessageKey()).getValue(),
+        TOPIC_FOR_MESSAGES.getMessageValue(), "message.getValue()");
   }
 
   @QaseId(19)
@@ -266,7 +262,7 @@ private void produceMessage(Topic topic) {
     produceMessagePanel
         .waitUntilScreenReady()
         .setKeyField(topic.getMessageKey())
-        .setContentFiled(topic.getMessageContent())
+        .setValueFiled(topic.getMessageValue())
         .submitProduceMessage();
     topicDetails
         .waitUntilScreenReady();
diff --git a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java
index 319c5f74f9e..ad20f595a4f 100644
--- a/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java
+++ b/kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java
@@ -45,7 +45,7 @@ public class TopicsTest extends BaseTest {
       .setMaxSizeOnDisk(NOT_SET)
       .setMaxMessageBytes("1048588")
       .setMessageKey(randomAlphabetic(5))
-      .setMessageContent(randomAlphabetic(10));
+      .setMessageValue(randomAlphabetic(10));
   private static final Topic TOPIC_TO_CHECK_SETTINGS = new Topic()
       .setName("new-topic-" + randomAlphabetic(5))
       .setNumberOfPartitions(1)