UX: Add details button to admin bounced/rejected lists (#16343)

app/assets/javascripts/admin/addon/templates/email-bounced.hbs

@@ -5,7 +5,7 @@
         <th>{{i18n "admin.email.time"}}</th>
         <th>{{i18n "admin.email.user"}}</th>
         <th>{{i18n "admin.email.to_address"}}</th>
-        <th>{{i18n "admin.email.email_type"}}</th>
+        <th colspan="2">{{i18n "admin.email.email_type"}}</th>
       </tr>
     </thead>
     <tbody>
@@ -13,7 +13,7 @@
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
         <td>{{text-field value=filter.user placeholderKey="admin.email.logs.filters.user_placeholder"}}</td>
         <td>{{text-field value=filter.address placeholderKey="admin.email.logs.filters.address_placeholder"}}</td>
-        <td>{{text-field value=filter.type placeholderKey="admin.email.logs.filters.type_placeholder"}}</td>
+        <td colspan="2">{{text-field value=filter.type placeholderKey="admin.email.logs.filters.type_placeholder"}}</td>
       </tr>
 
       {{#each model as |l|}}
@@ -28,15 +28,26 @@
             {{/if}}
           </td>
           <td class="email-address"><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
-          {{#if l.has_bounce_key}}
-            <td><a href {{action "showIncomingEmail" l.id}}>{{l.email_type}}</a></td>
-          {{else}}
-            <td>{{l.email_type}}</td>
-          {{/if}}
+          <td>
+            {{#if l.has_bounce_key}}
+              <a href {{action "showIncomingEmail" l.id}}>
+                {{l.email_type}}
+              </a>
+            {{else}}
+              {{l.email_type}}
+            {{/if}}
+          </td>
+          <td class="email-details">
+            {{#if l.has_bounce_key}}
+              <a href {{action "showIncomingEmail" l.id}} title={{i18n "admin.email.details_title"}}>
+                {{d-icon "info-circle"}}
+              </a>
+            {{/if}}
+          </td>
         </tr>
       {{else}}
         {{#unless loading}}
-          <tr><td colspan="4">{{i18n "admin.email.logs.none"}}</td></tr>
+          <tr><td colspan="5">{{i18n "admin.email.logs.none"}}</td></tr>
         {{/unless}}
       {{/each}}
     </tbody>

app/assets/javascripts/admin/addon/templates/email-rejected.hbs

@@ -6,7 +6,7 @@
         <th>{{i18n "admin.email.incoming_emails.from_address"}}</th>
         <th>{{i18n "admin.email.incoming_emails.to_addresses"}}</th>
         <th>{{i18n "admin.email.incoming_emails.subject"}}</th>
-        <th>{{i18n "admin.email.incoming_emails.error"}}</th>
+        <th colspan="2">{{i18n "admin.email.incoming_emails.error"}}</th>
       </tr>
     </thead>
 
@@ -16,7 +16,7 @@
         <td>{{text-field value=filter.from placeholderKey="admin.email.incoming_emails.filters.from_placeholder"}}</td>
         <td>{{text-field value=filter.to placeholderKey="admin.email.incoming_emails.filters.to_placeholder"}}</td>
         <td>{{text-field value=filter.subject placeholderKey="admin.email.incoming_emails.filters.subject_placeholder"}}</td>
-        <td>{{text-field value=filter.error placeholderKey="admin.email.incoming_emails.filters.error_placeholder"}}</td>
+        <td colspan="2">{{text-field value=filter.error placeholderKey="admin.email.incoming_emails.filters.error_placeholder"}}</td>
       </tr>
 
       {{#each model as |email|}}
@@ -50,9 +50,14 @@
           <td class="error">
             <a href {{action "showIncomingEmail" email.id}}>{{email.error}}</a>
           </td>
+          <td class="email-details">
+            <a href {{action "showIncomingEmail" email.id}} title={{i18n "admin.email.details_title"}}>
+              {{d-icon "info-circle"}}
+            </a>
+          </td>
         </tr>
       {{else}}
-        <tr><td colspan="5">{{i18n "admin.email.incoming_emails.none"}}</td></tr>
+        <tr><td colspan="6">{{i18n "admin.email.incoming_emails.none"}}</td></tr>
       {{/each}}
     </tbody>
   </table>

app/assets/stylesheets/common/admin/emails.scss

@@ -32,6 +32,13 @@
     max-width: 250px;
     @include ellipsis;
   }
+
+  .email-details {
+    text-align: right;
+    a {
+      color: var(--primary-high);
+    }
+  }
 }
 
 .incoming-emails {

config/locales/client.en.yml

@@ -4744,6 +4744,7 @@ en:
         time: "Time"
         user: "User"
         email_type: "Email Type"
+        details_title: "Show email details"
         to_address: "To Address"
         test_email_address: "email address to test"
         send_test: "Send Test Email"