From faeb8f108c5df7b2f4ddbbf2e7c8f50f0ca409bc Mon Sep 17 00:00:00 2001
From: Akshay <akshaysasidharan93@gmail.com>
Date: Mon, 24 Jun 2024 20:10:49 +0530
Subject: [PATCH] TJDB row edit drawer fix after click on expand (#10161)

Co-authored-by: blank0537 <anishsingh0537@gmail.com>
---
 .../Drawers/EditRowDrawer/index.jsx           | 67 ++++++++++---------
 frontend/src/TooljetDatabase/Table/Header.jsx |  6 +-
 frontend/src/TooljetDatabase/Table/index.jsx  | 27 ++++++--
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/frontend/src/TooljetDatabase/Drawers/EditRowDrawer/index.jsx b/frontend/src/TooljetDatabase/Drawers/EditRowDrawer/index.jsx
index 6ada6b0930..13b59555e3 100644
--- a/frontend/src/TooljetDatabase/Drawers/EditRowDrawer/index.jsx
+++ b/frontend/src/TooljetDatabase/Drawers/EditRowDrawer/index.jsx
@@ -13,6 +13,7 @@ const EditRowDrawer = ({
   setIsEditRowDrawerOpen,
   selectedRowIds,
   rows,
+  isDirectRowExpand,
   referencedColumnDetails,
   setReferencedColumnDetails,
 }) => {
@@ -37,38 +38,40 @@ const EditRowDrawer = ({
 
   return (
     <>
-      <ButtonSolid
-        variant="tertiary"
-        size="sm"
-        onClick={() => {
-          setIsEditRowDrawerOpen(!isEditRowDrawerOpen);
-        }}
-        className="gap-0"
-        data-cy="edit-row-button-"
-        style={{
-          padding: '4px 8px 4px 8px',
-        }}
-      >
-        {/* <SolidIcon name="editrectangle" width="14" fill={isCreateRowDrawerOpen ? '#3E63DD' : '#889096'} /> */}
-        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
-          <path
-            d="M8.216 1.30645C8.80114 0.721316 9.74983 0.721316 10.335 1.30645L11.3944 2.36593C11.9796 2.95106 11.9796 3.89975 11.3944 4.48489L10.4551 5.42426C10.3813 5.38774 10.3037 5.34826 10.2233 5.30591C9.68182 5.02084 9.03927 4.62074 8.55972 4.1412C8.08017 3.66165 7.68008 3.01909 7.39501 2.47762C7.35265 2.39716 7.31316 2.31956 7.27664 2.24581L8.216 1.30645Z"
-            fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
-          />
-          <path
-            d="M7.87225 4.82866C8.43972 5.39613 9.1614 5.84275 9.73294 6.14639L6.03887 9.84046C5.80963 10.0697 5.51223 10.2184 5.19129 10.2642L2.96638 10.5821C2.47196 10.6527 2.04817 10.2289 2.1188 9.73451L2.43664 7.5096C2.48249 7.18867 2.6312 6.89126 2.86044 6.66202L6.55451 2.96794C6.85815 3.53949 7.30478 4.26119 7.87225 4.82866Z"
-            fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
-          />
-          <path
-            d="M0.652737 11.562C0.384265 11.562 0.166626 11.7797 0.166626 12.0482C0.166626 12.3166 0.384265 12.5343 0.652737 12.5343H11.3472C11.6157 12.5343 11.8333 12.3166 11.8333 12.0482C11.8333 11.7797 11.6157 11.562 11.3472 11.562H0.652737Z"
-            fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
-          />
-        </svg>
-        &nbsp;&nbsp;
-        <span data-cy="edit-row-button-text" className="tj-text-xsm font-weight-500">
-          Edit row
-        </span>
-      </ButtonSolid>
+      {!isDirectRowExpand && (
+        <ButtonSolid
+          variant="tertiary"
+          size="sm"
+          onClick={() => {
+            setIsEditRowDrawerOpen(!isEditRowDrawerOpen);
+          }}
+          className="gap-0"
+          data-cy="edit-row-button-"
+          style={{
+            padding: '4px 8px 4px 8px',
+          }}
+        >
+          {/* <SolidIcon name="editrectangle" width="14" fill={isCreateRowDrawerOpen ? '#3E63DD' : '#889096'} /> */}
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+            <path
+              d="M8.216 1.30645C8.80114 0.721316 9.74983 0.721316 10.335 1.30645L11.3944 2.36593C11.9796 2.95106 11.9796 3.89975 11.3944 4.48489L10.4551 5.42426C10.3813 5.38774 10.3037 5.34826 10.2233 5.30591C9.68182 5.02084 9.03927 4.62074 8.55972 4.1412C8.08017 3.66165 7.68008 3.01909 7.39501 2.47762C7.35265 2.39716 7.31316 2.31956 7.27664 2.24581L8.216 1.30645Z"
+              fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
+            />
+            <path
+              d="M7.87225 4.82866C8.43972 5.39613 9.1614 5.84275 9.73294 6.14639L6.03887 9.84046C5.80963 10.0697 5.51223 10.2184 5.19129 10.2642L2.96638 10.5821C2.47196 10.6527 2.04817 10.2289 2.1188 9.73451L2.43664 7.5096C2.48249 7.18867 2.6312 6.89126 2.86044 6.66202L6.55451 2.96794C6.85815 3.53949 7.30478 4.26119 7.87225 4.82866Z"
+              fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
+            />
+            <path
+              d="M0.652737 11.562C0.384265 11.562 0.166626 11.7797 0.166626 12.0482C0.166626 12.3166 0.384265 12.5343 0.652737 12.5343H11.3472C11.6157 12.5343 11.8333 12.3166 11.8333 12.0482C11.8333 11.7797 11.6157 11.562 11.3472 11.562H0.652737Z"
+              fill={isEditRowDrawerOpen ? '#3E63DD' : '#889096'}
+            />
+          </svg>
+          &nbsp;&nbsp;
+          <span data-cy="edit-row-button-text" className="tj-text-xsm font-weight-500">
+            Edit row
+          </span>
+        </ButtonSolid>
+      )}
       <Drawer
         isOpen={isEditRowDrawerOpen}
         onClose={() => setIsEditRowDrawerOpen(false)}
diff --git a/frontend/src/TooljetDatabase/Table/Header.jsx b/frontend/src/TooljetDatabase/Table/Header.jsx
index cdc0101c69..92a0f41852 100644
--- a/frontend/src/TooljetDatabase/Table/Header.jsx
+++ b/frontend/src/TooljetDatabase/Table/Header.jsx
@@ -29,6 +29,7 @@ const Header = ({
   setIsEditRowDrawerOpen,
   setFilterEnable,
   filterEnable,
+  isDirectRowExpand,
   referencedColumnDetails,
   setReferencedColumnDetails,
 }) => {
@@ -149,7 +150,7 @@ const Header = ({
             <div className="row align-items-center">
               <div className="col-8 align-items-center p-3 gap-1">
                 <>
-                  {Object.keys(selectedRowIds).length === 0 && (
+                  {(isDirectRowExpand || Object.keys(selectedRowIds).length === 0) && (
                     <>
                       <AddNewDataPopOver
                         disabled={false}
@@ -199,11 +200,12 @@ const Header = ({
                       setIsEditRowDrawerOpen={setIsEditRowDrawerOpen}
                       selectedRowIds={selectedRowIds}
                       rows={rows}
+                      isDirectRowExpand={isDirectRowExpand}
                       referencedColumnDetails={referencedColumnDetails}
                       setReferencedColumnDetails={setReferencedColumnDetails}
                     />
                   ) : null}
-                  {Object.keys(selectedRowIds).length > 0 && (
+                  {!isDirectRowExpand && Object.keys(selectedRowIds).length > 0 && (
                     <div>
                       <ButtonSolid
                         variant="dangerTertiary"
diff --git a/frontend/src/TooljetDatabase/Table/index.jsx b/frontend/src/TooljetDatabase/Table/index.jsx
index 270d3e7b8b..0d07426156 100644
--- a/frontend/src/TooljetDatabase/Table/index.jsx
+++ b/frontend/src/TooljetDatabase/Table/index.jsx
@@ -87,6 +87,7 @@ const Table = ({ collapseSidebar }) => {
   const [nullValue, setNullValue] = useState(false);
   const [progress, setProgress] = useState(0);
   const [isCellUpdateInProgress, setIsCellUpdateInProgress] = useState(false);
+  const [isDirectRowExpand, setIsDirectRowExpand] = useState(false);
   const [referencedColumnDetails, setReferencedColumnDetails] = useState([]);
 
   const [cachedOptions, setCahedOptions] = useState({});
@@ -225,6 +226,7 @@ const Table = ({ collapseSidebar }) => {
     const newSelectedIdRef = {};
     if (rowIdSelected) newSelectedIdRef[`${rowIdSelected}`] = true;
     setSelectedRowIds(newSelectedIdRef);
+    setIsDirectRowExpand(true);
     return;
   };
 
@@ -401,6 +403,14 @@ const Table = ({ collapseSidebar }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTable]);
 
+  useEffect(() => {
+    if (!isEditRowDrawerOpen && isDirectRowExpand) {
+      setSelectedRowIds({});
+      setIsDirectRowExpand(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditRowDrawerOpen]);
+
   const tableData = React.useMemo(
     () => (loading ? Array(10).fill({}) : selectedTableData),
     [loading, selectedTableData]
@@ -1083,6 +1093,8 @@ const Table = ({ collapseSidebar }) => {
         setIsEditRowDrawerOpen={setIsEditRowDrawerOpen}
         setFilterEnable={setFilterEnable}
         filterEnable={filterEnable}
+        isDirectRowExpand={isDirectRowExpand}
+        setIsDirectRowExpand={setIsDirectRowExpand}
         referencedColumnDetails={referencedColumnDetails}
         setReferencedColumnDetails={setReferencedColumnDetails}
         // getForeignKeyDetails={getForeignKeyDetails}
@@ -1156,15 +1168,20 @@ const Table = ({ collapseSidebar }) => {
                     <div>
                       <IndeterminateCheckbox
                         indeterminate={
-                          Object.keys(selectedRowIds).length > 0 && Object.keys(selectedRowIds).length < rows.length
+                          isDirectRowExpand
+                            ? false
+                            : Object.keys(selectedRowIds).length > 0 && Object.keys(selectedRowIds).length < rows.length
+                        }
+                        checked={
+                          isDirectRowExpand ? false : Object.keys(selectedRowIds).length === rows.length && rows.length
                         }
-                        checked={Object.keys(selectedRowIds).length === rows.length && rows.length}
                         onChange={() => toggleSelectOrDeSelectAllRows(rows.length)}
                         style={{
                           backgroundColor: `${
-                            (Object.keys(selectedRowIds).length > 0 &&
+                            (!isDirectRowExpand &&
+                              Object.keys(selectedRowIds).length > 0 &&
                               Object.keys(selectedRowIds).length < rows.length) ||
-                            (Object.keys(selectedRowIds).length === rows.length && rows.length)
+                            (!isDirectRowExpand && Object.keys(selectedRowIds).length === rows.length && rows.length)
                               ? '#3E63DD'
                               : 'var(--base)'
                           }`,
@@ -1263,7 +1280,7 @@ const Table = ({ collapseSidebar }) => {
                           }}
                         >
                           <IndeterminateCheckbox
-                            checked={selectedRowIds[row.id] ?? false}
+                            checked={!isDirectRowExpand ? selectedRowIds[row.id] ?? false : false}
                             onChange={() => toggleRowSelection(row.id)}
                           />