UX: Show Topic column in invites pending tab (#12413)

app/assets/javascripts/discourse/app/models/invite.js

@@ -2,6 +2,7 @@ import EmberObject from "@ember/object";
 import { alias } from "@ember/object/computed";
 import { Promise } from "rsvp";
 import discourseComputed from "discourse-common/utils/decorators";
+import Topic from "discourse/models/topic";
 import User from "discourse/models/user";
 import { ajax } from "discourse/lib/ajax";
 import { isNone } from "@ember/utils";
@@ -38,6 +39,11 @@ const Invite = EmberObject.extend({
     return groups ? groups.map((group) => group.id) : [];
   },
 
+  @discourseComputed("topics.firstObject")
+  topic(topicData) {
+    return topicData ? Topic.create(topicData) : null;
+  },
+
   topicId: alias("topics.firstObject.id"),
   topicTitle: alias("topics.firstObject.title"),
 });

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

@@ -92,6 +92,7 @@
                   <th>{{i18n "user.invited.invited_via"}}</th>
                   {{#if currentUser.staff}}
                     <th>{{i18n "user.invited.groups"}}</th>
+                    <th>{{i18n "user.invited.topic"}}</th>
                   {{/if}}
                   <th>{{i18n "user.invited.sent"}}</th>
                   <th>{{i18n "user.invited.expires_at"}}</th>
@@ -118,6 +119,14 @@
                           &mdash;
                         {{/each}}
                       </td>
+                      <td class="invite-topic">
+                        <div class="label">{{i18n "user.invited.topic"}}</div>
+                        {{#if invite.topic}}
+                          <a href={{invite.topic.url}}>{{invite.topic.title}}</a>
+                        {{else}}
+                          &mdash;
+                        {{/if}}
+                      </td>
                     {{/if}}
                     <td class="invite-updated-at">
                       <div class="label">{{i18n "user.invited.sent"}}</div>

app/assets/stylesheets/mobile/user.scss

@@ -347,9 +347,8 @@
       text-align: right;
     }
 
-    td.invite-groups {
-      grid-column-start: 1;
-      grid-column-end: -1;
+    td.invite-groups,
+    td.invite-topic {
       order: 3;
     }
 

config/locales/client.en.yml

@@ -1450,6 +1450,7 @@ en:
         invited_via: "Invitation"
         invited_via_link: "link (%{count} / %{max} redeemed)"
         groups: "Groups"
+        topic: "Topic"
         sent: "Created/Last Sent"
         expires_at: "Expires"
         edit: "Edit"