refactor: use toSorted() instead of [...arr].sort()

Replace copy-before-sort pattern with ES2023 toSorted() in 12 files

Author: roberttran-cc

src/components/cc-addon-features/cc-addon-features.js

@@ -102,13 +102,11 @@ export class CcAddonFeatures extends LitElement {
    * @private
    */
   _sortFeatures(features) {
-    const sortedArray = features.slice(0);
-    sortedArray.sort((a, b) => {
+    return features.toSorted((a, b) => {
       const aIndex = SORT_FEATURES.indexOf(a.name.toLowerCase()) + 1 || SORT_FEATURES.length + 1;
       const bIndex = SORT_FEATURES.indexOf(b.name.toLowerCase()) + 1 || SORT_FEATURES.length + 1;
       return String(aIndex).localeCompare(String(bIndex), undefined, { numeric: true });
     });
-    return sortedArray;
   }
 
   render() {

src/components/cc-domain-management/cc-domain-management.js

@@ -349,8 +349,7 @@ export class CcDomainManagement extends LitElement {
     }
 
     if (changedProperties.has('domainListState') && this.domainListState.type === 'loaded') {
-      // Make sure we use a copy before using .sort() which modifies the array in place
-      this._sortedDomains = [...this.domainListState.domains].sort(sortDomains).map((domainState) => {
+      this._sortedDomains = this.domainListState.domains.toSorted(sortDomains).map((domainState) => {
         const { hostname } = domainState;
 
         /** @type {FormattedDomainInfo} */

src/components/cc-email-list/cc-email-list.js

@@ -245,7 +245,7 @@ export class CcEmailList extends LitElement {
    * @return {TemplateResult}
    */
   _renderSecondarySection(secondaryAddressStates) {
-    const addresses = [...secondaryAddressStates].sort(sortBy('address'));
+    const addresses = secondaryAddressStates.toSorted(sortBy('address'));
     const isOneRowMarkingPrimary = addresses.some((item) => item.type === 'marking-as-primary');
 
     return html`

src/components/cc-env-var-form/cc-env-var-form.js

@@ -223,7 +223,7 @@ export class CcEnvVarForm extends LitElement {
       this._currentVariables = null;
       this._editorsState = { type: 'loaded', validationMode: this.state.validationMode, variables: [] };
     } else {
-      const sortedVariables = [...variables].sort((a, b) => a.name.localeCompare(b.name));
+      const sortedVariables = variables.toSorted((a, b) => a.name.localeCompare(b.name));
       this._currentVariables = sortedVariables;
       this._editorsState = { type: 'loaded', validationMode: this.state.validationMode, variables: sortedVariables };
     }

src/components/cc-pricing-product/cc-pricing-product.js

@@ -249,7 +249,7 @@ export class CcPricingProduct extends LitElement {
    */
   _renderProductPlans(productName, productPlans, productFeatures) {
     // this component is not rerendering very often so we consider we can afford to sort plans and filter the features here.
-    const sortedPlans = [...productPlans].sort((a, b) => a.price - b.price);
+    const sortedPlans = productPlans.toSorted((a, b) => a.price - b.price);
     const filteredProductFeatures = productFeatures.filter(
       (feature) => AVAILABLE_FEATURES.includes(feature.code) || feature.name != null,
     );

src/components/cc-ssh-key-list/cc-ssh-key-list.js

@@ -261,11 +261,11 @@ export class CcSshKeyList extends LitElement {
 
   /**
    * @param {"personal"|"github"|"skeleton"} type
-   * @param {SshKeyState[]|GithubSshKeyState[]} keys
+   * @param {Array<SshKeyState|GithubSshKeyState>} keys
    * @return {TemplateResult}
    */
   _renderKeyList(type, keys) {
-    const sortedKeys = [...keys].sort(sortBy('name'));
+    const sortedKeys = keys.toSorted(sortBy('name'));
     const skeleton = type === 'skeleton';
     return html`
       <div class="key-list">

src/components/cc-token-api-list/cc-token-api-list.js

@@ -117,7 +117,7 @@ export class CcTokenApiList extends LitElement {
 
     const isEmpty = this.state.type === 'loaded' && this.state.apiTokens.length === 0;
 
-    const sortedTokens = this.state.type === 'loaded' ? [...this.state.apiTokens].sort(this._sortTokens) : [];
+    const sortedTokens = this.state.type === 'loaded' ? this.state.apiTokens.toSorted(this._sortTokens) : [];
     const isOneTokenRevoking = sortedTokens.some((token) => token.type === 'revoking');
 
     const isResettingPassword = this.state.type === 'resetting-password';

src/components/cc-token-oauth-list/cc-token-oauth-list.js

@@ -84,7 +84,7 @@ export class CcTokenOauthList extends LitElement {
       this.state.type === 'revoking-all' || (!isEmpty && this.state.type !== 'loading');
     const sortedOauthTokens =
       this.state.type === 'loaded' || this.state.type === 'revoking-all'
-        ? [...this.state.oauthTokens].sort(
+        ? this.state.oauthTokens.toSorted(
             (tokenA, tokenB) => tokenB.creationDate.getTime() - tokenA.creationDate.getTime(),
           )
         : [];

src/components/cc-visual-tests-report-menu/cc-visual-tests-report-menu.js

@@ -67,7 +67,7 @@ export class CcVisualTestsReportMenu extends LitElement {
    * @returns {VisualTestResult[]}
    */
   _sortTestResults(results) {
-    return [...results].sort((a, b) => {
+    return results.toSorted((a, b) => {
       const componentCompare = a.componentTagName.localeCompare(b.componentTagName);
       if (componentCompare !== 0) {
         return componentCompare;

src/components/cc-visual-tests-report/cc-visual-tests-report.js

@@ -65,7 +65,7 @@ export class CcVisualTestsReport extends LitElement {
    * @returns {VisualTestResult[]}
    */
   _sortTestResults(testResults) {
-    return [...testResults].sort((a, b) => {
+    return testResults.toSorted((a, b) => {
       const componentCompare = a.componentTagName.localeCompare(b.componentTagName);
       if (componentCompare !== 0) {
         return componentCompare;