TJDB row edit drawer fix after click on expand (#10161)

Co-authored-by: blank0537 <anishsingh0537@gmail.com>
2026-05-23 17:08:34 +00:00 · 2024-06-24 20:10:49 +05:30 · 2024-06-24 20:10:49 +05:30 · faeb8f108c
commit faeb8f108c
parent 2238b01cf7
3 changed files with 61 additions and 39 deletions
--- 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)}
--- 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"
--- 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)}
                          />