FEATURE: Improve expired invites tab (#12392)

This commit extends functionality of the expired invites tab, making
it more similar to the pending tab. It also implements a different
layout for mobile.

app/assets/javascripts/discourse/app/controllers/create-invite.js

@@ -128,8 +128,16 @@ export default Controller.extend(
     },
 
     @discourseComputed("buffered.expires_at")
-    expiresAtRelative(expires_at) {
+    expiresAtLabel(expires_at) {
-      return moment.duration(moment(expires_at) - moment()).humanize();
+      const expiresAt = moment(expires_at);
+
+      return expiresAt.isBefore()
+        ? I18n.t("user.invited.invite.expired_at_time", {
+            time: expiresAt.format("LLL"),
+          })
+        : I18n.t("user.invited.invite.expires_in_time", {
+            time: moment.duration(expiresAt - moment()).humanize(),
+          });
     },
 
     @discourseComputed("type", "buffered.email")

app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs

@@ -9,7 +9,7 @@
       {{copy-button selector="input.invite-link" copied=(action "copied")}}
     </div>
 
-    <p>{{i18n "user.invited.invite.expires_at_time" time=expiresAtRelative}}</p>
+    <p>{{expiresAtLabel}}</p>
 
     <div class="input-group invite-type">
       <div class="radio-group">

app/assets/javascripts/discourse/app/templates/user-invited-show.hbs

@@ -85,35 +85,6 @@
                 {{/each}}
               </tbody>
             </table>
-          {{else if inviteExpired}}
-            <table class="table user-invite-list">
-              <thead>
-                <tr>
-                  <th>{{i18n "user.invited.invited_via"}}</th>
-                  <th>{{i18n "user.invited.sent"}}</th>
-                  <th>{{i18n "user.invited.expires_at"}}</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {{#each model.invites as |invite|}}
-                  <tr>
-                    <td>
-                      {{#if invite.email}}
-                        {{invite.email}}
-                      {{else}}
-                        {{i18n "user.invited.invited_via_link" count=invite.redemption_count max=invite.max_redemptions_allowed}}
-                      {{/if}}
-                    </td>
-                    <td>{{raw-date invite.updated_at}}</td>
-                    <td>{{raw-date invite.expires_at}}</td>
-                    <td class="actions">
-                      {{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}
-                    </td>
-                  </tr>
-                {{/each}}
-              </tbody>
-            </table>
           {{else}}
             <table class="table user-invite-list">
               <thead>
@@ -130,7 +101,8 @@
               <tbody>
                 {{#each model.invites as |invite|}}
                   <tr>
-                    <td>
+                    <td class="invite-type">
+                      <div class="label">{{i18n "user.invited.invited_via"}}</div>
                       {{#if invite.email}}
                         {{invite.email}}
                       {{else}}
@@ -138,7 +110,8 @@
                       {{/if}}
                     </td>
                     {{#if currentUser.staff}}
-                      <td>
+                      <td class="invite-groups">
+                        <div class="label">{{i18n "user.invited.groups"}}</div>
                         {{#each invite.groups as |g|}}
                           <a href="/g/{{g.name}}">{{g.name}}</a>
                         {{else}}
@@ -146,15 +119,21 @@
                         {{/each}}
                       </td>
                     {{/if}}
-                    <td>{{format-date invite.updated_at}}</td>
+                    <td class="invite-updated-at">
-                    <td>
+                      <div class="label">{{i18n "user.invited.sent"}}</div>
-                      {{#if invite.expired}}
+                      {{format-date invite.updated_at}}
+                    </td>
+                    <td class="invite-expires-at">
+                      <div class="label">{{i18n "user.invited.expires_at"}}</div>
+                      {{#if inviteExpired}}
+                        {{raw-date invite.expires_at}}
+                      {{else if invite.expired}}
                         {{i18n "user.invited.expired"}}
                       {{else}}
                         {{raw-date invite.expires_at}}
                       {{/if}}
                     </td>
-                    <td class="actions">
+                    <td class="invite-actions">
                       {{d-button icon="pencil-alt" action=(action "editInvite" invite) title="user.invited.edit"}}
                       {{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}
                     </td>

app/assets/stylesheets/desktop/user.scss

@@ -84,16 +84,22 @@
   margin-right: 0px;
 }
 
-.user-invite-list {
+table.user-invite-list {
   width: 100%;
   margin-top: 15px;
+
   tr {
     td {
       padding: 0.667em;
-      &.actions {
+
+      &.invite-actions {
         white-space: nowrap;
         width: 100px;
       }
+
+      .label {
+        display: none;
+      }
     }
   }
 }

app/assets/stylesheets/mobile/user.scss

@@ -315,24 +315,50 @@
       padding: 0;
     }
   }
-  table {
+
-    tr:first-of-type {
+  table.user-invite-list {
+    thead {
       display: none;
     }
+
     tr {
-      display: flex;
+      display: grid;
-      flex-wrap: wrap;
+      grid-template-columns: repeat(2, 1fr);
-      margin-bottom: 1em;
+      padding: 0.25em;
     }
-    td:first-of-type {
+
-      margin-right: 1em;
+    .label {
-    }
-    td:nth-of-type(n + 3) {
       display: block;
-      width: 50%;
+      color: var(--primary-medium);
-      padding: 0.25em 0 1em 0;
+      font-size: $font-down-1;
+      margin: 0.5em 0 0.15em 0;
+    }
+
+    td.invite-type {
+      grid-column-start: 1;
+      grid-column-end: -2;
+      order: 1;
+      vertical-align: middle;
+    }
+
+    td.invite-actions {
+      order: 2;
+      align-self: center;
+      text-align: right;
+    }
+
+    td.invite-groups {
+      grid-column-start: 1;
+      grid-column-end: -1;
+      order: 3;
+    }
+
+    td.invite-updated-at,
+    td.invite-expires-at {
+      order: 4;
     }
   }
+
   .user-invite-none {
     margin-top: 1em;
   }

config/locales/client.en.yml

@@ -1498,7 +1498,8 @@ en:
 
           instructions: "Share this link to instantly grant access to this site:"
           copy_link: "copy link"
-          expires_at_time: "Expires in %{time}."
+          expires_in_time: "Expires in %{time}."
+          expired_at_time: "Expired at %{time}."
 
           show_advanced: "Show Advanced Options"
           hide_advanced: "Hide Advanced Options"