perf: improve perf inside search

.bundlemonrc

@@ -32,7 +32,7 @@
     },
     {
       "path": "services/qualificationMigration/drive.js",
-      "maxSize": "242 KB"
+      "maxSize": "244 KB"
     },
     {
       "path": "vendors/drive.<hash>.<hash>.min.css",

.eslintrc.json

@@ -4,7 +4,6 @@
     "no-console": 1,
     "no-param-reassign": "error",
     "react-hooks/exhaustive-deps": "error"
-
   },
   "globals": {
     "fixture": false
@@ -13,5 +12,13 @@
     "react": {
       "version": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.spec.js[x]"],
+      "rules": {
+        "react/display-name": "off"
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## ✨ Features
 
+* Upgrade [email protected] to be able to findAll in FileCollection
+* Upgrade [email protected] to be able to call onSelect function
+* Improve speed of search suggestion by querying fewer data
 * Update cozy-stack-client and cozy-pouch-link to sync with cozy-client version
 * Update cozy-ui
   - Modify Viewers to handle [68.0.0 BC](https://github.com/cozy/cozy-ui/releases/tag/v68.0.0)
@@ -12,7 +15,7 @@
 
 * Improve cozy-bar implementation to fix UI bugs in Amirale
 * Fix navigation through mobile Flagship on Note creation and opening
-* Remove unused contacts permissions on Photos 
+* Remove unused contacts permissions on Photos
 
 ## 🔧 Tech
 

package.json

@@ -114,9 +114,9 @@
     "classnames": "2.3.1",
     "copy-text-to-clipboard": "1.0.4",
     "cozy-authentication": "2.8.3",
-    "cozy-bar": "7.19.1",
+    "cozy-bar": "7.20.0",
     "cozy-ci": "0.4.1",
-    "cozy-client": "^32.2.8",
+    "cozy-client": "^32.7.3",
     "cozy-client-js": "0.19.0",
     "cozy-device-helper": "^2.1.0",
     "cozy-doctypes": "1.82.2",
@@ -125,12 +125,12 @@
     "cozy-intent": "^1.17.1",
     "cozy-keys-lib": "4.1.9",
     "cozy-logger": "1.9.0",
-    "cozy-pouch-link": "^32.2.8",
+    "cozy-pouch-link": "^32.7.3",
     "cozy-realtime": "3.14.4",
     "cozy-scanner": "2.0.2",
     "cozy-scripts": "^6.3.8",
     "cozy-sharing": "4.1.5",
-    "cozy-stack-client": "^32.2.5",
+    "cozy-stack-client": "^32.7.3",
     "cozy-ui": "^68.4.0",
     "date-fns": "1.30.1",
     "diacritics": "1.3.0",

src/drive/web/modules/queries.js

@@ -325,6 +325,39 @@ export const buildEncryptionByIdQuery = id => ({
   }
 })
 
+/**
+ * Provide options to fetch files
+ *
+ * @returns {MangoQueryOptions} A minimalist file list
+ */
+export const prepareSuggestionQuery = () => ({
+  partialFilter: {
+    _id: {
+      $ne: TRASH_DIR_ID
+    },
+    path: {
+      // this predicate is necessary until the trashed attribute is more reliable
+      $or: [{ $exists: false }, { $regex: '^(?!/.cozy_trash)' }]
+    },
+    trashed: {
+      $or: [{ $exists: false }, { $eq: false }]
+    }
+  },
+  fields: [
+    '_id',
+    'trashed',
+    'dir_id',
+    'name',
+    'path',
+    'type',
+    'mime',
+    'metadata.title',
+    'metadata.version'
+  ],
+  indexedFields: ['_id'],
+  limit: 1000
+})
+
 export {
   buildDriveQuery,
   buildRecentQuery,

src/drive/web/modules/services/components/SuggestionProvider.jsx

@@ -1,15 +1,16 @@
-/* global cozy */
 import React from 'react'
 import FuzzyPathSearch from '../FuzzyPathSearch'
 import { withClient } from 'cozy-client'
 
 import { TYPE_DIRECTORY, makeNormalizedFile } from './helpers'
 import { getIconUrl } from './iconContext'
+import { DOCTYPE_FILES } from 'drive/lib/doctypes'
+import { prepareSuggestionQuery } from '../../queries'
 
 class SuggestionProvider extends React.Component {
   componentDidMount() {
     const { intent } = this.props
-    this.hasIndexedFiles = false
+    this.hasIndexFilesBeenLaunched = false
 
     // re-attach the message listener for the intent to receive the suggestion requests
     window.addEventListener('message', event => {
@@ -22,8 +23,25 @@ class SuggestionProvider extends React.Component {
     })
   }
 
+  /**
+   * Provide Suggestions to calling Intent
+   *
+   * This method called when intent provide query will indexFiles once
+   * to fill FuzzyPathSearch. Then will re-post message to the intent
+   * with updated search results containing `files` as `suggestions`
+   * for SearchBar need.
+   *
+   *  ⚠️ For note file, we don't provide url to open, but onSelect method
+   *  to be called on click. Less API calls expected. But a note will be opened
+   *  slower. See helpers.js
+   *
+   * @param query - Query to find file
+   * @param id
+   * @param intent - Intent calling
+   * @returns {Promise<void>} nothing
+   */
   async provideSuggestions(query, id, intent) {
-    if (!this.hasIndexedFiles) {
+    if (!this.hasIndexFilesBeenLaunched) {
       await this.indexFiles()
     }
 
@@ -38,52 +56,48 @@ class SuggestionProvider extends React.Component {
           title: result.name,
           subtitle: result.path,
           term: result.name,
-          onSelect: 'open:' + result.url,
+          onSelect: result.onSelect || 'open:' + result.url,
           icon: result.icon
         }))
       },
       intent.attributes.client
     )
   }
 
-  // fetches pretty much all the files and preloads FuzzyPathSearch
+  /**
+   * Fetches all files without trashed and preloads FuzzyPathSearch
+   *
+   * Using _find route (from findAll) improves performance:
+   * - using partial index to reduce amount of data fetched
+   * - removing trashed data directly
+   *
+   * Also, this method:
+   * - set first the `hasIndexFilesBeenLaunched` to prevent multiple calls
+   * - removes orphan file
+   * - normalize file to match <SearchBar> expectation
+   * - preloads FuzzyPathSearch
+   *
+   * @returns {Promise<void>} nothing
+   */
   async indexFiles() {
     const { client } = this.props
-    // TODO: fix me
-    // eslint-disable-next-line no-async-promise-executor
-    return new Promise(async resolve => {
-      const resp = await cozy.client.fetchJSON(
-        'GET',
-        `/data/io.cozy.files/_all_docs?include_docs=true`
-      )
-      const files = resp.rows
-        // TODO: fix me
-        // eslint-disable-next-line no-prototype-builtins
-        .filter(row => !row.doc.hasOwnProperty('views'))
-        .map(row => ({ id: row.id, ...row.doc }))
+    this.hasIndexFilesBeenLaunched = true
 
-      const folders = files.filter(file => file.type === TYPE_DIRECTORY)
+    const options = prepareSuggestionQuery()
+    const files = await client.collection(DOCTYPE_FILES).findAll(null, options)
 
-      const notInTrash = file =>
-        !file.trashed && !/^\/\.cozy_trash/.test(file.path)
-      const notOrphans = file =>
-        folders.find(folder => folder._id === file.dir_id) !== undefined
+    const folders = files.filter(file => file.type === TYPE_DIRECTORY)
 
-      const normalizedFilesPrevious = files
-        .filter(notInTrash)
-        .filter(notOrphans)
+    const notOrphans = file =>
+      folders.find(folder => folder._id === file.dir_id) !== undefined
 
-      const normalizedFiles = await Promise.all(
-        normalizedFilesPrevious.map(
-          async file =>
-            await makeNormalizedFile(client, folders, file, getIconUrl)
-        )
-      )
+    const normalizedFilesPrevious = files.filter(notOrphans)
 
-      this.fuzzyPathSearch = new FuzzyPathSearch(normalizedFiles)
-      this.hasIndexedFiles = true
-      resolve()
-    })
+    const normalizedFiles = normalizedFilesPrevious.map(file =>
+      makeNormalizedFile(client, folders, file, getIconUrl)
+    )
+
+    this.fuzzyPathSearch = new FuzzyPathSearch(normalizedFiles)
   }
 
   render() {

src/drive/web/modules/services/components/SuggestionProvider.spec.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import SuggestionProvider from './SuggestionProvider'
+import { dummyFile, dummyNote } from 'test/dummies/dummyFile'
+
+const parentFolder = dummyFile({ _id: 'id-file' })
+const folder = dummyFile({ dir_id: 'id-file' })
+const note = dummyNote({
+  dir_id: 'id-file',
+  name: 'name.cozy-note'
+})
+const mockFindAll = jest.fn().mockReturnValue([parentFolder, folder, note])
+const mockClient = {
+  collection: jest.fn().mockReturnValue({ findAll: mockFindAll })
+}
+const mockIntentAttributesClient = 'intent-attributes-client'
+
+jest.mock('cozy-client', () => ({
+  ...jest.requireActual('cozy-client'),
+  withClient: Component => () => {
+    const intent = {
+      _id: 'id_intent',
+      attributes: { client: mockIntentAttributesClient }
+    }
+    return <Component client={mockClient} intent={intent}></Component>
+  }
+}))
+jest.mock('./iconContext', () => ({ getIconUrl: () => 'iconUrl' }))
+
+describe('SuggestionProvider', () => {
+  let events = {}
+  let event
+
+  beforeEach(() => {
+    window.addEventListener = jest.fn((event, callback) => {
+      events[event] = callback
+    })
+    window.parent.postMessage = jest.fn()
+    event = {
+      origin: mockIntentAttributesClient,
+      data: { query: 'name', id: 'id' }
+    }
+  })
+
+  it('should query all files to display fuzzy suggestion', () => {
+    // Given
+    render(<SuggestionProvider />)
+
+    // When
+    events.message(event)
+
+    // Then
+    expect(mockClient.collection).toHaveBeenCalledWith('io.cozy.files')
+    expect(mockFindAll).toHaveBeenCalledWith(null, {
+      fields: [
+        '_id',
+        'trashed',
+        'dir_id',
+        'name',
+        'path',
+        'type',
+        'mime',
+        'metadata.title',
+        'metadata.version'
+      ],
+      indexedFields: ['_id'],
+      limit: 1000,
+      partialFilter: {
+        _id: { $ne: 'io.cozy.files.trash-dir' },
+        path: { $or: [{ $exists: false }, { $regex: '^(?!/.cozy_trash)' }] },
+        trashed: { $or: [{ $exists: false }, { $eq: false }] }
+      }
+    })
+  })
+
+  it('should provide onSelect with open url when file is not a note + and function when it is a note', async () => {
+    // Given
+    render(<SuggestionProvider />)
+
+    // When
+    events.message(event)
+
+    // Then
+    await waitFor(() => {
+      expect(window.parent.postMessage).toHaveBeenCalledWith(
+        {
+          id: 'id',
+          suggestions: [
+            {
+              icon: 'iconUrl',
+              id: 'id-file',
+              onSelect: 'open:http://localhost/#/folder/id-file',
+              subtitle: '/path',
+              term: 'name',
+              title: 'name'
+            },
+            {
+              icon: 'iconUrl',
+              id: 'id-file',
+              onSelect: 'id_note:id-file',
+              subtitle: '/path',
+              term: 'name.cozy-note',
+              title: 'name.cozy-note'
+            }
+          ],
+          type: 'intent-id_intent:data'
+        },
+        'intent-attributes-client'
+      )
+    })
+  })
+})