Rename Threads to Discussion (#13782)

app/channel-settings/server/methods/saveRoomSettings.js

@@ -60,7 +60,7 @@ Meteor.methods({
 		}
 
 		if (room.prid) {
-			throw new Meteor.Error('error-action-not-allowed', 'Editing thread room is not allowed', {
+			throw new Meteor.Error('error-action-not-allowed', 'Editing discussion room is not allowed', {
 				method: 'saveRoomSettings',
 				action: 'Editing_room',
 			});

app/discussion/client/createDiscussionMessageAction.js

@@ -0,0 +1,53 @@
+import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
+
+import { Subscriptions } from '../../models/client';
+import { settings } from '../../settings/client';
+import { hasPermission } from '../../authorization/client';
+import { MessageAction, modal } from '../../ui-utils/client';
+import { t } from '../../utils/client';
+
+const condition = (rid, uid) => {
+	if (!Subscriptions.findOne({ rid })) {
+		return false;
+	}
+	return uid !== Meteor.userId() ? hasPermission('start-discussion-other-user') : hasPermission('start-discussion');
+};
+
+Meteor.startup(function() {
+	Tracker.autorun(() => {
+		if (!settings.get('Discussion_enabled')) {
+			return MessageAction.removeButton('start-discussion');
+		}
+
+		MessageAction.addButton({
+			id: 'start-discussion',
+			icon: 'discussion',
+			label: 'Discussion_start',
+			context: ['message', 'message-mobile'],
+			async action() {
+				const [, message] = this._arguments;
+
+				modal.open({
+					title: t('Discussion_title'),
+					modifier: 'modal',
+					content: 'CreateDiscussion',
+					data: { rid: message.rid, message, onCreate() {
+						modal.close();
+					} },
+					confirmOnEnter: false,
+					showConfirmButton: false,
+					showCancelButton: false,
+				});
+			},
+			condition({ rid, u: { _id: uid }, drid, dcount }) {
+				if (drid || !isNaN(dcount)) {
+					return false;
+				}
+				return condition(rid, uid);
+			},
+			order: 0,
+			group: 'menu',
+		});
+	});
+});

app/discussion/client/discussionFromMessageBox.js

@@ -0,0 +1,36 @@
+import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
+
+import { messageBox, modal } from '../../ui-utils/client';
+import { t } from '../../utils/client';
+import { settings } from '../../settings/client';
+
+Meteor.startup(function() {
+	Tracker.autorun(() => {
+		if (!settings.get('Discussion_enabled')) {
+			return messageBox.actions.remove('Create_new', /start-discussion/);
+		}
+		messageBox.actions.add('Create_new', 'Discussion', {
+			id: 'start-discussion',
+			icon: 'discussion',
+			condition: () => true,
+			action(data) {
+				modal.open({
+					title: t('Discussion_title'),
+					modifier: 'modal',
+					content: 'CreateDiscussion',
+					data: {
+						...data,
+						onCreate() {
+							modal.close();
+						},
+					},
+					showConfirmButton: false,
+					showCancelButton: false,
+					confirmOnEnter: false,
+				});
+			},
+		});
+
+	});
+});

app/discussion/client/index.js

@@ -0,0 +1,16 @@
+// Templates
+import './views/creationDialog/CreateDiscussion';
+import './views/DiscussionList';
+import './views/DiscussionTabbar';
+
+// Other UI extensions
+import './lib/messageTypes/discussionMessage';
+import './lib/discussionsOfRoom';
+import './createDiscussionMessageAction';
+import './discussionFromMessageBox';
+import './tabBar';
+
+import '../lib/discussionRoomType';
+
+// Style
+import './public/stylesheets/discussion.css';

app/discussion/client/lib/discussionsOfRoom.js

@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export const DiscussionOfRoom = new Mongo.Collection('rocketchat_discussions_of_room');

app/discussion/client/lib/messageTypes/discussionMessage.js

@@ -0,0 +1,17 @@
+import { Meteor } from 'meteor/meteor';
+
+import { MessageTypes } from '../../../../ui-utils/client';
+
+Meteor.startup(function() {
+	MessageTypes.registerType({
+		id: 'discussion-created',
+		system: false,
+		message: 'discussion-created',
+		data(message) {
+			return {
+				// channelLink: `<a class="mention-link" data-channel= ${ message.channels[0]._id }  title="">${ TAPi18n.__('discussion') }</a>`,
+				message: `<svg class="rc-icon" aria-hidden="true"><use xlink:href="#icon-discussion"></use></svg> ${ message.msg }`,
+			};
+		},
+	});
+});

app/discussion/client/public/stylesheets/discussion.css

@@ -0,0 +1,22 @@
+.message-discussion {
+	display: flex;
+
+	padding: 0.5rem 0;
+	align-items: center;
+}
+
+.discussion-reply-lm {
+	padding: 4px 8px;
+
+	color: var(--color-gray);
+
+	font-size: 12px;
+}
+
+.discussions-list .load-more {
+	text-align: center;
+	text-transform: lowercase;
+
+	font-style: italic;
+	line-height: 40px;
+}

app/threading/client/tabBar.js → app/discussion/client/tabBar.js

@@ -1,13 +1,14 @@
 import { Meteor } from 'meteor/meteor';
-import { TabBar } from '../../ui-utils';
+
+import { TabBar } from '../../ui-utils/client';
 
 Meteor.startup(function() {
 	return TabBar.addButton({
 		groups: ['channel', 'group', 'direct'],
-		id: 'threads',
-		i18nTitle: 'Threads',
-		icon: 'thread',
-		template: 'threadsTabbar',
+		id: 'discussions',
+		i18nTitle: 'Discussions',
+		icon: 'discussion',
+		template: 'discussionsTabbar',
 		order: 10,
 	});
 });

app/threading/client/views/ThreadList.html → app/discussion/client/views/DiscussionList.html

@@ -1,7 +1,7 @@
-<template name="ThreadList">
+<template name="DiscussionList">
 	{{#if rooms}}
 		<h3 class="rooms-list__type">
-			{{_ "Threads"}}
+			{{_ "Discussion"}}
 		</h3>
 		<ul class="rooms-list__list">
 			{{#each room in rooms}} {{> chatRoomItem room }} {{/each}}

app/threading/client/views/ThreadList.js → app/discussion/client/views/DiscussionList.js

@@ -1,9 +1,13 @@
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
-import { ChatSubscription } from '../../../models';
-import { getUserPreference } from '../../../utils';
-import { settings } from '../../../settings';
-Template.ThreadList.helpers({
+
+import { ChatSubscription } from '../../../models/client';
+import { getUserPreference } from '../../../utils/client';
+import { settings } from '../../../settings/client';
+
+import './DiscussionList.html';
+
+Template.DiscussionList.helpers({
 	rooms() {
 		const user = Meteor.userId();
 		const sortBy = getUserPreference(user, 'sidebarSortby') || 'alphabetical';

app/threading/client/views/ThreadsTabbar.html → app/discussion/client/views/DiscussionTabbar.html

@@ -1,12 +1,12 @@
-<template name="threadsTabbar">
+<template name="discussionsTabbar">
 	{{#if Template.subscriptionsReady}}
 		{{#unless hasMessages}}
-			<div class="list-view threads-list flex-tab__header">
-					<h2>{{_ "No_threads_yet"}}</h2>
+			<div class="list-view discussions-list flex-tab__header">
+					<h2>{{_ "No_discussions_yet"}}</h2>
 			</div>
 		{{/unless}}
 	{{/if}}
-	<div class="flex-tab__result threads-list js-list">
+	<div class="flex-tab__result discussions-list js-list">
 		<ul class="list clearfix">
 			{{#each messages}}
 				{{#nrr nrrargs 'message' message}}{{/nrr}}

app/threading/client/views/ThreadsTabbar.js → app/discussion/client/views/DiscussionTabbar.js

@@ -1,20 +1,19 @@
 import _ from 'underscore';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
-import { ThreadsOfRoom } from '../lib/threadsOfRoom';
 
-Template.threadsTabbar.helpers({
+import { DiscussionOfRoom } from '../lib/discussionsOfRoom';
+
+import './DiscussionTabbar.html';
+
+Template.discussionsTabbar.helpers({
 	hasMessages() {
-		return ThreadsOfRoom.find({
+		return DiscussionOfRoom.find({
 			rid: this.rid,
-		}, {
-			sort: {
-				ts: -1,
-			},
 		}).count() > 0;
 	},
 	messages() {
-		return ThreadsOfRoom.find({
+		return DiscussionOfRoom.find({
 			rid: this.rid,
 		}, {
 			sort: {
@@ -30,13 +29,13 @@ Template.threadsTabbar.helpers({
 	},
 });
 
-Template.threadsTabbar.onCreated(function() {
+Template.discussionsTabbar.onCreated(function() {
 	this.hasMore = new ReactiveVar(true);
 	this.limit = new ReactiveVar(50);
 	return this.autorun(() => {
 		const data = Template.currentData();
-		return this.subscribe('threadsOfRoom', data.rid, this.limit.get(), () => {
-			if (ThreadsOfRoom.find({
+		return this.subscribe('discussionsOfRoom', data.rid, this.limit.get(), () => {
+			if (DiscussionOfRoom.find({
 				rid: data.rid,
 			}).count() < this.limit.get()) {
 				return this.hasMore.set(false);
@@ -45,9 +44,9 @@ Template.threadsTabbar.onCreated(function() {
 	});
 });
 
-Template.threadsTabbar.events({
+Template.discussionsTabbar.events({
 	'scroll .js-list': _.throttle(function(e, instance) {
-		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight && instance.hasMore.get()) {
+		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight - 10 && instance.hasMore.get()) {
 			return instance.limit.set(instance.limit.get() + 50);
 		}
 	}, 200),

app/threading/client/views/creationDialog/CreateThread.html → app/discussion/client/views/creationDialog/CreateDiscussion.html

@@ -1,20 +1,20 @@
-<template name="CreateThread">
+<template name="CreateDiscussion">
 
 	<section class="create-channel">
 		<div class="create-channel__wrapper">
-			<p class="create-channel__description">{{_ "Threading_description"}}</p>
-			<form id="create-thread" class="create-channel__content">
+			<p class="create-channel__description">{{_ "Discussion_description"}}</p>
+			<form id="create-discussion" class="create-channel__content">
 				{{#unless disabled}}
-				{{> SearchCreateThread
+				{{> SearchCreateDiscussion
 					onClickTag=onClickTagRoom
 					deleteLastItem=deleteLastItemRoom
 					list=selectedRoom
 					onSelect=onSelectRoom
 					collection=roomCollection
 					field='name'
 					sort='name'
-					label="Thread_target_channel"
-					placeholder="Thread_target_channel_description"
+					label="Discussion_target_channel"
+					placeholder="Discussion_target_channel_description"
 					name="parentChannel"
 					disabled=disabled
 					selector=roomSelector
@@ -25,62 +25,63 @@
 				}} {{else}}
 					<div class="rc-input" disabled>
 						<label class="rc-input__label">
-							<div class="rc-input__title">{{_ "Thread_target_channel"}}</div>
+							<div class="rc-input__title">{{_ "Discussion_target_channel"}}</div>
 							<div class="rc-input__wrapper">
 								<input disabled name="parentChannel" id="parentChannel" value={{parentChannel}} class="rc-input__element" />
 							</div>
 						</label>
 					</div>
 				{{/unless}}
-				{{> SearchCreateThread
-					onClickTag=onClickTagUser
-					deleteLastItem=deleteLastItemUser
-					list=selectedUsers
-					onSelect=onSelectUser
-					collection='UserAndRoom'
-					subscription='userAutocomplete'
-					field='username'
-					sort='username'
-					label="Invite_Users"
-					placeholder="Username_Placeholder"
-					name="users"
-					icon="at"
-					noMatchTemplate="userSearchEmpty"
-					templateItem="popupList_item_default"
-					modifier=userModifier
-				}}
+
 				<div class="create-channel__inputs">
 					<div class="rc-input">
 						<label class="rc-input__label">
-							<div class="rc-input__title">{{_ "Thread_name"}}</div>
+							<div class="rc-input__title">{{_ "Discussion_name"}}</div>
 							<div class="rc-input__wrapper">
 								<div class="rc-input__icon">
-									{{> icon block="rc-input__icon-svg" icon="thread"}}
+									{{> icon block="rc-input__icon-svg" icon="discussion"}}
 								</div>
-								<input name="thread_name" id="thread_name" class="rc-input__element" placeholder="{{_ 'New_thread_name'}}"
+								<input name="discussion_name" id="discussion_name" class="rc-input__element" placeholder="{{_ 'New_discussion_name'}}"
 									maxlength="{{maxMessageLength}}" value="{{channelName}}"/>
 							</div>
 						</label>
 					</div>
+					{{> SearchCreateDiscussion
+						onClickTag=onClickTagUser
+						deleteLastItem=deleteLastItemUser
+						list=selectedUsers
+						onSelect=onSelectUser
+						collection='UserAndRoom'
+						subscription='userAutocomplete'
+						field='username'
+						sort='username'
+						label="Invite_Users"
+						placeholder="Username_Placeholder"
+						name="users"
+						icon="at"
+						noMatchTemplate="userSearchEmpty"
+						templateItem="popupList_item_default"
+						modifier=userModifier
+					}}
 					<div class="rc-input">
 						<label class="rc-input__label">
-							<div class="rc-input__title">{{_ "Threading_first_message_title"}}</div>
+							<div class="rc-input__title">{{_ "Discussion_first_message_title"}}</div>
 							<div class="rc-input__wrapper">
-								<textarea name="thread_message" id="thread_message" class="rc-input__element" placeholder="{{_ 'New_thread_first_message'}}"
+								<textarea rows="5" name="discussion_message" id="discussion_message" class="rc-input__element" placeholder="{{_ 'New_discussion_first_message'}}"
 									maxlength="{{maxMessageLength}}"></textarea>
 							</div>
 						</label>
 					</div>
 				</div>
 			</form>
 			<div class="rc-input">
-				<button form="create-thread" class="rc-button rc-button--primary js-save-thread {{createIsDisabled}}" {{createIsDisabled}}>{{_ " Create "}}</button>
+				<button form="create-discussion" class="rc-button rc-button--primary js-save-discussion {{createIsDisabled}}" {{createIsDisabled}}>{{_ " Create "}}</button>
 			</div>
 		</div>
 	</section>
 </template>
 
-<template name="SearchCreateThread">
+<template name="SearchCreateDiscussion">
 	<div class="rc-input" id='search-{{name}}' {{disabled}}>
 		<label class="rc-input__label">
 			<div class="rc-input__title">{{_ label}}</div>