Created and used predata in PrincipalComboBox loader (#1062)

src/main/resources/assets/js/app/principal/PrincipalLoader.ts

@@ -1,7 +1,11 @@
+import * as Q from 'q';
 import {PrincipalLoader as BasePrincipalLoader} from 'lib-admin-ui/security/PrincipalLoader';
 import {FindPrincipalsRequest} from './FindPrincipalsRequest';
 import {GetPrincipalsByKeysRequest} from './GetPrincipalsByKeysRequest';
 import {PrincipalKey} from 'lib-admin-ui/security/PrincipalKey';
+import {Principal} from 'lib-admin-ui/security/Principal';
+import {ComboBox} from 'lib-admin-ui/ui/selector/combobox/ComboBox';
+import {BaseSelectedOptionsView} from 'lib-admin-ui/ui/selector/combobox/BaseSelectedOptionsView';
 
 export class PrincipalLoader
     extends BasePrincipalLoader {
@@ -13,4 +17,30 @@ export class PrincipalLoader
     protected createPreLoadRequest(principalKeys: PrincipalKey[]): GetPrincipalsByKeysRequest {
         return new GetPrincipalsByKeysRequest(principalKeys);
     }
+
+    // If the data is less than {MAX_TO_APPEND}, then just execute the "preLoadRequest".
+    // Otherwise, to improve performance, lib-admin-ui will not append items after {MAX_TO_APPEND}th one
+    // so there's no need to execute a request for those items to get the display name, therefore
+    // the data is a mix of the first {MAX_TO_APPEND} ones from the request and the remaining ones built directly
+    // from the keys in the searchString.
+    preData(searchString: string): Q.Promise<Principal[]> {
+        const separator = ComboBox.VALUE_SEPARATOR;
+        const max_to_append = BaseSelectedOptionsView.MAX_TO_APPEND;
+
+        if (searchString.split(separator).length <= max_to_append) {
+            return super.sendPreLoadRequest(searchString);
+        }
+
+        const firstChunk = searchString.split(separator).slice(0, max_to_append);
+        const secondChunk = searchString.split(separator).slice(max_to_append);
+
+        const firstChunkPromise = super.sendPreLoadRequest(firstChunk.join(separator));
+        const secondChunkPromise = secondChunk.map(key => {
+            const displayName = key.split(':').pop();
+            return Principal.fromJson({key, displayName});
+        });
+
+        return Q.all([firstChunkPromise, secondChunkPromise])
+            .spread((data1:Principal[], data2:Principal[]) => [...data1, ...data2]);
+    }
 }

src/main/resources/assets/js/app/wizard/MembersWizardStepForm.ts

@@ -26,7 +26,8 @@ export class MembersWizardStepForm
 
         this.loader = new PrincipalLoader()
                 .setAllowedTypes([PrincipalType.GROUP, PrincipalType.USER])
-                .skipPrincipals([PrincipalKey.ofAnonymous()]);
+                .skipPrincipals([PrincipalKey.ofAnonymous()])
+                .setUsePreData(true);
         this.principals = <PrincipalComboBox>(PrincipalComboBox.create().setLoader(this.loader).build());
     }