Regression: Missing button to copy Invite links (#16084)

app/theme/client/imports/forms/input.css

@@ -50,6 +50,14 @@ textarea.rc-input__element {
 			right: 1rem;
 			left: auto;
 		}
+
+		&--clickable {
+			cursor: pointer;
+		}
+
+		&--right + .rc-input__element {
+			padding: 0 2.75rem 0 1rem;
+		}
 	}
 
 	&__element {

app/ui-flextab/client/tabs/createInviteLink.html

@@ -2,49 +2,60 @@
 
 	<form class="" role="form">
 		{{#if isEditing}}
-			<div class="rc-input">
-				<div class="rc-input__title">{{_ "Expiration_(Days)"}}</div>
-				<label class="rc-select">
-					<select class="rc-select__element js-type" name="expiration_days" id="expiration_days" aria-label="{{_ "Expiration_(Days)"}}">
-						<option value="1" selected>1</option>
-						<option value="7">7</option>
-						<option value="15">15</option>
-						<option value="30">30</option>
-						<option value="0">{{_ 'Never'}}</option>
-					</select>
-					{{> icon block="rc-select__arrow" icon="arrow-down" }}
-				</label>
+			<div class="rc-user-info__row">
+				<div class="rc-input">
+					<div class="rc-input__title">{{_ "Expiration_(Days)"}}</div>
+					<label class="rc-select">
+						<select class="rc-select__element js-type" name="expiration_days" id="expiration_days" aria-label="{{_ "Expiration_(Days)"}}">
+							<option value="1" selected>1</option>
+							<option value="7">7</option>
+							<option value="15">15</option>
+							<option value="30">30</option>
+							<option value="0">{{_ 'Never'}}</option>
+						</select>
+						{{> icon block="rc-select__arrow" icon="arrow-down" }}
+					</label>
+				</div>
 			</div>
-
-			<div class="rc-input">
-				<div class="rc-input__title">{{_ "Max_number_of_uses"}}</div>
-				<label class="rc-select">
-					<select class="rc-select__element js-type" name="max_uses" id="max_uses" aria-label="{{_ "Max_number_of_uses"}}">
-						<option value="1">1</option>
-						<option value="5">5</option>
-						<option value="10">10</option>
-						<option value="25">25</option>
-						<option value="50">50</option>
-						<option value="100">100</option>
-						<option value="0" selected>{{_ 'No Limit'}}</option>
-					</select>
-					{{> icon block="rc-select__arrow" icon="arrow-down" }}
-				</label>
+			<div class="rc-user-info__row">
+				<div class="rc-input">
+					<div class="rc-input__title">{{_ "Max_number_of_uses"}}</div>
+					<label class="rc-select">
+						<select class="rc-select__element js-type" name="max_uses" id="max_uses" aria-label="{{_ "Max_number_of_uses"}}">
+							<option value="1">1</option>
+							<option value="5">5</option>
+							<option value="10">10</option>
+							<option value="25">25</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+							<option value="0" selected>{{_ 'No Limit'}}</option>
+						</select>
+						{{> icon block="rc-select__arrow" icon="arrow-down" }}
+					</label>
+				</div>
 			</div>
 
 			<button class="rc-button rc-button--default js-confirm-invite" title="{{_ 'Generate_New_Link'}}">{{_ 'Generate_New_Link'}}</button>
 		{{else}}
-
+		<div class="rc-user-info__row">
 			<div class="rc-input">
 				<div class="rc-input__title">{{_ "Invite_Link"}}</div>
-				<input type="text" class="rc-input__element rc-invite-link-input" name="link" id="link" readonly value="{{ url }}"/>
+				<div class="rc-input__wrapper">
+					<div class="rc-input__icon rc-input__icon--right rc-input__icon--clickable js-copy">
+						{{> icon block="rc-input__icon-svg" icon="copy" }}
+					</div>
+					<input type="text" class="rc-input__element rc-invite-link-input" name="link" id="link" readonly value="{{ url }}"/>
+				</div>
 			</div>
-
+		</div>
+		<div class="rc-user-info__row">
 			<div class="rc-input">
 				<div class="rc-input__title">{{linkExpirationText}}</div>
 			</div>
-
+		</div>
+		<div class="rc-user-info__row">
 			<button class="rc-button rc-button--outline js-edit-invite" title="{{_ 'Edit_Invite'}}">{{_ 'Edit_Invite'}}</button>
+		</div>
 
 
 		{{/if}}

app/ui-flextab/client/tabs/createInviteLink.js

@@ -2,6 +2,7 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
 import toastr from 'toastr';
+import Clipboard from 'clipboard';
 
 import { t, APIClient } from '../../../utils';
 import { formatDateAndTime } from '../../../lib/client/lib/formatDate';
@@ -67,6 +68,9 @@ Template.createInviteLink.helpers({
 });
 
 Template.createInviteLink.events({
+	'click .js-copy'(event, i) {
+		$(event.currentTarget).attr('data-clipboard-text', i.url.get());
+	},
 	'click .js-edit-invite'(e, instance) {
 		e.preventDefault();
 		instance.isEditing.set(true);
@@ -90,4 +94,9 @@ Template.createInviteLink.onCreated(function() {
 	this.inviteData = new ReactiveVar(null);
 
 	getInviteLink(this, this.data.rid);
+
+	const clipboard = new Clipboard('.js-copy');
+	clipboard.on('success', function() {
+		toastr.success(TAPi18n.__('Copied'));
+	});
 });

app/ui-flextab/client/tabs/membersList.html

@@ -48,14 +48,15 @@
 				<button class="rc-button rc-button--secondary show-more-users {{#if loadingMore}}loading{{/if}}">{{_ "Show_more"}}</button>
 			{{/if}}
 		</div>
+		<div class="rc-button__group rc-button__group--stretch">
+			{{#if canAddUser}}
+				<button class="rc-button rc-button--primary js-add">{{> icon block="rc-input__icon-svg" icon="plus"}}{{_ "Add_users"}}</button>
+			{{/if}}
 
-		{{#if canAddUser}}
-			<button class="rc-button rc-button--primary js-add">{{> icon block="rc-input__icon-svg" icon="plus"}}{{_ "Add_users"}}</button>
-		{{/if}}
-
-		{{#if canInviteUser}}
-			<button class="rc-button rc-button--primary js-invite">{{> icon block="rc-input__icon-svg" icon="user-plus"}}{{_ "Invite_Users"}}</button>
-		{{/if}}
+			{{#if canInviteUser}}
+				<button class="rc-button rc-button--primary js-invite">{{> icon block="rc-input__icon-svg" icon="user-plus"}}{{_ "Invite_Users"}}</button>
+			{{/if}}
+		</div>
 
 		{{/with}}
 	{{/if}}