Merge branch 'master' into master

Author: dianecloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.1.11",
+  "version": "5.1.15",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/button/__snapshots__/button.test.js.snap

@@ -291,6 +291,7 @@ exports[`Button states renders only icon 1`] = `
   width: 16px;
   opacity: 1;
   pointer-events: unset;
+  transform: rotate(0deg);
 }
 
 .c1 {
@@ -320,6 +321,7 @@ exports[`Button states renders only icon 1`] = `
   >
     <svg
       class="c2 button-icon"
+      rotate="0"
       title="plus"
     >
       <use
@@ -410,6 +412,7 @@ exports[`Button states renders smaller only icon 1`] = `
   width: 16px;
   opacity: 1;
   pointer-events: unset;
+  transform: rotate(0deg);
 }
 
 .c1 {
@@ -439,6 +442,7 @@ exports[`Button states renders smaller only icon 1`] = `
   >
     <svg
       class="c2 button-icon"
+      rotate="0"
       title="plus"
     >
       <use

src/components/button/styled.js

@@ -67,10 +67,10 @@ const getAccentColor = props => {
 
 const getTransparent = getColor(["transparent", "full"])
 
-const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {
+const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor, color }) => {
   const getErrorColor = danger ? getColor("error") : undefined
   const getWarningColor = warning ? getColor("warning") : undefined
-  const getSpecialColor = getErrorColor || getWarningColor
+  const getSpecialColor = getErrorColor || getWarningColor || (color ? getColor(color) : undefined)
   const getSpecialColorHover = getSpecialColor
     ? props => lighten(0.2, getSpecialColor(props))
     : undefined

src/components/drops/menu/dropdown.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState, useRef } from "react"
 import styled from "styled-components"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import Flex from "@/components/templates/flex"
+import { Text } from "@/components/typography"
 import Search from "@/components/search"
 import Box from "@/components/templates/box"
 import { mergeRefs } from "@/utils"
@@ -15,6 +16,14 @@ const Container = styled(Flex)`
 
 const defaultEstimateSize = () => 28
 
+const DefaultNoSearchResultsComponent = () => {
+  return (
+    <Flex padding={[2, 0]} justifyContent="center">
+      <Text>No results were found</Text>
+    </Flex>
+  )
+}
+
 const Dropdown = ({
   hideShadow,
   itemProps,
@@ -26,12 +35,15 @@ const Dropdown = ({
   Footer,
   value,
   hasSearch,
+  renderComponent,
   searchMargin = [4],
   gap = 0,
   estimateSize = defaultEstimateSize,
   close,
   containerRef,
   ref: forwardedRef,
+  showNoSearchResults = true,
+  NoSearchResultsComponent = DefaultNoSearchResultsComponent,
   ...rest
 }) => {
   const [searchValue, setSearchValue] = useState("")
@@ -41,7 +53,9 @@ const Dropdown = ({
 
     const searchLowerCase = searchValue.toLowerCase()
 
-    return items.filter(({ label, value: val }) => {
+    return items.filter(({ label, value: val, customFiltering }) => {
+      if (typeof customFiltering === "function")
+        return customFiltering({ searchValue, label, value: val })
       if (typeof label === "string" && label.toLowerCase().includes(searchLowerCase)) return true
       if (!label && typeof val === "string" && val.toLowerCase().includes(searchLowerCase))
         return true
@@ -80,6 +94,10 @@ const Dropdown = ({
           <Search data-testid="dropdown-search" placeholder="Search" onChange={setSearchValue} />
         </Box>
       )}
+      {typeof renderComponent === "function" && renderComponent({ searchValue, filteredItems })}
+      {showNoSearchResults && filteredItems.length === 0 && searchValue ? (
+        <NoSearchResultsComponent />
+      ) : null}
       <div
         ref={mergeRefs(ref, forwardedRef)}
         style={{

src/components/icon/assets/group_create.svg

@@ -124,6 +124,7 @@ import google from "./assets/google.svg"
 import goToNode from "./assets/go_to_node.svg"
 import grid from "./assets/grid.svg"
 import group_by from "./assets/group_by.svg"
+import groupCreate from "./assets/group_create.svg"
 import h1 from "./assets/h1.svg"
 import h2 from "./assets/h2.svg"
 import hamburger from "./assets/hamburger.svg"
@@ -590,6 +591,7 @@ export const iconsList = {
   goToNode,
   grid,
   group_by,
+  groupCreate,
   h1,
   h2,
   hamburger,

src/components/icon/iconsList.js

@@ -34,6 +34,11 @@ const appColors = {
   primaryHighlightAI: rawColors.blue.blue130,
   secondaryColorAI: rawColors.blue.blue140,
   secondaryHighlightAI: rawColors.blue.blue70,
+  // AI Graphics
+  strokeMain: rawColors.blue.blue150,
+  strokeHighlight: rawColors.blue.blue170,
+  aiParticleMain: rawColors.blue.blue150,
+
   //============Status=============\\
   success: rawColors.green.green100,
   successLite: rawColors.green.green190,

src/theme/dark/colors.js

@@ -34,6 +34,10 @@ const appColors = {
   primaryHighlightAI: rawColors.blue.blue130,
   secondaryColorAI: rawColors.blue.blue120,
   secondaryHighlightAI: rawColors.blue.blue190,
+  // AI Graphics
+  strokeMain: rawColors.blue.blue100,
+  strokeHighlight: rawColors.blue.blue120,
+  aiParticleMain: rawColors.blue.blue180,
   //============Status=============\\
   success: rawColors.green.green100,
   successLite: rawColors.green.green190,