improve catalog visibility/ux

packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js

@@ -17,6 +17,7 @@ RED.palette.editor = (function() {
 
     var disabled = false;
     let catalogues = []
+    const loadedCatalogs = []
     var editorTabs;
     let filterInput;
     let searchInput;
@@ -163,19 +164,6 @@ RED.palette.editor = (function() {
         }
     }
 
-    function filterByCatalog(selectedCatalog) {
-        const catalogCount = $('#red-catalogue-filter-select option').length
-        if (catalogCount <= 1 || selectedCatalog === "all") {
-            loadedList = fullList.slice();
-        } else {
-            loadedList = fullList.filter(function(m) {
-                return (m.catalog.name === selectedCatalog);
-            })
-        }
-        refreshFilteredItems();
-        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
-    }
-
     function getContrastingBorder(rgbColor){
         var parts = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)[,)]/.exec(rgbColor);
         if (parts) {
@@ -446,11 +434,11 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            const catalogEntries = []
+            loadedCatalogs.length = 0; // clear the loadedCatalogs array
             for (let index = 0; index < catalogues.length; index++) {
                 const url = catalogues[index];
                 $.getJSON(url, {_: new Date().getTime()},function(v) {
-                    catalogEntries.push({ url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
+                    loadedCatalogs.push({ index: index, url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
                     handleCatalogResponse(null,{ url: url, name: v.name},index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
@@ -459,7 +447,9 @@ RED.palette.editor = (function() {
                 }).always(function() {
                     handled++;
                     if (handled === catalogueCount) {
-                        updateCatalogFilter(catalogEntries)
+                        //sort loadedCatalogs by e.index ascending
+                        loadedCatalogs.sort((a, b) => a.index - b.index)
+                        updateCatalogFilter(loadedCatalogs)
                     }
                 })
             }
@@ -492,9 +482,7 @@ RED.palette.editor = (function() {
         
         fullList = loadedList.slice()
         catalogSelection.empty() // clear the select list
-        // if there are more than 1 catalog, add an option to select all
+
-        if (catalogEntries.length > 1) {
-        }
         // loop through catalogTypes, and an option entry per catalog
         for (let index = 0; index < catalogEntries.length; index++) {
             const catalog = catalogEntries[index];
@@ -506,7 +494,6 @@ RED.palette.editor = (function() {
         // if there is only 1 catalog, hide the select
         if (catalogEntries.length > 1) {
             catalogSelection.prepend(`<option value="all">${RED._('palette.editor.allCatalogs')}</option>`)
-            catalogSelection.show()
             catalogSelection.removeAttr('disabled') // permit the user to select a catalog
         }
         // refresh the searchInput counter and trigger a change
@@ -521,6 +508,18 @@ RED.palette.editor = (function() {
         })
     }
 
+    function filterByCatalog(selectedCatalog) {
+        if (loadedCatalogs.length <= 1 || selectedCatalog === "all") {
+            loadedList = fullList.slice();
+        } else {
+            loadedList = fullList.filter(function(m) {
+                return (m.catalog.name === selectedCatalog);
+            })
+        }
+        refreshFilteredItems();
+        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
+    }
+
     function refreshFilteredItems() {
         packageList.editableList('empty');
         var currentFilter = searchInput.searchBox('value').trim();
@@ -910,7 +909,6 @@ RED.palette.editor = (function() {
 
         const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
         catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
-        catalogSelection.hide() // hide the select until the catalogues have been loaded
  
         const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
 
@@ -987,7 +985,7 @@ RED.palette.editor = (function() {
                     var metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
                     $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
-                    if (catalogSelection.val() === 'all') {
+                    if (loadedCatalogs.length > 1) {
                         $('<span class="red-ui-palette-module-updated"><i class="fa fa-cubes"></i>' + (entry.catalog.name || entry.catalog.url) + '</span>').appendTo(metaRow);
                     }