fix(xo-web/self): sort Resource Sets in Self view (#3823)

Fixes #3818

CHANGELOG.md

@@ -13,6 +13,8 @@
 
 ### Bug fixes
 
+- [Self] Display sorted Resource Sets [#3818](https://github.com/vatesfr/xen-orchestra/issues/3818) (PR [#3823](https://github.com/vatesfr/xen-orchestra/pull/3823))
+
 ### Released packages
 
 - @xen-orchestra/fs v0.6.0

packages/xo-web/src/common/intl/messages.js

@@ -1262,7 +1262,6 @@ const messages = {
   // ----- Self -----
   resourceSets: 'Resource sets',
   noResourceSets: 'No resource sets.',
-  loadingResourceSets: 'Loading resource sets',
   resourceSetName: 'Resource set name',
   resourceSetUsers: 'Users',
   resourceSetPools: 'Pools',

packages/xo-web/src/xo-app/self/index.js

@@ -695,6 +695,8 @@ class ResourceSet extends Component {
 
 // ===================================================================
 
+const compareName = (a, b) => (a.name < b.name ? -1 : 1)
+
 @addSubscriptions({ resourceSets: subscribeResourceSets })
 @connectStore({ resolvedResourceSets: getResolvedResourceSets })
 export default class Self extends Component {
@@ -703,9 +705,13 @@ export default class Self extends Component {
     this.state = {}
   }
 
+  _getSortedResourceSets = createSelector(
+    () => this.props.resolvedResourceSets,
+    resolvedResourceSets => resolvedResourceSets.sort(compareName)
+  )
+
   render() {
-    const { showNewResourceSetForm } = this.state
-    const { resolvedResourceSets, location } = this.props
+    const resourceSets = this._getSortedResourceSets()
 
     return (
       <Page formatTitle header={HEADER} title='selfServicePage'>
@@ -727,24 +733,24 @@ export default class Self extends Component {
                 {_('recomputeResourceSets')}
               </ActionButton>
             </div>
-            {showNewResourceSetForm && [
+            {this.state.showNewResourceSetForm && [
               <Edit
                 key={0}
                 onSave={this.toggleState('showNewResourceSetForm')}
               />,
               <hr key={1} />,
             ]}
-            {resolvedResourceSets
-              ? isEmpty(resolvedResourceSets)
-                ? _('noResourceSets')
-                : map(resolvedResourceSets, resourceSet => (
-                    <ResourceSet
-                      autoExpand={location.query.resourceSet === resourceSet.id}
-                      key={resourceSet.id}
-                      resourceSet={resourceSet}
-                    />
-                  ))
-              : _('loadingResourceSets')}
+            {isEmpty(resourceSets)
+              ? _('noResourceSets')
+              : map(resourceSets, resourceSet => (
+                  <ResourceSet
+                    autoExpand={
+                      this.props.location.query.resourceSet === resourceSet.id
+                    }
+                    key={resourceSet.id}
+                    resourceSet={resourceSet}
+                  />
+                ))}
           </div>
         ) : (
           <Container>