chore(netdata-table): add support for external search (#418)

* chore(netdata-table): add support for external search

* Update search value to accept defaultValue passed by the user
* Update external columnVisibility object when user updates visible columns
* Move sort update functionality to separate function
* Re-order props alphabetically
* Fix typos

* v2.6.9

Author: burbuli8ra

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.6.8",
+  "version": "2.6.9",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/tableV2/features/globalControls.js

@@ -19,20 +19,21 @@ const StyledTableControls = styled(Flex)`
 `
 
 const GlobalControls = memo(
-  ({ handleSearch, dataGa, searchPlaceholder = "Search", bulkActions }) => {
+  ({ bulkActions, dataGa, handleSearch, searchPlaceholder = "Search", searchValue }) => {
     return (
       <StyledTableControls>
         {handleSearch && (
           <Box width={{ max: 50 }}>
             <SearchInput
               data-testid="table-global-search-filter"
               data-ga={`${dataGa}::search::table-filter`}
+              defaultValue={searchValue}
+              iconRight={<Icon name="magnify" color="textLite" />}
               onChange={debounce(300, e => {
                 e.persist()
                 handleSearch(e.target.value)
               })}
               placeholder={searchPlaceholder}
-              iconRight={<Icon name="magnify" color="textLite" />}
             />
           </Box>
         )}

src/components/tableV2/netdataTable.js

@@ -1,4 +1,4 @@
-//TODO refactor bulk action and row action to single funtion to decrease repeatabillity
+//TODO refactor bulk action and row action to single function to decrease repeatability
 import React, { useEffect, useMemo, useState, useCallback, useRef } from "react"
 
 import {
@@ -30,35 +30,37 @@ import useInfiniteScroll from "./hooks/useInfiniteScroll"
 const noop = () => {}
 
 const NetdataTable = ({
-  dataColumns,
+  bulkActions = {},
+  columnPinningOptions = {},
+  columnVisibility: initialColumnVisibility,
   data,
-  onRowSelected,
-  onGlobalSearchChange,
+  dataColumns,
+  dataGa,
+  disableClickRow,
+  enableColumnPinning = false,
+  enableColumnVisibility = false,
+  enablePagination,
+  enableResize = false,
   enableSelection,
-  globalFilterFn = includesString,
-  tableRef,
   enableSorting,
-  rowActions = {},
-  bulkActions = {},
+  globalFilter: initialGlobalFilter = "",
+  globalFilterFn = includesString,
+  loadMoreOptions = {},
   onClickRow,
+  onColumnVisibilityChange = noop,
+  onGlobalSearchChange,
   onHoverRow,
+  onRowSelected,
   onSortingChange = noop,
-  disableClickRow,
-  enablePagination,
   paginationOptions = {
     pageIndex: 0,
     pageSize: 100,
   },
-  columnVisibility: initialColumnVisibility,
-  testPrefix = "",
+  rowActions = {},
   sortBy = [],
+  tableRef,
+  testPrefix = "",
   testPrefixCallback,
-  dataGa,
-  enableColumnVisibility = false,
-  enableColumnPinning = false,
-  columnPinningOptions = {},
-  enableResize = false,
-  loadMoreOptions = {},
   virtualizeOptions = {},
 }) => {
   const [isColumnDropdownVisible, setIsColumnDropdownVisible] = useState(false)
@@ -68,7 +70,7 @@ const NetdataTable = ({
   const [originalSelectedRows, setOriginalSelectedRow] = useState([])
   const [sorting, setSorting] = useState(sortBy)
   const [rowSelection, setRowSelection] = useState({})
-  const [globalFilter, setGlobalFilter] = useState("")
+  const [globalFilter, setGlobalFilter] = useState(initialGlobalFilter)
   const [pagination, setPagination] = useState({
     pageIndex: paginationOptions.pageIndex,
     pageSize: paginationOptions.pageSize,
@@ -83,11 +85,21 @@ const NetdataTable = ({
 
   useInfiniteScroll({ target: scrollParentRef, updateTableData, ...loadMoreOptions })
 
+  const handleColumnVisibilityChange = useCallback(getVisibility => {
+    onColumnVisibilityChange(getVisibility)
+    setColumnVisibility(getVisibility)
+  }, [])
+
   const handleGlobalSearch = useCallback(value => {
     onGlobalSearchChange?.(value)
     setGlobalFilter(String(value))
   }, [])
 
+  const handleSortingChange = useCallback(getSorting => {
+    onSortingChange(getSorting)
+    setSorting(getSorting)
+  }, [])
+
   const makeActionsColumn = useMemo(() => makeRowActions({ rowActions, testPrefix }), [rowActions])
 
   const renderBulkActions = () => [
@@ -133,7 +145,7 @@ const NetdataTable = ({
         },
         index
       ) => {
-        if (!id) throw new Error(`Please provide id  at ${index}`)
+        if (!id) throw new Error(`Please provide id at ${index}`)
 
         return {
           id,
@@ -180,14 +192,11 @@ const NetdataTable = ({
     getFilteredRowModel: getFilteredRowModel(),
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: handleGlobalSearch,
-    onSortingChange: getSorting => {
-      onSortingChange(getSorting)
-      setSorting(getSorting)
-    },
+    onSortingChange: handleSortingChange,
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: setPagination,
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: handleColumnVisibilityChange,
     onColumnPinningChange: setColumnPinning,
   })
 
@@ -212,9 +221,10 @@ const NetdataTable = ({
     <SharedTableProvider>
       <Flex height="100%" overflow="hidden" width="100%" column>
         <GlobalControls
-          handleSearch={onGlobalSearchChange ? handleGlobalSearch : null}
-          dataGa={dataGa}
           bulkActions={renderBulkActions}
+          dataGa={dataGa}
+          handleSearch={onGlobalSearchChange ? handleGlobalSearch : null}
+          searchValue={globalFilter}
         />
         <Flex
           ref={scrollParentRef}