From 795cad7f882696d425fd9644cdbf64406765dcb1 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Sun, 13 Oct 2024 09:10:30 +0200
Subject: [PATCH 01/12] feat(broker-configs): adjust edit button state in
 read-only mode

---
 .../TableComponents/InputCell/InputCellViewMode.tsx        | 7 ++++---
 .../InputCell/__test__/InputCellViewMode.spec.tsx          | 4 ----
 .../Broker/Configs/TableComponents/InputCell/index.tsx     | 2 --
 3 files changed, 4 insertions(+), 9 deletions(-)

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 1ddfa2b03..707481ced 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
@@ -1,4 +1,4 @@
-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';
@@ -6,6 +6,7 @@ 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;
@@ -13,7 +14,6 @@ interface InputCellViewModeProps {
   onEdit: () => void;
   isDynamic: boolean;
   isSensitive: boolean;
-  isReadOnly: boolean;
 }
 
 const InputCellViewMode: FC<InputCellViewModeProps> = ({
@@ -22,7 +22,6 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
   onEdit,
   isDynamic,
   isSensitive,
-  isReadOnly,
 }) => {
   const { displayValue, title } = getConfigDisplayValue(
     isSensitive,
@@ -30,6 +29,8 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
     unit
   );
 
+  const { isReadOnly } = useContext(ClusterContext);
+
   return (
     <S.ValueWrapper $isDynamic={isDynamic}>
       <S.Value title={title}>{displayValue}</S.Value>
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
index 9499fa857..360eec0f4 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
+++ b/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();
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index a55d7852c..19f8ff741 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/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}
     />
   );
 };

From dcf4afb7e60f003b172fff331559fef5690ca66a Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Sun, 13 Oct 2024 18:10:59 +0200
Subject: [PATCH 02/12] fix(broker-configs): add empty lines between imports to
 pass the test

---
 .../Configs/TableComponents/InputCell/InputCellViewMode.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 707481ced..82ad31dbf 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
@@ -4,9 +4,10 @@ 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 ClusterContext from 'components/contexts/ClusterContext';
 
 import * as S from './styled';
-import ClusterContext from 'components/contexts/ClusterContext';
+
 
 interface InputCellViewModeProps {
   value: string;

From 368e03ea7d28c016154a770da6566e82561f7566 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Sun, 13 Oct 2024 18:19:33 +0200
Subject: [PATCH 03/12] fix(broker-configs): remove empty lines to satisfy the
 linter

---
 .../TableComponents/InputCell/InputCellViewMode.tsx        | 1 -
 .../Broker/Configs/TableComponents/InputCell/index.tsx     | 7 +------
 2 files changed, 1 insertion(+), 7 deletions(-)

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 82ad31dbf..4227f0c70 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
@@ -8,7 +8,6 @@ import ClusterContext from 'components/contexts/ClusterContext';
 
 import * as S from './styled';
 
-
 interface InputCellViewModeProps {
   value: string;
   unit: ConfigUnit | undefined;
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index 19f8ff741..3a608ec4f 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
@@ -19,12 +19,7 @@ export interface InputCellProps
 const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
   const [isEdit, setIsEdit] = useState(false);
   const confirm = useConfirm();
-  const {
-    name,
-    source,
-    value: initialValue,
-    isSensitive,
-  } = row.original;
+  const { name, source, value: initialValue, isSensitive } = row.original;
 
   const handleSave = (newValue: string) => {
     if (newValue !== initialValue) {

From b37888bea306622ce1e7f9bad34c93fc5384e760 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Sun, 13 Oct 2024 18:43:22 +0200
Subject: [PATCH 04/12] fix(broker-configs): add cluster context isReadOnly to
 InputCellViewMode test spec

---
 .../InputCell/__test__/InputCellViewMode.spec.tsx            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
index 360eec0f4..4d1d7e632 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } 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();
@@ -51,6 +52,8 @@ describe('InputCellViewMode', () => {
   });
 
   it('disables edit button for read-only properties', () => {
+    const cluster = useContext(ClusterContext);
+    cluster.isReadOnly = true;
     render(
       <InputCellViewMode
         value={value}

From 2bd6fca632c42c7062b3dd8503deaf2a2d900813 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Tue, 15 Oct 2024 00:55:02 +0200
Subject: [PATCH 05/12] fix(broker-configs): set isReadOnly as a prop

---
 .../TableComponents/InputCell/InputCellViewMode.tsx      | 4 ++--
 .../InputCell/__test__/InputCellViewMode.spec.tsx        | 9 +++++----
 .../Broker/Configs/TableComponents/InputCell/index.tsx   | 5 ++++-
 .../src/components/Brokers/Broker/Configs/lib/utils.tsx  | 3 ++-
 4 files changed, 13 insertions(+), 8 deletions(-)

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 4227f0c70..3508be147 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/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,6 +23,7 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
   onEdit,
   isDynamic,
   isSensitive,
+  isReadOnly
 }) => {
   const { displayValue, title } = getConfigDisplayValue(
     isSensitive,
@@ -29,8 +31,6 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
     unit
   );
 
-  const { isReadOnly } = useContext(ClusterContext);
-
   return (
     <S.ValueWrapper $isDynamic={isDynamic}>
       <S.Value title={title}>{displayValue}</S.Value>
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
index 4d1d7e632..9499fa857 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
+++ b/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,6 +46,7 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
+        isReadOnly={false}
       />
     );
     await user.click(screen.getByLabelText('editAction'));
@@ -52,8 +54,6 @@ describe('InputCellViewMode', () => {
   });
 
   it('disables edit button for read-only properties', () => {
-    const cluster = useContext(ClusterContext);
-    cluster.isReadOnly = true;
     render(
       <InputCellViewMode
         value={value}
@@ -61,6 +61,7 @@ describe('InputCellViewMode', () => {
         onEdit={mockOnEdit}
         isDynamic
         isSensitive={false}
+        isReadOnly
       />
     );
     expect(screen.getByLabelText('editAction')).toBeDisabled();
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index 3a608ec4f..082e29552 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
index d452a1ac8..8cca24fa0 100644
--- a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
+++ b/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());

From 3a20d1c52b6ddff688c86c65b58c2a115e61c8e7 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Tue, 15 Oct 2024 01:04:27 +0200
Subject: [PATCH 06/12] fix(broker-configs): add necessary fixes to satisfy the
 tests

---
 .../Configs/TableComponents/InputCell/InputCellViewMode.tsx   | 3 +--
 .../Broker/Configs/TableComponents/InputCell/index.tsx        | 3 ++-
 frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

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 3508be147..694abec29 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
@@ -1,10 +1,9 @@
-import React, { type FC, useContext } 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 { getConfigDisplayValue } from 'components/Brokers/Broker/Configs/lib/utils';
-import ClusterContext from 'components/contexts/ClusterContext';
 
 import * as S from './styled';
 
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index 082e29552..3aaf7199c 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
@@ -8,9 +8,10 @@ import {
 } from 'components/Brokers/Broker/Configs/lib/types';
 import { getConfigUnit } from 'components/Brokers/Broker/Configs/lib/utils';
 
+import ClusterContext from 'components/contexts/ClusterContext';
+
 import InputCellViewMode from './InputCellViewMode';
 import InputCellEditMode from './InputCellEditMode';
-import ClusterContext from 'components/contexts/ClusterContext';
 
 export interface InputCellProps
   extends CellContext<BrokerConfigsTableRow, BrokerConfig['value']> {
diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
index 8cca24fa0..2ebcf2e08 100644
--- a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+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';
@@ -9,8 +9,8 @@ import type {
   ConfigUnit,
   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());

From bfd0bc68ce33141a18528f798c9db2561d02f04d Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Tue, 15 Oct 2024 01:11:52 +0200
Subject: [PATCH 07/12] fix(broker-configs): add more fixes to satisfy the
 tests

---
 .../Configs/TableComponents/InputCell/InputCellViewMode.tsx     | 2 +-
 .../Brokers/Broker/Configs/TableComponents/InputCell/index.tsx  | 1 -
 frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx    | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

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 694abec29..1ddfa2b03 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode.tsx
@@ -22,7 +22,7 @@ const InputCellViewMode: FC<InputCellViewModeProps> = ({
   onEdit,
   isDynamic,
   isSensitive,
-  isReadOnly
+  isReadOnly,
 }) => {
   const { displayValue, title } = getConfigDisplayValue(
     isSensitive,
diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index 3aaf7199c..edeaf4f0a 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
@@ -7,7 +7,6 @@ import {
   UpdateBrokerConfigCallback,
 } from 'components/Brokers/Broker/Configs/lib/types';
 import { getConfigUnit } from 'components/Brokers/Broker/Configs/lib/utils';
-
 import ClusterContext from 'components/contexts/ClusterContext';
 
 import InputCellViewMode from './InputCellViewMode';
diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
index 2ebcf2e08..957b894f2 100644
--- a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
@@ -3,7 +3,6 @@ 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,
   ConfigUnit,

From 271e618ffd28d5bab3bfa441054b3ede8ee58eae Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Tue, 15 Oct 2024 01:17:11 +0200
Subject: [PATCH 08/12] fix(broker-configs): add/remove blank lines to satisfy
 the tests

---
 frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
index 957b894f2..d452a1ac8 100644
--- a/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/lib/utils.tsx
@@ -3,12 +3,12 @@ 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,
   ConfigUnit,
   UpdateBrokerConfigCallback,
 } from './types';
-
 import { CONFIG_SOURCE_NAME_MAP, CONFIG_SOURCE_PRIORITY } from './constants';
 
 const getConfigFieldMatch = (field: string, query: string) =>

From 0fb3841744ff5531a36a545959373bc114374faa Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Thu, 17 Oct 2024 15:07:41 +0200
Subject: [PATCH 09/12] feat(connectors): disable connector ActionsCell in
 cluster RO mode

---
 frontend/src/components/Connect/List/ActionsCell.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Connect/List/ActionsCell.tsx b/frontend/src/components/Connect/List/ActionsCell.tsx
index 9b219f20e..105193637 100644
--- a/frontend/src/components/Connect/List/ActionsCell.tsx
+++ b/frontend/src/components/Connect/List/ActionsCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   Action,
   ConnectorAction,
@@ -17,12 +17,14 @@ import {
 import { useConfirm } from 'lib/hooks/useConfirm';
 import { useIsMutating } from '@tanstack/react-query';
 import { ActionDropdownItem } from 'components/common/ActionComponent';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   row,
 }) => {
   const { connect, name, status } = row.original;
   const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { isReadOnly } = useContext(ClusterContext);
   const mutationsNumber = useIsMutating();
   const isMutating = mutationsNumber > 0;
   const confirm = useConfirm();
@@ -59,7 +61,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
     stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
 
   return (
-    <Dropdown>
+    <Dropdown disabled={isReadOnly}>
       {status.state === ConnectorState.PAUSED && (
         <ActionDropdownItem
           onClick={resumeConnectorHandler}

From e254bcfa242c61c8914fa4edab5cf77f9938f4e3 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Mon, 21 Oct 2024 06:01:32 +0200
Subject: [PATCH 10/12] fix: move isReadOnly check from dropdown to list items

---
 frontend/src/components/Connect/List/ActionsCell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Connect/List/ActionsCell.tsx b/frontend/src/components/Connect/List/ActionsCell.tsx
index 105193637..67496494b 100644
--- a/frontend/src/components/Connect/List/ActionsCell.tsx
+++ b/frontend/src/components/Connect/List/ActionsCell.tsx
@@ -61,7 +61,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
     stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
 
   return (
-    <Dropdown disabled={isReadOnly}>
+    <Dropdown>
       {status.state === ConnectorState.PAUSED && (
         <ActionDropdownItem
           onClick={resumeConnectorHandler}
@@ -77,7 +77,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
       )}
       <ActionDropdownItem
         onClick={restartConnectorHandler}
-        disabled={isMutating}
+        disabled={isMutating || isReadOnly}
         permission={{
           resource: ResourceType.CONNECT,
           action: Action.RESTART,
@@ -108,7 +108,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
       >
         Restart Failed Tasks
       </ActionDropdownItem>
-      <DropdownItem onClick={handleDelete} danger>
+      <DropdownItem onClick={handleDelete} disabled={isReadOnly} danger>
         Remove Connector
       </DropdownItem>
     </Dropdown>

From 21a91ce38732a8f00859d43b6d0cef583ffd4438 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Mon, 10 Mar 2025 21:40:03 +0100
Subject: [PATCH 11/12] fix: replace cluster ro property with row property

---
 .../Broker/Configs/TableComponents/InputCell/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index edeaf4f0a..b4450c98b 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
@@ -7,7 +7,6 @@ import {
   UpdateBrokerConfigCallback,
 } from 'components/Brokers/Broker/Configs/lib/types';
 import { getConfigUnit } from 'components/Brokers/Broker/Configs/lib/utils';
-import ClusterContext from 'components/contexts/ClusterContext';
 
 import InputCellViewMode from './InputCellViewMode';
 import InputCellEditMode from './InputCellEditMode';
@@ -20,7 +19,13 @@ export interface InputCellProps
 const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
   const [isEdit, setIsEdit] = useState(false);
   const confirm = useConfirm();
-  const { name, source, value: initialValue, isSensitive } = row.original;
+  const {
+    name,
+    source,
+    value: initialValue,
+    isSensitive,
+    isReadOnly,
+  } = row.original;
 
   const handleSave = (newValue: string) => {
     if (newValue !== initialValue) {
@@ -33,7 +38,6 @@ const InputCell: FC<InputCellProps> = ({ row, onUpdate }) => {
 
   const isDynamic = source === 'DYNAMIC_BROKER_CONFIG';
   const configUnit = getConfigUnit(name);
-  const { isReadOnly } = useContext(ClusterContext);
 
   return isEdit ? (
     <InputCellEditMode

From 4f70638de10720d5149584313419de51c5f3ab60 Mon Sep 17 00:00:00 2001
From: Milos Spartan <milos.djurdjevic.brains24@gmail.com>
Date: Mon, 10 Mar 2025 21:50:59 +0100
Subject: [PATCH 12/12] fix: remove unused useContext import

---
 .../Brokers/Broker/Configs/TableComponents/InputCell/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
index b4450c98b..a55d7852c 100644
--- a/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
+++ b/frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx
@@ -1,4 +1,4 @@
-import React, { type FC, useState, useContext } from 'react';
+import React, { type FC, useState } from 'react';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import { type CellContext } from '@tanstack/react-table';
 import { type BrokerConfig } from 'generated-sources';