fix: show username first and then password when credentials are listed (#2494)

ui/desktop/app/components/credentials-panel/index.hbs

@@ -33,6 +33,7 @@
         as |CB|
       >
         <CB.Title>
+
           {{#if credential.source.name}}
             {{credential.source.name}}
           {{else}}
@@ -61,7 +62,7 @@
 
       <ul class='credential-secret'>
         {{#if credential.secrets}}
-          {{#each credential.secrets as |secret|}}
+          {{#each (order-by credential.secrets this.customOrder) as |secret|}}
             <li class='secret-container'>
               <span class='secret-key'>{{secret.key}}</span>
               <HiddenSecret @secret={{secret.value}} />

ui/desktop/app/components/credentials-panel/index.js

@@ -8,6 +8,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class CredentialsPanelIndexComponent extends Component {
+  customOrder = ['username', 'password'];
+
   @tracked isRawApiVisible = false;
 
   @action

ui/desktop/app/helpers/order-by.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { helper } from '@ember/component/helper';
+
+/**
+ * This helper accepts an array of objects and orders them by a specified key.
+ * @param {object[]} arr - The array of objects to be ordered
+ * @param {string[]} customOrder - The order of keys to be used for sorting
+ * @returns {object[]} - New order of array of objects
+ */
+export default helper(function orderBy([arr, customOrder]) {
+  return arr.sort((a, b) => {
+    const indexA = customOrder.indexOf(a.key);
+    const indexB = customOrder.indexOf(b.key);
+
+    if (indexA === -1 && indexB === -1) {
+      return 0; // Maintain original order if both keys are not in the customOrder arr
+    } else if (indexA === -1) {
+      return 1; // Move b to a higher index if a is not in the customOrder arr
+    } else if (indexB === -1) {
+      return -1; // Move a to a higher index if b is not in the customOrder arr
+    } else {
+      return indexA - indexB; // Sort based on the index in the customOrder arr
+    }
+  });
+});

ui/desktop/tests/integration/helpers/order-by-test.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | order-by', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.set('inputValue', [
+      { key: 'username', value: 1 },
+      { key: 'password', value: 2 },
+      { key: 'none', value: 3 },
+    ]);
+
+    this.set('customOrder', ['username', 'none', 'password']);
+
+    await render(hbs`
+      <ul>
+        {{#each (order-by this.inputValue this.customOrder) as |secret|}}
+          <li>{{secret.key}}</li>
+        {{/each}}
+      </ul>
+    `);
+
+    assert.dom('li').exists({ count: 3 });
+    assert.strictEqual(
+      this.element.textContent.replace(/\s+/g, ' ').trim(),
+      'username none password',
+    );
+  });
+
+  test('maintains order if there are no matching keys in the list', async function (assert) {
+    this.set('inputValue', [
+      { key: 'username', value: 1 },
+      { key: 'password', value: 2 },
+      { key: 'none', value: 3 },
+    ]);
+
+    this.set('customOrder', ['one', 'two', 'three']);
+
+    await render(hbs`
+      <ul>
+        {{#each (order-by this.inputValue this.customOrder) as |secret|}}
+          <li>{{secret.key}}</li>
+        {{/each}}
+      </ul>
+    `);
+
+    assert.dom('li').exists({ count: 3 });
+    assert.strictEqual(
+      this.element.textContent.replace(/\s+/g, ' ').trim(),
+      'username password none',
+    );
+  });
+
+  test('maintains order if there are only some matching keys in the list', async function (assert) {
+    this.set('inputValue', [
+      { key: 'username', value: 1 },
+      { key: 'password', value: 2 },
+      { key: 'email', value: 3 },
+      { key: 'none', value: 3 },
+    ]);
+
+    this.set('customOrder', ['none', 'email']);
+
+    await render(hbs`
+      <ul>
+        {{#each (order-by this.inputValue this.customOrder) as |secret|}}
+          <li>{{secret.key}}</li>
+        {{/each}}
+      </ul>
+    `);
+
+    assert.dom('li').exists({ count: 4 });
+    assert.strictEqual(
+      this.element.textContent.replace(/\s+/g, ' ').trim(),
+      'none email username password',
+    );
+  });
+});