feat: add message pinned icon (#5598)

* feat: add message pinned icon

* fix: add pinned to user

* test: add e2e

* test: updates tests

* test: update storyshot

* update tests

* update snapshot

* fix: update color

---------

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/message/Components/RightIcons/Pinned.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { CustomIcon } from '../../../CustomIcon';
+import styles from '../../styles';
+
+const Pinned = ({ pinned, testID }: { pinned?: boolean; testID?: string }): React.ReactElement | null => {
+	if (pinned) return <CustomIcon testID={testID} name='pin' size={16} style={styles.rightIcons} />;
+	return null;
+};
+
+export default Pinned;

app/containers/message/Components/RightIcons/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import Encrypted from './Encrypted';
+import { MessageType } from '../../../../definitions';
 import Edited from './Edited';
+import Encrypted from './Encrypted';
 import MessageError from './MessageError';
+import Pinned from './Pinned';
 import ReadReceipt from './ReadReceipt';
 import Translated from './Translated';
-import { MessageType } from '../../../../definitions';
 
 const styles = StyleSheet.create({
 	actionIcons: {
@@ -22,10 +23,21 @@ interface IRightIcons {
 	unread?: boolean;
 	hasError: boolean;
 	isTranslated: boolean;
+	pinned?: boolean;
 }
 
-const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread, isTranslated }: IRightIcons) => (
+const RightIcons = ({
+	type,
+	msg,
+	isEdited,
+	hasError,
+	isReadReceiptEnabled,
+	unread,
+	isTranslated,
+	pinned
+}: IRightIcons): React.ReactElement => (
 	<View style={styles.actionIcons}>
+		<Pinned pinned={pinned} testID={`${msg}-pinned`} />
 		<Encrypted type={type} />
 		<Edited testID={`${msg}-edited`} isEdited={isEdited} />
 		<MessageError hasError={hasError} />

app/containers/message/Message.stories.tsx

@@ -127,6 +127,13 @@ export const Edited = () => (
 	</>
 );
 
+export const Pinned = () => (
+	<>
+		<Message msg='Message header' pinned />
+		<Message msg='Message without header' pinned isHeader={false} />
+	</>
+);
+
 export const Translated = () => (
 	<>
 		<Message msg='Message header' isTranslated />

app/containers/message/Message.tsx

@@ -117,6 +117,7 @@ const Message = React.memo((props: IMessage) => {
 						hasError={props.hasError}
 						isReadReceiptEnabled={props.isReadReceiptEnabled}
 						unread={props.unread}
+						pinned={props.pinned}
 						isTranslated={props.isTranslated}
 					/>
 				) : null}

app/containers/message/User.tsx

@@ -60,6 +60,7 @@ interface IMessageUser {
 	isEdited: boolean;
 	isReadReceiptEnabled?: boolean;
 	unread?: boolean;
+	pinned?: boolean;
 	isTranslated: boolean;
 }
 
@@ -124,6 +125,7 @@ const User = React.memo(
 						hasError={hasError}
 						isReadReceiptEnabled={props.isReadReceiptEnabled}
 						unread={props.unread}
+						pinned={props.pinned}
 						isTranslated={isTranslated}
 					/>
 				</View>

app/containers/message/index.tsx

@@ -390,7 +390,8 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 			autoTranslate: autoTranslateMessage,
 			replies,
 			md,
-			comment
+			comment,
+			pinned
 		} = item;
 
 		let message = msg;
@@ -485,6 +486,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					isTranslated={isTranslated}
 					isBeingEdited={isBeingEdited}
 					isPreview={isPreview}
+					pinned={pinned}
 				/>
 			</MessageContext.Provider>
 		);

app/containers/message/interfaces.ts

@@ -64,6 +64,7 @@ export interface IMessageContent {
 	hasError: boolean;
 	isHeader: boolean;
 	isTranslated: boolean;
+	pinned?: boolean;
 }
 
 export interface IMessageEmoji {

e2e/tests/room/03-roomactions.spec.ts

@@ -194,7 +194,10 @@ describe('Room actions screen', () => {
 
 				// Pin the message
 				await pinMessage(messageToPin);
-
+				// verify pin icon
+				await waitFor(element(by.id(`${messageToPin}-pinned`)))
+					.toExist()
+					.withTimeout(6000);
 				// Back into Room Actions
 				await element(by.id('room-header')).tap();
 				await waitFor(element(by.id('room-actions-view')))
@@ -220,6 +223,10 @@ describe('Room actions screen', () => {
 				await waitFor(element(by[textMatcher](messageToPin).withAncestor(by.id('pinned-messages-view'))))
 					.not.toExist()
 					.withTimeout(6000);
+				// verify pin icon
+				await waitFor(element(by.id(`${messageToPin}-pinned`)))
+					.not.toExist()
+					.withTimeout(6000);
 				await backToActions();
 			});
 		});