fix(netdata table): update for functions support (#395)

burbuli8ra · web-flow · commit c76d34cbbaf4 · 2022-11-08T10:39:28.000+02:00
* chore(table): update table head cells for custom styles

* fix(ND table): column visibility option

* Display column visibility action when no other bulk actions are defined
* Fix typo on visibility
* Replace visible key with isVisible on makeColumnVisibilityAction

* fix(ND table): update table container to full width of context

* fix(ND table): update column visibilty dropdown to be scrollable

* fix(netdata table): update return for non available bulk actions

* v2.4.3
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [
diff --git a/src/components/tableV2/components/actionWithDropdown.js b/src/components/tableV2/components/actionWithDropdown.js
@@ -1,7 +1,7 @@
 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
+import ColumnsMenu from "./columnsMenu" //todo refactor this as right now is used only for the dropdown for column visibility
 
 const ActionWithDropdown = ({
   id,
@@ -23,7 +23,7 @@ const ActionWithDropdown = ({
   const visible = typeof isVisible === "function" ? isVisible() : isVisible
 
   return (
-    <React.Fragment key={id}>
+    <>
       <BulkAction
         ref={actionRef}
         testPrefix={`-bulk${testPrefix}`}
@@ -43,7 +43,7 @@ const ActionWithDropdown = ({
         columns={table.getAllLeafColumns()}
         onClose={onClose}
       />
-    </React.Fragment>
+    </>
   )
 }
 
diff --git a/src/components/tableV2/components/columnsMenu.js b/src/components/tableV2/components/columnsMenu.js
@@ -4,59 +4,60 @@ import { Text, ListItem } from "src/components/typography"
 import { Checkbox } from "src/components/checkbox"
 import Flex from "src/components/templates/flex"
 
-import styled from "styled-components"
-
-const Dropdown = styled(Flex)`
-  box-shadow: 0px 10px 18px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31);
-`
-
 const ColumnsMenu = ({ parentRef, isOpen, columns, onClose }) => {
+  console.log({ isOpen, parentRefCurrent: parentRef.current })
   if (parentRef.current && isOpen)
     return (
-      <Drop target={parentRef.current} onClickOutside={onClose}>
-        <Dropdown background="dropdown" column round={1} width={50}>
-          <Flex column>
-            <Flex
-              padding={[2]}
-              border={{
-                size: "1px",
-                type: "solid",
-                side: "bottom",
-                color: "borderSecondary",
-              }}
-            >
-              <Text strong>Columns</Text>
-            </Flex>
+      <Drop
+        background="dropdown"
+        height={{ max: "100vh" }}
+        onClickOutside={onClose}
+        overflow={{ vertical: "auto" }}
+        round={1}
+        target={parentRef.current}
+        width={50}
+      >
+        <>
+          <Flex
+            padding={[2]}
+            border={{
+              size: "1px",
+              type: "solid",
+              side: "bottom",
+              color: "borderSecondary",
+            }}
+          >
+            <Text strong>Columns</Text>
+          </Flex>
 
-            {columns.map(column => {
-              {
-                return (
-                  column.getCanHide() && (
-                    <Flex
-                      padding={[2]}
-                      as={ListItem}
-                      alignItems="center"
-                      justifyContent="between"
-                      key={column.id}
-                      border={{
-                        size: "1px",
-                        type: "solid",
-                        side: "bottom",
-                        color: "borderSecondary",
-                      }}
-                    >
-                      <Checkbox
-                        checked={column.getIsVisible()}
-                        onChange={column.getToggleVisibilityHandler()}
-                        label={column.id}
-                      />
-                    </Flex>
-                  )
+          {columns.map(column => {
+            {
+              return (
+                column.getCanHide() && (
+                  <Flex
+                    padding={[2]}
+                    as={ListItem}
+                    alignItems="center"
+                    justifyContent="between"
+                    key={column.id}
+                    border={{
+                      size: "1px",
+                      type: "solid",
+                      side: "bottom",
+                      color: "borderSecondary",
+                    }}
+                  >
+                    <Checkbox
+                      checked={column.getIsVisible()}
+                      onChange={column.getToggleVisibilityHandler()}
+                      label={column.id}
+                    />
+                  </Flex>
                 )
-              }
-            })}
-          </Flex>
-        </Dropdown>
+              )
+            }
+          })}
+        </>
       </Drop>
     )
 
diff --git a/src/components/tableV2/core/base-table.js b/src/components/tableV2/core/base-table.js
@@ -67,7 +67,7 @@ const Table = forwardRef(
     ref
   ) => {
     return (
-      <Flex width="100%" height="100%" column>
+      <Flex width={{ base: "100%", min: "fit-content" }} height="100%" column>
         <StyledTableControls>
           {handleSearch && (
             <Box width={{ max: 50 }}>
@@ -114,11 +114,11 @@ Table.HeadRow = forwardRef(({ children, ...props }, ref) => (
 ))
 
 Table.HeadCell = forwardRef(
-  ({ children, align = "left", width, maxWidth, minWidth, ...props }, ref) => (
+  ({ children, align = "left", width, maxWidth, minWidth, styles = {}, ...props }, ref) => (
     <StyledHeaderCell
       width={{ max: maxWidth, base: width, min: minWidth }}
       ref={ref}
-      sx={{ textAlign: align, fontSize: "14px" }}
+      sx={{ textAlign: align, fontSize: "14px", ...styles }}
       {...props}
       as="th"
     >
@@ -141,6 +141,7 @@ Table.SortingHeadCell = forwardRef(
       align = "left",
       "data-testid": dataTestid,
       "sortby-testid": sortbyTestid,
+      styles = {},
       ...props
     },
     ref
@@ -169,7 +170,7 @@ Table.SortingHeadCell = forwardRef(
         as="th"
         ref={ref}
         {...props}
-        sx={{ textAlign: align, fontSize: "14px" }}
+        sx={{ textAlign: align, fontSize: "14px", ...styles }}
         data-testid={dataTestid}
       >
         <Box
diff --git a/src/components/tableV2/core/headCell.js b/src/components/tableV2/core/headCell.js
@@ -38,6 +38,7 @@ const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
   const HeadCell = headers.map(({ id, colSpan, getContext, isPlaceholder, column }) => {
     const { getCanSort, columnDef } = column
     const { meta } = columnDef
+    const styles = meta?.styles || {}
 
     const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
     const filterOptions = meta && meta?.filter ? meta?.filter : {}
@@ -61,11 +62,12 @@ const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
               <Filter column={column} testPrefix={testPrefix} {...filterOptions} />
             )
           }
+          styles={styles}
         >
           <Box position="absolute" right={0}>
             {tooltipText && (
               <Tooltip align="bottom" content={tooltipText}>
-                <Icon color="nodeBadgeColor" size="small" name="information"></Icon>
+                <Icon color="nodeBadgeColor" size="small" name="information" />
               </Tooltip>
             )}
           </Box>
@@ -82,6 +84,7 @@ const makeHeadCell = ({ headers, enableSorting, testPrefix }) => {
         data-testid={`netdata-table-head-cell${testPrefix}`}
         colSpan={colSpan}
         key={id}
+        styles={styles}
       >
         {isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
         {column.getCanFilter() ? (
diff --git a/src/components/tableV2/features/bulkActions.js b/src/components/tableV2/features/bulkActions.js
@@ -21,10 +21,10 @@ export const supportedBulkActions = {
   userSettings: { icon: "user", confirmation: false, tooltipText: "User Settings" },
   addEntry: { icon: "plus", alwaysEnabled: true, flavour: "default", iconColor: "white" },
   remove: { icon: "removeNode", confirmation: true, confirmLabel: "Yes", declineLabel: "No" },
-  columnVisibillity: { icon: "gear", alwaysEnabled: true },
+  columnVisibility: { icon: "gear", alwaysEnabled: true },
 }
 
-//TODO THIS NEEDS TO BE REFACTORED NOW IS WORKING ONLY FOR COLUMN VISIBILLITY
+//TODO THIS NEEDS TO BE REFACTORED NOW IS WORKING ONLY FOR COLUMN VISIBILITY
 const renderActionWithDropdown = ({
   actions,
   table,
@@ -33,7 +33,7 @@ const renderActionWithDropdown = ({
   isOpen,
   onClose,
 }) => {
-  if (!actions || !actions.length) return <Box aria-hidden as="span" />
+  if (!actions || !actions.length) return []
   return actions.map(
     ({ id, icon, handleAction, tooltipText, alwaysEnabled, isDisabled, isVisible, ...rest }) => {
       return (
@@ -57,17 +57,13 @@ const renderActionWithDropdown = ({
   )
 }
 
-const makeColumnVisibillityAction = ({ handleAction, visible }) => {
-  const prepareColumnVisibilityAction = {
-    id: "columnVisibillity",
-    handleAction,
-    visible,
-    icon: "gear",
-    alwaysEnabled: true,
-  }
-
-  return prepareColumnVisibilityAction
-}
+const makeColumnVisibilityAction = ({ handleAction, visible }) => ({
+  id: "columnVisibility",
+  handleAction,
+  isVisible: visible,
+  icon: "gear",
+  alwaysEnabled: true,
+})
 
 const makeBulkActions = ({
   bulkActions,
@@ -76,9 +72,9 @@ const makeBulkActions = ({
   selectedRows,
   columnVisibilityOptions,
 }) => {
-  const columnVisibillity = makeColumnVisibillityAction({ ...columnVisibilityOptions })
+  const columnVisibility = makeColumnVisibilityAction({ ...columnVisibilityOptions })
   const actionsWithDropdown = renderActionWithDropdown({
-    actions: [columnVisibillity],
+    actions: [columnVisibility],
     ...columnVisibilityOptions,
     testPrefix,
     table,
@@ -122,7 +118,7 @@ const makeBulkActions = ({
     return acc
   }, [])
 
-  if (!availableBulkActions || !availableBulkActions.length) return []
+  if (!availableBulkActions || !availableBulkActions.length) return actionsWithDropdown
   const actions = availableBulkActions.map(
     ({ id, icon, handleAction, tooltipText, alwaysEnabled, isDisabled, isVisible, ...rest }) => {
       return (

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@netdata/netdata-ui",`
`3`		`- "version": "2.4.2",`
	`3`	`+ "version": "2.4.3",`
`4`	`4`	`"description": "netdata UI kit",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"files": [`