fix: delete modal closing prematurely, rows keeps refetching unnecess… (#941)

## Problem
1. Delete row modal closes immediately after Delete is clicked, it does
not show the loading bar like it should
2. Rows are refetched each time GET_TABLE query is refetched. The
happens when the following is changed: column width, column ordering,
collaborator changes, etc...

## Solution
1. Re-use the delete modal in the ContextProviderContext 
2. Prevent calling refetch() after GET_TABLE is called

Fixes PLU-465
Fixes PLU-463

Author: pregnantboy

packages/frontend/src/pages/Tile/components/Table.tsx

@@ -206,54 +206,55 @@ export default function Table(): JSX.Element {
   const virtualRows = rowVirtualizer.getVirtualItems()
 
   return (
-    <Box position="relative">
-      <Flex
-        overflow="auto"
-        w="100%"
-        ref={parentRef}
-        minH="300px"
-        flexDir="column"
-        position="relative"
-        // so that search bar results dont get blocked by header or footer
-        scrollPaddingTop={ROW_HEIGHT.HEADER + 'px'}
-        scrollPaddingBottom={ROW_HEIGHT.FOOTER + ROW_HEIGHT.DEFAULT + 'px'}
-        // so highlighted element doesnt get blocked by checkbox column
-        scrollPaddingLeft={60}
-        onClick={onBlurClick}
-        className={styles.table}
-      >
+    <ContextMenuContextProvider
+      removeRows={removeRows}
+      rowSelection={rowSelection}
+      clearRowSelection={() => setRowSelection({})}
+    >
+      <Box position="relative">
         <Flex
+          overflow="auto"
+          w="100%"
+          ref={parentRef}
+          minH="300px"
           flexDir="column"
-          w="fit-content"
-          minW="100%"
-          flex={1}
-          ref={containerRef}
+          position="relative"
+          // so that search bar results dont get blocked by header or footer
+          scrollPaddingTop={ROW_HEIGHT.HEADER + 'px'}
+          scrollPaddingBottom={ROW_HEIGHT.FOOTER + ROW_HEIGHT.DEFAULT + 'px'}
+          // so highlighted element doesnt get blocked by checkbox column
+          scrollPaddingLeft={60}
+          onClick={onBlurClick}
+          className={styles.table}
         >
           <Flex
-            bgColor={HEADER_COLOR.DEFAULT}
-            alignItems="stretch"
-            position="sticky"
-            top={0}
-            h={`${ROW_HEIGHT.HEADER}px`}
-            maxH={`${ROW_HEIGHT.HEADER}px`}
-            zIndex={Z_INDEX.FOOTER}
-            borderTopWidth="1px"
-            borderBottomWidth="1px"
-            borderColor={BORDER_COLOR.DEFAULT}
-            marginBottom="1px"
-            fontWeight="bold"
-          >
-            <TableHeader
-              setColumnOrder={setColumnOrder}
-              headers={table.getFlatHeaders()}
-              tableState={table.getState()}
-            />
-          </Flex>
-          <ContextMenuContextProvider
-            removeRows={removeRows}
-            rowSelection={rowSelection}
-            clearRowSelection={() => setRowSelection({})}
+            flexDir="column"
+            w="fit-content"
+            minW="100%"
+            flex={1}
+            ref={containerRef}
           >
+            <Flex
+              bgColor={HEADER_COLOR.DEFAULT}
+              alignItems="stretch"
+              position="sticky"
+              top={0}
+              h={`${ROW_HEIGHT.HEADER}px`}
+              maxH={`${ROW_HEIGHT.HEADER}px`}
+              zIndex={Z_INDEX.FOOTER}
+              borderTopWidth="1px"
+              borderBottomWidth="1px"
+              borderColor={BORDER_COLOR.DEFAULT}
+              marginBottom="1px"
+              fontWeight="bold"
+            >
+              <TableHeader
+                setColumnOrder={setColumnOrder}
+                headers={table.getFlatHeaders()}
+                tableState={table.getState()}
+              />
+            </Flex>
+
             <Box h={rowVirtualizer.getTotalSize()} ref={childRef}>
               {virtualRows.map((virtualRow) => {
                 const row = rows[virtualRow.index] as Row<GenericRowData>
@@ -271,23 +272,22 @@ export default function Table(): JSX.Element {
                 }
               })}
             </Box>
-          </ContextMenuContextProvider>
-        </Flex>
-        {mode === 'edit' && (
-          <TableRow
-            tableMeta={table.options.meta as TableMeta<GenericRowData>}
-            row={newRow}
-            stickyBottom
+          </Flex>
+          {mode === 'edit' && (
+            <TableRow
+              tableMeta={table.options.meta as TableMeta<GenericRowData>}
+              row={newRow}
+              stickyBottom
+            />
+          )}
+          <TableFooter
+            rowCount={rows.length}
+            rowSelection={rowSelection}
+            parentRef={parentRef}
           />
-        )}
-        <TableFooter
-          removeRows={removeRows}
-          rowCount={rows.length}
-          rowSelection={rowSelection}
-          parentRef={parentRef}
-        />
-      </Flex>
-      <SearchBar table={table} rowVirtualizer={rowVirtualizer} />
-    </Box>
+        </Flex>
+        <SearchBar table={table} rowVirtualizer={rowVirtualizer} />
+      </Box>
+    </ContextMenuContextProvider>
   )
 }

packages/frontend/src/pages/Tile/components/TableFooter/DeleteRowsButton.tsx

@@ -1,30 +1,18 @@
-import { useState } from 'react'
 import { BiTrash } from 'react-icons/bi'
 import { Button } from '@chakra-ui/react'
 
 import { ROW_HEIGHT } from '@/pages/Tile/constants'
 
+import { useContextMenuContext } from '../../contexts/ContextMenuContext'
 import { useTableContext } from '../../contexts/TableContext'
 
-import DeleteRowsModal from './DeleteRowsModal'
-
-interface DeleteRowsButtonProps {
-  rowSelection: Record<string, boolean>
-  removeRows: (rowIds: string[]) => void
-}
-
-export default function DeleteRowsButton({
-  rowSelection,
-  removeRows,
-}: DeleteRowsButtonProps) {
+export default function DeleteRowsButton() {
   const { mode } = useTableContext()
-  const isViewMode = mode === 'view'
-
-  const rowsSelected = Object.keys(rowSelection)
+  const { onDeleteRows } = useContextMenuContext()
 
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const isViewMode = mode === 'view'
 
-  if (isViewMode || !rowsSelected.length) {
+  if (isViewMode) {
     return null
   }
 
@@ -42,18 +30,10 @@ export default function DeleteRowsButton({
         h="100%"
         colorScheme="critical"
         leftIcon={<BiTrash />}
-        onClick={() => setIsDialogOpen(true)}
+        onClick={() => onDeleteRows()}
       >
-        Delete
+        Delete rows
       </Button>
-      {/* lazy load the dialog */}
-      {isDialogOpen && (
-        <DeleteRowsModal
-          rowIdsToDelete={rowsSelected}
-          removeRows={removeRows}
-          onClose={() => setIsDialogOpen(false)}
-        />
-      )}
     </div>
   )
 }

packages/frontend/src/pages/Tile/components/TableFooter/index.tsx

@@ -9,18 +9,12 @@ import DeleteRowsButton from './DeleteRowsButton'
 import RowCount from './RowCount'
 
 interface TableFooterProps {
-  removeRows: (rows: string[]) => void
   rowCount: number
   rowSelection: Record<string, boolean>
   parentRef: React.RefObject<HTMLDivElement>
 }
 
-function TableFooter({
-  removeRows,
-  rowCount,
-  rowSelection,
-  parentRef,
-}: TableFooterProps) {
+function TableFooter({ rowCount, rowSelection, parentRef }: TableFooterProps) {
   return (
     <Flex
       w="100%"
@@ -38,7 +32,7 @@ function TableFooter({
     >
       <Flex>
         <RowCount rowCount={rowCount} rowSelection={rowSelection} />
-        <DeleteRowsButton rowSelection={rowSelection} removeRows={removeRows} />
+        {Object.keys(rowSelection).length > 0 && <DeleteRowsButton />}
       </Flex>
       <Flex>
         <Button

packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx

@@ -20,7 +20,7 @@ import DeleteRowsModal from '../components/TableFooter/DeleteRowsModal'
 
 interface ContextMenuContextProps {
   onRightClick: (rowId: string, pos: [number, number]) => void
-  onDeleteRows: (rowIdsToDelete: string[]) => void
+  onDeleteRows: () => void
 }
 
 const ContextMenuContext = createContext<ContextMenuContextProps | null>(null)
@@ -72,6 +72,11 @@ export const ContextMenuContextProvider = ({
     [clearRowSelection, rowsSelected],
   )
 
+  const onDeleteRows = useCallback(() => {
+    setRowIdsSelected(rowsSelected)
+    setIsDeleteModalOpen(true)
+  }, [rowsSelected])
+
   const onRowIdCopy = useCallback(
     (rowId: string) => {
       navigator.clipboard.writeText(rowId)
@@ -84,7 +89,7 @@ export const ContextMenuContextProvider = ({
     <ContextMenuContext.Provider
       value={{
         onRightClick,
-        onDeleteRows: () => setIsDeleteModalOpen(true),
+        onDeleteRows,
       }}
     >
       {children}

packages/frontend/src/pages/Tile/index.tsx

@@ -1,5 +1,6 @@
 import { ITableMetadata } from '@plumber/types'
 
+import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { ApolloError, useQuery } from '@apollo/client'
 import { Center, Flex } from '@chakra-ui/react'
@@ -43,13 +44,15 @@ export default function Tile(): JSX.Element | null {
           headers: { 'x-tiles-view-key': urlViewOnlyKey },
         }
       : undefined,
-    onCompleted: () => {
-      // only start fetching rows after table metadata is loaded
-      refetch()
-    },
   })
   const ownRole = getTableData?.getTable?.role
 
+  useEffect(() => {
+    if (isGetTableCalled) {
+      refetch()
+    }
+  }, [isGetTableCalled, refetch])
+
   // On first load, show loading spinner
   if (isTableLoading && !isGetTableCalled) {
     return (