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/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index 3ee4b552efa..c010ca65cb5 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -459,7 +459,7 @@ const Filters: React.FC<FiltersProps> = ({
             />
           </div>
           <div>
-            <InputLabel>Content Serde</InputLabel>
+            <InputLabel>Value Serde</InputLabel>
             <Select
               id="selectValueSerdeOptions"
               aria-labelledby="selectValueSerdeOptions"
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx
index 4696b75e036..3deab1ecb5c 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx
@@ -27,7 +27,7 @@ const MessagesTable: React.FC = () => {
           <TableHeaderCell title="Partition" />
           <TableHeaderCell title="Timestamp" />
           <TableHeaderCell title="Key" />
-          <TableHeaderCell title="Content" />
+          <TableHeaderCell title="Value" />
           <TableHeaderCell> </TableHeaderCell>
         </tr>
       </thead>
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 087abe537ae..b0c35fc7504 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
@@ -154,7 +154,7 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
             />
           </S.Column>
           <S.Column>
-            <InputLabel>Content Serde</InputLabel>
+            <InputLabel>Value Serde</InputLabel>
             <Controller
               control={control}
               name="valueSerde"
@@ -190,7 +190,7 @@ const SendMessage: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
             />
           </S.Column>
           <S.Column>
-            <InputLabel>Content</InputLabel>
+            <InputLabel>Value</InputLabel>
             <Controller
               control={control}
               name="content"


Test patch: