Skip to content

Commit 8c57817

Browse files
abhinavrastogi-harnessabhinavrastogi-harness
authored
Search followup 1 (#1947)
* fix code preview style * fix more styles * add expand/collapse to see all results * fix store type
1 parent fd396cf commit 8c57817

File tree

3 files changed

+68
-43
lines changed

3 files changed

+68
-43
lines changed

‎apps/design-system/src/subjects/views/search-page/search-results-store.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const searchResultsStore: SearchResultsStore = {
2424
line_num: 42,
2525
before: 'export const userService = {',
2626
after: '};',
27-
segments: [
27+
fragments: [
2828
{
2929
pre: ' ',
3030
match: 'searchUsers',
@@ -36,7 +36,7 @@ export const searchResultsStore: SearchResultsStore = {
3636
line_num: 124,
3737
before: 'const searchUsersByName = async (name: string) => {',
3838
after: ' return results;',
39-
segments: [
39+
fragments: [
4040
{
4141
pre: ' const results = await db.users.find({ name: { $regex: ',
4242
match: 'searchPattern',
@@ -56,7 +56,7 @@ export const searchResultsStore: SearchResultsStore = {
5656
line_num: 15,
5757
before: 'interface SearchProps {',
5858
after: '}',
59-
segments: [
59+
fragments: [
6060
{
6161
pre: ' ',
6262
match: 'onSearch',
@@ -68,7 +68,7 @@ export const searchResultsStore: SearchResultsStore = {
6868
line_num: 57,
6969
before: 'const handleSearch = useCallback(() => {',
7070
after: '}, [searchTerm, onSearch]);',
71-
segments: [
71+
fragments: [
7272
{
7373
pre: ' ',
7474
match: 'onSearch',
@@ -88,7 +88,7 @@ export const searchResultsStore: SearchResultsStore = {
8888
line_num: 32,
8989
before: 'describe("Search API", () => {',
9090
after: ' });',
91-
segments: [
91+
fragments: [
9292
{
9393
pre: ' it("should return results when ',
9494
match: 'search',
@@ -108,7 +108,7 @@ export const searchResultsStore: SearchResultsStore = {
108108
line_num: 45,
109109
before: '@Service',
110110
after: '}',
111-
segments: [
111+
fragments: [
112112
{
113113
pre: 'public class ',
114114
match: 'SearchService',
@@ -120,7 +120,7 @@ export const searchResultsStore: SearchResultsStore = {
120120
line_num: 78,
121121
before: ' @Override',
122122
after: ' }',
123-
segments: [
123+
fragments: [
124124
{
125125
pre: ' public List<SearchResult> ',
126126
match: 'search',

‎packages/ui/src/views/search/components/search-results-list.tsx‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC } from 'react'
1+
import { FC, useState } from 'react'
22

33
import { Button, Card, Layout, Link, SkeletonList, Spacer, Tag, Text } from '@/components'
44
import { useTranslation } from '@/context'
@@ -23,7 +23,7 @@ export interface SearchResultItem {
2323
line_num: number
2424
before: string
2525
after: string
26-
segments: Array<{
26+
fragments: Array<{
2727
pre: string
2828
match: string
2929
post: string
@@ -40,6 +40,7 @@ export const SearchResultsList: FC<SearchResultsListProps> = ({
4040
}) => {
4141
const { t } = useTranslation()
4242
const { results } = useSearchResultsStore()
43+
const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({})
4344

4445
if (isLoading) {
4546
return <SkeletonList />
@@ -70,8 +71,8 @@ export const SearchResultsList: FC<SearchResultsListProps> = ({
7071
{results.map(item => (
7172
<Card.Root key={`${item.repo_path}/${item.file_name}`} tabIndex={0}>
7273
<Layout.Vertical gap="sm">
73-
<Layout.Horizontal gap="sm">
74-
<Tag value={item.repo_path} icon="repository" />
74+
<Layout.Horizontal gap="xs">
75+
<Tag value={item.repo_path} icon="repository" showIcon={true} size={'sm'} />
7576
<Link
7677
to={toRepoFileDetails({ repoPath: item.repo_path, filePath: item.file_name, branch: item.repo_branch })}
7778
>
@@ -81,25 +82,53 @@ export const SearchResultsList: FC<SearchResultsListProps> = ({
8182

8283
{item.matches && item.matches.length > 1 && (
8384
<Layout.Vertical gap="sm">
84-
{item.matches.slice(0, 3).map((match, matchIndex) => (
85-
<div key={`match-${matchIndex}`}>
86-
<Text variant="body-normal">Line {match.line_num}</Text>
87-
<pre className={cn('bg-cn-background-1 p-1 mt-1 overflow-x-scroll rounded')}>
88-
<code>
89-
{match.before}
90-
{match.segments?.map((segment, segIndex) => (
91-
<span key={`seg-${segIndex}`}>
92-
{segment.pre}
93-
<span className={cn('bg-yellow-100/30')}>{segment.match}</span>
94-
{segment.post}
95-
</span>
96-
))}
97-
{match.after}
98-
</code>
99-
</pre>
100-
</div>
101-
))}
102-
{item.matches?.length > 3 && <Text variant="body-normal">+{item.matches.length - 3} more</Text>}
85+
{item.matches
86+
.slice(0, expandedItems[`${item.repo_path}/${item.file_name}`] ? undefined : 3)
87+
.map(match => (
88+
<div key={`${match.before}-${match.fragments.join('')}-${match.after}`}>
89+
<pre className={cn('bg-cn-background-1 p-1 mt-1 overflow-x-scroll rounded')}>
90+
<code className="monospace">
91+
{match.before.trim().length > 0 && (
92+
<>
93+
{match.line_num - 1} {match.before}
94+
<br />
95+
</>
96+
)}
97+
{match.line_num}{' '}
98+
{match.fragments?.map((segment, segIndex) => (
99+
<span key={`seg-${segIndex}`}>
100+
{segment.pre}
101+
<mark>{segment.match}</mark>
102+
{segment.post}
103+
</span>
104+
))}
105+
{match.after.trim().length > 0 && (
106+
<>
107+
<br />
108+
{match.line_num + 1} {match.after}
109+
</>
110+
)}
111+
</code>
112+
</pre>
113+
</div>
114+
))}
115+
{item.matches?.length > 3 && (
116+
<Text
117+
variant="body-normal"
118+
className="text-cn-primary cursor-pointer hover:underline"
119+
onClick={() => {
120+
const key = `${item.repo_path}/${item.file_name}`
121+
setExpandedItems(prev => ({
122+
...prev,
123+
[key]: !prev[key]
124+
}))
125+
}}
126+
>
127+
{expandedItems[`${item.repo_path}/${item.file_name}`]
128+
? t('views:search.showLess', '- Show Less')
129+
: t('views:search.showMore', `+${item.matches.length - 3} more`)}
130+
</Text>
131+
)}
103132
</Layout.Vertical>
104133
)}
105134
</Layout.Vertical>

‎packages/ui/src/views/search/search-page.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, useCallback, useMemo } from 'react'
22

3-
import { ListActions, Pagination, SearchInput, Spacer, Text, Toggle } from '@/components'
3+
import { Pagination, SearchInput, Spacer, Text, Toggle } from '@/components'
44
import { useTranslation } from '@/context'
55
import { SandboxLayout } from '@/views'
66
import { cn } from '@utils/cn'
@@ -68,16 +68,11 @@ export const SearchPageView: FC<SearchPageViewProps> = ({
6868
<Text variant="heading-section">{t('views:search.title', 'Search')}</Text>
6969
<Spacer size={6} />
7070

71-
<ListActions.Root>
72-
<ListActions.Left>
73-
<SearchInput
74-
defaultValue={searchQuery || ''}
75-
onChange={handleSearchChange}
76-
placeholder={t('views:search.searchPlaceholder', 'Search anything...')}
77-
autoFocus
78-
/>
79-
</ListActions.Left>
80-
<ListActions.Right>
71+
<SearchInput
72+
defaultValue={searchQuery || ''}
73+
onChange={handleSearchChange}
74+
placeholder={t('views:search.searchPlaceholder', 'Search anything...')}
75+
suffix={
8176
<Toggle
8277
defaultValue={regex}
8378
onChange={setRegex}
@@ -88,8 +83,9 @@ export const SearchPageView: FC<SearchPageViewProps> = ({
8883
}}
8984
tooltipProps={{ content: 'Enable Regex' }}
9085
/>
91-
</ListActions.Right>
92-
</ListActions.Root>
86+
}
87+
autoFocus
88+
/>
9389

9490
<Spacer size={4.5} />
9591

0 commit comments

Comments
 (0)