fix(netdata table): sticky position of actions (#397)

* fix(netdata table): sticky position of actions

* chore(netdata table): remove forgotten console

* chore(netdata table): fix typo for initial column visibility

* fix(netdata table): update table head for no bulk actions

Author: burbuli8ra

src/components/tableV2/components/columnsMenu.js

@@ -5,7 +5,6 @@ import { Checkbox } from "src/components/checkbox"
 import Flex from "src/components/templates/flex"
 
 const ColumnsMenu = ({ parentRef, isOpen, columns, onClose }) => {
-  console.log({ isOpen, parentRefCurrent: parentRef.current })
   if (parentRef.current && isOpen)
     return (
       <Drop

src/components/tableV2/core/base-table.js

@@ -56,6 +56,7 @@ const StyledTableControls = styled(Flex)`
 const Table = forwardRef(
   (
     {
+      hasBulkActions,
       handleSearch,
       children,
       searchPlaceholder = "Search",
@@ -67,26 +68,28 @@ const Table = forwardRef(
     ref
   ) => {
     return (
-      <Flex width={{ base: "100%", min: "fit-content" }} height="100%" column>
-        <StyledTableControls>
-          {handleSearch && (
-            <Box width={{ max: 50 }}>
-              <SearchInput
-                data-testid="table-global-search-filter"
-                data-ga={`${dataGa}::search::table-filter`}
-                onChange={debounce(300, e => {
-                  e.persist()
-                  handleSearch(e.target.value)
-                })}
-                placeholder={searchPlaceholder}
-                iconRight={<Icon name="magnify" color="textLite" />}
-              />
-            </Box>
-          )}
-          <Flex gap={1} data-testid="bulk-actions" width="100%" justifyContent="end">
-            {bulkActions && bulkActions()}
-          </Flex>
-        </StyledTableControls>
+      <Flex width={{ base: "100%", min: "fit-content" }} column>
+        {(hasBulkActions || handleSearch) && (
+          <StyledTableControls>
+            {handleSearch && (
+              <Box width={{ max: 50 }}>
+                <SearchInput
+                  data-testid="table-global-search-filter"
+                  data-ga={`${dataGa}::search::table-filter`}
+                  onChange={debounce(300, e => {
+                    e.persist()
+                    handleSearch(e.target.value)
+                  })}
+                  placeholder={searchPlaceholder}
+                  iconRight={<Icon name="magnify" color="textLite" />}
+                />
+              </Box>
+            )}
+            <Flex gap={1} data-testid="bulk-actions" width="100%" justifyContent="end">
+              {bulkActions && bulkActions()}
+            </Flex>
+          </StyledTableControls>
+        )}
         <Box sx={{ borderCollapse: "separate" }} ref={ref} as="table" {...props}>
           {children}
         </Box>
@@ -96,16 +99,23 @@ const Table = forwardRef(
   }
 )
 
-Table.Head = forwardRef(({ children, ...props }, ref) => (
-  <Box
-    ref={ref}
-    sx={{ whiteSpace: "nowrap", position: "sticky", top: "50px", zIndex: "10" }}
-    as="thead"
-    {...props}
-  >
-    {children}
-  </Box>
-))
+Table.Head = forwardRef(({ hasBulkActions, children, ...props }, ref) => {
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        whiteSpace: "nowrap",
+        position: "sticky",
+        top: hasBulkActions ? "50px" : "0",
+        zIndex: "10",
+      }}
+      as="thead"
+      {...props}
+    >
+      {children}
+    </Box>
+  )
+})
 
 Table.HeadRow = forwardRef(({ children, ...props }, ref) => (
   <StyledHeaderRow ref={ref} {...props}>

src/components/tableV2/netdataTable.js

@@ -39,15 +39,15 @@ const NetdataTable = ({
     pageIndex: 0,
     pageSize: 100,
   },
-  columnVisibility: intialColumnVisibility,
+  columnVisibility: initialColumnVisibility,
   testPrefix = "",
   sortBy = [],
   testPrefixCallback,
   dataGa,
   enableColumnVisibility = false,
 }) => {
   const [isColumnDropdownVisible, setIsColumnDropdownVisible] = useState(false)
-  const [columnVisibility, setColumnVisibility] = useState(intialColumnVisibility)
+  const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility)
 
   const [originalSelectedRows, setOriginalSelectedRow] = useState([])
   const [sorting, setSorting] = useState(sortBy)
@@ -174,18 +174,21 @@ const NetdataTable = ({
 
   const headers = table.getFlatHeaders()
 
+  const hasBulkActions = enableColumnVisibility || !!Object.keys(bulkActions).length
+
   return (
     <Table
       selectedRows={originalSelectedRows}
-      bulkActions={() => renderBulkActions()}
+      hasBulkActions={hasBulkActions}
+      bulkActions={renderBulkActions}
       Pagination={enablePagination && makePagination({ table })}
       handleSearch={onGlobalSearchChange ? handleGlobalSearch : null}
       ref={tableRef}
       data-testid={`netdata-table${testPrefix}`}
       testPrefix={testPrefix}
       dataGa={dataGa}
     >
-      <Table.Head data-testid={`netdata-table-head${testPrefix}`}>
+      <Table.Head hasBulkActions={hasBulkActions} data-testid={`netdata-table-head${testPrefix}`}>
         <Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
           {makeHeadCell({ headers, enableSorting, testPrefix })}
         </Table.HeadRow>