From 66b33402a18fa52eb4a0c8e39adb85e2e1954ec4 Mon Sep 17 00:00:00 2001
From: Gnana_Jeyam <gnanajeyam95@gmail.com>
Date: Mon, 7 Nov 2022 01:01:25 +0530
Subject: [PATCH] fix(ui): Disabled edit access topic configs when role has
 reader mode (#1237)

close #1219
---
 client/src/components/Table/Table.jsx                      | 3 +++
 client/src/components/Table/styles.scss                    | 7 +++++++
 .../containers/Topic/Topic/TopicConfigs/TopicConfigs.jsx   | 4 +++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Table/Table.jsx b/client/src/components/Table/Table.jsx
index 0f7d12991..a6d1f469c 100644
--- a/client/src/components/Table/Table.jsx
+++ b/client/src/components/Table/Table.jsx
@@ -162,6 +162,7 @@ class Table extends Component {
               <td
                 key={`tableCol${index}${colIndex}`}
                 style={column.expand ? { cursor: 'pointer' } : {}}
+                className={column.readOnly ? 'not-allowed' : ''}
                 onDoubleClick={() => {
                   if (
                     actions &&
@@ -184,6 +185,7 @@ class Table extends Component {
             <td
               key={`tableCol${index}${colIndex}`}
               style={column.expand ? { cursor: 'pointer' } : {}}
+              className={column.readOnly ? 'not-allowed' : ''}
               onDoubleClick={() => {
                 if (
                   actions &&
@@ -496,6 +498,7 @@ Table.propTypes = {
       accessor: PropTypes.string,
       colName: PropTypes.string,
       type: PropTypes.string,
+      readOnly: PropTypes.bool,
       cell: PropTypes.function
     })
   ),
diff --git a/client/src/components/Table/styles.scss b/client/src/components/Table/styles.scss
index 4dc46c309..11576b2f6 100644
--- a/client/src/components/Table/styles.scss
+++ b/client/src/components/Table/styles.scss
@@ -19,6 +19,13 @@ td {
   position: relative;
 }
 
+.not-allowed {
+  cursor: not-allowed;
+  input {
+    pointer-events: none;
+  }
+}
+
 .close-container {
   position: absolute;
   z-index: 100;
diff --git a/client/src/containers/Topic/Topic/TopicConfigs/TopicConfigs.jsx b/client/src/containers/Topic/Topic/TopicConfigs/TopicConfigs.jsx
index b2c8d3b8f..f2ee413a5 100644
--- a/client/src/containers/Topic/Topic/TopicConfigs/TopicConfigs.jsx
+++ b/client/src/containers/Topic/Topic/TopicConfigs/TopicConfigs.jsx
@@ -212,6 +212,7 @@ class TopicConfigs extends Form {
   render() {
     const { data, loading } = this.state;
     const roles = this.state.roles || {};
+    const isUpdatable = roles.topic && roles.topic['topic/config/update'];
     return (
       <form
         encType="multipart/form-data"
@@ -237,6 +238,7 @@ class TopicConfigs extends Form {
                 accessor: 'value',
                 colName: 'Value',
                 type: 'text',
+                readOnly: !isUpdatable,
                 cell: obj => {
                   return this.getInput(
                     this.state.formData[obj.name],
@@ -262,7 +264,7 @@ class TopicConfigs extends Form {
             }}
             noContent={'No acl for configs for current kafka user.'}
           />
-          {roles.topic && roles.topic['topic/config/update'] && !this.props.internal ? (
+          {isUpdatable && !this.props.internal ? (
             <aside>
               {this.renderButton('Update configs', this.handleSubmit, undefined, 'submit')}
             </aside>