Merge branch 'develop' of github.com:RocketChat/Rocket.Chat into feat…

…/new-threads

* 'develop' of github.com:RocketChat/Rocket.Chat:
  [FIX] Importers progress sending too much update events to clients (#17857)
  [FIX] Omnichannel message link is broken in email notifications (#17843)
  [FIX] Logic for room type was inverted in edit panel (#17851) (#17853)
  Refactor components and views to Storybook compatibility (#17800)
  [FIX] Slack importer settings object (#17776)
  Create codeql-analysis.yml

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,52 @@
+name: "Code scanning - action"
+
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: '0 13 * * *'
+
+jobs:
+  CodeQL-Build:
+
+    # CodeQL runs on ubuntu-latest and windows-latest
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      # Override language selection by uncommenting this and choosing your languages
+      with:
+        languages: javascript
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.storybook/mocks/decorators.js → .storybook/decorators.js

@@ -1,21 +1,21 @@
 import React from 'react';
 
-import { MeteorProviderMock } from './providers';
+import { MeteorProviderMock } from './mocks/providers';
 
 export const rocketChatDecorator = (fn) => {
 	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
 	if (linkElement.id !== 'theme-styles') {
-		require('../../app/theme/client/main.css');
-		require('../../app/theme/client/vendor/fontello/css/fontello.css');
-		require('../../app/theme/client/rocketchat.font.css');
+		require('../app/theme/client/main.css');
+		require('../app/theme/client/vendor/fontello/css/fontello.css');
+		require('../app/theme/client/rocketchat.font.css');
 		linkElement.setAttribute('id', 'theme-styles');
 		linkElement.setAttribute('rel', 'stylesheet');
 		linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css');
 		document.head.appendChild(linkElement);
 	}
 
 	// eslint-disable-next-line import/no-unresolved
-	const { default: icons } = require('!!raw-loader!../../private/public/icons.svg');
+	const { default: icons } = require('!!raw-loader!../private/public/icons.svg');
 
 	return <MeteorProviderMock>
 		<style>{`
@@ -29,3 +29,13 @@ export const rocketChatDecorator = (fn) => {
 		</div>
 	</MeteorProviderMock>;
 };
+
+export const fullHeightDecorator = (storyFn) =>
+	<div style={{ display: 'flex', flexDirection: 'column', maxHeight: '100vh' }}>
+		{storyFn()}
+	</div>;
+
+export const centeredDecorator = (storyFn) =>
+	<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+		{storyFn()}
+	</div>;

.storybook/hooks.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useAutoToggle = (initialValue = false, ms = 1000) => {
+	const [value, setValue] = useState(initialValue);
+
+	useEffect(() => {
+		const timer = setInterval(() => setValue((value) => !value), ms);
+
+		return () => {
+			clearInterval(timer);
+		};
+	}, []);
+
+	return value;
+};

.storybook/main.js

@@ -7,5 +7,6 @@ module.exports = {
 	addons: [
 		'@storybook/addon-actions',
 		'@storybook/addon-knobs',
+		'@storybook/addon-viewport',
 	],
 };

.storybook/preview.js

@@ -1,7 +1,13 @@
 import { withKnobs } from '@storybook/addon-knobs';
-import { addDecorator } from '@storybook/react';
+import { addDecorator, addParameters } from '@storybook/react';
 
-import { rocketChatDecorator } from './mocks/decorators';
+import { rocketChatDecorator } from './decorators';
 
 addDecorator(rocketChatDecorator);
 addDecorator(withKnobs);
+
+addParameters({
+	options: {
+		showRoots: true,
+	},
+});

.storybook/webpack.config.js

@@ -42,9 +42,7 @@ module.exports = async ({ config }) => {
 					},
 				},
 			},
-			{
-				loader: 'react-docgen-typescript-loader',
-			},
+			'react-docgen-typescript-loader',
 		],
 	});
 

app/2fa/server/code/EmailCheck.ts

@@ -99,7 +99,7 @@ ${ t('If_you_didnt_try_to_login_in_your_account_please_ignore_this_email') }
 		const random = Random._randomString(6, '0123456789');
 		const encryptedRandom = bcrypt.hashSync(random, Accounts._bcryptRounds());
 		const expire = new Date();
-		const expirationInSeconds = parseInt(settings.get('Accounts_TwoFactorAuthentication_By_Email_Code_Expiration'));
+		const expirationInSeconds = parseInt(settings.get('Accounts_TwoFactorAuthentication_By_Email_Code_Expiration') as string, 10);
 
 		expire.setSeconds(expire.getSeconds() + expirationInSeconds);
 

app/2fa/server/code/index.ts

@@ -95,7 +95,7 @@ export function isAuthorizedForToken(connection: IMethodConnection, user: IUser,
 export function rememberAuthorization(connection: IMethodConnection, user: IUser): void {
 	const currentToken = Accounts._getLoginToken(connection.id);
 
-	const rememberFor = parseInt(settings.get('Accounts_TwoFactorAuthentication_RememberFor'));
+	const rememberFor = parseInt(settings.get('Accounts_TwoFactorAuthentication_RememberFor') as string, 10);
 
 	if (rememberFor <= 0) {
 		return;

app/authorization/server/functions/hasPermission.js

@@ -12,7 +12,7 @@ const rolesHasPermission = mem(async (permission, roles) => {
 	return !!result;
 }, {
 	cacheKey: JSON.stringify,
-	...process.env.TEST_MODE === 'true' && { maxAge: 0 },
+	...process.env.TEST_MODE === 'true' && { maxAge: 1 },
 });
 
 const getRoles = mem(async (uid, scope) => {

app/importer-slack/server/importer.js

@@ -15,7 +15,7 @@ import { getUserAvatarURL } from '../../utils/lib/getUserAvatarURL';
 import { Users, Rooms, Messages } from '../../models';
 import { insertMessage, createDirectRoom } from '../../lib';
 import { getValidRoomName } from '../../utils';
-import { settings } from '../../settings/lib/settings';
+import { settings } from '../../settings/server';
 
 export class SlackImporter extends Base {
 	constructor(info, importRecord) {

app/importer/server/classes/ImporterBase.js

@@ -291,9 +291,13 @@ export class Base {
 		// Or the completed is greater than or equal to the total amount
 		if (((this.progress.count.completed % 500) === 0) || (this.progress.count.completed >= this.progress.count.total)) {
 			this.updateRecord({ 'count.completed': this.progress.count.completed });
+			this.reportProgress();
+		} else if (!this._reportProgressHandler) {
+			this._reportProgressHandler = setTimeout(() => {
+				this.reportProgress();
+			}, 250);
 		}
 
-		this.reportProgress();
 		this.logger.log(`${ this.progress.count.completed } messages imported`);
 
 		return this.progress;
@@ -303,6 +307,10 @@ export class Base {
 	 * Sends an updated progress to the websocket
 	 */
 	reportProgress() {
+		if (this._reportProgressHandler) {
+			clearTimeout(this._reportProgressHandler);
+			this._reportProgressHandler = false;
+		}
 		ImporterWebsocket.progressUpdated(this.progress);
 	}
 

app/lib/server/lib/sendNotificationsOnMessage.js

@@ -186,6 +186,7 @@ const project = {
 		mobilePushNotifications: 1,
 		muteGroupMentions: 1,
 		name: 1,
+		rid: 1,
 		userHighlights: 1,
 		'u._id': 1,
 		'receiver.active': 1,

app/livechat/server/lib/stream/agentStatus.ts

@@ -9,19 +9,31 @@ let actionTimeout = 60000;
 let action = 'none';
 let comment = '';
 
-settings.get('Livechat_agent_leave_action_timeout', function(_key: string, value: number) {
+settings.get('Livechat_agent_leave_action_timeout', (_key, value) => {
+	if (typeof value !== 'number') {
+		return;
+	}
 	actionTimeout = value * 1000;
 });
 
-settings.get('Livechat_agent_leave_action', function(_key: string, value: boolean) {
+settings.get('Livechat_agent_leave_action', (_key, value) => {
+	if (typeof value !== 'boolean') {
+		return;
+	}
 	monitorAgents = value;
 });
 
-settings.get('Livechat_agent_leave_action', function(_key: string, value: string) {
+settings.get('Livechat_agent_leave_action', (_key, value) => {
+	if (typeof value !== 'string') {
+		return;
+	}
 	action = value;
 });
 
-settings.get('Livechat_agent_leave_comment', function(_key: string, value: string) {
+settings.get('Livechat_agent_leave_comment', (_key, value) => {
+	if (typeof value !== 'string') {
+		return;
+	}
 	comment = value;
 });
 

app/ui-message/client/blocks/MessageBlock.js

@@ -2,7 +2,6 @@ import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/
 import { UiKitMessage, UiKitComponent, kitContext, messageParser } from '@rocket.chat/fuselage-ui-kit';
 import React, { useRef, useEffect } from 'react';
 
-import RawText from '../../../../client/components/basic/RawText';
 import { renderMessageBody } from '../../../ui-utils/client';
 import * as ActionManager from '../ActionManager';
 
@@ -12,7 +11,7 @@ messageParser.text = ({ text, type } = {}) => {
 		return text;
 	}
 
-	return <RawText>{renderMessageBody({ msg: text })}</RawText>;
+	return <span dangerouslySetInnerHTML={{ __html: renderMessageBody({ msg: text }) }} />;
 };
 
 export function MessageBlock({ mid: _mid, rid, blocks, appId }) {

app/ui-message/client/blocks/ModalBlock.js

@@ -5,7 +5,6 @@ import { kitContext, UiKitComponent, UiKitModal, modalParser } from '@rocket.cha
 import { uiKitText } from '@rocket.chat/ui-kit';
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
-import RawText from '../../../../client/components/basic/RawText';
 import { renderMessageBody } from '../../../ui-utils/client';
 import { getURL } from '../../../utils/lib/getURL';
 import * as ActionManager from '../ActionManager';
@@ -16,7 +15,7 @@ modalParser.text = ({ text, type } = {}) => {
 		return text;
 	}
 
-	return <RawText>{renderMessageBody({ msg: text })}</RawText>;
+	return <span dangerouslySetInnerHTML={{ __html: renderMessageBody({ msg: text }) }} />;
 };
 
 const textParser = uiKitText({

app/ui/client/components/GenericTable.stories.js

@@ -5,7 +5,7 @@ import { GenericTable, Th } from './GenericTable';
 
 
 export default {
-	title: 'directory/table',
+	title: 'uncategorized/GenericTable',
 	component: GenericTable,
 	decorators: [(fn) => <div children={fn()} style={{ height: '100vh' }} />],
 };

app/ui/client/views/app/components/Directory/ChannelsTab.js

@@ -88,9 +88,7 @@ export function ChannelsTab() {
 						<Box display='flex' alignItems='center'>
 							<Icon name={roomTypes.getIcon(room)} color='hint' /> <Box fontScale='p2' mi='x4'>{fname || name}</Box><RoomTags room={room} style={style} />
 						</Box>
-						{topic && <Box fontScale='p1' color='hint' style={style}>
-							<MarkdownText>{topic}</MarkdownText>
-						</Box>}
+						{topic && <MarkdownText fontScale='p1' color='hint' style={style} content={topic} />}
 					</Box>
 				</Box>
 			</Table.Cell>

client/admin/cloud/ManualWorkspaceRegistrationModal.js

@@ -67,11 +67,7 @@ function CopyStep({ onNextButtonClick }) {
 					<Icon name='copy' /> {t('Copy')}
 				</Button>
 			</Box>
-			<Box withRichContent>
-				<p>
-					<MarkdownText>{t('Cloud_click_here', { cloudConsoleUrl })}</MarkdownText>
-				</p>
-			</Box>
+			<MarkdownText is='p' withRichContent content={t('Cloud_click_here', { cloudConsoleUrl })} />
 		</Modal.Content>
 		<Modal.Footer>
 			<ButtonGroup>

client/admin/invites/InvitesPage.js

@@ -9,9 +9,9 @@ import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 
 import Page from '../../components/basic/Page';
+import { useModal } from '../../contexts/ModalContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpoint } from '../../contexts/ServerContext';
-import { useModal } from '../../hooks/useModal';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
 import { GenericTable } from '../../../app/ui/client/components/GenericTable';
 import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';

client/admin/mailer/Mailer.js

@@ -4,7 +4,6 @@ import { TextInput, TextAreaInput, Field, FieldGroup, CheckBox, Button, Icon, Bu
 import { isEmail } from '../../../app/utils/lib/isEmail.js';
 import { isJSON } from '../../../app/utils/lib/isJSON.js';
 import Page from '../../components/basic/Page';
-import RawText from '../../components/basic/RawText';
 import { useTranslation } from '../../contexts/TranslationContext';
 
 export function Mailer({ sendMail = () => {} }) {
@@ -95,9 +94,7 @@ export function Mailer({ sendMail = () => {} }) {
 							onChange={(e) => setEmailBody(e.currentTarget.value)}
 						/>
 					</Field.Row>
-					<Field.Hint>
-						<RawText>{t('Mailer_body_tags')}</RawText>
-					</Field.Hint>
+					<Field.Hint dangerouslySetInnerHTML={{ __html: t('Mailer_body_tags') }} />
 				</Field>
 			</FieldGroup>
 		</Page.ScrollableContentWithShadow>

client/admin/rooms/EditRoom.js

@@ -108,15 +108,15 @@ function EditRoom({ room, onChange }) {
 				<Field.Row>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
 						<Field.Label>{t('Public')}</Field.Label>
-						<RadioButton disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
+						<RadioButton disabled={deleted} checked={roomType !== 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
 					</Box>
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Row>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
 						<Field.Label>{t('Private')}</Field.Label>
-						<RadioButton disabled={deleted} checked={roomType !== 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
+						<RadioButton disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
 					</Box>
 				</Field.Row>
 			</Field>

client/admin/settings/GroupPage.js

@@ -1,9 +1,9 @@
 import { Accordion, Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 
+import Page from '../../components/basic/Page';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { Section } from './Section';
-import Page from '../../components/basic/Page';
 
 export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) {
 	const t = useTranslation();

client/admin/settings/GroupPage.stories.js

@@ -1,16 +1,10 @@
 import React from 'react';
 
 import { GroupPage } from './GroupPage';
-import { SettingsState } from './SettingsState';
 
 export default {
 	title: 'admin/settings/GroupPage',
 	component: GroupPage,
-	decorators: [
-		(storyFn) => <SettingsState>
-			{storyFn()}
-		</SettingsState>,
-	],
 };
 
 export const _default = () =>