fix(ui): Disabled edit access topic configs when role has reader mode (…

…#1237) close #1219
tchiotludo · Nov 6, 2022 · 66b3340 · 66b3340
1 parent af5ca0d
commit 66b3340
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>