diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 1e2f21219..e6a695d67 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/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) => { + 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 ( @@ -219,6 +229,15 @@ export const AssetList = (props: AssetListProps) => { + + + + + + { + 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` diff --git a/src/components/common/icons/MagnifierIcon.tsx b/src/components/common/icons/MagnifierIcon.tsx new file mode 100644 index 000000000..da732e7ab --- /dev/null +++ b/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 ( + + + + ); +}; + +export const MagnifierIcon = React.memo(MagnifierIconComponent);