diff --git a/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx b/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx index 303c75d..e9d3298 100644 --- a/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx +++ b/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx @@ -5,6 +5,8 @@ import { useSidePanelKeyboardCommands } from '@noodl-hooks/useKeyboardCommands'; import classNames from 'classnames'; import React, { useEffect, useRef, useState } from 'react'; +import { ComponentModel } from '@noodl-models/componentmodel'; +import { NodeGraphNode } from '@noodl-models/nodegraphmodel'; import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode'; import { performSearch } from '@noodl-utils/universal-search'; @@ -54,7 +56,7 @@ export function SearchPanel() { } }, [debouncedSearchTerm]); - function onSearchItemClicked(searchResult) { + function onSearchItemClicked(searchResult: SearchResultItem) { if (searchResult.type === 'Component') { NodeGraphContextTmp.switchToComponent(searchResult.componentTarget, { breadcrumbs: false, @@ -85,29 +87,7 @@ export function SearchPanel() {
{searchResults.map((component) => ( -
1 ? 's' : '' - })`} - key={component.componentId} - variant={SectionVariant.Panel} - > - {component.results.map((result, index) => ( -
onSearchItemClicked(result)} - > - - {result.label} -
- ))} -
+ ))} {searchResults.length === 0 && debouncedSearchTerm.length > 0 && ( @@ -118,3 +98,51 @@ export function SearchPanel() { ); } + +type SearchResultItem = { + componentTarget: ComponentModel; + label: string; + nodeTarget: NodeGraphNode; + type: string; + userLabel: string; +}; + +type SearchItemProps = { + component: { + componentName: string; + componentId: string; + results: SearchResultItem[]; + }; + onSearchItemClicked: (item: SearchResultItem) => void; +}; + +function SearchItem({ component, onSearchItemClicked }: SearchItemProps) { + const resultCountText = `${component.results.length} result${component.results.length > 1 ? 's' : ''}`; + let titleText = `${component.componentName} (${resultCountText})`; + + // We expect there to always be at least one result, to get the full component name. + const isInCloudFunctions = component.results[0].componentTarget.name.startsWith('/#__cloud__/'); + if (isInCloudFunctions) { + titleText += ' (Cloud Function)'; + } + + return ( +
+ {component.results.map((result, index) => ( +
onSearchItemClicked(result)} + > + + {result.label} +
+ ))} +
+ ); +}