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.0",
     "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.0",
     "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.0",
     "cozy-ui": "^68.4.0",
     "date-fns": "1.30.1",
     "diacritics": "1.3.0",

src/drive/web/modules/queries.js

@@ -325,6 +325,37 @@ export const buildEncryptionByIdQuery = id => ({
   }
 })
 
+/**
+ * Provide selector and options to fetch files
+ *
+ * @returns {{options: {MangoQueryOptions}, selector: object}} A minimalist file list
+ */
+export const prepareSuggestionQuery = () => {
+  const selector = {
+    _id: {
+      $gt: null
+    }
+  }
+  const options = {
+    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'],
+    indexedFields: ['_id'],
+    limit: 1000
+  }
+  return { selector, options }
+}
+
 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,50 @@ 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 { selector, options } = prepareSuggestionQuery()
+    const files = await client
+      .collection(DOCTYPE_FILES)
+      .findAll(selector, 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,109 @@
+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(
+      {
+        _id: {
+          $gt: null
+        }
+      },
+      {
+        fields: ['_id', 'trashed', 'dir_id', 'name', 'path', 'type', 'mime'],
+        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: expect.any(Function),
+              subtitle: '/path',
+              term: 'name.cozy-note',
+              title: 'name.cozy-note'
+            }
+          ],
+          type: 'intent-id_intent:data'
+        },
+        'intent-attributes-client'
+      )
+    })
+  })
+})

src/drive/web/modules/services/components/helpers.js

@@ -2,20 +2,33 @@ import { models } from 'cozy-client'
 
 export const TYPE_DIRECTORY = 'directory'
 
-export const makeNormalizedFile = async (client, folders, file, getIconUrl) => {
+/**
+ * Normalize file for Front usage in <AutoSuggestion> component inside <SearchBar>
+ *
+ * To reduce API call, the fetching of Note URL has been delayed
+ * inside an onSelect function called only if provided to <SearchBar>
+ * see https://github.com/cozy/cozy-drive/pull/2663#discussion_r938671963
+ *
+ * @param client - cozy client instance
+ * @param folders - all the folders returned by API
+ * @param file - file to normalize
+ * @param getIconUrl - method to get icon url
+ * @returns {{path: (*|string), name, icon, id, url: string, onSelect: (function(): Promise<string>)}} file with
+ */
+export const makeNormalizedFile = (client, folders, file, getIconUrl) => {
   const isDir = file.type === TYPE_DIRECTORY
   const dirId = isDir ? file._id : file.dir_id
   const urlToFolder = `${window.location.origin}/#/folder/${dirId}`
 
-  let path, url
+  let path, url, onSelect
   if (isDir) {
     path = file.path
     url = urlToFolder
   } else {
     const parentDir = folders.find(folder => folder._id === file.dir_id)
     path = parentDir && parentDir.path ? parentDir.path : ''
     if (models.file.isNote(file)) {
-      url = await models.note.fetchURL(client, file)
+      onSelect = () => models.note.fetchURL(client, file)
     } else {
       url = `${urlToFolder}/file/${file._id}`
     }
@@ -26,6 +39,7 @@ export const makeNormalizedFile = async (client, folders, file, getIconUrl) => {
     name: file.name,
     path,
     url,
+    onSelect,
     icon: getIconUrl(file)
   }
 }