From ab17ead153d7612889ddaee7cc31b6da4e631a86 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Tue, 21 Sep 2021 17:02:18 +0530
Subject: [PATCH] Bugfix: tags table-cell-type cannot be edited if its readOnly
 (#806)

* tags and badges:table-cell-type cannot be edited if its readOnly

* going backward for badge and badges type
---
 frontend/src/Editor/Components/Table/Table.jsx |  3 ++-
 frontend/src/Editor/Components/Table/Tags.jsx  | 12 +++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e6b38a196f..1ccff3757a 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -266,7 +266,7 @@ export function Table({
 
       if (Array.isArray(labels)) {
         columnOptions.selectOptions = labels.map((label, index) => {
-          return { name: label, value: values[index] };
+          return { name: label, value: values[index]};
         });
       }
     }
@@ -432,6 +432,7 @@ export function Table({
           return (
             <div>
               <Tags
+                readOnly={!column.isEditable}
                 value={cellValue}
                 onChange={(value) => {
                   handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
diff --git a/frontend/src/Editor/Components/Table/Tags.jsx b/frontend/src/Editor/Components/Table/Tags.jsx
index ff99ca723b..aacbfea90f 100644
--- a/frontend/src/Editor/Components/Table/Tags.jsx
+++ b/frontend/src/Editor/Components/Table/Tags.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-export const Tags = ({ value, onChange }) => {
+export const Tags = ({ value, onChange, readOnly }) => {
 
     value = value || [];
 
@@ -30,9 +30,11 @@ export const Tags = ({ value, onChange }) => {
     function renderTag(text) {
         return <span className="col-auto badge bg-blue-lt p-2 mx-1 tag mb-2">
             {text} 
-            <span className="badge badge-pill bg-red-lt remove-tag-button" onClick={() => removeTag(text)}>
-                x
-            </span>
+            {!readOnly && (
+                <span className="badge badge-pill bg-red-lt remove-tag-button" onClick={() => removeTag(text)}>
+                    x
+                </span>
+            )}
         </span>;
     }
 
@@ -42,7 +44,7 @@ export const Tags = ({ value, onChange }) => {
                 return renderTag(item)
             })}
 
-            {!showForm &&
+            {(!showForm && !readOnly) &&
                 <span className="col-auto badge bg-green-lt mx-1 add-tag-button" onClick={() => setShowForm(true)}>{'+'}</span>
             }