Fix/netdata table column visibillity (#394)

* fix column visibiillity alway present

* fix icon color

Author: AlexNti

src/components/button/IconButton.js

@@ -40,7 +40,7 @@ const IconButton = ({
         flavour={flavour}
         disabled={disabled}
         icon={icon}
-        iconColor={isDefaultFlavour ? "iconColor" : iconColor}
+        iconColor={isDefaultFlavour ? "white" : iconColor}
         iconSize={iconSize}
         neutral={!isDefaultFlavour}
         {...props}

src/components/tableV2/features/bulkActions.js

@@ -19,7 +19,7 @@ export const supportedBulkActions = {
   download: { icon: "download", confirmation: false, tooltipText: "Download" },
   toggleAlarm: { icon: "alarm_off", confirmation: false, tooltipText: "Turn of Alarms" },
   userSettings: { icon: "user", confirmation: false, tooltipText: "User Settings" },
-  addEntry: { icon: "plus", alwaysEnabled: true, flavour: "default" },
+  addEntry: { icon: "plus", alwaysEnabled: true, flavour: "default", iconColor: "white" },
   remove: { icon: "removeNode", confirmation: true, confirmLabel: "Yes", declineLabel: "No" },
   columnVisibillity: { icon: "gear", alwaysEnabled: true },
 }
@@ -35,7 +35,7 @@ const renderActionWithDropdown = ({
 }) => {
   if (!actions || !actions.length) return <Box aria-hidden as="span" />
   return actions.map(
-    ({ id, icon, handleAction, tooltipText, alwaysEnabled, isDisabled, isVisible }) => {
+    ({ id, icon, handleAction, tooltipText, alwaysEnabled, isDisabled, isVisible, ...rest }) => {
       return (
         <ActionWithDropdown
           key={id}
@@ -50,6 +50,7 @@ const renderActionWithDropdown = ({
           selectedRows={selectedRows}
           isOpen={isOpen}
           onClose={onClose}
+          {...rest}
         />
       )
     }
@@ -58,7 +59,7 @@ const renderActionWithDropdown = ({
 
 const makeColumnVisibillityAction = ({ handleAction, visible }) => {
   const prepareColumnVisibilityAction = {
-    id: "columnVisibility",
+    id: "columnVisibillity",
     handleAction,
     visible,
     icon: "gear",
@@ -75,54 +76,51 @@ const makeBulkActions = ({
   selectedRows,
   columnVisibilityOptions,
 }) => {
-  const columnVisibility = makeColumnVisibillityAction({ ...columnVisibilityOptions })
+  const columnVisibillity = makeColumnVisibillityAction({ ...columnVisibilityOptions })
   const actionsWithDropdown = renderActionWithDropdown({
-    actions: [columnVisibility],
+    actions: [columnVisibillity],
     ...columnVisibilityOptions,
     testPrefix,
     table,
     selectedRows,
   })
 
-  const availableBulkActions = Object.keys({ ...bulkActions, columnVisibility }).reduce(
-    (acc, currentActionKey) => {
-      const isBulkActionSupported = supportedBulkActions[currentActionKey]
-      if (!isBulkActionSupported) return acc
-      const {
-        icon,
-        confirmation,
-        tooltipText,
-        confirmationTitle,
-        confirmationMessage,
-        confirmLabel,
-        declineLabel,
-        handleDecline,
-        actionButtonDirection,
-        alwaysEnabled,
-        iconColor,
-        flavour,
-      } = supportedBulkActions[currentActionKey]
-      const currentAction = bulkActions[currentActionKey]
-      acc.push({
-        confirmation,
-        tooltipText,
-        icon,
-        id: currentActionKey,
-        confirmationTitle,
-        confirmationMessage,
-        confirmLabel,
-        declineLabel,
-        handleDecline,
-        actionButtonDirection,
-        alwaysEnabled,
-        iconColor,
-        flavour,
-        ...currentAction,
-      })
-      return acc
-    },
-    []
-  )
+  const availableBulkActions = Object.keys({ ...bulkActions }).reduce((acc, currentActionKey) => {
+    const isBulkActionSupported = supportedBulkActions[currentActionKey]
+    if (!isBulkActionSupported) return acc
+    const {
+      icon,
+      confirmation,
+      tooltipText,
+      confirmationTitle,
+      confirmationMessage,
+      confirmLabel,
+      declineLabel,
+      handleDecline,
+      actionButtonDirection,
+      alwaysEnabled,
+      iconColor,
+      flavour,
+    } = supportedBulkActions[currentActionKey]
+    const currentAction = bulkActions[currentActionKey]
+    acc.push({
+      confirmation,
+      tooltipText,
+      icon,
+      id: currentActionKey,
+      confirmationTitle,
+      confirmationMessage,
+      confirmLabel,
+      declineLabel,
+      handleDecline,
+      actionButtonDirection,
+      alwaysEnabled,
+      iconColor,
+      flavour,
+      ...currentAction,
+    })
+    return acc
+  }, [])
 
   if (!availableBulkActions || !availableBulkActions.length) return []
   const actions = availableBulkActions.map(

src/components/tableV2/netdataTable.stories.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { storiesOf } from "@storybook/react"
 
-import Table from "./base-table"
+import Table from "./core/base-table"
 import NetdataTable from "./netdataTable"
 
 import Box from "src/components/templates/box"