paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Update the app and create-app to pass through rank

Browse Source 
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
This commit is contained in:
Eric Peterson
2022-06-09 15:51:32 +02:00
parent 915700f64f
commit f7f5a6c6a3
4 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/search-pull-rank.md
+50
View File
@@ -0,0 +1,50 @@
---
'@backstage/create-app': patch
---
It's now possible to pass result item components a `rank`, which is captured by the analytics API when a user clicks on a search result. To apply this change, update your `/packages/app/src/components/search/SearchPage.tsx` in the following way:
```diff
// ...
<SearchResult>
{({ results }) => (
<List>
- {results.map(({ type, document, highlight }) => {
+ {results.map(({ type, document, highlight, rank }) => {
switch (type) {
case 'software-catalog':
return (
<CatalogSearchResultListItem
key={document.location}
result={document}
highlight={highlight}
+ rank={rank}
/>
);
case 'techdocs':
return (
<TechDocsSearchResultListItem
key={document.location}
result={document}
highlight={highlight}
+ rank={rank}
/>
);
default:
return (
<DefaultResultListItem
key={document.location}
result={document}
highlight={highlight}
+ rank={rank}
/>
);
}
})}
</List>
)}
</SearchResult>
// ...
```
If you have implemented a custom Search Modal or other custom search experience, you will want to make similar changes in those components.
packages/app/src/components/search/SearchModal.tsx
+4 -1
View File
@@ -184,7 +184,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight }) => {
{results.map(({ type, document, highlight, rank }) => {
let resultItem;
switch (type) {
case 'software-catalog':
@@ -194,6 +194,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
break;
@@ -204,6 +205,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
break;
@@ -213,6 +215,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}
packages/app/src/components/search/SearchPage.tsx
+4 -1
View File
@@ -132,7 +132,7 @@ const SearchPage = () => {
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight }) => {
{results.map(({ type, document, highlight, rank }) => {
switch (type) {
case 'software-catalog':
return (
@@ -141,6 +141,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
case 'techdocs':
@@ -150,6 +151,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
default:
@@ -158,6 +160,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}
packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+4 -1
View File
@@ -112,7 +112,7 @@ const SearchPage = () => {
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight }) => {
{results.map(({ type, document, highlight, rank }) => {
switch (type) {
case 'software-catalog':
return (
@@ -120,6 +120,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
case 'techdocs':
@@ -128,6 +129,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
default:
@@ -136,6 +138,7 @@ const SearchPage = () => {
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}