refactor sort() comparison function to be consistent across browsers (#7440)

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
This commit is contained in:
rr-bw 2024-01-04 09:20:44 -08:00 committed by GitHub
parent 76085cc989
commit 5328ffb349
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions

View File

@ -15,17 +15,14 @@
<div class="tw-p-2">
<div *ngIf="availableAccounts$ | async as availableAccounts">
<ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
<ng-container
*ngFor="let availableAccount of availableAccounts; first as isFirst"
role="option"
>
<li *ngIf="availableAccount.isActive" class="tw-mb-4">
<ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
<li *ngIf="availableAccount.isActive" class="tw-mb-4" role="option">
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
</li>
<div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
{{ "availableAccounts" | i18n }}
</div>
<li *ngIf="!availableAccount.isActive">
<li *ngIf="!availableAccount.isActive" role="option">
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
</li>
</ng-container>

View File

@ -82,15 +82,25 @@ export class AccountSwitcherService {
}
return options.sort((a, b) => {
// Active account is always first
/**
* Make sure the compare function is "well-formed" to account for browser inconsistencies.
*
* For specifics, see the sections "Description" and "Sorting with a non-well-formed comparator"
* on this page:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
*/
// Active account (if one exists) is always first
if (a.isActive) {
return -1;
}
// "Add Account" button is always last
if (a.id === this.SPECIAL_ADD_ACCOUNT_ID) {
return 1;
// If account "b" is the 'Add account' button, keep original order of "a" and "b"
if (b.id === this.SPECIAL_ADD_ACCOUNT_ID) {
return 0;
}
return 1;
});
}),
);