Improve Catalogue visibility

[Steve-Mcl]

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Proposed changes

1. Add catalogue selector to the palette install tab
2. Filter search to each catalogue or "All Catalogs"
3. If "All Catalogs" is selected, show which catalog the node comes from in the meta data

Notes:

• Removed absolute styling and changed sort texts to icons (see justifications below)
• Scrolling now occurs on the editable list instead of the whole panel. (compounded CSS issues around absolute positioning caused scrolling of node lists to reveal empty panel in the vertical tab list - see also: justifications below)
• Checked theming - ok

Justification:
Due to addition of filter and possibility of longish catalogue names (e.g. "Node-RED Community catalogue") pushing the sorting / refresh buttons down a row AND the editable list having absolute positioning, some restructuring was necessary to avoid the search box being pushed below the list. The sort option texts "a-z" and "recent" were updated to fa icons (like the other sort option), the toolbar buttons were re-jigged into a flexbox to avoid individual buttons wrapping to the next line & a hand full of other unsightly artefacts (thanks @joepavitt)

Demos

Before

After

Themed

No catalogues specified in settings.js (i.e. using default Node-RED catalog)

Apart from all the sort buttons now being icons, there is no visible difference - the dropdown catalog selection is not shown

no-catalogs.mp4

3 working catalogues (Node-RED community catalog + 2 custom ones)

Here you can see new catalogue selector in operation

3catalogs.mp4

2 custom catalogues, 1 dead catalogue

Note how the new catalog selection excludes the failed library listing

2ok-1dead-exclude-comunity.mp4

Checklist

• I have read the contribution guidelines
• For non-bugfix PRs, I have discussed this change on the forum/slack team.
• I have run grunt to verify the unit tests pass
• I have added suitable unit tests to cover the new/changed functionality

[joepavitt]

Here you can see new catalogue selector in operation

I really like the indicator in the module row that shows which catalog it belongs too, but when you switch between the two private catalogs, it's not completely clear that the list has updated. May be worth including the catalog label in all views? That way, you'll see the label change when switching catalog?

[Steve-Mcl]

@joepavitt thanks for the feedback.

when you switch between the two private catalogs, it's not completely clear that the list has updated. May be worth including the catalog label in all views? That way, you'll see the label change when switching catalog?

At first I thought, why waste (white)space - you can see which catalog is selected by the dropdown - however, you are totally right to say it is not obvious the list refreshed if the search results are identical 🤔 - I'll do it 😄

Question(s):

Display catalog info regardless?

If there is only one catalog:

• should the catalog name still be shown still in the meta data of each item?
• should the catalog selection dropdown ALWAYS be displayed (even though it only contains 1 item)?

May be sensible since a user could rightly think they are installing from their own internal curated/own nodes list when in fact, Node-RED was misconfigured and it is showing them the public catalog

Should there be an obvious "catalog change visual"?

Perhaps also, the list should also be cleared (and replaced with a loading animation) BEFORE even attempting to repopulate? That way, any hiccups dont leave the list populated with incorrect entries.

[joepavitt]

should the catalog name still be shown still in the meta data of each item?

I'd say not required to show if only one catalogue.

should the catalog selection dropdown ALWAYS be displayed (even though it only contains 1 item)?

I like showing off functionality that's available to the user. It hints its a thing, encourages users to look it up and find out more about it. Assists with value-add and feature-discovery, whilst per above, not showing the label if you have only one catalogue, means it's not too crowded if you're not utilising the feature.

Perhaps also, the list should also be cleared (and replaced with a loading animation) BEFORE even attempting to repopulate?

Sensible. Assuming the switch is an async change? If so, would be a good move

[Steve-Mcl]

Following @joepavitt responses

Keep dropdown visible so that users know which catalog they are using

Always show catalog source when more than 1 catalog to chose from

3-catalogs-new.mp4