From 35fc8d160c4403d61ccd1ac873127600e55392d9 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Tue, 20 Dec 2022 17:07:49 +0530
Subject: [PATCH] [Bug fixed ] :[ Table widget ] Badge column type is always
 editable in table row regardless of the editable property (#4999)

* bug fixed: Badge column type is always editable in table row regardless of the editable property

* refactored the code
---
 .../Editor/Components/Table/CustomSelect.jsx  | 11 ++++++-
 .../Editor/Components/Table/columns/index.jsx |  1 +
 .../src/Editor/Inspector/Components/Table.jsx | 33 ++++++++++---------
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/CustomSelect.jsx b/frontend/src/Editor/Components/Table/CustomSelect.jsx
index 851c3f0ab2..17bd95929f 100644
--- a/frontend/src/Editor/Components/Table/CustomSelect.jsx
+++ b/frontend/src/Editor/Components/Table/CustomSelect.jsx
@@ -2,10 +2,19 @@ import React from 'react';
 import SelectSearch from 'react-select-search';
 import { useTranslation } from 'react-i18next';
 
-export const CustomSelect = ({ options, value, multiple, onChange, darkMode }) => {
+export const CustomSelect = ({ options, value, multiple, onChange, darkMode, isEditable }) => {
   const { t } = useTranslation();
 
   function renderValue(valueProps) {
+    if (!isEditable) {
+      const stringifyValue = String(valueProps.value);
+      const arrayOfValueProps = stringifyValue.includes(',') ? stringifyValue.split(', ') : stringifyValue.split(' ');
+      return arrayOfValueProps.map((value, index) => (
+        <span key={index} className="badge bg-blue-lt p-2 mx-1">
+          {value}
+        </span>
+      ));
+    }
     if (valueProps) {
       const stringifyValue = String(valueProps.value);
       const arrayOfValueProps = stringifyValue.includes(',') ? stringifyValue.split(', ') : stringifyValue.split(' ');
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index f3898f4adf..e7ca8a66e7 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -313,6 +313,7 @@ export default function generateColumnsData({
                     handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
                   }}
                   darkMode={darkMode}
+                  isEditable={column.isEditable}
                 />
               </div>
             );
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index dab9a20625..18c5a6d6a3 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -256,7 +256,6 @@ class TableComponent extends React.Component {
               }}
             />
           </div>
-    
 
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
             <div>
@@ -279,21 +278,23 @@ class TableComponent extends React.Component {
                 />
               </div>
               <div className="field mb-2">
-            <label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
-            <CodeHinter
-              currentState={this.props.currentState}
-              initialValue={column.cellBackgroundColor ?? 'inherit'}
-              theme={this.props.darkMode ? 'monokai' : 'default'}
-              mode="javascript"
-              lineNumbers={false}
-              placeholder={''}
-              onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
-              componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
-              popOverCallback={(showing) => {
-                this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
-              }}
-            />
-          </div>
+                <label className="form-label">
+                  {this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}
+                </label>
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.cellBackgroundColor ?? 'inherit'}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode="javascript"
+                  lineNumbers={false}
+                  placeholder={''}
+                  onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
+                  componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
+                  popOverCallback={(showing) => {
+                    this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
+                  }}
+                />
+              </div>
 
               {column.isEditable && (
                 <div>