#6114 Improved my keys section (#6121)

* feat: improve my keys screen

* fix: flaky test

* fix: compact my keys section

* fix: pr review

* fix: pr reviews

* fix: pr review

* fix: align

Author: ioanatflowcrypt

extension/chrome/settings/index.ts

@@ -496,24 +496,67 @@ View.run(
     private addKeyRowsHtml = async (privateKeys: KeyInfoWithIdentity[]) => {
       let html = '';
       const canRemoveKey = !this.clientConfiguration?.usesKeyManager();
+
+      // 1. Parse and prepare data
+      const rows = [];
       for (let i = 0; i < privateKeys.length; i++) {
         const ki = privateKeys[i];
         const prv = await KeyUtil.parse(ki.private);
         const created = new Date(prv.created);
         const date = Str.monthName(created.getMonth()) + ' ' + created.getDate() + ', ' + created.getFullYear();
+        const isExpired = KeyUtil.expired(prv);
+        rows.push({
+          ki,
+          prv,
+          createdTime: prv.created,
+          dateStr: date,
+          isExpired,
+          originalIndex: i,
+        });
+      }
+
+      // 2. Sort: newest to oldest
+      rows.sort((a, b) => b.createdTime - a.createdTime);
+
+      // 3. Build HTML
+      // Header row
+      html += `
+        <div class="row key-list-header">
+          <div class="col-3">Email</div>
+          <div class="col-2">Created</div>
+          <div class="col-6">Fingerprint</div>
+          <div class="col-1">Status</div>
+        </div>
+      `;
+
+      for (const row of rows) {
+        const { ki, prv, dateStr, isExpired, originalIndex } = row;
+
         let removeKeyBtn = '';
         if (canRemoveKey && privateKeys.length > 1) {
-          removeKeyBtn = `(<a href="#" class="action_remove_key" data-test="action-remove-key-${i}" data-fingerprint=${ki.fingerprints[0]} data-type="${ki.family}" data-id="${ki.id}" data-longid="${ki.longid}">remove</a>)`;
+          removeKeyBtn = `<a href="#" class="action_remove_key" style="margin-left: 5px;" data-test="action-remove-key-${originalIndex}" data-fingerprint=${ki.fingerprints[0]} data-type="${ki.family}" data-id="${ki.id}" data-longid="${ki.longid}">remove</a>`;
         }
+
         const escapedEmail = Xss.escape(prv.emails[0] || '');
-        const escapedLink = `<a href="#" data-test="action-show-key-${i}" class="action_show_key" page="modules/my_key.htm" addurltext="&fingerprint=${ki.id}">${escapedEmail}</a>`;
-        const fpHtml = `fingerprint:&nbsp;<span class="good">${Str.spaced(Xss.escape(ki.fingerprints[0]))}</span>`;
-        const space = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`;
-        html += `<div class="row key-content-row">`;
-        html += `  <div class="col-12">${escapedLink} from ${Xss.escape(date)}${space}${fpHtml}${space}${KeyUtil.statusHtml(ki.id, prv)}${space}${removeKeyBtn}</div>`;
+        const escapedLink = `<a href="#" data-test="action-show-key-${originalIndex}" class="action_show_key" page="modules/my_key.htm" addurltext="&fingerprint=${ki.id}">${escapedEmail}</a>`;
+        const fpHtml = `<span class="good" style="font-family: monospace;">${Str.spaced(Xss.escape(ki.fingerprints[0]))}</span>`;
+
+        const rowClass = isExpired ? 'key-content-row expired' : 'key-content-row';
+        const opacityStyle = isExpired ? 'opacity: 0.7;' : '';
+
+        html += `<div class="row ${rowClass}" style="${opacityStyle}">`;
+        html += `  <div class="col-3" style="overflow: hidden; text-overflow: ellipsis;">${escapedLink}</div>`;
+        html += `  <div class="col-2">${Xss.escape(dateStr)}</div>`;
+        html += `  <div class="col-6">${fpHtml}</div>`;
+        html += `  <div class="col-1 status-col">
+                     ${KeyUtil.statusHtml(ki.id, prv)}
+                     ${removeKeyBtn}
+                   </div>`;
         html += `</div>`;
       }
+
       Xss.sanitizeAppend('.key_list', html);
+
       $('.action_show_key').on(
         'click',
         this.setHandler(async target => {

extension/css/settings.css

@@ -255,8 +255,7 @@ a.gray_link {
 #settings-row .my-keys-row {
   display: flex;
   justify-content: center;
-  margin-top: 60px;
-  margin-left: 0 !important;
+  margin: 60px 0;
   text-indent: 0;
 }
 
@@ -533,7 +532,7 @@ body#settings .settings-border .row {
 }
 
 body#settings .settings-border .key-content-row {
-  padding: 7px 0;
+  padding: 4px 0;
   border-bottom: 1px solid #e6e6e6;
 }
 
@@ -544,6 +543,10 @@ body#settings .settings-border .key_list {
   height: 219px;
 }
 
+.key-content-row.expired {
+  opacity: 0.7;
+}
+
 #settings-row .box img.security-icon {
   width: 70px;
 }
@@ -583,6 +586,26 @@ body#settings .settings-border .key_list {
   top: 28px;
 }
 
+.my-keys-row .key-list-header {
+  font-weight: 600;
+  padding: 5px 0;
+  border-bottom: 2px solid #eee;
+}
+
+.my-keys-row .key-content-row {
+  padding: 5px 0;
+  border-bottom: 1px solid #e6e6e6;
+  align-items: center;
+}
+
+.my-keys-row .key-content-row .status-col {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-items: start;
+  gap: 2px;
+}
+
 @media (width <= 991px) {
   .my-keys-row .settings-border {
     margin: 35px auto !important;
@@ -847,4 +870,4 @@ span.fc-badge {
 .fc-badge-light-gray {
   background-color: #bcbcbc;
   color: #444 !important;
-}
+}

test/source/tests/setup.ts

@@ -2250,15 +2250,15 @@ AN8G3r5Htj8olot+jm9mIa5XLXWzMNUZgg==
         const title = await settingsPage.read('@container-overlay-prompt-text');
         expect(title).to.contain(
           'Failed to store newly generated key on FlowCrypt Email Key Manager, ' +
-            'No key has been generated for [email protected] yet. Please ask your administrator.'
+          'No key has been generated for [email protected] yet. Please ask your administrator.'
         );
         await settingsPage.click('@action-show-overlay-details');
         await settingsPage.waitAll('@container-overlay-details');
         await Util.sleep(0.5);
         const details = await settingsPage.read('@container-overlay-details');
         expect(details).to.contain(
           `405 when PUT-ing https://localhost:${t.context.urls?.port}/flowcrypt-email-key-manager/v1/keys/private string: ` +
-            'privateKey -> No key has been generated for [email protected] yet'
+          'privateKey -> No key has been generated for [email protected] yet'
         );
         expect(details).to.not.contain('PRIVATE KEY');
       })