XWIKI-22537: QuickActionsIT#icon is flickering

* Improve the Icon Service caching and move the icon name filtering server side.

(cherry picked from commit d84b9eff)

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/iconService.js

@@ -20,47 +20,46 @@
 
 define('xwiki-iconService', [
   'jquery',
-], function ($) {
-
+], function($) {
   /**
    * Generate an URL for getting JSON resources about icons.
    */
-  const getResourceURL = function (action, parameters) {
-    const params = Object.assign({outputSyntax: "plain", action: action}, parameters);
-    return (new XWiki.Document('IconPicker', 'IconThemesCode')).getURL('get', $.param(params), true);
-  };
-
-  let cachedIconThemes = false;
-  const getIconThemes = function () {
-    return new Promise(function (resolve, reject) {
-
-      if (cachedIconThemes) {
-        resolve(cachedIconThemes);
-        return;
-      }
+  function getResourceURL(action, parameters) {
+    return new XWiki.Document('IconPicker', 'IconThemesCode').getURL('get', $.param({
+      outputSyntax: "plain",
+      action: action,
+      ...parameters
+    }, true));
+  }
 
-      $.getJSON(getResourceURL('data_iconthemes'), function (data) {
-        cachedIconThemes = data;
-        resolve(data);
-      }).fail(reject);
-    });
-  };
-
-  const cachedIcons = {};
-  const getIcons = function (iconTheme) {
-    return new Promise(function (resolve, reject) {
+  let iconThemesPromise = false;
+  function getIconThemes() {
+    if (!iconThemesPromise) {
+      iconThemesPromise = $.getJSON(getResourceURL('data_iconthemes'));
+      iconThemesPromise.catch(() => {
+        // Reset the promise so that we can try again later.
+        iconThemesPromise = false;
+      });
+    }
+    return iconThemesPromise;
+  }
 
-      if (cachedIcons[iconTheme]) {
-        resolve(cachedIcons[iconTheme]);
-        return;
-      }
-
-      $.getJSON(getResourceURL('data_icons', {iconTheme}), function (dataIcons) {
-        cachedIcons[iconTheme] = dataIcons;
-        resolve(dataIcons);
-      }).fail(reject);
-    });
-  };
+  const iconsPromises = {};
+  function getIcons(iconTheme, query) {
+    let iconsPromisesPerTheme = iconsPromises[iconTheme] = iconsPromises[iconTheme] || {};
+    let iconsPromise = iconsPromisesPerTheme[query];
+    if (!iconsPromise) {
+      iconsPromise = iconsPromisesPerTheme[query] = $.getJSON(getResourceURL('data_icons', {
+        iconTheme,
+        query,
+      }));
+      iconsPromise.catch(() => {
+        // Reset the promise so that we can try again later.
+        delete iconsPromisesPerTheme[query];
+      });
+    }
+    return iconsPromise;
+  }
 
   return {
     getIconThemes,

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-icon/plugin.js

@@ -43,17 +43,14 @@
         feed: function (opts, callback) {
           require(['xwiki-iconService'], function (iconService) {
             iconService.getIconThemes().then(function (iconThemes) {
-              // Retreive the list of available icons.
-              iconService.getIcons(iconThemes.currentIconTheme).then(function (icons) {
-                callback(icons
-                  .filter(icon => icon.name.toLowerCase().startsWith(opts.query.toLowerCase()))
-                  .map(icon => ({
-                    id: icon.name,
-                    label: icon.name,
-                    imgSrc: icon.metadata.url,
-                    iconClass: icon.metadata.cssClass
-                  }))
-                );
+              // Retreive the list of available icons from the current icon theme that match the query.
+              iconService.getIcons(iconThemes.currentIconTheme, opts.query).then(function (icons) {
+                callback(icons.map(icon => ({
+                  id: icon.name,
+                  label: icon.name,
+                  imgSrc: icon.metadata.url,
+                  iconClass: icon.metadata.cssClass
+                })));
               }).catch(function () {
               editor.showNotification(editor.localization.get('xwiki-icon.iconsFetchFailed'), 'warning', 5000);
             });

xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml

@@ -40,24 +40,27 @@
 ###########################
 ## DATA: ICON THEMES
 ###########################
-#if($request.action == 'data_iconthemes')
-  #set($map = {})
-  #set($discard = $map.put('iconThemes', $services.icon.iconSetNames))
-  #set($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
+#if ($request.action == 'data_iconthemes')
+  #set ($map = {})
+  #set ($discard = $map.put('iconThemes', $services.icon.iconSetNames))
+  #set ($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
   #jsonResponse($map)
 ###########################
 ## DATA: ICONS
 ###########################
-#elseif($request.action == 'data_icons')
-  #set($icons = [])
-  #set($iconTheme = $request.iconTheme)
-  #set($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme)))
-  #foreach($xwikiIcon in $xwikiIcons)
-    #set($icon = {})
-    #set($discard = $icon.put('name', $xwikiIcon))
-    #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme)))
-    #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme)))
-    #set($discard = $icons.add($icon))
+#elseif ($request.action == 'data_icons')
+  #set ($icons = [])
+  #set ($iconTheme = $request.iconTheme)
+  #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme)))
+  #set ($iconNamePrefix = $request.query.toLowerCase())
+  #foreach ($xwikiIcon in $xwikiIcons)
+    #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix))
+      #set ($discard = $icons.add({
+        'name': $xwikiIcon,
+        'render': $services.icon.renderHTML($xwikiIcon, $iconTheme),
+        'metadata': $services.icon.getMetaData($xwikiIcon, $iconTheme)
+      }))
+    #end
   #end
   #jsonResponse($icons)
 #else