feat(ui): Display invite links on the staff page

server/src/entities/orgs/handlers/invites/add-invite.ts

@@ -25,6 +25,14 @@ const validators = [
   })),
 ];
 
+/** 
+ * Ensure that the construction of these URLs is done
+ * in exactly one place only.
+ */
+export function inviteUrl(invite: Invite): string {
+  return `${env.MELI_URL}/invite?token=${invite.token}`;
+}
+
 async function handler(req: Request, res: Response): Promise<void> {
   const { orgId } = req.params;
   const { email, admin } = req.body;
@@ -53,7 +61,7 @@ async function handler(req: Request, res: Response): Promise<void> {
 
   await sendInvite(email, {
     org: org.name,
-    url: `${env.MELI_URL}/invite?token=${invite.token}`,
+    url: inviteUrl(invite),
   });
 
   emitEvent(EventType.org_invite_added, {

server/src/entities/orgs/serialize-invite.ts

@@ -1,10 +1,12 @@
+import { inviteUrl } from './handlers/invites/add-invite';
 import { Invite } from './invite';
 
 export function serializeInvite(invite: Invite) {
   return {
     _id: invite._id,
     email: invite.email,
     expiresAt: invite.expiresAt,
+    url: inviteUrl(invite),
     memberOptions: invite.memberOptions,
   };
 }

ui/src/components/orgs/staff/invites/InviteView.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Invite } from './invite';
-import { DeleteInvite } from './DeleteInvite';
-import { FromNow } from '../../../../commons/components/FromNow';
-import { ButtonIcon } from '../../../../commons/components/ButtonIcon';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Invite } from "./invite";
+import { DeleteInvite } from "./DeleteInvite";
+import { FromNow } from "../../../../commons/components/FromNow";
+import { ButtonIcon } from "../../../../commons/components/ButtonIcon";
 
-export function InviteView({ invite, onDelete }: {
+export function InviteView({
+  invite,
+  onDelete,
+}: {
   invite: Invite;
   onDelete: () => void;
 }) {
@@ -15,6 +18,9 @@ export function InviteView({ invite, onDelete }: {
   return (
     <div className="list-group-item d-flex justify-content-between align-items-center">
       <div className="flex-grow-1 d-flex align-items-center">
+        <a href={invite.url}>
+          <FontAwesomeIcon icon={faLink} />
+        </a>{" "}
         <strong className="mr-3">{invite.email}</strong>
         {invite.memberOptions.admin && (
           <span className="badge badge-primary">admin</span>
@@ -23,14 +29,10 @@ export function InviteView({ invite, onDelete }: {
 
       <div className="d-flex align-items-center">
         {expired ? (
-          <div className="text-danger">
-            expired
-          </div>
+          <div className="text-danger">expired</div>
         ) : (
           <>
-            <div className="badge badge-warning mr-3">
-              pending invitation
-            </div>
+            <div className="badge badge-warning mr-3">pending invitation</div>
             <FromNow date={invite.expiresAt} label="Expires" />
           </>
         )}

ui/src/components/orgs/staff/invites/invite.ts

@@ -2,6 +2,7 @@ export interface Invite {
   _id: string;
   email: string;
   expiresAt: Date;
+  url: string;
   memberOptions: {
     admin: boolean;
   };