From 2928fc63ed6ca0b22deb4093a819e374b8c3ad82 Mon Sep 17 00:00:00 2001
From: Vik <vkb.info@gmail.com>
Date: Fri, 28 Apr 2023 14:18:34 +0530
Subject: [PATCH] Add is operator for delete and update operations

---
 .../TooljetDatabase/DeleteRows.jsx            | 29 +++++++++++++------
 .../QueryEditors/TooljetDatabase/ListRows.jsx | 11 ++-----
 .../TooljetDatabase/UpdateRows.jsx            | 29 +++++++++++++------
 .../QueryEditors/TooljetDatabase/util.js      |  6 ++++
 4 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
index 6078539ec0..a3aa90b4fb 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
@@ -4,6 +4,7 @@ import { uniqueId } from 'lodash';
 import { CodeHinter } from '@/Editor/CodeBuilder/CodeHinter';
 import Select from '@/_ui/Select';
 import { operators } from '@/TooljetDatabase/constants';
+import { isOperatorOptions } from './util';
 
 export const DeleteRows = React.memo(({ currentState, darkMode }) => {
   const { columns, deleteOperationLimitOptionChanged, deleteRowsOptions, handleDeleteRowsOptionsChange } =
@@ -83,15 +84,25 @@ export const DeleteRows = React.memo(({ currentState, darkMode }) => {
             />
           </div>
           <div className="field col-4">
-            <CodeHinter
-              currentState={currentState}
-              initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
-              className="codehinter-plugins"
-              theme={darkMode ? 'monokai' : 'default'}
-              height={'32px'}
-              placeholder="key"
-              onChange={(newValue) => handleValueChange(newValue)}
-            />
+            {operator === 'is' ? (
+              <Select
+                useMenuPortal={true}
+                placeholder="Select value"
+                value={value}
+                options={isOperatorOptions}
+                onChange={handleValueChange}
+              />
+            ) : (
+              <CodeHinter
+                currentState={currentState}
+                initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
+                className="codehinter-plugins"
+                theme={darkMode ? 'monokai' : 'default'}
+                height={'32px'}
+                placeholder="key"
+                onChange={(newValue) => handleValueChange(newValue)}
+              />
+            )}
           </div>
           <div className="col-1 cursor-pointer m-1 mr-2">
             <svg
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
index a4ae2179e2..062995da6f 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
@@ -4,11 +4,7 @@ import { TooljetDatabaseContext } from '@/TooljetDatabase/index';
 import { uniqueId } from 'lodash';
 import Select from '@/_ui/Select';
 import { operators } from '@/TooljetDatabase/constants';
-
-const isOperatorOptions = [
-  { value: 'null', label: 'null' },
-  { value: 'notNull', label: 'not null' },
-];
+import { isOperatorOptions } from './util';
 
 export const ListRows = React.memo(({ currentState, darkMode }) => {
   const { columns, listRowsOptions, limitOptionChanged, handleOptionsChange } = useContext(TooljetDatabaseContext);
@@ -99,9 +95,6 @@ export const ListRows = React.memo(({ currentState, darkMode }) => {
       updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ value: newValue } });
     };
 
-    console.log('value', value);
-    console.log('operator', operator);
-
     return (
       <div className="mt-1 row-container">
         <div className="d-flex fields-container">
@@ -127,7 +120,7 @@ export const ListRows = React.memo(({ currentState, darkMode }) => {
             {operator === 'is' ? (
               <Select
                 useMenuPortal={true}
-                placeholder="Select operation"
+                placeholder="Select value"
                 value={value}
                 options={isOperatorOptions}
                 onChange={handleValueChange}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
index dccbae1e4e..883bce3c48 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
@@ -4,6 +4,7 @@ import { TooljetDatabaseContext } from '@/TooljetDatabase/index';
 import Select from '@/_ui/Select';
 import { operators } from '@/TooljetDatabase/constants';
 import { uniqueId } from 'lodash';
+import { isOperatorOptions } from './util';
 
 export const UpdateRows = React.memo(({ currentState, darkMode }) => {
   const { columns, updateRowsOptions, handleUpdateRowsOptionsChange } = useContext(TooljetDatabaseContext);
@@ -109,15 +110,25 @@ export const UpdateRows = React.memo(({ currentState, darkMode }) => {
             />
           </div>
           <div className="field col-4">
-            <CodeHinter
-              currentState={currentState}
-              initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
-              className="codehinter-plugins"
-              theme={darkMode ? 'monokai' : 'default'}
-              height={'32px'}
-              placeholder="key"
-              onChange={(newValue) => handleValueChange(newValue)}
-            />
+            {operator === 'is' ? (
+              <Select
+                useMenuPortal={true}
+                placeholder="Select value"
+                value={value}
+                options={isOperatorOptions}
+                onChange={handleValueChange}
+              />
+            ) : (
+              <CodeHinter
+                currentState={currentState}
+                initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
+                className="codehinter-plugins"
+                theme={darkMode ? 'monokai' : 'default'}
+                height={'32px'}
+                placeholder="key"
+                onChange={(newValue) => handleValueChange(newValue)}
+              />
+            )}
           </div>
           <div className="col-1 cursor-pointer m-1 mr-2">
             <svg
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/util.js b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/util.js
index d67aa2d53c..f26545d3fe 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/util.js
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/util.js
@@ -1,4 +1,5 @@
 import { get } from 'lodash';
+
 /**
  * Checks if the queryOptions object contains a filter with an 'eq' (equal) operator and a value equal to '{{null}}'.
  *
@@ -34,3 +35,8 @@ export const hasEqualWithNull = (queryOptions, operation) => {
   }
   return false;
 };
+
+export const isOperatorOptions = [
+  { value: 'null', label: 'null' },
+  { value: 'notNull', label: 'not null' },
+];