feat: Implement search feature through Dataproxy #2198

Ldoppea · 2024-10-04T16:37:51Z

This PR implements the search feature based on the new DataProxy

The DataProxy is a new cozy-app meant to be embedded by other cozy-apps that need to access locally persisted data and heavy processes (like search indexing, maybe local AI in the future etc)

The goal is to mutualize the persisted data that will be accessed by multiple cozy-app that have all their own domain (as we use flat domain with slug for every cozy-app) and so cannot mutualize their local storage without additional mechanisms (this is why we want to implement the DataProxy)

Here cozy-home access the DataProxy through an iframe based API (using the cozy-stack intent mechanism)

The DataProxy search API takes the user's search query and return a list of documents that match the query. For now those documents can be files, contacts or apps.

Related PR: cozy/cozy-web-data-proxy#1

bundlemon · 2024-10-04T16:43:11Z

BundleMon

Files updated (3)

Status	Path	Size	Limits
✅	vendors/home.(hash).js	1.53MB (+23.84KB +1.54%)	-
✅	app/home.(hash).js	54.73KB (+2.64KB +5.08%)	-
✅	intents/home.(hash).js	28.85KB (+2.06KB +7.7%)	-

Unchanged files (10)

Status	Path	Size	Limits
✅	services/softDeleteOrRestoreAccounts/home.js	464.4KB	-
✅	services/updateAccounts/home.js	461.47KB	-
✅	services/deleteAccounts/home.js	309.8KB	-
✅	services/myselfFromIdenties/home.js	234.35KB	-
✅	services/polyfillFetch/home.js	97.37KB	-
✅	vendors-home.(hash).(hash).min.css	38.79KB	-
✅	services/attributesHelpers/home.js	15.22KB	-
✅	app-home.(hash).min.css	2.14KB	-
✅	intents/index.html	653B	-
✅	intents-home.(hash).min.css	158B	-

Total files change +28.55KB +0.88%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

Ldoppea · 2024-10-16T15:39:33Z

Not sure if it was the best place to put SuggestionItemTextHighlighted component, and getFileMimetype et getIconForSearchResult method files

JF-Cozy

approve pour débloquer si besoin

JF-Cozy · 2024-10-16T15:52:00Z

package.json

@@ -35,6 +35,7 @@
  "homepage": "https://github.com/cozy/cozy-home#readme",
  "dependencies": {
    "@sentry/react": "7.119.0",
+    "comlink": "^4.4.1",


on fixe la version des dep pour les dep non cozy

JF-Cozy · 2024-10-16T15:52:59Z

package.json

@@ -57,6 +57,7 @@
    "leaflet": "1.7.1",
    "localforage": "^1.10.0",
    "lodash": "4.17.21",
+    "mime-types": "^2.1.35",


idem version fixe

JF-Cozy · 2024-10-16T15:56:17Z

src/dataproxy/DataProxyProvider.jsx

+          return
+        }
+
+        setIframeUrl(result.data.attributes.services[0]?.href)


on peut enlever le ? ici, dans le doute ça évitera de set un undefined 🤷‍♂️

Si on l'enlève ça fera un throw et donc un crash de la home (j'en parlait l'autre jour il faudra qu'on mette un ErrorBoundary quelque part)

Mais le undefined est géré plus loin on ne rend l'iframe que si iFrameUrl est truthy

JF-Cozy · 2024-10-16T15:58:32Z

src/dataproxy/DataProxyProvider.jsx

+    return result
+  }
+
+  const value = {


memoiser value permet des renders inutiles

Je ne pense pas qu'il y en ai besoin, une fois l'iframe chargée le state ne devrait plus bouger (c'est juste un pont de communication, le state est géré à l'intérieur de l'iframe).

Je propose de merger quand même, mais je vérifierai ça lundi.

JF-Cozy · 2024-10-16T15:59:12Z

src/dataproxy/DataProxyProvider.jsx

+    setDataProxy(() => remote)
+  }
+
+  const search = async search => {


usecallback les méthodes d'un provider évite également des renders

JF-Cozy · 2024-10-16T16:12:33Z

src/assistant/ResultMenu/ResultMenuContent.jsx

@@ -16,7 +16,7 @@ import ResultMenuItem from './ResultMenuItem'
 const SearchResult = () => {
  const { isLoading, results } = useSearch()

-  if (isLoading)
+  if (isLoading && !results?.length)


c'est dû au fait que le result peut être [] même pendant un loading ? Est-ce qu'on pourrait plutôt avoir plus simplement un tableau, ou null, si on est !loading ou loading ? C'est basé sur client.query donc on hérite du comportement de cozy-client ?

JF-Cozy · 2024-10-16T16:13:47Z

src/assistant/ResultMenu/ResultMenuContent.jsx

@@ -31,6 +31,8 @@ const SearchResult = () => {
      icon={result.icon}
      primaryText={result.primary}
      secondaryText={result.secondary}
+      query={searchValue}
+      highlightQuery="true"


attention on devrait probablement avoir ={true} ici non ?

JF-Cozy · 2024-10-16T16:14:34Z

src/assistant/ResultMenu/ResultMenuContent.jsx

@@ -31,6 +31,8 @@ const SearchResult = () => {
      icon={result.icon}
      primaryText={result.primary}
      secondaryText={result.secondary}
+      query={searchValue}


j'aurai gardé searchValue en nom de prop 🤔 query ça fait penser au queryDef de cozy-client

On a eu exactement cette discussion avec @paultranvan y a quelques jours qui a opté pour query car c'est le terme généralement utilisé. Mais j'ai pas d'objection forte pour changer le nom.

JF-Cozy · 2024-10-16T16:16:18Z

src/assistant/ResultMenu/SuggestionItemTextHighlighted.jsx

@@ -0,0 +1,117 @@
+/**
+ * Code copied and adapted from cozy-drive


est-ce la manière la plus optimisé et moderne de le faire ? De quand date le code sur cozy-drive ? Est-ce qu'il n'y a pas des outils côté Mui pour faire ça plus simplement ?

Par ailleurs, comme on utilise la même chose à deux endroits, on devrait peut-être faire un compose cozy-ui

enfin, pour verrouiller l'approche, on pourrait peut-être rajouter des tests...

Par ailleurs, comme on utilise la même chose à deux endroits, on devrait peut-être faire un compose cozy-ui

Je suis allé au plus simple car j'imagine qu'on va bientôt remplacer la recherche de drive par la celle de dataproxy.

Ok pour les tests, j'ajouterai ça dans les prochaines PR

JF-Cozy · 2024-10-16T16:19:47Z

src/components/Applications.jsx

@@ -47,7 +47,9 @@ const getApplicationsList = memoize(data => {
        !flag(`home_hidden_apps.${app.slug.toLowerCase()}`) // can be set in the context with `home_hidden_apps: - drive - banks`for example
    )
    const dedupapps = uniqBy(apps, 'slug')
-    const array = dedupapps.map(app => <AppTile key={app.id} app={app} />)
+    const array = dedupapps


suite à la description "This filter should be temporary as we expect to hide the cozy-app at a
higher level on cozy-client collections" on devrait peut-être mettre aussi un commentaire dans le code

Comlink will be needed to ease communication between the app and the dataproxy iframe

Mime-types will be needed to display correct thumbnail on ResultMenu items based on the searched media

We want to embed the new `cozy-data-proxy` cozy-app as an intent into cozy-home `cozy-data-proxy` is a new cozy-app that is designed to persist the Cozy's data into a single place and to make it available to other cozy-apps For now this cozy-app is meant to search local Cozy's data and serve search results through Comlink communication Related PR: cozy/cozy-web-data-proxy#1

Now that we implemented the DataProxy provider, we want to remove the stubbed search method and use the DataProxy instead for searching into the Cozy's data

We want ResultMenu items to have their icon reflecting the returned data type This implementation uses some code from cozy-drive's search

Without this, the search results would update incorectly when the user would update the search query and when the resulting ResultMenuItems change For example, a Contact result can display a PDF icon if the previous search did return a PDF file at the same result position

The DataProxy provider already check for the corresponding flag and also take into account if the `cozy-data-proxy` is not installed, so we want to use this info to display the SearchResult component instead of just the flag

With previous implementation, the search would not update when the user changes the search query

When displaying search results, each item can contain a primary text and a secondary text. Sometimes the secondary text is a file path, sometimes some app description or anything else based on the returned doctype Due to this, it is sometimes difficult to see which line did match the query So we want to highlight the searched query in the primary and/or the secondary text This implementation uses some code from cozy-drive's search

For some doctypes, the search results may not contain any secondary text This would crash the app as the SuggestionItemTextHighlighted component do not expect to receive a null value So we want to add a protection against this scenario In the future we may want to introduce some Error Boundaries around the search component

We want to hide the `cozy-data-proxy` from the user as this is a technical cozy-app that is not meant to be opened This filter should be temporary as we expect to hide the cozy-app at a higher level on cozy-client collections

Ldoppea · 2024-10-16T17:22:49Z

J'ai fais les modifs les plus simples et les importantes, je traiterai le reste dans une autre PR, je merge déjà celle-ci

Ldoppea force-pushed the feat/search_iframe branch 2 times, most recently from 5717054 to 6246a5c Compare October 9, 2024 09:00

Ldoppea force-pushed the feat/search_iframe branch 2 times, most recently from 7fdd29f to d31d676 Compare October 16, 2024 15:26

Ldoppea changed the base branch from master to feat/VER-992 October 16, 2024 15:27

Ldoppea force-pushed the feat/search_iframe branch from d31d676 to 4f34db2 Compare October 16, 2024 15:34

Ldoppea marked this pull request as ready for review October 16, 2024 15:34

Ldoppea requested review from acezard and doubleface as code owners October 16, 2024 15:34

JF-Cozy force-pushed the feat/VER-992 branch from 4f9c774 to ee7023d Compare October 16, 2024 15:41

Base automatically changed from feat/VER-992 to master October 16, 2024 15:47

Ldoppea force-pushed the feat/search_iframe branch from 4f34db2 to 89ef9e2 Compare October 16, 2024 15:48

Ldoppea changed the title ~~feat: Implement Dataproxy~~ feat: Implement search feature through Dataproxy Oct 16, 2024

JF-Cozy approved these changes Oct 16, 2024

View reviewed changes

Ldoppea added 12 commits October 16, 2024 19:19

feat(search): Add comlink module

1695a6e

Comlink will be needed to ease communication between the app and the dataproxy iframe

feat(search): Add mime-types module

5773369

Mime-types will be needed to display correct thumbnail on ResultMenu items based on the searched media

feat(search): Add dataproxy namespace to ESLint config

118bc82

feat(search): Use DataProxy's search in useFetchResult

c170054

Now that we implemented the DataProxy provider, we want to remove the stubbed search method and use the DataProxy instead for searching into the Cozy's data

feat(search): Set dynamic icons on ResultMenu

b102c45

We want ResultMenu items to have their icon reflecting the returned data type This implementation uses some code from cozy-drive's search

fix(search): Call search on every query changes

15057f3

With previous implementation, the search would not update when the user changes the search query

Ldoppea force-pushed the feat/search_iframe branch from 89ef9e2 to 0456cb9 Compare October 16, 2024 17:19

JF-Cozy merged commit 2ee46bb into master Oct 17, 2024
3 checks passed

JF-Cozy deleted the feat/search_iframe branch October 17, 2024 08:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement search feature through Dataproxy #2198

feat: Implement search feature through Dataproxy #2198

Ldoppea commented Oct 4, 2024 •

edited

Loading

bundlemon bot commented Oct 4, 2024 •

edited

Loading

Ldoppea commented Oct 16, 2024

JF-Cozy left a comment

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

JF-Cozy Oct 16, 2024

JF-Cozy Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

JF-Cozy Oct 16, 2024

Ldoppea Oct 16, 2024

Ldoppea commented Oct 16, 2024

		@@ -0,0 +1,117 @@
		/**
		* Code copied and adapted from cozy-drive

feat: Implement search feature through Dataproxy #2198

feat: Implement search feature through Dataproxy #2198

Conversation

Ldoppea commented Oct 4, 2024 • edited Loading

bundlemon bot commented Oct 4, 2024 • edited Loading

BundleMon

Ldoppea commented Oct 16, 2024

JF-Cozy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ldoppea commented Oct 16, 2024

Ldoppea commented Oct 4, 2024 •

edited

Loading

bundlemon bot commented Oct 4, 2024 •

edited

Loading