feat(xo-web): basic plugins filtering (#3871)

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 - [VM migration] Display hosts' free memory [#3264](https://github.com/vatesfr/xen-orchestra/issues/3264) (PR [#3832](https://github.com/vatesfr/xen-orchestra/pull/3832))
+- [Plugins] New field to filter displayed plugins (PR [#3832](https://github.com/vatesfr/xen-orchestra/pull/3871))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/settings/plugins/index.js

@@ -1,12 +1,15 @@
+import * as ComplexMatcher from 'complex-matcher'
 import _ from 'intl'
 import ActionButton from 'action-button'
 import ActionToggle from 'action-toggle'
 import Button from 'button'
 import Component from 'base-component'
+import decorate from 'apply-decorators'
 import GenericInput from 'json-schema-input'
 import Icon from 'icon'
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
+import orderBy from 'lodash/orderBy'
 import pFinally from 'promise-toolbox/finally'
 import React from 'react'
 import size from 'lodash/size'
@@ -14,6 +17,7 @@ import { addSubscriptions } from 'utils'
 import { alert } from 'modal'
 import { createSelector } from 'reselect'
 import { generateUiSchema } from 'xo-json-schema-input'
+import { injectState, provideState } from 'reaclette'
 import { Row, Col } from 'grid'
 import {
   configurePlugin,
@@ -251,29 +255,75 @@ class Plugin extends Component {
   }
 }
 
-@addSubscriptions({
+export default decorate([
+  addSubscriptions({
     plugins: subscribePlugins,
+  }),
+  provideState({
+    effects: {
+      onSearchChange(
+        _,
+        {
+          target: { value },
+        }
+      ) {
+        const { location, router } = this.props
+        router.replace({
+          ...location,
+          query: {
+            ...location.query,
+            s: value,
+          },
         })
-export default class Plugins extends Component {
-  render() {
-    if (isEmpty(this.props.plugins)) {
-      return (
+      },
+    },
+    computed: {
+      search: (
+        _,
+        {
+          location: {
+            query: { s = '' },
+          },
+        }
+      ) => s,
+      filteredPlugins: ({ predicate }, { plugins }) =>
+        predicate === undefined ? plugins : plugins.filter(predicate),
+      predicate: ({ search }) => {
+        if (search.trim() === '') {
+          return
+        }
+
+        try {
+          return ComplexMatcher.parse(search).createPredicate()
+        } catch (error) {
+          console.warn(error)
+        }
+      },
+      sortedPlugins: ({ filteredPlugins }) => orderBy(filteredPlugins, 'name'),
+    },
+  }),
+  injectState,
+  ({ effects, state, plugins }) =>
+    isEmpty(plugins) ? (
       <p>
         <em>{_('noPlugins')}</em>
       </p>
-      )
-    }
-
-    return (
+    ) : (
       <div>
+        <p>
+          <input
+            className='form-control'
+            onChange={effects.onSearchChange}
+            value={state.search}
+          />
+        </p>
         <ul style={{ paddingLeft: 0 }}>
-          {map(this.props.plugins, (plugin, key) => (
-            <li key={key} className='list-group-item clearfix'>
+          {state.sortedPlugins.map(plugin => (
+            <li key={plugin.id} className='list-group-item clearfix'>
               <Plugin {...plugin} />
             </li>
           ))}
         </ul>
       </div>
-    )
-  }
-}
+    ),
+])