Repository: provectus/kafka-ui
Issue: Topic messages: rename "content" to "value"
Labels: good first issue
scope/frontend
status/accepted
type/chore
hacktoberfest

Everywhere in the messages views rename "content" to "value". It's key/value in kafka, not key/content.

Issue comments:
Ready to take this issue.
So I started this, but not able to build the UI locally. I followed the instructions here:

https://github.com/provectus/kafka-ui/tree/master/kafka-ui-react-app#getting-started

My node_modules get installed and I launch the docker containers successfully. The command to start runs as well, and when I go to localhost:3000, I do not see the UI built after I made the changes.

Am I doing something wrong?
Oof, what a competition, folks. I'm not sure who should I assign this to -- the first person who asked or the one who decided to start anyway? Please check out our "up for grabs" board/project for other issues. We don't have much frontend ones right now, but there are still some left.
> So I started this, but not able to build the UI locally. I followed the instructions here:
> 
> https://github.com/provectus/kafka-ui/tree/master/kafka-ui-react-app#getting-started
> 
> My node_modules get installed and I launch the docker containers successfully. The command to start runs as well, and when I go to localhost:3000, I do not see the UI built after I made the changes.
> 
> Am I doing something wrong?

What do you observe there? Do you mean your changes are not reflected there? AFAIK vite does the rebuild in runtime just fine.
Anyone's willing to work on this? 
Me🤚
Do I also need to change MessagesV2 ?
Yes, please :)
Hey, I am a little confused...
Are this the following files in kafki-ui-react-app where change is to be made?
`src/components/Topics/Topic/Messages/Message.tsx`
`src/components/Topics/Topic/Messages/MessagesTable.tsx`
`src/components/Topics/Topic/MessagesV2/ActionCell.tsx`
`src/components/Topics/Topic/MessagesV2/MessagesTable.tsx`

And sorry for being late.
@adityabhattad2021 if I'll start looking for all the files, I'd do the same work for the second time :)

These are the places on sshots, and there might be others.

![Untitled](https://user-images.githubusercontent.com/1494347/196151351-480c4a44-eac9-48fc-be80-73e68bab47d1.jpg)
![Untitled2](https://user-images.githubusercontent.com/1494347/196151412-b22a51cc-fc26-43bf-a418-ae5b060cade4.jpg)


Could we please update also in message preview ? with expanding the message 

<img width="1725" alt="value" src="https://user-images.githubusercontent.com/104780608/196926364-fea26357-d826-47c4-9e72-92de597f12d1.png">

I'll do it.
Hey I was not able to run react app locally by following the documentation for Docker way
This was the error
![Screenshot 2022-10-24 180823](https://user-images.githubusercontent.com/93488388/197530668-d7904689-11aa-4891-9c27-08c6ac4dd325.png)

> Hey I was not able to run react app locally by following the documentation for Docker way This was the error ![Screenshot 2022-10-24 180823](https://user-images.githubusercontent.com/93488388/197530668-d7904689-11aa-4891-9c27-08c6ac4dd325.png)

it seems like you don't have the docker installed?
I did installed and setup docker.
> I did installed and setup docker.

I don't see the initial command which caused this error. 
I have found one more content label instead of value when downloading the Kafka msg. Is this intentional (not to break JSON parsers) or is it a bug?

```json
{
	"Content": "Lorem ipsum dolor sit amet",
	"Offset": 296897,
	"Key": "12345",
	"Partition": 0,
	"Headers": {},
	"Timestamp": "2023-01-17T12:00:02.437Z"
}
```
@DanielSmetanka probably a bug, I'll raise an issue

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index 6e385916b5c..85f2dcd27c9 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -82,7 +82,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
                 type="button"
                 onClick={handleContentTabClick}
               >
-                Content
+                Value
               </S.Tab>
               <S.Tab
                 $active={activeTab === 'headers'}
@@ -108,7 +108,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
             </S.Metadata>
 
             <S.Metadata>
-              <S.MetadataLabel>Content</S.MetadataLabel>
+              <S.MetadataLabel>Value</S.MetadataLabel>
               <span>
                 <S.MetadataValue>{messageContentFormat}</S.MetadataValue>
                 <S.MetadataMeta>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
index 8159a8f7279..e7fbd2b44ab 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
@@ -61,7 +61,7 @@ describe('MessageContent screen', () => {
   });
 
   describe('when switched to display the headers', () => {
-    it('makes Headers tab active', () => {
+    it('makes headers tab active', () => {
       userEvent.click(screen.getByText('Headers'));
       expect(screen.getByText('Headers')).toHaveStyleRule(
         'background-color',
@@ -70,9 +70,9 @@ describe('MessageContent screen', () => {
     });
   });
 
-  describe('when switched to display the content', () => {
-    it('makes content tab active', () => {
-      const contentTab = screen.getAllByText('Content');
+  describe('when switched to display the value', () => {
+    it('makes value tab active', () => {
+      const contentTab = screen.getAllByText('Value');
       userEvent.click(contentTab[0]);
       expect(contentTab[0]).toHaveStyleRule(
         'background-color',


Test patch: