Reassessment of client helpers

app/autolinker/client/client.js

@@ -7,6 +7,7 @@ import Autolinker from 'autolinker';
 
 import { settings } from '../../settings';
 import { callbacks } from '../../callbacks';
+import { escapeRegExp } from '../../../client/lib/escapeRegExp';
 
 let config;
 
@@ -33,7 +34,7 @@ const renderMessage = (message) => {
 	let msgParts;
 	let regexTokens;
 	if (message.tokens && message.tokens.length) {
-		regexTokens = new RegExp(`(${ (message.tokens || []).map(({ token }) => RegExp.escape(token)) })`, 'g');
+		regexTokens = new RegExp(`(${ (message.tokens || []).map(({ token }) => escapeRegExp(token)) })`, 'g');
 		msgParts = message.html.split(regexTokens);
 	} else {
 		msgParts = [message.html];

app/emoji-custom/client/lib/emojiCustom.js

@@ -7,6 +7,7 @@ import { RoomManager } from '../../../ui-utils/client';
 import { emoji, EmojiPicker } from '../../../emoji/client';
 import { CachedCollectionManager } from '../../../ui-cached-collection/client';
 import { APIClient } from '../../../utils/client';
+import { escapeRegExp } from '../../../../client/lib/escapeRegExp';
 
 export const getEmojiUrlFromName = function(name, extension) {
 	Session.get;
@@ -126,7 +127,7 @@ export const updateEmojiCustom = function(emojiData) {
 };
 
 const customRender = (html) => {
-	const emojisMatchGroup = emoji.packages.emojiCustom.list.map(RegExp.escape).join('|');
+	const emojisMatchGroup = emoji.packages.emojiCustom.list.map(escapeRegExp).join('|');
 	if (emojisMatchGroup !== emoji.packages.emojiCustom._regexpSignature) {
 		emoji.packages.emojiCustom._regexpSignature = emojisMatchGroup;
 		emoji.packages.emojiCustom._regexp = new RegExp(`<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${ emojisMatchGroup })`, 'gi');

app/emoji/client/emojiPicker.js

@@ -4,12 +4,12 @@ import { ReactiveDict } from 'meteor/reactive-dict';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 
+import { escapeRegExp } from '../../../client/lib/escapeRegExp';
+import '../../theme/client/imports/components/emojiPicker.css';
 import { t } from '../../utils/client';
 import { EmojiPicker } from './lib/EmojiPicker';
 import { emoji } from '../lib/rocketchat';
-
 import './emojiPicker.html';
-import '../../theme/client/imports/components/emojiPicker.css';
 
 const ESCAPE = 27;
 
@@ -50,7 +50,7 @@ function getEmojisBySearchTerm(searchTerm) {
 
 	EmojiPicker.currentCategory.set('');
 
-	const searchRegExp = new RegExp(RegExp.escape(searchTerm.replace(/:/g, '')), 'i');
+	const searchRegExp = new RegExp(escapeRegExp(searchTerm.replace(/:/g, '')), 'i');
 
 	for (let current in emoji.list) {
 		if (!emoji.list.hasOwnProperty(current)) {

app/theme/client/index.js

@@ -1,3 +1,4 @@
+import 'toastr/build/toastr.min.css';
 import './main.css';
 import './vendor/photoswipe.css';
 import './vendor/fontello/css/fontello.css';

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

@@ -10,6 +10,7 @@ import { canDeleteMessage, getURL, handleError, t, APIClient } from '../../../ut
 import { popover, modal } from '../../../ui-utils/client';
 import { Rooms, Messages } from '../../../models/client';
 import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManager';
+import { download } from '../../../../client/lib/download';
 
 const LIST_SIZE = 50;
 const DEBOUNCE_TIME_TO_SEARCH_IN_MS = 500;
@@ -255,13 +256,10 @@ Template.uploadedFilesList.events({
 									icon: 'download',
 									name: t('Download'),
 									action: () => {
-										const a = document.createElement('a');
-										a.href = getURL(this.file.url);
-										a.download = this.file.name;
-										document.body.appendChild(a);
-										a.click();
-										window.URL.revokeObjectURL(this.file.url);
-										a.remove();
+										const URL = window.webkitURL ?? window.URL;
+										const href = getURL(this.file.url);
+										download(href, this.file.name);
+										URL.revokeObjectURL(this.file.url);
 									},
 								},
 							],

app/ui-message/client/popup/messagePopupConfig.js

@@ -17,6 +17,7 @@ import { customMessagePopups } from './customMessagePopups';
 import './messagePopupConfig.html';
 import './messagePopupSlashCommand.html';
 import './messagePopupUser.html';
+import { escapeRegExp } from '../../../../client/lib/escapeRegExp';
 
 const reloadUsersFromRoomMessages = (rid, template) => {
 	const user = Meteor.userId() && Meteor.users.findOne(Meteor.userId(), { fields: { username: 1 } });
@@ -144,7 +145,7 @@ const getEmojis = (collection, filter) => {
 		return [];
 	}
 
-	const regExp = new RegExp(RegExp.escape(filter), 'i');
+	const regExp = new RegExp(escapeRegExp(filter), 'i');
 	const recents = EmojiPicker.getRecent().map((item) => `:${ item }:`);
 
 	return Object.keys(collection)
@@ -208,7 +209,7 @@ Template.messagePopupConfig.helpers({
 			getFilter: (collection, filter = '', cb) => {
 				const { rid } = this;
 				const filterText = filter.trim();
-				const filterRegex = filterText !== '' && new RegExp(`${ RegExp.escape(filterText) }`, 'i');
+				const filterRegex = filterText !== '' && new RegExp(`${ escapeRegExp(filterText) }`, 'i');
 
 				const items = template.usersFromRoomMessages
 					.find(

app/ui-sidenav/client/toolbar.js

@@ -12,6 +12,7 @@ import { Rooms, Subscriptions } from '../../models';
 import { roomTypes } from '../../utils';
 import { hasAtLeastOnePermission } from '../../authorization';
 import { menu } from '../../ui-utils';
+import { escapeRegExp } from '../../../client/lib/escapeRegExp';
 
 let filterText = '';
 let usernamesFromClient;
@@ -130,7 +131,7 @@ Template.toolbar.helpers({
 					query.t = 'd';
 				}
 
-				const searchQuery = new RegExp(RegExp.escape(filterText), 'i');
+				const searchQuery = new RegExp(escapeRegExp(filterText), 'i');
 				query.$or = [
 					{ name: searchQuery },
 					{ fname: searchQuery },

client/account/AccountProfileForm.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../contexts/TranslationContext';
 import { isEmail } from '../../app/utils/lib/isEmail.js';
 import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 import { useMethod } from '../contexts/ServerContext';
-import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
+import { getUserEmailAddress } from '../lib/getUserEmailAddress';
 import { UserAvatarEditor } from '../components/basic/avatar/UserAvatarEditor';
 import CustomFieldsForm from '../components/CustomFieldsForm';
 import UserStatusMenu from '../components/basic/userStatus/UserStatusMenu';

client/account/AccountProfilePage.js

@@ -13,7 +13,7 @@ import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 import { useMethod } from '../contexts/ServerContext';
 import { useSetModal } from '../contexts/ModalContext';
 import { useUpdateAvatar } from '../hooks/useUpdateAvatar';
-import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
+import { getUserEmailAddress } from '../lib/getUserEmailAddress';
 import ActionConfirmModal from './ActionConfirmModal';
 
 const getInitialValues = (user) => ({

client/account/sidebarItems.js

@@ -3,7 +3,7 @@ import { HTML } from 'meteor/htmljs';
 import { hasPermission } from '../../app/authorization/client';
 import { createTemplateForComponent } from '../reactAdapters';
 import { settings } from '../../app/settings';
-import { createSidebarItems } from '../helpers/createSidebarItems';
+import { createSidebarItems } from '../lib/createSidebarItems';
 
 createTemplateForComponent('accountFlex', () => import('./AccountSidebar'), {
 	renderContainerView: () => HTML.DIV({ style: 'height: 100%; position: relative;' }), // eslint-disable-line new-cap

client/admin/apps/AppSettings.js

@@ -3,7 +3,7 @@ import { Box } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { MemoizedSetting } from '../settings/Setting';
-import { capitalize } from '../../helpers/capitalize';
+import { capitalize } from '../../lib/capitalize';
 import { useRouteParameter } from '../../contexts/RouterContext';
 import MarkdownText from '../../components/basic/MarkdownText';
 

client/admin/info/InformationRoute.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { usePermission } from '../../contexts/AuthorizationContext';
 import NotAuthorizedPage from '../../components/NotAuthorizedPage';
 import { useMethod, useServerInformation, useEndpoint } from '../../contexts/ServerContext';
-import { downloadJsonAsAFile } from '../../helpers/download';
+import { downloadJsonAs } from '../../lib/download';
 import InformationPage from './InformationPage';
 
 const InformationRoute = React.memo(function InformationRoute() {
@@ -61,7 +61,7 @@ const InformationRoute = React.memo(function InformationRoute() {
 		if (isLoading) {
 			return;
 		}
-		downloadJsonAsAFile(statistics, 'statistics');
+		downloadJsonAs(statistics, 'statistics');
 	};
 
 	if (canViewStatistics) {

client/admin/routes.js

@@ -1,6 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 
-import { createRouteGroup } from '../helpers/createRouteGroup';
+import { createRouteGroup } from '../lib/createRouteGroup';
 
 export const registerAdminRoute = createRouteGroup('admin', '/admin', () => import('./AdministrationRouter'));
 

client/admin/sidebarItems.js

@@ -3,7 +3,7 @@ import { Meteor } from 'meteor/meteor';
 
 import { hasPermission, hasRole } from '../../app/authorization/client';
 import { createTemplateForComponent } from '../reactAdapters';
-import { createSidebarItems } from '../helpers/createSidebarItems';
+import { createSidebarItems } from '../lib/createSidebarItems';
 
 createTemplateForComponent('adminFlex', () => import('./sidebar/AdminSidebar'), {
 	renderContainerView: () => HTML.DIV({ style: 'height: 100%; position: relative;' }), // eslint-disable-line new-cap

client/admin/users/UsersTable.js

@@ -4,7 +4,7 @@ import React, { useMemo, useCallback, useState } from 'react';
 
 import UserAvatar from '../../components/basic/avatar/UserAvatar';
 import GenericTable from '../../components/GenericTable';
-import { capitalize } from '../../helpers/capitalize';
+import { capitalize } from '../../lib/capitalize';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoute } from '../../contexts/RouterContext';
 import { useEndpointData } from '../../hooks/useEndpointData';

client/components/CustomFieldsForm.js

@@ -4,7 +4,7 @@ import { TextInput, Select, Field } from '@rocket.chat/fuselage';
 import { useSetting } from '../contexts/SettingsContext';
 import { useForm } from '../hooks/useForm';
 import { useTranslation } from '../contexts/TranslationContext';
-import { capitalize } from '../helpers/capitalize';
+import { capitalize } from '../lib/capitalize';
 
 const CustomTextInput = ({ name, required, minLength, maxLength, setState, state, className }) => {
 	const t = useTranslation();

client/components/basic/userStatus/UserStatus.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box } from '@rocket.chat/fuselage';
 
-import statusColors from '../../../helpers/statusColors';
+import statusColors from '../../../lib/statusColors';
 
 const UserStatus = React.memo(({ status, ...props }) => <Box size='x12' borderRadius='full' backgroundColor={statusColors[status]} {...props}/>);
 

client/hooks/useForm.ts

@@ -1,6 +1,6 @@
 import { useCallback, useReducer, useMemo, ChangeEvent } from 'react';
 
-import { capitalize } from '../helpers/capitalize';
+import { capitalize } from '../lib/capitalize';
 
 type Field = {
 	name: string;

client/lib/capitalize.spec.ts

@@ -0,0 +1,43 @@
+import assert from 'assert';
+
+import { describe, it } from 'mocha';
+
+import { capitalize } from './capitalize';
+
+describe('capitalize', () => {
+	it('should convert "xyz" to "Xyz"', () => {
+		assert.equal(capitalize('xyz'), 'Xyz');
+	});
+
+	it('should convert "xyz xyz" to "Xyz xyz"', () => {
+		assert.equal(capitalize('xyz xyz'), 'Xyz xyz');
+	});
+
+	it('should convert " xyz" to " xyz"', () => {
+		assert.equal(capitalize(' xyz'), ' xyz');
+	});
+
+	it('should convert undefined to ""', () => {
+		assert.equal(capitalize(undefined as unknown as string), '');
+	});
+
+	it('should convert null to ""', () => {
+		assert.equal(capitalize(null as unknown as string), '');
+	});
+
+	it('should convert false to ""', () => {
+		assert.equal(capitalize(false as unknown as string), '');
+	});
+
+	it('should convert true to ""', () => {
+		assert.equal(capitalize(true as unknown as string), '');
+	});
+
+	it('should convert 0 to ""', () => {
+		assert.equal(capitalize(0 as unknown as string), '');
+	});
+
+	it('should convert 1 to ""', () => {
+		assert.equal(capitalize(1 as unknown as string), '');
+	});
+});

client/lib/capitalize.ts

@@ -0,0 +1,7 @@
+export const capitalize = (s: string): string => {
+	if (typeof s !== 'string') {
+		return '';
+	}
+
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};

client/helpers/createRouteGroup.js → client/lib/createRouteGroup.ts

@@ -1,14 +1,24 @@
 import { FlowRouter } from 'meteor/kadira:flow-router';
+import type { ElementType } from 'react';
 
 import { renderRouteComponent } from '../reactAdapters';
 
-export const createRouteGroup = (name, prefix, importRouter) => {
+type RouteRegister = {
+	(path: string, params: {
+		name: string;
+		lazyRouteComponent: () => Promise<ElementType>;
+		props: Record<string, unknown>;
+		action: (params?: Record<string, string>, queryParams?: Record<string, string>) => void;
+	}): void;
+};
+
+export const createRouteGroup = (name: string, prefix: string, importRouter: () => Promise<ElementType>): RouteRegister => {
 	const routeGroup = FlowRouter.group({
 		name,
 		prefix,
 	});
 
-	const registerRoute = (path, { lazyRouteComponent, props, action, ...options } = {}) => {
+	const registerRoute: RouteRegister = (path, { lazyRouteComponent, props, action, ...options }) => {
 		routeGroup.route(path, {
 			...options,
 			action: (params, queryParams) => {