Fix: Make invitation URL copyable (#4108)

frontend/components/organization/Edit.jsx

@@ -21,11 +21,6 @@ function successNotification(message) {
   });
 }
 
-function showInviteAlert(email, link) {
-  // eslint-disable-next-line no-alert
-  return window.alert(`${email} does not have cloud.gov account yet, please send them the following link to get started:\n\n${link}`);
-}
-
 function showRemoveConfirm(member, org) {
   // eslint-disable-next-line no-alert
   return window.confirm(`Are you sure you want to remove ${member.User.UAAIdentity.email} from ${org.name}?`);
@@ -39,6 +34,11 @@ function reducer(state, { type, payload }) {
         isLoading: false,
         ...payload,
       };
+    case 'invitationSent':
+      return {
+        ...state,
+        mostRecentlyAddedUser: payload,
+      };
     case 'addMember':
       return {
         ...state,
@@ -64,6 +64,7 @@ const initialState = {
   members: [],
   org: null,
   roles: [],
+  mostRecentlyAddedUser: null,
 };
 
 function Edit({ actions }) {
@@ -84,7 +85,7 @@ function Edit({ actions }) {
   }, ['1']);
 
   const {
-    isLoading, members, org, roles,
+    isLoading, members, org, roles, mostRecentlyAddedUser,
   } = state;
 
   if (isLoading) {
@@ -108,6 +109,23 @@ function Edit({ actions }) {
 
   const getSandboxMsg = days => <span>{sandboxMsg(days)}</span>;
 
+  function getInvitationSentMsg() {
+    return (
+      <span>
+        The new member must create a Pages account to accept the invitation to this organization.
+        They may check their inbox at
+        {' '}
+        {mostRecentlyAddedUser.email}
+        {' '}
+        for an invitation by email or visit
+        {' '}
+        <a href="{mostRecentlyAddedUser.link}">{mostRecentlyAddedUser.link}</a>
+        {' '}
+        to get started.
+      </span>
+    );
+  }
+
   return (
     <div>
       <div className="page-header usa-grid-full">
@@ -125,6 +143,15 @@ function Edit({ actions }) {
             alertRole={false}
           />
           )}
+        { mostRecentlyAddedUser
+          && (
+          <AlertBanner
+            status="info"
+            header="Sent invitation to create a Pages account"
+            message={getInvitationSentMsg()}
+            alertRole={false}
+          />
+          )}
         <h3>Members</h3>
         <AddUserForm
           className="well"
@@ -136,13 +163,12 @@ function Edit({ actions }) {
             ({ member, invite: { email, link } }, reduxDispatch) => {
               dispatch({ type: 'addMember', payload: member });
               if (link) {
-                showInviteAlert(email, link);
+                dispatch({ type: 'invitationSent', payload: { email, link } });
               }
               reduxDispatch(successNotification('Successfully added user.'));
             }
           }
         />
-
         <table className="usa-table-borderless log-table log-table__site-builds org-member-table table-full-width">
           <thead>
             <tr>