chore(netdata table): update table column menu (#414)

* chore(checkbox): update global styles

* Make checkbox smaller (16px)
* Add opacity to checkbox label on disabled state

* refactor(checkbox): order updated props alphabetically

* chore(netdata table): update columns menu for pinned columns

* refactor(netdata table): order updated props alphabetically

* chore(drop): update optional TS props

* fix(netdata table): remove not visible columns from displayed list

* v2.6.3

Author: burbuli8ra

package.json

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

src/components/checkbox/checkbox.js

@@ -3,70 +3,79 @@ import { Text } from "src/components/typography"
 import useCheckBoxStyles from "./use-styles-checkbox"
 import useCheckbox from "./use-checkbox"
 
-import { CheckboxContainer, HiddenCheckboxInput, LabelText, StyledCheckbox, StyledIcon, StyledLabel } from "./styled"
+import {
+  CheckboxContainer,
+  HiddenCheckboxInput,
+  LabelText,
+  StyledCheckbox,
+  StyledIcon,
+  StyledLabel,
+} from "./styled"
 
-export const Checkbox = forwardRef((
-  {
-    checked,
-    "data-testid": testId,
-    disabled,
-    className,
-    labelPosition,
-    label,
-    indeterminate,
-    margin,
-    alignSelf,
-    iconProps,
-    Label,
-    ...props
-  },
+export const Checkbox = forwardRef(
+  (
+    {
+      alignSelf,
+      checked,
+      className,
+      "data-testid": testId,
+      disabled,
+      iconProps,
+      indeterminate,
+      Label,
+      label,
+      labelPosition,
+      margin,
+      ...props
+    },
     ref
-) => {
-  const { styles } = useCheckBoxStyles({ disabled })
-  const { getInputProps, getCheckBoxProps } = useCheckbox({
-    disabled,
-    checked,
-    indeterminate,
-    ...props,
-  })
+  ) => {
+    const { styles } = useCheckBoxStyles({ disabled })
+    const { getInputProps, getCheckBoxProps } = useCheckbox({
+      checked,
+      disabled,
+      indeterminate,
+      ...props,
+    })
 
-  return (
-    <StyledLabel
-      data-testid={testId}
-      disabled={disabled}
-      className={className}
-      margin={margin}
-      alignSelf={alignSelf}
-    >
-      {label && labelPosition === "left" && (
-        <LabelText as={Label} left>
-          {label}
-        </LabelText>
-      )}
-      <CheckboxContainer>
-        <HiddenCheckboxInput data-testid="checkbox-input" {...getInputProps(ref, props)} />
-        <StyledCheckbox
-          data-testid="styled-checkbox"
-          {...styles.styledCheckbox}
-          {...getCheckBoxProps()}
-        >
-          <StyledIcon
-            name={indeterminate ? "checkmark_partial_s" : "checkmark_s"}
-            disabled={disabled}
-            {...iconProps}
-          />
-        </StyledCheckbox>
-      </CheckboxContainer>
-      {label && labelPosition === "right" && (
-        <LabelText as={Label} right>
-          {label}
-        </LabelText>
-      )}
-    </StyledLabel>
-  )
-})
+    return (
+      <StyledLabel
+        alignSelf={alignSelf}
+        className={className}
+        data-testid={testId}
+        disabled={disabled}
+        margin={margin}
+      >
+        {label && labelPosition === "left" && (
+          <LabelText as={Label} disabled={disabled} left>
+            {label}
+          </LabelText>
+        )}
+        <CheckboxContainer>
+          <HiddenCheckboxInput data-testid="checkbox-input" {...getInputProps(ref, props)} />
+          <StyledCheckbox
+            data-testid="styled-checkbox"
+            {...styles.styledCheckbox}
+            {...getCheckBoxProps()}
+          >
+            <StyledIcon
+              disabled={disabled}
+              name={indeterminate ? "checkmark_partial_s" : "checkmark_s"}
+              {...iconProps}
+            />
+          </StyledCheckbox>
+        </CheckboxContainer>
+        {label && labelPosition === "right" && (
+          <LabelText as={Label} disabled={disabled} right>
+            {label}
+          </LabelText>
+        )}
+      </StyledLabel>
+    )
+  }
+)
 
 Checkbox.defaultProps = {
-  labelPosition: "right",
   Label: Text,
+  labelPosition: "right",
 }

src/components/checkbox/styled.js

@@ -1,19 +1,23 @@
 import styled from "styled-components"
 import { Icon } from "src/components/icon"
+import Box from "src/components/templates/box"
 import { getSizeUnit, getValidatedControlColor } from "src/theme/utils"
 import margin from "src/mixins/margin"
 import alignSelf from "src/mixins/alignSelf"
 
 import Flex from "src/components/templates/flex"
 
-export const CheckboxContainer = styled.div`
-  display: block;
+export const CheckboxContainer = styled(Box).attrs({
+  height: "16px",
+  width: "16px",
+})`
   box-sizing: border-box;
-  width: 20px;
-  height: 20px;
 `
 
-export const StyledIcon = styled(Icon)`
+export const StyledIcon = styled(Icon).attrs({
+  height: "inherit",
+  width: "inherit",
+})`
   flex-grow: 0;
   flex-shrink: 0;
   fill: ${getValidatedControlColor("primary", "accent")};
@@ -57,5 +61,6 @@ export const StyledLabel = styled.label`
 
 export const LabelText = styled.span`
   ${({ right, ...props }) =>
-    right ? `margin-left: ${getSizeUnit(props)}px;` : `margin-right: ${getSizeUnit(props)}px;`}
+    right ? `margin-left: ${getSizeUnit(props)}px;` : `margin-right: ${getSizeUnit(props)}px;`};
+  ${({ disabled }) => disabled && "opacity: 0.4;"};
 `

src/components/checkbox/use-styles-checkbox.js

@@ -2,25 +2,22 @@ import { useMemo } from "react"
 
 const makeColor = ({
   defaultColor = "inputBorder",
-  success = "success",
-  error = "error",
   disabled = "inputBorder",
+  error = "error",
+  success = "success",
 }) => ({
-  success: success,
-  error: error,
-  disabled: disabled,
   default: defaultColor,
+  disabled: disabled,
+  error: error,
+  success: success,
 })
 const useCheckboxStyles = ({ disabled, success, error, focused }) => {
   const status = success ? "success" : error ? "error" : disabled ? "disabled" : "default"
 
-  const styledCheckbox = useMemo(() => {
-    return {
-      width: "20px",
-      height: "20px",
-      background: disabled ? "mainBackgroundDisabled" : "mainBackground",
-      justifyContent: "center",
+  const styledCheckbox = useMemo(
+    () => ({
       alignItems: "center",
+      background: disabled ? "mainBackgroundDisabled" : "mainBackground",
       border: {
         size: "1px",
         type: "solid",
@@ -29,21 +26,25 @@ const useCheckboxStyles = ({ disabled, success, error, focused }) => {
           : makeColor({})[status],
         side: "all",
       },
+      height: "inherit",
+      justifyContent: "center",
       round: true,
+      width: "inherit",
       _focus: {
         border: {
-          size: "1px",
-          type: "solid",
           color: makeColor({ defaultColor: "controlFocused" })[status],
           side: "all",
+          size: "1px",
+          type: "solid",
         },
         boxShadow: {
           color: makeColor({ defaultColor: "controlFocused" })[status],
           size: "0 0 0 1px",
         },
       },
-    }
-  }, [status, focused])
+    }),
+    [status, focused]
+  )
 
   return { styles: { styledCheckbox } }
 }

src/components/drops/drop/index.d.ts

@@ -6,7 +6,7 @@ export interface DropProps extends FlexProps, AlignProps, StretchProps {
   backdropProps?: any
   canHideTarget?: boolean
   children: any
-  hideShadow: boolean
+  hideShadow?: boolean
   onClickOutside?: Function
   onEsc?: Function
   target: object

src/components/drops/mixins/index.d.ts

@@ -1,5 +1,5 @@
 export interface AlignProps {
-  align:
+  align?:
     | { top: "top" }
     | { top: "top"; right: "left" }
     | { top: "top"; right: "right" }

src/components/tableV2/components/actionWithDropdown.js

@@ -4,24 +4,49 @@ import BulkAction from "./bulkAction"
 import ColumnsMenu from "./columnsMenu" //todo refactor this as right now is used only for the dropdown for column visibility
 
 const ActionWithDropdown = ({
+  alwaysEnabled,
+  columnPinning = {},
+  enableColumnPinning,
+  handleAction,
   id,
   icon,
-  handleAction,
-  tooltipText,
-  alwaysEnabled,
   isDisabled,
+  isOpen,
   isVisible,
-  testPrefix,
+  onClose,
   selectedRows,
   table,
-  isOpen,
-  onClose,
+  testPrefix,
+  tooltipText,
   ...rest
 }) => {
   const actionRef = useRef()
   const disabled = typeof isDisabled === "function" ? isDisabled() : isDisabled
   const visible = typeof isVisible === "function" ? isVisible() : isVisible
 
+  const allColumns = table.getAllLeafColumns()
+  const allPinnedColumns = enableColumnPinning
+    ? [...(columnPinning?.left || []), ...(columnPinning?.right || [])]
+    : []
+  const { columns, pinnedColumns } = enableColumnPinning
+    ? allColumns.reduce(
+        (accumulator, column) => {
+          if (!column.getCanHide()) return accumulator
+
+          let key = "columns"
+          if (allPinnedColumns.includes(column.id)) {
+            key = "pinnedColumns"
+          }
+
+          return {
+            ...accumulator,
+            [key]: [...accumulator[key], column],
+          }
+        },
+        { columns: [], pinnedColumns: [] }
+      )
+    : { columns: allColumns, pinnedColumns: [] }
+
   return (
     <>
       <BulkAction
@@ -38,10 +63,11 @@ const ActionWithDropdown = ({
         {...rest}
       />
       <ColumnsMenu
-        parentRef={actionRef}
+        columns={columns}
         isOpen={isOpen}
-        columns={table.getAllLeafColumns()}
         onClose={onClose}
+        parentRef={actionRef}
+        pinnedColumns={pinnedColumns}
       />
     </>
   )