diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx index 8e7c19376..1ddfa2b03 100644 --- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx +++ b/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 = ({ isSensitive, isReadOnly, }) => { - let displayValue: ReactNode | string; - let title: string; - - if (isSensitive) { - displayValue = '**********'; - title = 'Sensitive Value'; - } else if (unit === 'bytes' && parseInt(value, 10) > 0) { - displayValue = ; - title = `Bytes: ${value}`; - } else { - displayValue = unit ? `${value} ${unit}` : value; - title = displayValue.toString(); - } + const { displayValue, title } = getConfigDisplayValue( + isSensitive, + value, + unit + ); return ( diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx index fa9e04be1..c809e6ebb 100644 --- a/frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx +++ b/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'); + }); +}); diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx index 25b989fa2..d452a1ac8 100644 --- a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx +++ b/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 ? : value, + title: intValue > 0 ? `Bytes: ${value}` : value.toString(), + }; + } + + return { + displayValue: unit ? `${value} ${unit}` : value, + title: unit ? `${value} ${unit}` : value, + }; +};