Skip to content

feat: Improve search results formatting #5326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
franciscojavierarceo merged 15 commits into from
May 6, 2025
Merged

feat: Improve search results formatting #5326

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
fa80eb4
Improve search results formatting for better readability and user exp…
devin-ai-integration[bot] May 6, 2025
95df69f
Fix TypeScript errors with CSS implementation in search results
devin-ai-integration[bot] May 6, 2025
9469d70
Add feature to clear search bar after clicking a result
devin-ai-integration[bot] May 6, 2025
a4f30b0
Fix linting issues in RegistrySearch component
devin-ai-integration[bot] May 6, 2025
52c032f
Implement command palette/spotlight search triggered by Cmd+K
devin-ai-integration[bot] May 6, 2025
7112ffa
Fix TypeScript errors in CommandPalette component
devin-ai-integration[bot] May 6, 2025
2d0c43b
Fix UI issues in command palette: prevent double scrollbars and impro…
devin-ai-integration[bot] May 6, 2025
3ed7f2d
Fix command palette overlay implementation and UI issues
devin-ai-integration[bot] May 6, 2025
04395f7
Remove unused EuiOverlayMask import
devin-ai-integration[bot] May 6, 2025
e8f2b87
Fix command palette UI issues and improve user experience
devin-ai-integration[bot] May 6, 2025
75bdaee
Fix command palette modal closing when clicking on search results
devin-ai-integration[bot] May 6, 2025
3bf4c83
Apply formatting to command palette components
devin-ai-integration[bot] May 6, 2025
c98a5b0
Use React Router navigation instead of window.location.href to preven…
devin-ai-integration[bot] May 6, 2025
fff8f06
Format CommandPalette.tsx and clean up code
devin-ai-integration[bot] May 6, 2025
087bfb6
Remove test button from Layout component
devin-ai-integration[bot] May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Improve search results formatting for better readability and user exp… 
…erience

Co-Authored-By: Francisco Javier Arceo <[email protected]>
  • Loading branch information
@devin-ai-integration @franciscojavierarceo
devin-ai-integration[bot] and franciscojavierarceo committed May 6, 2025
commit fa80eb497c8e554e18567ba5a1f180cb144c56cf
159 changes: 112 additions & 47 deletions ui/src/components/RegistrySearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,38 @@ import {
EuiFieldSearch,
EuiSpacer,
EuiHorizontalRule,
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiBadge,
EuiTitle,
} from "@elastic/eui";
import EuiCustomLink from "./EuiCustomLink";

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const searchResultsStyles = {
searchResults: css`
margin-top: 8px;
`,
categoryGroup: css`
margin-bottom: 8px;
`,
searchResultItem: css`
padding: 8px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
`,
itemDescription: css`
font-size: 0.85em;
color: #666;
margin-top: 4px;
`,
};

interface RegistrySearchProps {
categories: {
name: string;
Expand All @@ -24,6 +53,16 @@ export interface RegistrySearchRef {
focusSearchInput: () => void;
}

const getItemType = (item: any, category: string): string | undefined => {
if (category === "Features" && "valueType" in item) {
return item.valueType;
}
if (category === "Feature Views" && "type" in item) {
return item.type;
}
return undefined;
};

const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
({ categories }, ref) => {
const [searchText, setSearchText] = useState("");
Expand Down Expand Up @@ -57,7 +96,29 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
})
: [];

return { name, items: filteredItems, getLink };
const items = filteredItems.map((item) => {
const itemName =
"name" in item
? String(item.name)
: "spec" in item && item.spec && "name" in item.spec
? String(item.spec.name ?? "Unknown")
: "Unknown";

return {
name: itemName,
link: getLink(item),
description:
"spec" in item && item.spec && "description" in item.spec
? String(item.spec.description || "")
: "",
type: getItemType(item, name),
};
});

return {
title: name,
items,
};
});

return (
Expand All @@ -81,59 +142,63 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
/>
<EuiSpacer size="s" />
{searchText && (
<>
<div css={searchResultsStyles.searchResults}>
<EuiText>
<h4>Search Results</h4>
</EuiText>
<EuiSpacer size="xs" />
{searchResults.some(({ items }) => items.length > 0) ? (
<div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow">
{searchResults.map(({ name, items, getLink }, index) =>
items.length > 0 ? (
<div key={index} className="euiPanel__body">
<EuiText>
<h5>{name}</h5>
</EuiText>
<EuiSpacer size="xs" />
<ul
style={{ listStyleType: "none", padding: 0, margin: 0 }}
>
{items.map((item, idx) => {
const itemName =
"name" in item
? item.name
: "spec" in item
? item.spec?.name
: "Unknown";

const itemLink = getLink(item);

return (
<li key={idx} style={{ margin: "8px 0" }}>
<EuiCustomLink to={itemLink}>
{itemName}
{searchResults.filter((result) => result.items.length > 0).length >
0 ? (
searchResults
.filter((result) => result.items.length > 0)
.map((result) => (
<div
key={result.title}
css={searchResultsStyles.categoryGroup}
>
<EuiPanel hasBorder={true} paddingSize="m">
<EuiTitle size="xs">
<h3>
{result.title} ({result.items.length})
</h3>
</EuiTitle>
<EuiHorizontalRule margin="xs" />
{result.items.map((item) => (
<div
key={item.name}
css={searchResultsStyles.searchResultItem}
>
<EuiFlexGroup>
<EuiFlexItem>
<EuiCustomLink to={item.link}>
<strong>{item.name}</strong>
</EuiCustomLink>
</li>
);
})}
</ul>
{index <
searchResults.filter(
(result) => result.items.length > 0,
).length -
1 && <EuiHorizontalRule margin="m" />}
</div>
) : null,
)}
</div>
{item.description && (
<div css={searchResultsStyles.itemDescription}>
{item.description}
</div>
)}
</EuiFlexItem>
{item.type && (
<EuiFlexItem grow={false}>
<EuiBadge>{item.type}</EuiBadge>
</EuiFlexItem>
)}
</EuiFlexGroup>
</div>
))}
</EuiPanel>
<EuiSpacer size="m" />
</div>
))
) : (
<div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow">
<div className="euiPanel__body">
<p>No matches found.</p>
</div>
</div>
<EuiPanel hasBorder={true} paddingSize="m" color="subdued">
<EuiText textAlign="center">
<p>No matches found for "{searchText}"</p>
</EuiText>
</EuiPanel>
)}
</>
</div>
)}
</>
);
Expand Down