feat(broker-configs): adjust edit button state in read-only mode

Author: spartanns

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

@@ -1,19 +1,19 @@
-import React, { type FC } from 'react';
+import React, { type FC, useContext } 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 { getConfigDisplayValue } from 'components/Brokers/Broker/Configs/lib/utils';
 
 import * as S from './styled';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 interface InputCellViewModeProps {
   value: string;
   unit: ConfigUnit | undefined;
   onEdit: () => void;
   isDynamic: boolean;
   isSensitive: boolean;
-  isReadOnly: boolean;
 }
 
 const InputCellViewMode: FC<InputCellViewModeProps> = ({
@@ -22,14 +22,15 @@ 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

@@ -16,7 +16,6 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
-        isReadOnly={false}
       />
     );
     expect(screen.getByTitle(value)).toBeInTheDocument();
@@ -30,7 +29,6 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive
-        isReadOnly={false}
       />
     );
     expect(screen.getByTitle('Sensitive Value')).toBeInTheDocument();
@@ -46,7 +44,6 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
-        isReadOnly={false}
       />
     );
     await user.click(screen.getByLabelText('editAction'));
@@ -61,7 +58,6 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
-        isReadOnly
       />
     );
     expect(screen.getByLabelText('editAction')).toBeDisabled();

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

@@ -24,7 +24,6 @@ const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
     source,
     value: initialValue,
     isSensitive,
-    isReadOnly,
   } = row.original;
 
   const handleSave = (newValue: string) => {
@@ -52,7 +51,6 @@ const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
       onEdit={() => setIsEdit(true)}
       isDynamic={isDynamic}
       isSensitive={isSensitive}
-      isReadOnly={isReadOnly}
     />
   );
 };