diff --git a/.changeset/search-pull-rank.md b/.changeset/search-pull-rank.md
new file mode 100644
index 0000000000..995225698e
--- /dev/null
+++ b/.changeset/search-pull-rank.md
@@ -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
+// ...
+
+ {({ results }) => (
+
+- {results.map(({ type, document, highlight }) => {
++ {results.map(({ type, document, highlight, rank }) => {
+ switch (type) {
+ case 'software-catalog':
+ return (
+
+ );
+ case 'techdocs':
+ return (
+
+ );
+ default:
+ return (
+
+ );
+ }
+ })}
+
+ )}
+
+// ...
+```
+
+If you have implemented a custom Search Modal or other custom search experience, you will want to make similar changes in those components.
diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx
index f5f4204302..99fc964cb2 100644
--- a/packages/app/src/components/search/SearchModal.tsx
+++ b/packages/app/src/components/search/SearchModal.tsx
@@ -184,7 +184,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
{({ results }) => (
- {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}
/>
);
}
diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 9a2e85bd8c..053fa81da8 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -132,7 +132,7 @@ const SearchPage = () => {
{({ results }) => (
- {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}
/>
);
}
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index 1b3bf5b77d..928b8201ea 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -112,7 +112,7 @@ const SearchPage = () => {
{({ results }) => (
- {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}
/>
);
}