Bug fixes refactor table (#393)

* make SeparateComponent for Bulk Action

* add action with drodown to a saperate file

* saparate features from netdataTable to components

* move availalbe bulk actions inside bulk aciton compoonent

* move bulk actions to saparate component

* bulk actions

* move row actions to saparate component

* move everything to its folder

* move base-table to core folder

* minor change at yaml

Author: AlexNti

.github/workflows/tests.yml

@@ -1,9 +1,9 @@
----
 name: tests
 
 on:
   push:
-    branches: [master]
+    branches:
+      - master
   workflow_dispatch:
 
 concurrency:
@@ -21,7 +21,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "16.10.0"
           cache: "yarn"
       - name: Install dependencies
         run: yarn

src/components/tableV2/action.js …/components/tableV2/components/action.jssrc/components/tableV2/action.js renamed to src/components/tableV2/components/action.js src/components/tableV2/action.js renamed to src/components/tableV2/components/action.js

@@ -0,0 +1,50 @@
+import React, { useRef } from "react"
+
+import BulkAction from "./bulkAction"
+import ColumnsMenu from "./columnsMenu" //todo refactor this as right now is used only for the dropdown for column visibillity
+
+const ActionWithDropdown = ({
+  id,
+  icon,
+  handleAction,
+  tooltipText,
+  alwaysEnabled,
+  isDisabled,
+  isVisible,
+  testPrefix,
+  selectedRows,
+  table,
+  isOpen,
+  onClose,
+  ...rest
+}) => {
+  const actionRef = useRef()
+  const disabled = typeof isDisabled === "function" ? isDisabled() : isDisabled
+  const visible = typeof isVisible === "function" ? isVisible() : isVisible
+
+  return (
+    <React.Fragment key={id}>
+      <BulkAction
+        ref={actionRef}
+        testPrefix={`-bulk${testPrefix}`}
+        visible={visible}
+        id={id}
+        icon={icon}
+        handleAction={() => handleAction(selectedRows, table)}
+        tooltipText={tooltipText}
+        disabled={(!alwaysEnabled && selectedRows?.length < 1) || disabled}
+        background="elementBackground"
+        selectedRows={selectedRows}
+        {...rest}
+      />
+      <ColumnsMenu
+        parentRef={actionRef}
+        isOpen={isOpen}
+        columns={table.getAllLeafColumns()}
+        onClose={onClose}
+      />
+    </React.Fragment>
+  )
+}
+
+export default ActionWithDropdown

src/components/tableV2/components/actionWithDropdown.js

@@ -0,0 +1,46 @@
+import React, { useRef, forwardRef } from "react"
+import Action from "./action"
+
+import { mergeRefs } from "src/utils"
+
+const BulkAction = forwardRef(
+  (
+    {
+      isDisabled,
+      isVisible,
+      testPrefix,
+      id,
+      icon,
+      handleAction,
+      selectedRows,
+      table,
+      tooltipText,
+      alwaysEnabled,
+      ...rest
+    },
+    ref
+  ) => {
+    const actionRef = useRef()
+    const disabled = typeof isDisabled === "function" ? isDisabled() : isDisabled
+    const visible = typeof isVisible === "function" ? isVisible() : isVisible
+
+    return (
+      <Action
+        ref={mergeRefs(actionRef, ref)}
+        testPrefix={`-bulk${testPrefix}`}
+        key={id}
+        visible={visible}
+        id={id}
+        icon={icon}
+        handleAction={() => handleAction(selectedRows, table)}
+        tooltipText={tooltipText}
+        disabled={(!alwaysEnabled && selectedRows?.length < 1) || disabled}
+        background="elementBackground"
+        selectedRows={selectedRows}
+        {...rest}
+      />
+    )
+  }
+)
+
+export default BulkAction

src/components/tableV2/components/bulkAction.js

@@ -0,0 +1,99 @@
+import React from "react"
+
+import ComparisonFilter from "../components/comparisonFilter"
+import SelectFilter from "../components/selectFilter"
+
+import SearchInput from "src/components/search"
+import Box from "src/components/templates/box"
+import Tooltip from "src/components/drops/tooltip"
+import { Icon } from "src/components/icon"
+
+import Table from "./base-table"
+
+import { flexRender } from "@tanstack/react-table"
+
+const SearchFilter = ({ column, testPrefix }) => {
+  const columnFilterValue = column.getFilterValue()
+  const { id = "" } = column
+  return (
+    <Box
+      data-testid={`netdata-table-filter-${id}${testPrefix}`}
+      as={SearchInput}
+      width={{ max: 50 }}
+      value={columnFilterValue ?? ""}
+      placeholder={"...Search"}
+      iconRight={<Icon name="magnify" />}
+      onChange={e => column.setFilterValue(e.target.value)}
+    />
+  )
+}
+
+const availableFilters = {
+  comparison: ComparisonFilter,
+  select: SelectFilter,
+  default: SearchFilter,
+}
+
+const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
+  const HeadCell = headers.map(({ id, colSpan, getContext, isPlaceholder, column }) => {
+    const { getCanSort, columnDef } = column
+    const { meta } = columnDef
+
+    const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
+    const filterOptions = meta && meta?.filter ? meta?.filter : {}
+    const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
+    const Filter = availableFilters[selectedFilter]
+
+    if (getCanSort() && enableSorting) {
+      return (
+        <Table.SortingHeadCell
+          width={column.getSize()}
+          minWidth={column.columnDef.minSize}
+          maxWidth={column.columnDef.maxSize}
+          data-testid={`netdata-table-head-cell${testPrefix}`}
+          sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
+          sortDirection={column.getIsSorted()}
+          onSortClicked={column.getToggleSortingHandler()}
+          colSpan={colSpan}
+          key={id}
+          filter={
+            column.getCanFilter() && (
+              <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
+            )
+          }
+        >
+          <Box position="absolute" right={0}>
+            {tooltipText && (
+              <Tooltip align="bottom" content={tooltipText}>
+                <Icon color="nodeBadgeColor" size="small" name="information"></Icon>
+              </Tooltip>
+            )}
+          </Box>
+          {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
+        </Table.SortingHeadCell>
+      )
+    }
+
+    return (
+      <Table.HeadCell
+        width={column.getSize()}
+        minWidth={column.columnDef.minSize}
+        maxWidth={column.columnDef.maxSize}
+        data-testid={`netdata-table-head-cell${testPrefix}`}
+        colSpan={colSpan}
+        key={id}
+      >
+        {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
+        {column.getCanFilter() ? (
+          <div>
+            <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
+          </div>
+        ) : null}
+      </Table.HeadCell>
+    )
+  })
+
+  return HeadCell
+}
+
+export default makeHeadCell