feedback-to-code/mozzarella huggingface dataset:
Repository: provectus/kafka-ui
Issue: Consumers: replace empty row with consumer lag with "N/A"
Labels: good first issue
scope/frontend
status/accepted
type/chore
area/consumers

also in per consumer view
<img width="1099" alt="image" src="https://github.com/provectus/kafka-ui/assets/1494347/0cb6a7c3-ab38-4c18-a7d6-7558570e6c2d">


Issue comments:
Hye 
please give some about the issue 

@shraddha761 we need to replace empty cells with "N/A"
<img width="1099" alt="image" src="https://github.com/provectus/kafka-ui/assets/1494347/1403a0d8-16c6-4017-8146-eb7338761b74">

I am unable to find where to do changes.
 
Hi, could I work on this?
@Haarolean Hi, I'm trying to setup my environment for windows but there's no instructions for windows on this page, could you help? https://docs.kafka-ui.provectus.io/development/building/prerequisites
@nilling4 you can use WSL

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List.tsx
index 247a18b0bd8..da35c6bbad6 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List.tsx
@@ -61,6 +61,9 @@ const List = () => {
         id: ConsumerGroupOrdering.MESSAGES_BEHIND,
         header: 'Consumer Lag',
         accessorKey: 'consumerLag',
+        cell: (args) => {
+          return args.getValue() || 'N/A';
+        },
       },
       {
         header: 'Coordinator',


Test patch:
Repository: provectus/kafka-ui
Issue: RBAC: Exception on unknown resource types
Labels: type/bug
scope/backend
status/accepted
area/rbac

Set up:
1. config.yml with rbac and resource like "audit"
2. If the older image is used where the feature is not present, it will fail with the following exception:
```
Caused by: java.lang.NullPointerException: Cannot invoke "com.provectus.kafka.ui.model.rbac.Resource.ordinal()" because "this.resource" is null
	at com.provectus.kafka.ui.model.rbac.Permission.getAllActionValues(Permission.java:72)
	at com.provectus.kafka.ui.model.rbac.Permission.transform(Permission.java:67)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.provectus.kafka.ui.model.rbac.Role.validate(Role.java:15)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.provectus.kafka.ui.config.auth.RoleBasedAccessControlProperties.init(RoleBasedAccessControlProperties.java:16)
	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.base/java.lang.reflect.Method.invoke(Method.java:568)
	at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor$LifecycleElement.invoke(InitDestroyAnnotationBeanPostProcessor.java:425)
	at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor$LifecycleMetadata.invokeInitMethods(InitDestroyAnnotationBeanPostProcessor.java:369)
	at org.springframework.beans.factory.annotation.InitDestroyAnnotationBeanPostProcessor.postProcessBeforeInitialization(InitDestroyAnnotationBeanPostProcessor.java:193)
	... 53 common frames omitted
```

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/rbac/Permission.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/rbac/Permission.java
index dd456400da5..56b0a098026 100644
--- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/rbac/Permission.java
+++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/rbac/Permission.java
@@ -16,6 +16,7 @@
 import com.provectus.kafka.ui.model.rbac.permission.SchemaAction;
 import com.provectus.kafka.ui.model.rbac.permission.TopicAction;
 import java.util.Arrays;
+import java.util.Collections;
 import java.util.List;
 import java.util.regex.Pattern;
 import javax.annotation.Nullable;
@@ -73,6 +74,10 @@ public void transform() {
   }
 
   private List<String> getAllActionValues() {
+    if (resource == null) {
+      return Collections.emptyList();
+    }
+
     return switch (this.resource) {
       case APPLICATIONCONFIG -> Arrays.stream(ApplicationConfigAction.values()).map(Enum::toString).toList();
       case CLUSTERCONFIG -> Arrays.stream(ClusterConfigAction.values()).map(Enum::toString).toList();


Test patch:
Repository: provectus/kafka-ui
Issue: Investigate dateTimeHelpers.spec.ts linter error
Labels: good first issue
scope/frontend
status/accepted
type/chore

              @Haarolean i think we need to open an issue to investigate [dateTimeHelpers.spec.ts](https://github.com/provectus/kafka-ui/pull/3969/files#diff-3944835013941011f6e5cc58d818815553b691f0a67c3149561451253f90f5c9) linter error.

_Originally posted by @Mgrdich in https://github.com/provectus/kafka-ui/issues/3969#issuecomment-1663830373_
            

Issue comments:
Hello, is this still open? Can I help with something? 
@techpordentro we already have a PR for this (#4090), thank you though! Feel free to pick any other issue from up for grabs board.

Pull request review comments:
since the default parameter of formatTimestamp is `{ hourCycle: 'h23' }` , what if instead of constructing it , we can just `date.toLocaleString([], { hourCycle: 'h23' })` , did you try this way ?
@MikeStrike101 can you take a look?
@Haarolean sorry I was on vacation these days. Will take a look now.

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/lib/hooks/__tests__/dateTimeHelpers.spec.ts b/kafka-ui-react-app/src/lib/hooks/__tests__/dateTimeHelpers.spec.ts
index 5ed95fa8515..ad5346283c6 100644
--- a/kafka-ui-react-app/src/lib/hooks/__tests__/dateTimeHelpers.spec.ts
+++ b/kafka-ui-react-app/src/lib/hooks/__tests__/dateTimeHelpers.spec.ts
@@ -13,10 +13,10 @@ describe('dateTimeHelpers', () => {
     it('should output the correct date', () => {
       const date = new Date();
       expect(formatTimestamp(date)).toBe(
-        date.toLocaleString([], { hour12: false })
+        date.toLocaleString([], { hourCycle: 'h23' })
       );
       expect(formatTimestamp(date.getTime())).toBe(
-        date.toLocaleString([], { hour12: false })
+        date.toLocaleString([], { hourCycle: 'h23' })
       );
     });
   });


Test patch:
Repository: provectus/kafka-ui
Issue: feature request: List topics in alphabetical order
Labels: type/enhancement
scope/backend

Hi Team,

Currently, the topics are listed in unknown order. It would be great if they would be listed in alphabetical order.

Thanks,
Andor Markus

Issue comments:
Thank you for your issue, this feature was applied in PR-172.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java
index e18c6328943..1f1a38a98ca 100644
--- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java
+++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java
@@ -68,6 +68,7 @@ public List<Topic> getTopics(String name) {
                 .map(c ->
                         c.getTopics().values().stream()
                                 .map(clusterMapper::toTopic)
+                                .sorted(Comparator.comparing(Topic::getName))
                                 .collect(Collectors.toList())
                 ).orElse(Collections.emptyList());
     }


Test patch:
Repository: provectus/kafka-ui
Issue: Frontend: Segment size calculation error
Labels: type/bug
scope/frontend

Hi Team,

Bases on my testing when a topic segment size is larger than 1gb it wont calculate its values in `mb` or `gb` just returns it in `bytes`.

![Screenshot 2021-03-22 at 08 10 10](https://user-images.githubusercontent.com/51825189/111952883-15ee9300-8ae6-11eb-8721-0ae0073faa8d.png)

Thanks,
Andor


Issue comments:
@andormarkus thank you for creating this issue. Will try to fix it asap

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
index 493290c0f2f..bd81c4118d0 100644
--- a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
+++ b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
@@ -1182,6 +1182,7 @@ components:
           type: integer
         segmentSize:
           type: integer
+          format: int64
         segmentCount:
           type: integer
         underReplicatedPartitions:
diff --git a/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx b/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx
index 9447f724025..ad45e454db7 100644
--- a/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx
+++ b/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx
@@ -11,7 +11,7 @@ const BytesFormatted: React.FC<Props> = ({ value, precision = 0 }) => {
   const formatedValue = React.useMemo((): string => {
     try {
       const bytes = typeof value === 'string' ? parseInt(value, 10) : value;
-      if (Number.isNaN(bytes)) return `-Bytes`;
+      if (Number.isNaN(bytes) || (bytes && bytes < 0)) return `-Bytes`;
       if (!bytes || bytes < 1024) return `${Math.ceil(bytes || 0)}${sizes[0]}`;
       const pow = Math.floor(Math.log2(bytes) / 10);
       const multiplier = 10 ** (precision < 0 ? 0 : precision);
diff --git a/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx b/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx
index 85ed10877b3..135673586c6 100644
--- a/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx
@@ -32,6 +32,9 @@ describe('BytesFormatted', () => {
     component = shallow(<BytesFormatted value="some string" />);
     expect(component.text()).toEqual(`-${sizes[0]}`);
 
+    component = shallow(<BytesFormatted value={-100000} />);
+    expect(component.text()).toEqual(`-${sizes[0]}`);
+
     component = shallow(<BytesFormatted value={undefined} />);
     expect(component.text()).toEqual(`0${sizes[0]}`);
   });


Test patch:
Repository: provectus/kafka-ui
Issue: Display replication factor field in topics list
Labels: type/enhancement
good first issue
scope/frontend

### Is your proposal related to a problem?

No

### Describe the solution you'd like

On the topics list table add column replication factor, backend is already exposing this info

### Describe alternatives you've considered

No alternatives

### Additional context



Issue comments:
I can help!

Pull request review comments:
Pls add setTopicReplicationFactor action. We also need to add td to show replicationFactor from topic object

Patch that resolved the issue:
diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
index 04ad5bda55a..caa7e21053a 100644
--- a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
+++ b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
@@ -1374,6 +1374,7 @@ components:
       enum:
         - NAME
         - OUT_OF_SYNC_REPLICAS
+        - REPLICATION_FACTOR
         - TOTAL_PARTITIONS
 
     Topic:
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 99784bb869f..8ca2eee32cf 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -135,6 +135,12 @@ const List: React.FC<Props> = ({
                   orderBy={orderBy}
                   setOrderBy={setTopicsOrderBy}
                 />
+                <SortableColumnHeader
+                  value={TopicColumnsToSort.REPLICATION_FACTOR}
+                  title="Replication Factor"
+                  orderBy={orderBy}
+                  setOrderBy={setTopicsOrderBy}
+                />
                 <th>Type</th>
                 <th> </th>
               </tr>


Test patch:
Repository: provectus/kafka-ui
Issue: Display replication factor field in topics list
Labels: type/enhancement
good first issue
scope/frontend

### Is your proposal related to a problem?

No

### Describe the solution you'd like

On the topics list table add column replication factor, backend is already exposing this info

### Describe alternatives you've considered

No alternatives

### Additional context



Issue comments:
I can help!

Pull request review comments:

Patch that resolved the issue:
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 8bc231a98d9..34b7bc8a955 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -135,6 +135,7 @@ const List: React.FC<Props> = ({
                   orderBy={orderBy}
                   setOrderBy={setTopicsOrderBy}
                 />
+                <th>Replication Factor</th>
                 <th>Number of messages</th>
                 <th>Size</th>
                 <th>Type</th>
diff --git a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
index 6a086771a91..ea2e99953fd 100644
--- a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
@@ -20,7 +20,7 @@ export interface ListItemProps {
 }
 
 const ListItem: React.FC<ListItemProps> = ({
-  topic: { name, internal, partitions, segmentSize },
+  topic: { name, internal, partitions, segmentSize, replicationFactor },
   deleteTopic,
   clusterName,
   clearTopicMessages,
@@ -75,6 +75,7 @@ const ListItem: React.FC<ListItemProps> = ({
       </td>
       <td>{partitions?.length}</td>
       <td>{outOfSyncReplicas}</td>
+      <td>{replicationFactor}</td>
       <td>{numberOfMessages}</td>
       <td>
         <BytesFormatted value={segmentSize} />
diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
index 17a86b1f2fe..b3012f81387 100644
--- a/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap
@@ -205,6 +205,9 @@ exports[`List when it does not have readonly flag matches the snapshot 1`] = `
                     </span>
                   </th>
                 </ListHeaderCell>
+                <th>
+                  Replication Factor
+                </th>
                 <th>
                   Number of messages
                 </th>


Test patch:
Repository: provectus/kafka-ui
Issue: Display consumer group state
Labels: type/enhancement
good first issue
scope/frontend

### Describe the solution you'd like

Backend provide consumer group state in consumer group list request.
Let's display it in the table.


Issue comments:
I made a PR for this issue.
I only added it in the global consumer list as an item to the table.

Not sure about whether I should also add it into the consumers details (which would be very repetitive) ?

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index dfb3834b479..4f58dabf201 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -16,7 +16,7 @@ import ListItem from './ListItem';
 
 export interface Props extends ConsumerGroup, ConsumerGroupDetails {
   clusterName: ClusterName;
-  consumers?: ConsumerGroupTopicPartition[];
+  partitions?: ConsumerGroupTopicPartition[];
   isFetched: boolean;
   isDeleted: boolean;
   fetchConsumerGroupDetails: (
@@ -29,7 +29,7 @@ export interface Props extends ConsumerGroup, ConsumerGroupDetails {
 const Details: React.FC<Props> = ({
   clusterName,
   groupId,
-  consumers,
+  partitions,
   isFetched,
   isDeleted,
   fetchConsumerGroupDetails,
@@ -38,7 +38,7 @@ const Details: React.FC<Props> = ({
   React.useEffect(() => {
     fetchConsumerGroupDetails(clusterName, groupId);
   }, [fetchConsumerGroupDetails, clusterName, groupId]);
-  const items = consumers || [];
+  const items = partitions || [];
   const [isConfirmationModelVisible, setIsConfirmationModelVisible] =
     React.useState<boolean>(false);
   const history = useHistory();
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
index ab359c16284..1d20c799e26 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
@@ -20,7 +20,7 @@ describe('Details component', () => {
       isDeleted={false}
       fetchConsumerGroupDetails={jest.fn()}
       deleteConsumerGroup={jest.fn()}
-      consumers={[
+      partitions={[
         {
           consumerId:
             'consumer-messages-consumer-1-122fbf98-643b-491d-8aec-c0641d2513d0',
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/topics.ts b/kafka-ui-react-app/src/redux/actions/thunks/topics.ts
index 6cff812f9c7..be6ad93f614 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/topics.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/topics.ts
@@ -332,9 +332,7 @@ export const fetchTopicConsumerGroups =
           ...state.byName,
           [topicName]: {
             ...state.byName[topicName],
-            consumerGroups: {
-              ...consumerGroups,
-            },
+            consumerGroups,
           },
         },
       };


Test patch:
Repository: provectus/kafka-ui
Issue: Add an ability to run tests for PRs made from forks
Labels: status/accepted
scope/infrastructure


Issue comments:
I did take a look and find out that SonarCloud seems not supporting this....

https://community.sonarsource.com/t/how-to-use-sonarcloud-with-a-forked-repository-on-github/7363/27
@IndeedSi Yeah I remember that. That's why I was thinking about some other solution, maaaybe

Pull request review comments:

Patch that resolved the issue:
diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
index 79c4bd2454e..573f1b08ac7 100644
--- a/.github/workflows/backend.yml
+++ b/.github/workflows/backend.yml
@@ -1,6 +1,6 @@
 name: backend
 on:
-  pull_request:
+  pull_request_target:
     types: ['opened', 'edited', 'reopened', 'synchronize']
     paths:
       - 'kafka-ui-api/**'
@@ -32,6 +32,7 @@ jobs:
           restore-keys: ${{ runner.os }}-sonar
       - name: Build and analyze
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-        run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar
+        run: |
+          mvn versions:set -DnewVersion=$GITHUB_SHA
+          mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar
diff --git a/.github/workflows/e2e-checks.yaml b/.github/workflows/e2e-checks.yaml
index 8e1156c7617..9145b32ca6d 100644
--- a/.github/workflows/e2e-checks.yaml
+++ b/.github/workflows/e2e-checks.yaml
@@ -1,6 +1,6 @@
 name: e2e-checks
 on:
-  pull_request:
+  pull_request_target:
     types: [ 'opened', 'edited', 'reopened', 'synchronize' ]
     paths:
       - 'kafka-ui-api/**'
@@ -34,6 +34,7 @@ jobs:
       - name: Build with Maven
         id: build_app
         run: |
+          mvn versions:set -DnewVersion=$GITHUB_SHA
           mvn clean package -DskipTests ${{ github.event.inputs.extraMavenOptions }}
       - name: compose app
         id: compose_app
@@ -41,10 +42,9 @@ jobs:
         run: |
           docker-compose -f ./documentation/compose/kafka-ui-connectors.yaml up -d
       - name: e2e run
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-        run: mvn -pl '!kafka-ui-api' test -Pprod
+        run: |
+          mvn versions:set -DnewVersion=$GITHUB_SHA
+          mvn -pl '!kafka-ui-api' test -Pprod
       - name: Generate allure report
         uses: simple-elf/allure-report-action@master
         if: always()
diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml
index ba7f5c6cfd6..631981d1ed9 100644
--- a/.github/workflows/frontend.yaml
+++ b/.github/workflows/frontend.yaml
@@ -3,7 +3,7 @@ on:
   push:
     branches:
       - master
-  pull_request:
+  pull_request_target:
     types: ['opened', 'edited', 'reopened', 'synchronize']
     paths:
     - 'kafka-ui-contract/**'


Test patch:
Repository: provectus/kafka-ui
Issue: Impossible to edit Schema of PROTOBUF type
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Button Edit Schema redirects to an empty screen.


**Set up**
http://redesign.internal.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Click the button Edit Schema for existing proto schema, redirection leads to an empty screen http://redesign.internal.kafka-ui.provectus.io/ui/clusters/local/schemas/proto3/edit
2. Back and Forward buttons in the navigation bar redirect to application`s URLs but the screen is always empty. Only Reload button helps.

**Expected behavior**
Edit screen with Latest schema and New schema like for other types of Schemas i.e. http://redesign.internal.kafka-ui.provectus.io/ui/clusters/local/schemas/json1/edit

**Screenshots**
![image](https://user-images.githubusercontent.com/92585878/145196310-da89179b-04a4-488b-bff4-5e57adfc5171.png)


**Additional context**
Edit schema works correctly for AVRO and JSON schemas types


Issue comments:

Pull request review comments:
I think it better to use `SchemaType.PROTOBUF` from `import { SchemaType } from 'generated-sources';
` instead of hardcoded value

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
index 63a48580dca..27a109f0238 100644
--- a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
@@ -37,10 +37,11 @@ const Edit: React.FC = () => {
 
   const schema = useAppSelector((state) => selectSchemaById(state, subject));
 
-  const formatedSchema = React.useMemo(
-    () => JSON.stringify(JSON.parse(schema?.schema || '{}'), null, '\t'),
-    [schema]
-  );
+  const formatedSchema = React.useMemo(() => {
+    return schema?.schemaType === SchemaType.PROTOBUF
+      ? schema?.schema
+      : JSON.stringify(JSON.parse(schema?.schema || '{}'), null, '\t');
+  }, [schema]);
 
   const onSubmit = React.useCallback(async (props: NewSchemaSubjectRaw) => {
     if (!schema) return;


Test patch: