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}
+
+ ))}
+
+ );
+}