Skip to content

Commit 5f81247

Browse files
anders-nomanders-nom
committed
Globalt søk
1 parent 5894a9a commit 5f81247

25 files changed

+380
-112
lines changed

‎.prettierrc

-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,3 @@ semi: true
55
singleQuote: true
66
endOfLine: auto
77
printWidth: 100
8-

‎common/contentSearchResult.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { CmsContent } from './cms-documents/content';
2+
3+
export type ContentSearchHit = Pick<
4+
CmsContent,
5+
'contentKey' | 'versionKey' | 'displayName' | 'path'
6+
> & { score: number };
7+
8+
export type ContentSearchResult = {
9+
query: string;
10+
total: number;
11+
error?: string;
12+
hits: ContentSearchHit[];
13+
};

‎server/src/cms/CmsArchiveService.ts

+64
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { AssetDocument, CmsCategoryDocument } from '../opensearch/types';
1313
import { transformToCategoriesList } from './utils/transformToCategoriesList';
1414
import { QueryDslQueryContainer } from '@opensearch-project/opensearch/api/types';
1515
import { CmsCategoryRef } from '../../../common/cms-documents/_common';
16+
import { ContentSearchResult } from '../../../common/contentSearchResult';
1617

1718
type ConstructorProps = {
1819
client: CmsArchiveDbClient;
@@ -129,6 +130,69 @@ export class CmsArchiveService {
129130
});
130131
}
131132

133+
public async contentSearchSimple(
134+
query: string,
135+
from: number = 0,
136+
size: number = 50
137+
): Promise<ContentSearchResult> {
138+
const result = await this.client.search<CmsContentDocument>({
139+
index: this.contentsIndex,
140+
from,
141+
size,
142+
_source_excludes: ['xmlAsString', 'html', 'versions'],
143+
body: {
144+
sort: {
145+
_score: {
146+
order: 'desc',
147+
},
148+
},
149+
query: {
150+
bool: {
151+
must: [
152+
{
153+
term: {
154+
isCurrentVersion: {
155+
value: true,
156+
},
157+
},
158+
},
159+
{
160+
multi_match: {
161+
query,
162+
fields: ['displayName^10', 'xmlAsString'],
163+
type: 'phrase_prefix',
164+
},
165+
},
166+
],
167+
},
168+
},
169+
},
170+
});
171+
172+
if (!result) {
173+
return {
174+
query,
175+
total: 0,
176+
error: 'Søket feilet, prøv igjen',
177+
hits: [],
178+
};
179+
}
180+
181+
return {
182+
query,
183+
total: result.total,
184+
hits: await Promise.all(
185+
result.hits.map(async (hit) => ({
186+
contentKey: hit.contentKey,
187+
versionKey: hit.versionKey,
188+
displayName: hit.displayName,
189+
score: hit._score || 0,
190+
path: await this.resolveCategoriesPath(hit.category.key),
191+
}))
192+
),
193+
};
194+
}
195+
132196
public async getContent(contentKey: string): Promise<CmsContent | null> {
133197
const result = await this.client.search<CmsContentDocument>({
134198
index: this.contentsIndex,

‎server/src/cms/CmsArchiveSite.ts

+11
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,17 @@ export class CmsArchiveSite {
9696

9797
return res.send(contentList);
9898
});
99+
100+
router.get('/search/simple', async (req, res) => {
101+
const { query } = req.query;
102+
if (!query) {
103+
return res.status(400).send('Parameter "query" is required');
104+
}
105+
106+
const result = await this.cmsArchiveService.contentSearchSimple(query as string);
107+
108+
return res.send(result);
109+
});
99110
}
100111

101112
private async setupSiteRoutes(router: Router, htmlRenderer: HtmlRenderer) {

‎server/src/cms/CmsCategories.ts

-48
This file was deleted.

‎server/src/opensearch/CmsArchiveDbClient.ts

+14-8
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { GetRequest, MgetRequest, SearchRequest } from '@opensearch-project/open
44
// but are good enough for our use
55
import type { Client as ClientTypeNew } from '@opensearch-project/opensearch/api/new';
66

7+
type DocumentWithScore<Document> = Document & { _score?: number };
8+
79
type SearchHit<Document> = {
8-
hits: Document[];
10+
hits: Array<DocumentWithScore<Document>>;
911
total: number;
1012
};
1113

@@ -43,13 +45,17 @@ export class CmsArchiveDbClient {
4345
return null;
4446
}
4547

46-
const hits = result.body.hits.hits.reduce<Document[]>((acc, { _source }) => {
47-
if (_source) {
48-
acc.push(_source);
49-
}
50-
51-
return acc;
52-
}, []);
48+
const hits = result.body.hits.hits.reduce<DocumentWithScore<Document>[]>(
49+
(acc, hit) => {
50+
const { _source, _score } = hit;
51+
if (_source) {
52+
acc.push({ ..._source, _score });
53+
}
54+
55+
return acc;
56+
},
57+
[]
58+
);
5359

5460
const total = result.body.hits.total;
5561

‎src/components/left-section/AppLeftSection.module.css

+33-13
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,56 @@
11
@value transitionDuration: 250ms;
22

3-
.leftSection {
4-
display: flex;
5-
position: relative;
3+
.root {
64
grid-area: left;
5+
border-left: solid 4px var(--a-gray-600);
6+
}
7+
8+
.root,
9+
.categoriesAndSearch {
10+
position: relative;
11+
12+
display: flex;
13+
flex-direction: column;
714
height: 100%;
15+
width: 100%;
16+
817
overflow: hidden;
9-
border-left: solid 4px var(--a-gray-600);
18+
}
1019

11-
& > * {
12-
overflow-y: scroll;
13-
overflow-x: hidden;
14-
scrollbar-width: thin;
15-
}
20+
.categoriesAndSearchResult {
21+
position: relative;
22+
overflow: hidden;
23+
height: 100%;
24+
}
25+
26+
.searchResult,
27+
.categoriesMenu,
28+
.contentMenu {
29+
overflow-y: scroll;
30+
scrollbar-width: thin;
31+
height: 100%;
1632
}
1733

34+
.categoriesAndSearch,
1835
.categoriesMenu {
19-
width: 100%;
36+
visibility: visible;
2037
transition: visibility linear transitionDuration;
2138

2239
&.hidden {
2340
visibility: hidden;
2441
}
2542
}
2643

27-
.contentsMenu {
44+
.contentMenu,
45+
.searchResult {
2846
position: absolute;
2947
opacity: 0;
3048
visibility: hidden;
49+
right: 100%;
50+
top: 0;
51+
3152
width: 100%;
3253
height: 100%;
33-
right: 100%;
3454

3555
transition-property: right, visibility, opacity;
3656
transition-timing-function: ease-in;
@@ -41,4 +61,4 @@
4161
visibility: visible;
4262
opacity: 1;
4363
}
44-
}
64+
}

‎src/components/left-section/AppLeftSection.tsx

+36-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,52 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { CategoriesMenu } from './categories/CategoriesMenu';
33
import { ContentMenu } from './contents/ContentMenu';
44
import { useAppState } from '../../state/useAppState';
55
import { classNames } from '../../utils/classNames';
6+
import { SearchInput } from './search/SearchInput';
7+
import { SearchResult } from './search/search-result/SearchResult';
8+
import { ContentSearchResult } from '../../../common/contentSearchResult';
69

710
import style from './AppLeftSection.module.css';
811

912
export const AppLeftSection = () => {
13+
const [searchResult, setSearchResult] = useState<ContentSearchResult | null>(null);
14+
const [searchResultOpen, setSearchResultOpen] = useState(false);
15+
1016
const { selectedCategory, appContext, contentSelectorOpen } = useAppState();
1117
const { rootCategories } = appContext;
1218

19+
useEffect(() => {
20+
setSearchResultOpen(!!searchResult);
21+
}, [searchResult]);
22+
1323
return (
14-
<div className={style.leftSection}>
15-
<div className={classNames(style.categoriesMenu, contentSelectorOpen && style.hidden)}>
16-
<CategoriesMenu rootCategories={rootCategories} />
24+
<div className={style.root}>
25+
<div
26+
className={classNames(
27+
style.categoriesAndSearch,
28+
contentSelectorOpen && style.hidden
29+
)}
30+
>
31+
<SearchInput setSearchResult={setSearchResult} />
32+
<div className={style.categoriesAndSearchResult}>
33+
<div
34+
className={classNames(
35+
style.categoriesMenu,
36+
searchResultOpen && style.hidden
37+
)}
38+
>
39+
<CategoriesMenu rootCategories={rootCategories} />
40+
</div>
41+
<div className={classNames(style.searchResult, searchResultOpen && style.open)}>
42+
<SearchResult
43+
result={searchResult}
44+
close={() => setSearchResultOpen(false)}
45+
/>
46+
</div>
47+
</div>
1748
</div>
18-
<div className={classNames(style.contentsMenu, contentSelectorOpen && style.open)}>
49+
<div className={classNames(style.contentMenu, contentSelectorOpen && style.open)}>
1950
{selectedCategory && <ContentMenu parentCategory={selectedCategory} />}
2051
</div>
2152
</div>

‎src/components/left-section/categories/CategoriesMenu.module.css

-3
This file was deleted.

‎src/components/left-section/categories/CategoriesMenu.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@ import { ChevronDownIcon, ChevronRightIcon } from '@navikt/aksel-icons';
44
import { TreeView } from '@mui/x-tree-view';
55
import { CategoriesList } from './CategoriesList';
66

7-
import style from './CategoriesMenu.module.css';
8-
97
type Props = {
108
rootCategories: CmsCategoryListItem[];
9+
className?: string;
1110
};
1211

13-
export const CategoriesMenu = ({ rootCategories }: Props) => {
12+
export const CategoriesMenu = ({ rootCategories, className }: Props) => {
1413
return (
1514
<TreeView
1615
defaultExpandIcon={<ChevronRightIcon />}
1716
defaultCollapseIcon={<ChevronDownIcon />}
18-
classes={{ root: style.menuRoot }}
17+
classes={{
18+
root: className,
19+
}}
1920
>
2021
<CategoriesList categories={rootCategories} />
2122
</TreeView>

‎src/components/left-section/contents/content-link/ContentLink.module.css

-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,3 @@
1414
.selected {
1515
background-color: var(--a-surface-selected);
1616
}
17-
18-
.icon {
19-
width: 1rem;
20-
}

‎src/components/left-section/contents/content-link/ContentLink.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { CmsContentListItem } from '../../../../../common/cms-documents/content'
33
import { BodyShort, Link, Loader } from '@navikt/ds-react';
44
import { useApiFetch } from '../../../../fetch/useApiFetch';
55
import { useAppState } from '../../../../state/useAppState';
6-
import { ArrowRightIcon } from '@navikt/aksel-icons';
76
import { classNames } from '../../../../utils/classNames';
87

98
import style from './ContentLink.module.css';
@@ -37,12 +36,8 @@ export const ContentLink = ({ content }: Props) => {
3736
.finally(() => setIsLoading(false));
3837
}}
3938
>
40-
{isLoading ? (
41-
<Loader size={'xsmall'} className={style.icon} />
42-
) : (
43-
<ArrowRightIcon className={style.icon} />
44-
)}
4539
<BodyShort size={'small'}>{content.displayName}</BodyShort>
40+
{isLoading && <Loader size={'xsmall'} />}
4641
</Link>
4742
);
4843
};

0 commit comments

Comments
 (0)