fix(broker-configs): set isReadOnly as a prop

Author: spartanns

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

@@ -14,6 +14,7 @@ interface InputCellViewModeProps {
   onEdit: () => void;
   isDynamic: boolean;
   isSensitive: boolean;
+  isReadOnly: boolean;
 }
 
 const InputCellViewMode: FC<InputCellViewModeProps> = ({
@@ -22,15 +23,14 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
   onEdit,
   isDynamic,
   isSensitive,
+  isReadOnly
 }) => {
   const { displayValue, title } = getConfigDisplayValue(
     isSensitive,
     value,
     unit
   );
 
-  const { isReadOnly } = useContext(ClusterContext);
-
   return (
     <S.ValueWrapper $isDynamic={isDynamic}>
       <S.Value title={title}>{displayValue}</S.Value>

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

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
 import InputCellViewMode from 'components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode';
-import ClusterContext from 'components/contexts/ClusterContext';
 
 describe('InputCellViewMode', () => {
   const mockOnEdit = jest.fn();
@@ -17,6 +16,7 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
+        isReadOnly={false}
       />
     );
     expect(screen.getByTitle(value)).toBeInTheDocument();
@@ -30,6 +30,7 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive
+        isReadOnly={false}
       />
     );
     expect(screen.getByTitle('Sensitive Value')).toBeInTheDocument();
@@ -45,22 +46,22 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
+        isReadOnly={false}
       />
     );
     await user.click(screen.getByLabelText('editAction'));
     expect(mockOnEdit).toHaveBeenCalled();
   });
 
   it('disables edit button for read-only properties', () => {
-    const cluster = useContext(ClusterContext);
-    cluster.isReadOnly = true;
     render(
       <InputCellViewMode
         value={value}
         unit={undefined}
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
+        isReadOnly
       />
     );
     expect(screen.getByLabelText('editAction')).toBeDisabled();

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

@@ -1,4 +1,4 @@
-import React, { type FC, useState } from 'react';
+import React, { type FC, useState, useContext } from 'react';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import { type CellContext } from '@tanstack/react-table';
 import { type BrokerConfig } from 'generated-sources';
@@ -10,6 +10,7 @@ import { getConfigUnit } from 'components/Brokers/Broker/Configs/lib/utils';
 
 import InputCellViewMode from './InputCellViewMode';
 import InputCellEditMode from './InputCellEditMode';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 export interface InputCellProps
   extends CellContext<BrokerConfigsTableRow, BrokerConfig['value']> {
@@ -32,6 +33,7 @@ const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
 
   const isDynamic = source === 'DYNAMIC_BROKER_CONFIG';
   const configUnit = getConfigUnit(name);
+  const { isReadOnly } = useContext(ClusterContext);
 
   return isEdit ? (
     <InputCellEditMode
@@ -46,6 +48,7 @@ const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
       onEdit={() => setIsEdit(true)}
       isDynamic={isDynamic}
       isSensitive={isSensitive}
+      isReadOnly={isReadOnly}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } 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';
@@ -10,6 +10,7 @@ import type {
   UpdateBrokerConfigCallback,
 } from './types';
 import { CONFIG_SOURCE_NAME_MAP, CONFIG_SOURCE_PRIORITY } from './constants';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 const getConfigFieldMatch = (field: string, query: string) =>
   field.toLocaleLowerCase().includes(query.toLocaleLowerCase());