From a69397f6e77675a3c837f2dcfbd835e0eaec0afe Mon Sep 17 00:00:00 2001
From: Paul Tran-Van <paul.tranvan@gmail.com>
Date: Wed, 13 Nov 2024 15:15:54 +0100
Subject: [PATCH 1/2] feat: Allow click on searched file's path

In the search, we display the folder path for files results.
It is not possible to click on it, to directly open the folder rather
than the file itself.
---
 .../ResultMenu/ResultMenuContent.jsx          |  2 +
 src/assistant/ResultMenu/ResultMenuItem.jsx   | 10 +++-
 .../SuggestionItemTextSecondary.jsx           | 46 +++++++++++++++++++
 src/assistant/ResultMenu/styles.styl          |  7 +++
 src/assistant/Search/useFetchResult.jsx       |  2 +
 5 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx

diff --git a/src/assistant/ResultMenu/ResultMenuContent.jsx b/src/assistant/ResultMenu/ResultMenuContent.jsx
index 350c3e356..e2b1856dc 100644
--- a/src/assistant/ResultMenu/ResultMenuContent.jsx
+++ b/src/assistant/ResultMenu/ResultMenuContent.jsx
@@ -30,8 +30,10 @@ const SearchResult = () => {
     <ResultMenuItem
       key={result.id || idx}
       icon={result.icon}
+      slug={result.slug}
       primaryText={result.primary}
       secondaryText={result.secondary}
+      secondaryUrl={result.secondaryUrl}
       query={searchValue}
       highlightQuery="true"
       selected={
diff --git a/src/assistant/ResultMenu/ResultMenuItem.jsx b/src/assistant/ResultMenu/ResultMenuItem.jsx
index 49df736ff..ec80cec23 100644
--- a/src/assistant/ResultMenu/ResultMenuItem.jsx
+++ b/src/assistant/ResultMenu/ResultMenuItem.jsx
@@ -6,11 +6,14 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import SuggestionItemTextHighlighted from './SuggestionItemTextHighlighted'
+import SuggestionItemTextSecondary from './SuggestionItemTextSecondary'
 
 const ResultMenuItem = ({
   icon,
   primaryText,
   secondaryText,
+  secondaryUrl,
+  slug,
   selected,
   onClick,
   query,
@@ -32,7 +35,12 @@ const ResultMenuItem = ({
   )
 
   const secondary = highlightQuery ? (
-    <SuggestionItemTextHighlighted text={secondaryText} query={query} />
+    <SuggestionItemTextSecondary
+      text={secondaryText}
+      query={query}
+      slug={slug}
+      url={secondaryUrl}
+    />
   ) : (
     secondaryText
   )
diff --git a/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx b/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx
new file mode 100644
index 000000000..9a9e13afc
--- /dev/null
+++ b/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx
@@ -0,0 +1,46 @@
+/**
+ * Code copied and adapted from cozy-drive
+ *
+ * See source: https://github.com/cozy/cozy-drive/blob/fbe2df67199683b23a40f476ccdacb00ee027459/src/modules/search/components/SuggestionItemTextSecondary.jsx
+ */
+import React from 'react'
+
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
+import SuggestionItemTextHighlighted from './SuggestionItemTextHighlighted'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import styles from './styles.styl'
+
+const SuggestionItemTextSecondary = ({ text, query, url, slug }) => {
+  const { isMobile } = useBreakpoints()
+
+  if (isMobile || !url) {
+    return <SuggestionItemTextHighlighted text={text} query={query} />
+  }
+
+  const app = { slug }
+  return (
+    <AppLinker app={app} href={url}>
+      {({ href, onClick }) => (
+        <a
+          className={styles['suggestion-item-parent-link']}
+          href={href}
+          onClick={e => {
+            e.stopPropagation()
+            if (typeof onClick == 'function') {
+              onClick(e)
+            }
+          }}
+        >
+          <SuggestionItemTextHighlighted
+            text={text}
+            query={query}
+            slug={slug}
+          />
+        </a>
+      )}
+    </AppLinker>
+  )
+}
+
+export default SuggestionItemTextSecondary
diff --git a/src/assistant/ResultMenu/styles.styl b/src/assistant/ResultMenu/styles.styl
index 4c79c311e..08f4afede 100644
--- a/src/assistant/ResultMenu/styles.styl
+++ b/src/assistant/ResultMenu/styles.styl
@@ -8,3 +8,10 @@
   &-inner
     max-height 16.5rem
     overflow auto
+
+.suggestion-item-parent-link
+    color var(--primaryTextColor)
+    text-decoration none
+
+    &:hover
+        text-decoration underline
\ No newline at end of file
diff --git a/src/assistant/Search/useFetchResult.jsx b/src/assistant/Search/useFetchResult.jsx
index 5955f8ed7..9a8832579 100644
--- a/src/assistant/Search/useFetchResult.jsx
+++ b/src/assistant/Search/useFetchResult.jsx
@@ -36,6 +36,8 @@ export const useFetchResult = searchValue => {
         return {
           id: r.doc._id,
           icon: icon,
+          slug: r.slug,
+          secondaryUrl: r.secondaryUrl,
           primary: r.title,
           secondary: r.subTitle,
           onClick: () => {

From ffe3c0b6b1e0e165f88069c4c12d2cda00a9f0ce Mon Sep 17 00:00:00 2001
From: Ldoppea <yannick.chiron@gmail.com>
Date: Wed, 13 Nov 2024 15:58:04 +0100
Subject: [PATCH 2/2] fix(search): Use MUI Link instead of `<a>` for search
 secondary title

---
 .../ResultMenu/SuggestionItemTextSecondary.jsx         | 10 +++++-----
 src/assistant/ResultMenu/styles.styl                   |  7 -------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx b/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx
index 9a9e13afc..a2e5522aa 100644
--- a/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx
+++ b/src/assistant/ResultMenu/SuggestionItemTextSecondary.jsx
@@ -8,8 +8,7 @@ import React from 'react'
 import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
 import SuggestionItemTextHighlighted from './SuggestionItemTextHighlighted'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-
-import styles from './styles.styl'
+import Link from 'cozy-ui/transpiled/react/Link'
 
 const SuggestionItemTextSecondary = ({ text, query, url, slug }) => {
   const { isMobile } = useBreakpoints()
@@ -22,8 +21,9 @@ const SuggestionItemTextSecondary = ({ text, query, url, slug }) => {
   return (
     <AppLinker app={app} href={url}>
       {({ href, onClick }) => (
-        <a
-          className={styles['suggestion-item-parent-link']}
+        <Link
+          color="textSecondary"
+          underline="hover"
           href={href}
           onClick={e => {
             e.stopPropagation()
@@ -37,7 +37,7 @@ const SuggestionItemTextSecondary = ({ text, query, url, slug }) => {
             query={query}
             slug={slug}
           />
-        </a>
+        </Link>
       )}
     </AppLinker>
   )
diff --git a/src/assistant/ResultMenu/styles.styl b/src/assistant/ResultMenu/styles.styl
index 08f4afede..4c79c311e 100644
--- a/src/assistant/ResultMenu/styles.styl
+++ b/src/assistant/ResultMenu/styles.styl
@@ -8,10 +8,3 @@
   &-inner
     max-height 16.5rem
     overflow auto
-
-.suggestion-item-parent-link
-    color var(--primaryTextColor)
-    text-decoration none
-
-    &:hover
-        text-decoration underline
\ No newline at end of file