Better props.

novykh · novykh · commit e2c6e1dbb2df · 2023-02-28T10:02:48.000+02:00
diff --git a/src/components/drops/drop/container.js b/src/components/drops/drop/container.js
@@ -18,10 +18,12 @@ const styledAnimation = css`
   animation-delay: 0.01s;
 `
 
-const Container = styled(Flex).attrs(({ zIndex = 60 }) => ({ zIndex }))`
-  position: fixed;
+const Container = styled(Flex).attrs(({ zIndex = 60, ...rest }) => ({
+  zIndex,
+  position: "fixed",
+  ...rest,
+}))`
   left: -99999px;
-  z-index: 36;
 
   ${({ animation }) => animation && styledAnimation}
   ${({ hideShadow }) => !hideShadow && "box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);"}
diff --git a/src/components/input/input.js b/src/components/input/input.js
@@ -58,6 +58,7 @@ export const TextInput = ({
   inputRef,
   size = "large",
   handleMetaDisplay = defaultHandleMetaDisplay,
+  inputContainerStyles,
   ...props
 }) => {
   const [focused, handleFocus, handleBlur] = useFocusedState({ onBlur, onFocus })
@@ -115,6 +116,7 @@ export const TextInput = ({
           success={isSuccess}
           error={isError}
           disabled={disabled}
+          {...inputContainerStyles}
         >
           {iconLeft && <LeftIcon icon={iconLeft} />}
           <StyledInput
diff --git a/src/components/pill/alertMastercard.js b/src/components/pill/alertMastercard.js
@@ -11,8 +11,10 @@ const AlertMasterCard = forwardRef(
       height,
       normal,
       onClick,
+      labelProps = {},
       pillLeft = {},
       pillRight = {},
+      pillEnd,
       round,
       size,
       ...rest
@@ -24,7 +26,8 @@ const AlertMasterCard = forwardRef(
       background: masterCardColorMap.alert,
       color: "text",
       icon: "alarm_bell",
-      zIndex: 1,
+      zIndex: 4,
+      ...labelProps,
       ...commonProps,
     }
     const pillProps = {
@@ -40,30 +43,44 @@ const AlertMasterCard = forwardRef(
       pillRight.background,
       pillRight.flavour || "disabledWarning"
     )
+    const pillEndBackground =
+      pillEnd && getMasterCardBackground(pillEnd.background, pillEnd.flavour || "disabledClear")
+
     const pillLeftProps = {
       background: pillLeftBackground,
       position: "relative",
       margin: [0, 0, 0, -3],
       padding: [1, 2, 1, 4],
+      zIndex: 3,
       ...pillProps,
       ...pillLeft,
-      round: "0 12px 12px 0",
+      round: labelProps.hidden ? round : "0 12px 12px 0",
     }
     const pillRightProps = {
       background: pillRightBackground,
       margin: [0, 0, 0, -3],
       padding: [1, 2, 1, 4],
+      zIndex: 2,
       ...pillProps,
       ...pillRight,
     }
+    const pillEndProps = pillEnd && {
+      background: pillEndBackground,
+      margin: [0, 0, 0, -3],
+      padding: [1, 2, 1, 4],
+      zIndex: 1,
+      ...pillProps,
+      ...pillEnd,
+    }
 
     return (
       <MasterCardContainer data-testid={testId} onClick={onClick} ref={ref} {...commonProps}>
-        <MasterCardPill data-testid={`${testId}-icon-pill`} {...iconProps} />
-        <>
-          <MasterCardPill data-testid={`${testId}-left-pill`} {...pillLeftProps} />
-          <MasterCardPill data-testid={`${testId}-right-pill`} {...pillRightProps} />
-        </>
+        {!labelProps.hidden && (
+          <MasterCardPill data-testid={`${testId}-icon-pill`} {...iconProps} />
+        )}
+        <MasterCardPill data-testid={`${testId}-left-pill`} {...pillLeftProps} />
+        <MasterCardPill data-testid={`${testId}-right-pill`} {...pillRightProps} />
+        {pillEndProps && <MasterCardPill data-testid={`${testId}-end-pill`} {...pillEndProps} />}
       </MasterCardContainer>
     )
   }
diff --git a/src/components/pill/mastercard.js b/src/components/pill/mastercard.js
@@ -18,6 +18,7 @@ const MasterCard = forwardRef(
       onClick,
       pillLeft = {},
       pillRight = {},
+      pillEnd,
       round,
       size,
       ...rest
@@ -26,10 +27,14 @@ const MasterCard = forwardRef(
   ) => {
     const commonProps = { height, round, size }
     const pillProps = { normal, ...commonProps, ...rest }
+
     const pillRightBackground = getMasterCardBackground(
       pillRight.background,
       pillRight.flavour || "disabledWarning"
     )
+    const pillEndBackground =
+      pillEnd && getMasterCardBackground(pillEnd.background, pillEnd.flavour || "disabledClear")
+
     const pillLeftProps = {
       background: getMasterCardBackground(pillLeft.background, pillLeft.flavour || "disabledError"),
       padding: [1, 3],
@@ -45,10 +50,17 @@ const MasterCard = forwardRef(
       ...pillProps,
       ...pillRight,
     }
+    const pillEndProps = pillEnd && {
+      background: pillEndBackground,
+      margin: [0, 0, 0, -1],
+      padding: [1, 2],
+      ...pillProps,
+      ...pillEnd,
+    }
 
     return (
       <MasterCardContainer
-        background={pillRightBackground}
+        background={pillEndBackground || pillRightBackground}
         data-testid={testId}
         onClick={onClick}
         ref={ref}
@@ -58,6 +70,9 @@ const MasterCard = forwardRef(
           <>
             <MasterCardPill data-testid={`${testId}-left-pill`} {...pillLeftProps} />
             <MasterCardPill data-testid={`${testId}-right-pill`} {...pillRightProps} />
+            {pillEndProps && (
+              <MasterCardPill data-testid={`${testId}-end-pill`} {...pillEndProps} />
+            )}
           </>
         )}
       </MasterCardContainer>
diff --git a/src/components/pill/mixins/colors.js b/src/components/pill/mixins/colors.js
@@ -2,6 +2,7 @@ const colorMap = {
   background: {
     neutral: "nodeBadgeBackground",
     success: ["green", "netdata"],
+    clear: ["green", "netdata"],
     warning: ["yellow", "seaBuckthorn"],
     error: ["red", "pomegranate"],
   },
@@ -14,21 +15,25 @@ const colorMap = {
   border: {
     neutral: "neutralPillBorder",
     success: ["green", "deyork"],
+    clear: ["green", "deyork"],
     warning: ["yellow", "seaBuckthorn"],
     error: ["red", "apricot"],
   },
   color: {
     neutral: "neutralPillColor",
     success: ["green", "netdata"],
+    clear: ["green", "netdata"],
     warning: ["yellow", "seaBuckthorn"],
     error: ["red", "apricot"],
   },
 }
 
 export const masterCardColorMap = {
   alert: "alertIcon",
+  disabledClear: "idleClear",
   disabledError: "idleError",
   disabledWarning: "idleWarning",
+  clear: "successLite",
   error: "errorLite",
   warning: "warningLite",
 }
diff --git a/src/components/search/index.js b/src/components/search/index.js
@@ -7,7 +7,6 @@ const Search = forwardRef(({ value, onChange, placeholder, ...rest }, ref) => (
     value={value}
     onChange={onChange}
     placeholder={placeholder}
-    metaShrinked
     size="small"
     {...rest}
   />
diff --git a/src/components/tableV2/core/base-table.js b/src/components/tableV2/core/base-table.js
@@ -25,15 +25,17 @@ const HeaderCell = styled(Box)`
   }
 `
 
-const Table = forwardRef(({ children, width, ...props }, ref) => {
-  return (
-    <Flex height="100%" width="100%" column>
-      <Box sx={{ borderCollapse: "separate" }} ref={ref} as="table" width={width} {...props}>
-        {children}
-      </Box>
-    </Flex>
-  )
-})
+const Table = forwardRef(({ children, width, ...props }, ref) => (
+  <Box
+    sx={{ borderCollapse: "separate", "table-layout": "fixed" }}
+    ref={ref}
+    as="table"
+    width={width}
+    {...props}
+  >
+    {children}
+  </Box>
+))
 
 Table.Head = forwardRef(({ children, ...props }, ref) => (
   <Box
@@ -96,7 +98,6 @@ Table.HeadCell = forwardRef(
       children,
       align = "left",
       width,
-      minWidth,
       tooltipText,
       filter,
       onMouseDown,
@@ -120,8 +121,9 @@ Table.HeadCell = forwardRef(
           fontSize: "14px",
         }}
         position="relative"
+        overflow="hidden"
         padding={[1, 2]}
-        width={{ min: `${minWidth}px`, max: `${width}px`, base: `${width}px` }}
+        width={`${width}px`}
         onMouseEnter={() => onHover({ row: null, column: id })}
         onMouseLeave={() => onHover()}
         height="60px"
@@ -280,16 +282,12 @@ Table.Cell = forwardRef(
           textAlign: align,
           whiteSpace: "nowrap",
         }}
-        width={{
-          base: `${width || maxWidth}px`,
-          max: `${width || maxWidth}px`,
-          min: `${minWidth}px`,
-        }}
+        width={`${width}px`}
         overflow="hidden"
         {...rest}
         background={
           !rest.background && isRowHovering
-            ? "borderSecondary"
+            ? "elementBackground"
             : rest.background || (index % 2 == 0 ? "mainBackground" : "tableRowBg")
         }
         backgroundOpacity={
diff --git a/src/components/tableV2/core/rows.js b/src/components/tableV2/core/rows.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useMemo } from "react"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { flexRender } from "@tanstack/react-table"
 import { useTableContext } from "../features/provider"
@@ -49,8 +49,11 @@ const Rows = ({
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0
 
   const totalHeight = virtualizer.getTotalSize()
-  const paddingBottom =
-    virtualRows.length > 0 ? totalHeight - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0
+  const paddingBottom = useMemo(
+    () =>
+      virtualRows.length > 0 ? totalHeight - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0,
+    [virtualRows.length]
+  )
 
   return (
     <>
@@ -59,7 +62,7 @@ const Rows = ({
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {virtualizer.getVirtualItems().map(virtualRow => {
+      {virtualRows.map(virtualRow => {
         const row = rows[virtualRow.index]
         const cells = row[getRowHandler]()
 
diff --git a/src/components/tableV2/features/globalControls.js b/src/components/tableV2/features/globalControls.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo } from "react"
 import Flex from "src/components/templates/flex"
 import SearchInput from "src/components/search"
 import { Icon } from "src/components/icon"
@@ -13,6 +13,9 @@ const GlobalControls = ({
   tableMeta,
 }) => {
   const wordsCount = searchValue?.split(" ").filter(x => !!x).length
+
+  tableMeta = typeof tableMeta === "function" ? tableMeta({}, {}, null) : tableMeta
+
   return (
     <Flex
       width="100%"
@@ -46,4 +49,4 @@ const GlobalControls = ({
   )
 }
 
-export default GlobalControls
+export default memo(GlobalControls)
diff --git a/src/components/tableV2/features/useRowSelection.js b/src/components/tableV2/features/useRowSelection.js
@@ -30,7 +30,7 @@ export default (enabled, { testPrefix, tableMeta }) =>
                 />
               ),
             enableColumnFilter: false,
-            enableSorting: tableMeta?.enableSelectionSorting || false,
+            enableSorting: false,
             size: width,
             maxSize: width,
             minSize: width,
diff --git a/src/components/tableV2/helpers/filterFns.js b/src/components/tableV2/helpers/filterFns.js
@@ -13,7 +13,12 @@ export const comparison = (row, columnId, value) => {
 
   if (isNaN(numberToCompareWith) || numberToCompareWith === "") return true
 
-  return operators[operator](Number(rowValue), Number(numberToCompareWith))
+  const found = operators[operator](Number(rowValue), Number(numberToCompareWith))
+
+  if (!found && row.subRows.length)
+    return row.subRows.some(subRow => comparison(subRow, columnId, value))
+
+  return found
 }
 
 const multiSelect = (row, columnId, value) => {
@@ -36,16 +41,27 @@ const singleSelect = (row, columnId, value) => {
 
 export const select = (row, columnId, value) => {
   const isMulti = Array.isArray(value)
-  if (isMulti) return multiSelect(row, columnId, value)
-  return singleSelect(row, columnId, value)
+  const found = isMulti ? multiSelect(row, columnId, value) : singleSelect(row, columnId, value)
+
+  if (!found && row.subRows.length)
+    return row.subRows.some(subRow =>
+      isMulti ? multiSelect(subRow, columnId, value) : singleSelect(subRow, columnId, value)
+    )
+
+  return found
 }
 
-export const includesString = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId)?.toString?.()
+export const includesString = (row, columnId, value) => {
+  const rowValue = row.getValue(columnId)?.toString?.()
+
+  if (typeof rowValue !== "string") return false
+
+  const search = value ? value.toLowerCase() : ""
 
-  if (typeof value !== "string") return false
+  const found = rowValue.toLowerCase().includes(search)
 
-  const search = filterValue ? filterValue.toLowerCase() : ""
+  if (!found && row.subRows.length)
+    return row.subRows.some(subRow => includesString(subRow, columnId, value))
 
-  return value.toLowerCase().includes(search)
+  return found
 }
diff --git a/src/components/tableV2/netdataTable.js b/src/components/tableV2/netdataTable.js
diff --git a/src/organisms/documentation/search/input.js b/src/organisms/documentation/search/input.js
diff --git a/src/theme/dark/colors.js b/src/theme/dark/colors.js
diff --git a/src/theme/default/colors.js b/src/theme/default/colors.js
