Chore: Attachment Definitions and UiKitDefinitions

.eslintrc

@@ -118,7 +118,8 @@
         ],
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-unused-vars": ["error", {
-          "argsIgnorePattern": "^_"
+          "argsIgnorePattern": "^_",
+          "ignoreRestSiblings": true
         }]
       },
       "env": {

.storybook/main.js

@@ -3,6 +3,9 @@ const { resolve, relative, join } = require('path');
 const webpack = require('webpack');
 
 module.exports = {
+	typescript: {
+		reactDocgen: 'none',
+	},
 	stories: [
 		'../app/**/*.stories.{js,tsx}',
 		'../client/**/*.stories.{js,tsx}',

app/apps/lib/misc/determineFileType.js

@@ -2,8 +2,8 @@ import fileType from 'file-type';
 
 import { mime as MIME } from '../../../utils/lib/mimeTypes';
 
-export function determineFileType(buffer, details) {
-	const mime = MIME.lookup(details.name);
+export function determineFileType(buffer, name) {
+	const mime = MIME.lookup(name);
 
 	if (mime) {
 		return Array.isArray(mime) ? mime[0] : mime;

app/apps/server/bridges/uploads.ts

@@ -7,6 +7,14 @@ import { FileUpload } from '../../../file-upload/server';
 import { determineFileType } from '../../lib/misc/determineFileType';
 import { AppServerOrchestrator } from '../orchestrator';
 
+
+const getUploadDetails = (details: IUploadDetails): Partial<IUploadDetails> => {
+	if (details.visitorToken) {
+		const { userId, ...result } = details;
+		return result;
+	}
+	return details;
+};
 export class AppUploadBridge extends UploadBridge {
 	// eslint-disable-next-line no-empty-function
 	constructor(private readonly orch: AppServerOrchestrator) {
@@ -42,20 +50,13 @@ export class AppUploadBridge extends UploadBridge {
 			throw new Error('Missing user to perform the upload operation');
 		}
 
-		if (details.visitorToken) {
-			delete details.userId;
-		}
-
 		const fileStore = FileUpload.getStore('Uploads');
-		const insertSync = details.userId
-			? (...args: any[]): Function => Meteor.runAsUser(details.userId, () => fileStore.insertSync(...args))
-			: Meteor.wrapAsync(fileStore.insert.bind(fileStore));
 
-		details.type = determineFileType(buffer, details);
+		details.type = determineFileType(buffer, details.name);
 
 		return new Promise(Meteor.bindEnvironment((resolve, reject) => {
 			try {
-				const uploadedFile = insertSync(details, buffer);
+				const uploadedFile = fileStore.insertSync(getUploadDetails(details), buffer);
 
 				if (details.visitorToken) {
 					Meteor.call('sendFileLivechatMessage', details.rid, details.visitorToken, uploadedFile);

app/integrations/server/lib/triggerHandler.js

@@ -15,7 +15,7 @@ import { getRoomByNameOrIdWithOptionToJoin, processWebhookMessage } from '../../
 import { logger } from '../logger';
 import { integrations } from '../../lib/rocketchat';
 
-integrations.triggerHandler = new class RocketChatIntegrationHandler {
+export class RocketChatIntegrationHandler {
 	constructor() {
 		this.vm = vm;
 		this.successResults = [200, 201, 202];
@@ -805,6 +805,6 @@ integrations.triggerHandler = new class RocketChatIntegrationHandler {
 
 		this.executeTriggerUrl(history.url, integration, { event, message, room, owner, user });
 	}
-}();
-
-export { integrations };
+}
+const triggerHandler = new RocketChatIntegrationHandler();
+export { integrations, triggerHandler };

app/integrations/server/methods/outgoing/replayOutgoingIntegration.js

@@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 
 import { hasPermission } from '../../../../authorization';
 import { Integrations, IntegrationHistory } from '../../../../models';
-import { integrations } from '../../../lib/rocketchat';
+import { triggerHandler } from '../../lib/triggerHandler';
 
 Meteor.methods({
 	replayOutgoingIntegration({ integrationId, historyId }) {
@@ -26,7 +26,7 @@ Meteor.methods({
 			throw new Meteor.Error('error-invalid-integration-history', 'Invalid Integration History', { method: 'replayOutgoingIntegration' });
 		}
 
-		integrations.triggerHandler.replay(integration, history);
+		triggerHandler.replay(integration, history);
 
 		return true;
 	},

app/integrations/server/triggers.js

@@ -1,9 +1,9 @@
 import { callbacks } from '../../callbacks';
-import { integrations } from '../lib/rocketchat';
+import { triggerHandler } from './lib/triggerHandler';
 
 const callbackHandler = function _callbackHandler(eventType) {
 	return function _wrapperFunction(...args) {
-		return integrations.triggerHandler.executeTriggers(eventType, ...args);
+		return triggerHandler.executeTriggers(eventType, ...args);
 	};
 };
 

app/livechat/server/business-hour/Default.ts

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { AbstractBusinessHourType, IBusinessHourType } from './AbstractBusinessHour';
 import { ILivechatBusinessHour, LivechatBusinessHourTypes } from '../../../../definition/ILivechatBusinessHour';
 
-interface IExtraProperties extends ILivechatBusinessHour {
+interface IExtraProperties {
 	timezoneName?: string;
 }
 
@@ -14,15 +14,16 @@ export class DefaultBusinessHour extends AbstractBusinessHourType implements IBu
 		return this.BusinessHourRepository.findOneDefaultBusinessHour();
 	}
 
-	async saveBusinessHour(businessHourData: IExtraProperties): Promise<ILivechatBusinessHour> {
+	async saveBusinessHour(businessHour: ILivechatBusinessHour & IExtraProperties): Promise<ILivechatBusinessHour> {
+		const { timezoneName, ...businessHourData } = businessHour;
+
 		if (!businessHourData._id) {
 			return businessHourData;
 		}
 		businessHourData.timezone = {
-			name: businessHourData.timezoneName || moment.tz.guess(),
-			utc: this.getUTCFromTimezone(businessHourData.timezoneName),
+			name: timezoneName || moment.tz.guess(),
+			utc: this.getUTCFromTimezone(timezoneName),
 		};
-		delete businessHourData.timezoneName;
 		await this.baseSaveBusinessHour(businessHourData);
 		return businessHourData;
 	}

client/components/Message/Attachments/ActionAttachtment.tsx

@@ -1,28 +1,10 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
-import { AttachmentProps } from '.';
-// DEPRECATED
+import { MessageAttachmentAction } from '../../../../definition/IMessage/MessageAttachment/MessageAttachmentAction';
 
-type Action = {
-	msgId?: string;
-	type: 'button';
-	text: string;
-	msg?: string;
-	url?: string;
-	image_url?: string;
-	is_webview?: true;
-	msg_in_chat_window?: true;
-	msg_processing_type?: 'sendMessage' | 'respondWithMessage' | 'respondWithQuotedMessage';
-};
-
-export type ActionAttachmentProps = {
-	button_alignment: 'horizontal' | 'vertical';
-	actions: Array<Action>;
-} & AttachmentProps;
-
-export const ActionAttachment: FC<ActionAttachmentProps> = ({ actions }) => (
-	<ButtonGroup mb='x4' {...{ small: true }}>
+export const ActionAttachment: FC<MessageAttachmentAction> = ({ actions }) => (
+	<ButtonGroup mb='x4' {...({ small: true } as any)}>
 		{actions
 			.filter(
 				({ type, msg_in_chat_window: msgInChatWindow, url, image_url: image, text }) =>

client/components/Message/Attachments/Attachment/Block.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 
 import Attachment from './Attachment';
 
-const Block: FC<{ pre?: JSX.Element | string; color?: string }> = ({
+const Block: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({
 	pre,
 	color = 'neutral-600',
 	children,

client/components/Message/Attachments/Attachment/Download.tsx

@@ -3,11 +3,9 @@ import React, { ComponentProps, FC } from 'react';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import Action from './Action';
 
-const Download: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { href: string }> = ({
-	title,
-	href,
-	...props
-}) => {
+const Download: FC<
+	Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string }
+> = ({ title, href, ...props }) => {
 	const t = useTranslation();
 	return (
 		<Action

client/components/Message/Attachments/Attachment/TitleLink.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import Title from './Title';
 
-const TitleLink: FC<{ link: string; title?: string }> = ({ link, title }) => (
+const TitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
 	<Title
 		is='a'
 		href={`${link}?download`}

client/components/Message/Attachments/Attachments.stories.js → client/components/Message/Attachments/Attachments.stories.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/camelcase */
+import React, { ReactElement } from 'react';
 
 import Attachments from '.';
+import { FileAttachmentProps } from '../../../../definition/IMessage/MessageAttachment/Files/FileAttachmentProps';
+import { FileProp } from '../../../../definition/IMessage/MessageAttachment/Files/FileProp';
+import { MessageAttachmentDefault } from '../../../../definition/IMessage/MessageAttachment/MessageAttachmentDefault';
 
 export default {
 	title: 'Message/Attachments',
 	component: Attachments,
+	decorators: [(storyFn: any): ReactElement => storyFn()],
 };
 
-const field = {
+const field: MessageAttachmentDefault = {
 	color: '#ff0000',
 	text: 'Yay for gruggy!',
 	pretext: 'Pre Text',
@@ -43,33 +49,38 @@ const field = {
 	],
 };
 
-const image = {
-	ts: '2016-12-09T16:53:06.761Z',
-	collapsed: false,
+const image: FileAttachmentProps = {
+	ts: new Date('2016-12-09T16:53:06.761Z'),
+	// collapsed: false,
 	title: 'Attachment Image Example',
 	title_link: 'https://youtube.com',
 	title_link_download: true,
 	image_url: 'https://rocket.chat/wp-content/uploads/2020/07/devices-screens-768x433.png.webp',
 	type: 'file',
+	image_type: 'png',
 };
 
-const video = {
-	ts: '2016-12-09T16:53:06.761Z',
+const video: FileAttachmentProps = {
+	ts: new Date('2016-12-09T16:53:06.761Z'),
 	collapsed: false,
 	title: 'Attachment Video Example',
 	title_link: 'https://youtube.com',
 	title_link_download: true,
 	video_url: 'http://www.w3schools.com/tags/movie.mp4',
+	video_size: 10000,
+	video_type: 'mp4',
 	type: 'file',
 };
 
-const audio = {
-	ts: '2016-12-09T16:53:06.761Z',
+const audio: FileAttachmentProps = {
+	ts: new Date('2016-12-09T16:53:06.761Z'),
 	collapsed: false,
 	title: 'Attachment Audio Example',
 	title_link: 'https://youtube.com',
 	title_link_download: true,
 	audio_url: 'http://www.w3schools.com/tags/horse.mp3',
+	audio_type: 'mp3',
+	audio_size: 10000,
 	type: 'file',
 };
 
@@ -80,21 +91,21 @@ const message = {
 	alias: 'Gruggy',
 	emoji: ':smirk:',
 	avatar: 'https://avatars2.githubusercontent.com/u/5263975?s=60&v=3',
-	attachments: [field, image, video, audio],
+	attachments: [field, image],
 };
 
-window.__meteor_runtime_config__ = { ROOT_URL_PATH_PREFIX: '' };
+// window.__meteor_runtime_config__ = { ROOT_URL_PATH_PREFIX: '' };
 
 export const Default = () => <Attachments attachments={message.attachments} />;
 
 export const Fields = () => <Attachments attachments={[field]} />;
 
 export const FailingImage = () => (
-	<Attachments attachments={[{ ...image, image_url: 'invalid.url' }]} />
+	<Attachments attachments={[{ ...image, image_url: 'invalid.url' } as FileAttachmentProps]} />
 );
 
 export const Image = () => <Attachments attachments={[image]} />;
 
-export const Video = () => <Attachments attachments={[video]} />;
+export const Video = () => <Attachments attachments={[video]} file={{} as FileProp} />;
 
-export const Audio = () => <Attachments attachments={[audio]} />;
+export const Audio = () => <Attachments attachments={[audio]} file={{} as FileProp} />;

client/components/Message/Attachments/Attachments.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
+import { FileProp } from '../../../../definition/IMessage/MessageAttachment/Files/FileProp';
+import { MessageAttachmentBase } from '../../../../definition/IMessage/MessageAttachment/MessageAttachmentBase';
 import { useBlockRendered } from '../hooks/useBlockRendered';
-import { AttachmentProps } from './AttachmentProps';
-import { FileProp } from './FileProp';
 import Item from './Item';
 
-const Attachments: FC<{ attachments: Array<AttachmentProps>; file?: FileProp }> = ({
+const Attachments: FC<{ attachments: Array<MessageAttachmentBase>; file?: FileProp }> = ({
 	attachments = null,
 	file,
 }): any => {

client/components/Message/Attachments/DefaultAttachment.tsx

@@ -1,56 +1,23 @@
-import React, { ComponentProps, FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
-import { AttachmentProps } from '.';
+import { isActionAttachment } from '../../../../definition/IMessage/MessageAttachment/MessageAttachmentAction';
+import {
+	MarkdownFields,
+	MessageAttachmentDefault,
+} from '../../../../definition/IMessage/MessageAttachment/MessageAttachmentDefault';
 import MarkdownText from '../../MarkdownText';
-import { ActionAttachment, ActionAttachmentProps } from './ActionAttachtment';
+import { ActionAttachment } from './ActionAttachtment';
 import Attachment from './Attachment';
 import FieldsAttachment from './FieldsAttachment';
-import { Dimensions } from './components/Dimensions';
 import { useCollapse } from './hooks/useCollapse';
 
-type MarkdownFields = 'text' | 'pretext' | 'fields';
-
-type DefaultAttachmentProps = {
-	collapsed?: true;
-
-	author_icon?: string;
-	author_link?: string;
-	author_name?: string;
-
-	// TODO: replace this component props type with a payload-based type because
-	// `value` comes as `string` and is passed as `ReactNode`
-	fields: ComponentProps<typeof FieldsAttachment>['fields'];
-
-	// footer
-	// footer_icon
-
-	image_url?: string;
-	image_dimensions?: Dimensions;
-
-	mrkdwn_in?: Array<MarkdownFields>;
-	pretext?: string;
-	text?: string;
-
-	thumb_url?: string;
-
-	title?: string;
-	title_link?: string;
-
-	ts?: Date;
-
-	color?: string;
-};
-
-const isActionAttachment = (attachment: AttachmentProps): attachment is ActionAttachmentProps =>
-	'actions' in attachment;
-
 const applyMarkdownIfRequires = (
-	list: DefaultAttachmentProps['mrkdwn_in'] = ['text', 'pretext'],
+	list: MessageAttachmentDefault['mrkdwn_in'] = ['text', 'pretext'],
 	key: MarkdownFields,
 	text: string,
 ): ReactNode => (list?.includes(key) ? <MarkdownText variant='inline' content={text} /> : text);
 
-const DefaultAttachment: FC<DefaultAttachmentProps> = (attachment) => {
+const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);
 
 	return (