feat: Attribute Based Access Control (ABAC) (#6856)

Author: diegolmello

android/app/src/main/assets/fonts/custom.ttf

@@ -26,7 +26,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 			hide();
 			item?.onPress();
 		} else {
-			EventEmitter.emit(LISTENER, { message: I18n.t('You_dont_have_permission_to_perform_this_action') });
+			EventEmitter.emit(LISTENER, { message: item?.disabledReason || I18n.t('You_dont_have_permission_to_perform_this_action') });
 		}
 	};
 

app/containers/ActionSheet/Item.tsx

@@ -14,6 +14,7 @@ export type TActionSheetOptionsItem = {
 	onPress: () => void;
 	right?: () => React.ReactElement;
 	enabled?: boolean;
+	disabledReason?: string;
 };
 
 export type TActionSheetOptions = {

app/containers/ActionSheet/Provider.tsx

@@ -106,6 +106,7 @@ export const mappedIcons = {
 	'google-monochromatic': 59657,
 	'group-by-type': 59757,
 	'hamburguer': 59758,
+	'hash-shield': 59878,
 	'history': 59759,
 	'home': 59760,
 	'ignore': 59740,
@@ -202,6 +203,7 @@ export const mappedIcons = {
 	'sun': 59847,
 	'support': 59848,
 	'team': 59849,
+	'team-shield': 59877,
 	'teams': 59751,
 	'teams-private': 59750,
 	'text-format': 59839,

app/containers/CustomIcon/mappedIcons.js

@@ -18,6 +18,8 @@ import { Icon } from '.';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
 import { CustomIcon } from '../CustomIcon';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import EventEmitter from '../../lib/methods/helpers/events';
+import { LISTENER } from '../Toast';
 
 const styles = StyleSheet.create({
 	container: {
@@ -90,6 +92,7 @@ interface IListItemContent {
 	left?: () => JSX.Element | null;
 	right?: () => JSX.Element | null;
 	disabled?: boolean;
+	disabledReason?: string;
 	testID?: string;
 	color?: string;
 	translateTitle?: boolean;
@@ -154,7 +157,15 @@ const Content = React.memo(
 				}
 			}
 			return label;
-		}, [title, subtitle, translateTitle, translateSubtitle, additionalAcessibilityLabel, additionalAcessibilityLabelCheck]);
+		}, [
+			accessibilityLabel,
+			title,
+			subtitle,
+			translateTitle,
+			translateSubtitle,
+			additionalAcessibilityLabel,
+			additionalAcessibilityLabelCheck
+		]);
 
 		return (
 			<View
@@ -205,6 +216,7 @@ interface IListButtonPress extends IListItemButton {
 interface IListItemButton {
 	title: string | (() => JSX.Element | null);
 	disabled?: boolean;
+	disabledReason?: string;
 	backgroundColor?: string;
 	underlayColor?: string;
 }
@@ -214,12 +226,20 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }
 
 	const { colors } = useTheme();
 
+	const handlePress = () => {
+		if (props.disabled && props.disabledReason) {
+			EventEmitter.emit(LISTENER, { message: props.disabledReason });
+		} else if (!props.disabled) {
+			onPress(props.title);
+		}
+	};
+
 	return (
 		<Touch
-			onPress={() => onPress(props.title)}
+			onPress={handlePress}
 			style={{ backgroundColor: backgroundColor || colors.surfaceRoom }}
 			underlayColor={underlayColor}
-			enabled={!props.disabled}>
+			enabled={!props.disabled || !!props.disabledReason}>
 			<Content {...props} />
 		</Touch>
 	);

app/containers/CustomIcon/selection.json

@@ -442,7 +442,8 @@ const MessageActions = React.memo(
 						title: I18n.t('Reply_in_direct_message'),
 						icon: 'arrow-back',
 						onPress: () => handleReplyInDM(message),
-						enabled: permissions.hasCreateDirectMessagePermission
+						enabled: permissions.hasCreateDirectMessagePermission && !room.abacAttributes,
+						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
 					});
 				}
 
@@ -454,19 +455,24 @@ const MessageActions = React.memo(
 					enabled: permissions.hasCreateDiscussionOtherUserPermission
 				});
 
+				// Forward
 				if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.2.0') && !videoConfBlock) {
 					options.push({
 						title: I18n.t('Forward'),
 						icon: 'arrow-forward',
-						onPress: () => handleShareMessage(message)
+						onPress: () => handleShareMessage(message),
+						enabled: !room.abacAttributes,
+						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
 					});
 				}
 
-				// Permalink
+				// Get link
 				options.push({
 					title: I18n.t('Get_link'),
 					icon: 'link',
-					onPress: () => handlePermalink(message)
+					onPress: () => handlePermalink(message),
+					enabled: !room.abacAttributes,
+					disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
 				});
 
 				// Copy

app/containers/List/ListItem.tsx

@@ -55,6 +55,21 @@ export const Icons = () => (
 		<HeaderExample title={() => <RoomHeader title='busy dm' type='d' status='busy' />} />
 		<HeaderExample title={() => <RoomHeader title='loading dm' type='d' status='loading' />} />
 		<HeaderExample title={() => <RoomHeader title='offline dm' type='d' />} />
+		<HeaderExample
+			title={() => (
+				<RoomHeader title='classified' type='p' abacAttributes={[{ key: 'Attribute', values: ['Value 1', 'Value 2'] }]} />
+			)}
+		/>
+		<HeaderExample
+			title={() => (
+				<RoomHeader
+					title='classified'
+					type='p'
+					abacAttributes={[{ key: 'Attribute', values: ['Value 1', 'Value 2'] }]}
+					teamMain
+				/>
+			)}
+		/>
 	</>
 );
 

app/containers/MessageActions/index.tsx

@@ -7,7 +7,7 @@ import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { MarkdownPreview } from '../markdown';
 import RoomTypeIcon from '../RoomTypeIcon';
-import { type TUserStatus, type IOmnichannelSource } from '../../definitions';
+import { type TUserStatus, type IOmnichannelSource, type ISubscription } from '../../definitions';
 import { useTheme } from '../../theme';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
@@ -80,6 +80,7 @@ interface IRoomHeader {
 	sourceType?: IOmnichannelSource;
 	disabled?: boolean;
 	rightButtonsWidth?: number;
+	abacAttributes?: ISubscription['abacAttributes'];
 }
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
@@ -148,7 +149,8 @@ const Header = React.memo(
 		testID,
 		usersTyping = [],
 		sourceType,
-		disabled
+		disabled,
+		abacAttributes
 	}: IRoomHeader) => {
 		const statusAccessibilityLabel = useStatusAccessibilityLabel({
 			isGroupChat,
@@ -182,6 +184,7 @@ const Header = React.memo(
 						isGroupChat={isGroupChat}
 						status={status}
 						teamMain={teamMain}
+						abacAttributes={abacAttributes}
 					/>
 					<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{parentTitle}
@@ -208,6 +211,7 @@ const Header = React.memo(
 								status={status}
 								teamMain={teamMain}
 								sourceType={sourceType}
+								abacAttributes={abacAttributes}
 							/>
 						)}
 						<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} testID={testID} />