Add search bar to the Assets

src/components/Assets/AssetList/index.tsx

@@ -1,10 +1,11 @@
-import { useMemo, useState } from "react";
+import { ChangeEvent, useMemo, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
 import { Menu } from "../../common/Menu";
 import { Popover } from "../../common/Popover";
 import { PopoverContent } from "../../common/Popover/PopoverContent";
 import { PopoverTrigger } from "../../common/Popover/PopoverTrigger";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
+import { MagnifierIcon } from "../../common/icons/MagnifierIcon";
 import { Direction } from "../../common/icons/types";
 import { getAssetTypeInfo } from "../utils";
 import { AssetEntry as AssetEntryComponent } from "./AssetEntry";
@@ -146,18 +147,20 @@ export const AssetList = (props: AssetListProps) => {
     isDesc: true
   });
   const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false);
+  const [searchInputValue, setSearchInputValue] = useState("");
 
   const theme = useTheme();
   const backIconColor = getBackIconColor(theme);
   const assetTypeIconColor = getAssetTypeIconColor(theme);
   const sortingMenuChevronColor = getSortingMenuChevronColor(theme);
+  const searchInputIconColor = sortingMenuChevronColor;
 
   const handleBackButtonClick = () => {
     props.onBackButtonClick();
   };
 
-  const handleAssetLinkClick = (entry: ExtendedAssetEntryWithServices) => {
-    props.onAssetLinkClick(entry);
+  const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchInputValue(e.target.value);
   };
 
   const handleSortingMenuToggle = () => {
@@ -179,6 +182,10 @@ export const AssetList = (props: AssetListProps) => {
     handleSortingMenuToggle();
   };
 
+  const handleAssetLinkClick = (entry: ExtendedAssetEntryWithServices) => {
+    props.onAssetLinkClick(entry);
+  };
+
   const assetTypeInfo = getAssetTypeInfo(props.assetTypeId);
 
   const entries: ExtendedAssetEntryWithServices[] = useMemo(
@@ -199,10 +206,13 @@ export const AssetList = (props: AssetListProps) => {
     [props.entries]
   );
 
-  const sortedEntries = useMemo(
-    () => sortEntries(entries, sorting),
-    [entries, sorting]
-  );
+  const sortedEntries = useMemo(() => {
+    const filteredEntries = entries.filter((x) =>
+      x.span.displayName.toLocaleLowerCase().includes(searchInputValue)
+    );
+
+    return sortEntries(filteredEntries, sorting);
+  }, [entries, sorting, searchInputValue]);
 
   return (
     <s.Container>
@@ -219,6 +229,15 @@ export const AssetList = (props: AssetListProps) => {
         </s.ItemsCount>
       </s.Header>
       <s.Toolbar>
+        <s.SearchInputContainer>
+          <s.SearchInputIconContainer>
+            <MagnifierIcon color={searchInputIconColor} />
+          </s.SearchInputIconContainer>
+          <s.SearchInput
+            placeholder="Search"
+            onChange={handleSearchInputChange}
+          />
+        </s.SearchInputContainer>
         <Popover
           open={isSortingMenuOpen}
           onOpenChange={setIsSortingMenuOpen}

src/components/Assets/AssetList/styles.ts

@@ -45,9 +45,92 @@ export const Header = styled.div`
 
 export const Toolbar = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   padding: 8px;
-  gap: 12px;
+`;
+
+export const SearchInputContainer = styled.div`
+  display: flex;
+  position: relative;
+`;
+
+export const SearchInputIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 4px;
+`;
+
+export const SearchInput = styled.input`
+  font-size: 10px;
+  padding: 4px 4px 4px 18px;
+  border-radius: 4px;
+  width: 140px;
+  outline: none;
+
+  caret-color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#dadada";
+    }
+  }};
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#dadada";
+    }
+  }};
+
+  border: 1px solid
+    ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#d0d6eb";
+        case "dark":
+        case "dark-jetbrains":
+          return "#606060";
+      }
+    }};
+
+  &:focus,
+  &:hover {
+    border: 1px solid
+      ${({ theme }) => {
+        switch (theme.mode) {
+          case "light":
+            return "#7891d0";
+          case "dark":
+          case "dark-jetbrains":
+            return "#9b9b9b";
+        }
+      }};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#4d668a";
+        case "dark":
+        case "dark-jetbrains":
+          return "#dadada";
+      }
+    }};
+  }
+
+  &:focus::placeholder {
+    color: transparent;
+  }
 `;
 
 export const SortingMenuContainer = styled.div`
@@ -118,8 +201,17 @@ export const NoDataText = styled.span`
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
-  color: #9b9b9b;
   text-align: center;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
 `;
 
 export const InsightIconsContainer = styled.span`

src/components/common/icons/MagnifierIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useIconProps } from "./hooks";
+import { IconProps } from "./types";
+
+const MagnifierIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 12 12"
+    >
+      <path
+        fill={color}
+        d="M10.765 10.235 8.418 7.888a4.13 4.13 0 1 0-.53.53l2.347 2.347a.375.375 0 1 0 .53-.53ZM1.875 5.25a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0Z"
+      />
+    </svg>
+  );
+};
+
+export const MagnifierIcon = React.memo(MagnifierIconComponent);