diff --git a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx index a939285597c..ac33f20ee88 100644 --- a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx +++ b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx @@ -1,11 +1,16 @@ import React, { useEffect, useMemo } from "react"; -import { Button, Box, Typography } from "@mui/material"; +import { Box, Button, Typography } from "@mui/material"; import { useTranslation } from "react-i18next"; import { SearchLabeledInput } from "../../sidePanels/SearchLabeledInput"; import { SearchLabel } from "../../sidePanels/SearchLabel"; -import { resolveSearchQuery, searchQueryToString, useNodeTypes } from "./utils"; +import { resolveSearchQuery, searchQueryToString, selectorByName } from "./utils"; import { SearchQuery } from "./SearchResults"; import { SearchLabeledAutocomplete } from "../../sidePanels/SearchLabeledAutocomplete"; +import { useSelector } from "react-redux"; +import { getScenario } from "../../../reducers/selectors/graph"; +import NodeUtils from "../../graph/NodeUtils"; +import { uniq } from "lodash"; +import { getComponentGroups } from "../../../reducers/selectors/settings"; export function AdvancedSearchFilters({ filterFields, @@ -21,6 +26,9 @@ export function AdvancedSearchFilters({ setCollapsedHandler: React.Dispatch>; }) { const { t } = useTranslation(); + const componentsGroups = useSelector(getComponentGroups); + const { scenarioGraph } = useSelector(getScenario); + const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph); const displayNames = useMemo( () => ({ @@ -35,6 +43,25 @@ export function AdvancedSearchFilters({ [t], ); + const componentLabels = useMemo(() => { + return new Set( + componentsGroups.flatMap((componentGroup) => componentGroup.components).map((component) => component.label.toLowerCase()), + ); + }, []); + + const nodeTypes = useMemo(() => { + const availableTypes = allNodes + .flatMap((node) => + selectorByName("type") + .flatMap((s) => s.selector(node)) + .filter((item) => item !== undefined), + ) + .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression)) + .filter((type) => componentLabels.has(type.toLowerCase())); + + return uniq(availableTypes); + }, [allNodes]); + useEffect(() => { const searchQuery = resolveSearchQuery(filter); setFilterFields(searchQuery); @@ -70,12 +97,7 @@ export function AdvancedSearchFilters({ - + @@ -90,7 +112,16 @@ export function AdvancedSearchFilters({ - + diff --git a/designer/client/src/components/toolbars/search/utils.ts b/designer/client/src/components/toolbars/search/utils.ts index b2e1e588f4f..7045ebfa915 100644 --- a/designer/client/src/components/toolbars/search/utils.ts +++ b/designer/client/src/components/toolbars/search/utils.ts @@ -7,7 +7,6 @@ import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { ensureArray } from "../../../common/arrayUtils"; import { SearchQuery } from "./SearchResults"; -import { getComponentGroups } from "../../../reducers/selectors/settings"; type SelectorResult = { expression: string } | string; type Selector = (node: NodeType) => SelectorResult | SelectorResult[]; @@ -16,7 +15,6 @@ type FilterSelector = { name: string; selector: Selector }[]; const fieldsSelectors: FilterSelector = [ { name: "name", - selector: (node) => node.id, }, { @@ -58,7 +56,7 @@ function matchFilters(value: SelectorResult, filterValues: string[]): boolean { return filterValues.length && filterValues.some((filter) => filter != "" && resolved?.toLowerCase().includes(filter.toLowerCase())); } -export const findFields = (filterValues: string[], node: NodeType) => { +const findFields = (filterValues: string[], node: NodeType) => { return uniq( fieldsSelectors.flatMap(({ name, selector }) => ensureArray(selector(node)) @@ -70,41 +68,17 @@ export const findFields = (filterValues: string[], node: NodeType) => { const findFieldsUsingSelectorWithName = (selectorName: string, filterValues: string[], node: NodeType) => { return uniq( - fieldsSelectors - .filter((selector) => selector.name == selectorName) - .flatMap(({ name, selector }) => - ensureArray(selector(node)) - .filter((v) => matchFilters(v, filterValues)) - .map(() => name), - ), + selectorByName(selectorName).flatMap(({ name, selector }) => + ensureArray(selector(node)) + .filter((v) => matchFilters(v, filterValues)) + .map(() => name), + ), ); }; -function useComponentTypes(): Set { - const componentsGroups = useSelector(getComponentGroups); - - return useMemo(() => { - return new Set( - componentsGroups.flatMap((componentGroup) => componentGroup.components).map((component) => component.label.toLowerCase()), - ); - }, []); -} - -export function useNodeTypes(): string[] { - const { scenarioGraph } = useSelector(getScenario); - const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph); - const componentsSet = useComponentTypes(); - - return useMemo(() => { - const nodeSelector = fieldsSelectors.find((selector) => selector.name == "type")?.selector; - const availableTypes = allNodes - .flatMap((node) => ensureArray(nodeSelector(node)).filter((item) => item !== undefined)) - .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression)) - .filter((type) => componentsSet.has(type.toLowerCase())); - - return uniq(availableTypes); - }, [allNodes]); -} +export const selectorByName = (selectorName: string): FilterSelector => { + return fieldsSelectors.filter((selector) => selector.name == selectorName); +}; export function useFilteredNodes(searchQuery: SearchQuery): { groups: string[]; @@ -121,7 +95,7 @@ export function useFilteredNodes(searchQuery: SearchQuery): { const displayNames = useMemo( () => ({ - name: t("panels.search.field.id", "Name"), + name: t("panels.search.field.name", "Name"), description: t("panels.search.field.description", "Description"), label: t("panels.search.field.label", "Label"), value: t("panels.search.field.value", "Value"),