FE: Do not format size units if value < 0 (#202)

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx

@@ -1,9 +1,9 @@
-import React, { type FC, ReactNode } from 'react';
+import React, { type FC } from 'react';
 import { Button } from 'components/common/Button/Button';
 import EditIcon from 'components/common/Icons/EditIcon';
 import type { ConfigUnit } from 'components/Brokers/Broker/Configs/lib/types';
 import Tooltip from 'components/common/Tooltip/Tooltip';
-import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import { getConfigDisplayValue } from 'components/Brokers/Broker/Configs/lib/utils';
 
 import * as S from './styled';
 
@@ -24,19 +24,11 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
   isSensitive,
   isReadOnly,
 }) => {
-  let displayValue: ReactNode | string;
-  let title: string;
-
-  if (isSensitive) {
-    displayValue = '**********';
-    title = 'Sensitive Value';
-  } else if (unit === 'bytes' && parseInt(value, 10) > 0) {
-    displayValue = <BytesFormatted value={parseInt(value, 10)} />;
-    title = `Bytes: ${value}`;
-  } else {
-    displayValue = unit ? `${value} ${unit}` : value;
-    title = displayValue.toString();
-  }
+  const { displayValue, title } = getConfigDisplayValue(
+    isSensitive,
+    value,
+    unit
+  );
 
   return (
     <S.ValueWrapper $isDynamic={isDynamic}>

frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx

@@ -1,8 +1,11 @@
 import {
+  getConfigDisplayValue,
   getConfigTableData,
   getConfigUnit,
 } from 'components/Brokers/Broker/Configs/lib/utils';
 import { ConfigSource } from 'generated-sources';
+import { render } from 'lib/testHelpers';
+import { ReactElement } from 'react';
 
 describe('getConfigTableData', () => {
   it('filters configs by search query and sorts by source priority', () => {
@@ -45,3 +48,41 @@ describe('getConfigUnit', () => {
     expect(getConfigUnit('compression.type')).toBeUndefined();
   });
 });
+
+describe('getConfigDisplayValue', () => {
+  it('masks sensitive data with asterisks', () => {
+    const result = getConfigDisplayValue(true, 'testValue', undefined);
+    expect(result).toEqual({
+      displayValue: '**********',
+      title: 'Sensitive Value',
+    });
+  });
+
+  it('returns formatted bytes when unit is "bytes" and value is positive', () => {
+    const { container } = render(
+      getConfigDisplayValue(false, '1024', 'bytes').displayValue as ReactElement
+    );
+    expect(container).toHaveTextContent('1 KB');
+    expect(getConfigDisplayValue(false, '1024', 'bytes').title).toBe(
+      'Bytes: 1024'
+    );
+  });
+
+  it('returns value as is when unit is "bytes" but value is non-positive', () => {
+    const result = getConfigDisplayValue(false, '-1', 'bytes');
+    expect(result.displayValue).toBe('-1');
+    expect(result.title).toBe('-1');
+  });
+
+  it('appends unit to the value when unit is provided and is not "bytes"', () => {
+    const result = getConfigDisplayValue(false, '100', 'ms');
+    expect(result.displayValue).toBe('100 ms');
+    expect(result.title).toBe('100 ms');
+  });
+
+  it('returns value as is when no unit is provided', () => {
+    const result = getConfigDisplayValue(false, 'testValue', undefined);
+    expect(result.displayValue).toBe('testValue');
+    expect(result.title).toBe('testValue');
+  });
+});

frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { type BrokerConfig, ConfigSource } from 'generated-sources';
 import { createColumnHelper } from '@tanstack/react-table';
 import * as BrokerConfigTableComponents from 'components/Brokers/Broker/Configs/TableComponents/index';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 
 import type {
   BrokerConfigsTableRow,
@@ -75,3 +76,26 @@ export const getConfigUnit = (configName: string): ConfigUnit | undefined => {
 
   return found ? (found[0] as ConfigUnit) : undefined;
 };
+
+export const getConfigDisplayValue = (
+  isSensitive: boolean,
+  value: string,
+  unit: ConfigUnit | undefined
+) => {
+  if (isSensitive) {
+    return { displayValue: '**********', title: 'Sensitive Value' };
+  }
+
+  if (unit === 'bytes') {
+    const intValue = parseInt(value, 10);
+    return {
+      displayValue: intValue > 0 ? <BytesFormatted value={intValue} /> : value,
+      title: intValue > 0 ? `Bytes: ${value}` : value.toString(),
+    };
+  }
+
+  return {
+    displayValue: unit ? `${value} ${unit}` : value,
+    title: unit ? `${value} ${unit}` : value,
+  };
+};