From 5101ab4769d36ded4383787f02ddca9385b7b8f9 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Thu, 26 May 2022 11:07:17 -0300
Subject: [PATCH] Chore: update @rocket.chat/ui-kit to 0.31.11 (#4203)

* Chore: Update UiKit

* fix interfaces and plain_text and mrkdwn
---
 app/containers/UIKit/Actions.tsx              |  4 +-
 app/containers/UIKit/Context.tsx              |  4 +-
 app/containers/UIKit/DatePicker.tsx           |  4 +-
 app/containers/UIKit/Image.tsx                |  6 +--
 app/containers/UIKit/Input.tsx                |  4 +-
 app/containers/UIKit/MultiSelect/index.tsx    |  6 +--
 app/containers/UIKit/Section.tsx              |  4 +-
 app/containers/UIKit/index.tsx                | 48 ++++++++++++++-----
 app/containers/UIKit/interfaces.ts            | 10 +---
 app/containers/UIKit/utils.ts                 |  6 +--
 app/externalModules.d.ts                      |  1 -
 .../CreateDiscussionView/SelectUsers.tsx      |  4 +-
 app/views/LivechatEditView.tsx                |  4 +-
 app/views/RoomInfoEditView/index.tsx          |  4 +-
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++--
 16 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/app/containers/UIKit/Actions.tsx b/app/containers/UIKit/Actions.tsx
index c8bf9ff5..a23b030a 100644
--- a/app/containers/UIKit/Actions.tsx
+++ b/app/containers/UIKit/Actions.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import Button from '../Button';
 import I18n from '../../i18n';
@@ -10,7 +10,7 @@ export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 
 	const Elements = () => (
-		<>{renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser))}</>
+		<>{renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser))}</>
 	);
 
 	return (
diff --git a/app/containers/UIKit/Context.tsx b/app/containers/UIKit/Context.tsx
index e3958014..e6bde5d2 100644
--- a/app/containers/UIKit/Context.tsx
+++ b/app/containers/UIKit/Context.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { IContext } from './interfaces';
 
@@ -13,5 +13,5 @@ const styles = StyleSheet.create({
 });
 
 export const Context = ({ elements, parser }: IContext) => (
-	<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BLOCK_CONTEXT.CONTEXT, parser))}</View>
+	<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BlockContext.CONTEXT, parser))}</View>
 );
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 0b8bff20..f8ddaebc 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
 import Touchable from 'react-native-platform-touchable';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import moment from 'moment';
 
 import Button from '../Button';
@@ -58,7 +58,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 
 	let button = placeholder ? <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} /> : null;
 
-	if (context === BLOCK_CONTEXT.FORM) {
+	if (context === BlockContext.FORM) {
 		button = (
 			<Touchable
 				onPress={() => onShow(!show)}
diff --git a/app/containers/UIKit/Image.tsx b/app/containers/UIKit/Image.tsx
index d35874f2..b55dc460 100644
--- a/app/containers/UIKit/Image.tsx
+++ b/app/containers/UIKit/Image.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import FastImage from '@rocket.chat/react-native-fast-image';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import ImageContainer from '../message/Image';
 import Navigation from '../../lib/navigation/appNavigation';
@@ -36,9 +36,9 @@ export const Media = ({ element }: IImage) => {
 
 const genericImage = (element: IElement, context?: number) => {
 	switch (context) {
-		case BLOCK_CONTEXT.SECTION:
+		case BlockContext.SECTION:
 			return <Thumb element={element} />;
-		case BLOCK_CONTEXT.CONTEXT:
+		case BlockContext.CONTEXT:
 			return <ThumbContext element={element} />;
 		default:
 			return <Media element={element} />;
diff --git a/app/containers/UIKit/Input.tsx b/app/containers/UIKit/Input.tsx
index 70538701..fa66d670 100644
--- a/app/containers/UIKit/Input.tsx
+++ b/app/containers/UIKit/Input.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
@@ -38,7 +38,7 @@ export const Input = ({ element, parser, label, description, error, hint, theme
 			<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text>
 		) : null}
 		{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null}
-		{parser.renderInputs({ ...element }, BLOCK_CONTEXT.FORM, parser)}
+		{parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
 		{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
 		{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
 	</View>
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index f669e7ba..33bd3da4 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -10,7 +10,7 @@ import {
 	View,
 	TextStyle
 } from 'react-native';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import Button from '../../Button';
 import FormTextInput from '../../TextInput/FormTextInput';
@@ -19,7 +19,7 @@ import { themes } from '../../../lib/constants';
 import I18n from '../../../i18n';
 import { isIOS } from '../../../utils/deviceInfo';
 import { useTheme } from '../../../theme';
-import { BlockContext, IText } from '../interfaces';
+import { IText } from '../interfaces';
 import Chips from './Chips';
 import Items from './Items';
 import Input from './Input';
@@ -172,7 +172,7 @@ export const MultiSelect = React.memo(
 			</Input>
 		);
 
-		if (context === BLOCK_CONTEXT.FORM) {
+		if (context === BlockContext.FORM) {
 			const items: any = options.filter((option: any) => selected.includes(option.value));
 			button = (
 				<Input
diff --git a/app/containers/UIKit/Section.tsx b/app/containers/UIKit/Section.tsx
index ce549060..7c5e4f99 100644
--- a/app/containers/UIKit/Section.tsx
+++ b/app/containers/UIKit/Section.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { themes } from '../../lib/constants';
 import { IAccessoryComponent, IFields, ISection } from './interfaces';
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 });
 
 const Accessory = ({ element, parser }: IAccessoryComponent) =>
-	parser.renderAccessories({ ...element }, BLOCK_CONTEXT.SECTION, parser);
+	parser.renderAccessories({ ...element }, BlockContext.SECTION, parser);
 
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index 4026afa4..eef565f7 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -1,7 +1,15 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useContext } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { BLOCK_CONTEXT, UiKitParserMessage, UiKitParserModal, uiKitMessage, uiKitModal } from '@rocket.chat/ui-kit';
+import {
+	UiKitParserMessage,
+	UiKitParserModal,
+	uiKitMessage,
+	uiKitModal,
+	BlockContext,
+	Markdown as IMarkdown,
+	PlainText
+} from '@rocket.chat/ui-kit';
 
 import Markdown, { MarkdownPreview } from '../markdown';
 import Button from '../Button';
@@ -20,7 +28,7 @@ import { Input } from './Input';
 import { DatePicker } from './DatePicker';
 import { Overflow } from './Overflow';
 import { ThemeContext } from '../../theme';
-import { BlockContext, IActions, IButton, IElement, IInputIndex, IParser, ISection, IText } from './interfaces';
+import { IActions, IButton, IElement, IInputIndex, IParser, ISection } from './interfaces';
 
 const styles = StyleSheet.create({
 	input: {
@@ -42,22 +50,33 @@ const styles = StyleSheet.create({
 
 const plainText = ({ text } = { text: '' }) => text;
 
-class MessageParser extends UiKitParserMessage {
+class MessageParser extends UiKitParserMessage<React.ReactElement> {
 	get current() {
 		return this as unknown as IParser;
 	}
 
-	text({ text, type }: Partial<IText> = { text: '' }, context: BlockContext) {
+	plain_text(element: PlainText, context: BlockContext): React.ReactElement {
 		const { theme } = useContext(ThemeContext);
-		if (type !== 'mrkdwn') {
-			return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
-		}
 
-		const isContext = context === BLOCK_CONTEXT.CONTEXT;
+		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
-			return <MarkdownPreview msg={text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />;
+			return (
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+			);
 		}
-		return <Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
+		return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
+	}
+
+	mrkdwn(element: IMarkdown, context: BlockContext) {
+		const { theme } = useContext(ThemeContext);
+
+		const isContext = context === BlockContext.CONTEXT;
+		if (isContext) {
+			return (
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+			);
+		}
+		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {
@@ -132,10 +151,13 @@ class MessageParser extends UiKitParserMessage {
 	}
 }
 
-class ModalParser extends UiKitParserModal {
+// plain_text and mrkdwn functions are created in MessageParser and the ModalParser's constructor use the same functions
+// @ts-ignore
+class ModalParser extends UiKitParserModal<React.ReactElement> {
 	constructor() {
 		super();
 		Object.getOwnPropertyNames(MessageParser.prototype).forEach(method => {
+			// @ts-ignore
 			ModalParser.prototype[method] = ModalParser.prototype[method] || MessageParser.prototype[method];
 		});
 	}
@@ -188,7 +210,7 @@ class ModalParser extends UiKitParserModal {
 export const messageParser = new MessageParser();
 export const modalParser = new ModalParser();
 
-export const UiKitMessage = uiKitMessage(messageParser);
-export const UiKitModal = uiKitModal(modalParser);
+export const UiKitMessage = uiKitMessage(messageParser, { engine: 'rocket.chat' }) as any;
+export const UiKitModal = uiKitModal(modalParser) as any;
 
 export const UiKitComponent = ({ render, blocks }: any) => render(blocks);
diff --git a/app/containers/UIKit/interfaces.ts b/app/containers/UIKit/interfaces.ts
index 08c7aaf4..eed4582d 100644
--- a/app/containers/UIKit/interfaces.ts
+++ b/app/containers/UIKit/interfaces.ts
@@ -1,3 +1,5 @@
+import { BlockContext } from '@rocket.chat/ui-kit';
+
 import { TSupportedThemes } from '../../theme';
 
 export enum ElementTypes {
@@ -22,14 +24,6 @@ export enum ElementTypes {
 	MARKDOWN = 'mrkdwn'
 }
 
-export enum BlockContext {
-	BLOCK,
-	SECTION,
-	ACTION,
-	FORM,
-	CONTEXT
-}
-
 export enum ActionTypes {
 	ACTION = 'blockAction',
 	SUBMIT = 'viewSubmit',
diff --git a/app/containers/UIKit/utils.ts b/app/containers/UIKit/utils.ts
index 7b00a7be..0336e6cf 100644
--- a/app/containers/UIKit/utils.ts
+++ b/app/containers/UIKit/utils.ts
@@ -1,8 +1,8 @@
 /* eslint-disable no-shadow */
 import React, { useContext, useState } from 'react';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
-import { BlockContext, IText } from './interfaces';
+import { IText } from './interfaces';
 
 export const textParser = ([{ text }]: IText[]) => text;
 
@@ -41,7 +41,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUse
 
 	const error = errors && actionId && errors[actionId];
 
-	if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
+	if ([BlockContext.SECTION, BlockContext.ACTION].includes(context)) {
 		return [
 			{
 				loading,
diff --git a/app/externalModules.d.ts b/app/externalModules.d.ts
index bec0d810..1090dac9 100644
--- a/app/externalModules.d.ts
+++ b/app/externalModules.d.ts
@@ -4,7 +4,6 @@ declare module 'commonmark-react-renderer';
 declare module 'remove-markdown';
 declare module 'react-native-image-progress';
 declare module 'react-native-ui-lib/keyboard';
-declare module '@rocket.chat/ui-kit';
 declare module '@rocket.chat/sdk';
 declare module 'react-native-config-reader';
 declare module 'react-native-keycommands';
diff --git a/app/views/CreateDiscussionView/SelectUsers.tsx b/app/views/CreateDiscussionView/SelectUsers.tsx
index 2a2b5de0..0e662e20 100644
--- a/app/views/CreateDiscussionView/SelectUsers.tsx
+++ b/app/views/CreateDiscussionView/SelectUsers.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Text } from 'react-native';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import debounce from '../../utils/debounce';
 import { avatarURL } from '../../utils/avatar';
@@ -61,7 +61,7 @@ const SelectUsers = ({
 				}))}
 				onClose={() => setUsers(users.filter((u: IUser) => selected.includes(u.name)))}
 				placeholder={{ text: `${I18n.t('Select_Users')}...` }}
-				context={BLOCK_CONTEXT.FORM}
+				context={BlockContext.FORM}
 				multiselect
 			/>
 		</>
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index bbbcad59..40d9bf10 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -3,7 +3,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import { RouteProp } from '@react-navigation/native';
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { TSupportedThemes, withTheme } from '../theme';
 import { themes } from '../lib/constants';
@@ -273,7 +273,7 @@ const LivechatEditView = ({
 						}}
 						placeholder={{ text: I18n.t('Tags') }}
 						value={tagParamSelected}
-						context={BLOCK_CONTEXT.FORM}
+						context={BlockContext.FORM}
 						multiselect
 						disabled={!permissions[1]}
 						inputStyle={styles.multiSelect}
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index eb641144..0fb61c07 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Q } from '@nozbe/watermelondb';
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { dequal } from 'dequal';
 import isEmpty from 'lodash/isEmpty';
 import { Alert, Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
@@ -479,7 +479,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 				onChange={({ value }: { value: boolean }) => this.setState({ systemMessages: value })}
 				placeholder={{ text: I18n.t('Hide_System_Messages') }}
 				value={systemMessages as string[]}
-				context={BLOCK_CONTEXT.FORM}
+				context={BlockContext.FORM}
 				multiselect
 			/>
 		);
diff --git a/package.json b/package.json
index 96ed82a1..7bddf8e8 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
 		"@rocket.chat/message-parser": "0.30.0",
 		"@rocket.chat/react-native-fast-image": "^8.2.0",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
-		"@rocket.chat/ui-kit": "0.13.0",
+		"@rocket.chat/ui-kit": "^0.31.11",
 		"bytebuffer": "^5.0.1",
 		"color2k": "1.2.4",
 		"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",
diff --git a/yarn.lock b/yarn.lock
index d253de45..93411639 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4038,10 +4038,10 @@
     tiny-events "^1.0.1"
     universal-websocket-client "^1.0.2"
 
-"@rocket.chat/ui-kit@0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.13.0.tgz#0b4d43584f931d5e8af22a29a4c741d5f7314bb8"
-  integrity sha512-xY8xc98KGshyOJM2GCLnYE9TTevViO7bVeY1HVRB2anDutgHRFgt6qFW1eiaB8s+6J+5I6VTE3k0jzQeaRsAeg==
+"@rocket.chat/ui-kit@^0.31.11":
+  version "0.31.11"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.31.11.tgz#701e5bccf43abe2a9bd54cd70220a21ae83c521d"
+  integrity sha512-gPrBAZAPK64DpscKdJqIGbCNrElBOa/dUvB7Ll0KLsC5yClClPPs6tAmw29f7gs/+rKEYYXkRtj8HiyPXnlJ5Q==
 
 "@sideway/address@^4.1.3":
   version "4.1.4"