From f7f5a6c6a3b0f925279dbe56bef2bfc80bdc3026 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 9 Jun 2022 15:51:32 +0200
Subject: [PATCH] Update the app and create-app to pass through rank

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-pull-rank.md                | 50 +++++++++++++++++++
 .../app/src/components/search/SearchModal.tsx |  5 +-
 .../app/src/components/search/SearchPage.tsx  |  5 +-
 .../app/src/components/search/SearchPage.tsx  |  5 +-
 4 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/search-pull-rank.md

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
+// ...
+<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.
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 }) => {
             <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}
                           />
                         );
                     }
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 = () => {
             <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}
                           />
                         );
                     }
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 = () => {
             <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}
                           />
                         );
                     }