feat: update Servers history and Servers List layout (#6733)

Author: OtavioStasiak

.maestro/tests/assorted/changeserver.yaml

@@ -32,10 +32,6 @@ tags:
     visible:
       id: 'rooms-list-header-server-add'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-create-workspace-button'
-    timeout: 60000
 
 # should login to server, add new server, close the app, open the app and show previous logged server
 - tapOn:
@@ -53,6 +49,8 @@ tags:
       id: 'workspace-view'
     timeout: 60000
 - launchApp
+- waitForAnimationToEnd:
+    timeout: 500
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
@@ -73,6 +71,8 @@ tags:
     visible:
       id: 'server-item-${output.data.alternateServer}'
     timeout: 60000
+- waitForAnimationToEnd:
+    timeout: 5000
 - tapOn:
     id: 'server-item-${output.data.alternateServer}'
 - extendedWaitUntil:
@@ -111,6 +111,8 @@ tags:
     visible:
       id: 'rooms-list-header-servers-list-button'
     timeout: 60000
+- waitForAnimationToEnd:
+    timeout: 5000
 - tapOn:
     id: 'rooms-list-header-servers-list-button'
 - extendedWaitUntil:
@@ -123,6 +125,8 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'server-item-${output.data.server}'
+- waitForAnimationToEnd:
+    timeout: 500
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
@@ -138,6 +142,8 @@ tags:
 
 # should reopen the app and show main server
 - launchApp
+- waitForAnimationToEnd:
+    timeout: 500
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
@@ -146,3 +152,51 @@ tags:
     file: './utils/check-server.yaml'
     env:
       server: ${output.data.server}
+
+# should test swipe to delete on alternate server
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list-button'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-header-servers-list-button'
+- extendedWaitUntil:
+    visible:
+      id: 'server-item-${output.data.alternateServer}'
+    timeout: 60000
+
+# swipe left to reveal delete button
+- swipe:
+    direction: LEFT
+    from:
+      id: 'server-item-${output.data.alternateServer}'
+
+# tap delete button
+- tapOn:
+    id: 'server-item-${output.data.alternateServer}-delete'
+
+# confirm deletion
+- extendedWaitUntil:
+    visible:
+      text: '.*Delete.*'
+    timeout: 60000
+- tapOn:
+    text: 'Delete'
+
+# verify alternate server is deleted
+- waitForAnimationToEnd:
+    timeout: 500
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list-button'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-header-servers-list-button'
+- extendedWaitUntil:
+    notVisible:
+      id: 'server-item-${output.data.alternateServer}'
+    timeout: 60000
+
+# verify main server still exists
+- assertVisible:
+    id: 'server-item-${output.data.server}'

.maestro/tests/assorted/delete-server.yaml

@@ -77,14 +77,26 @@ tags:
     visible:
       id: 'server-item-${output.data.server}'
     timeout: 60000
-- longPressOn:
-    id: 'server-item-${output.data.server}'
+
+# swipe left to reveal delete button
+- swipe:
+    direction: LEFT
+    from:
+      id: 'server-item-${output.data.server}'
+
+# tap delete button
+- tapOn:
+    id: 'server-item-${output.data.server}-delete'
+
+# confirm deletion
 - extendedWaitUntil:
     visible:
       text: '.*Delete.*'
     timeout: 60000
 - tapOn:
     text: 'Delete'
+- waitForAnimationToEnd:
+    timeout: 300
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-servers-list-button'

.maestro/tests/onboarding/server-history.yaml

@@ -26,7 +26,8 @@ tags:
     id: 'servers-history-https://mobile.rocket.chat'
 
 # should tap on a server history and navigate to login
-- tapOn: 'Connect to https://mobile.rocket.chat as ${output.user.username}'
+- tapOn:
+    id: 'servers-history-https://mobile.rocket.chat'
 - assertVisible:
     id: 'login-view-submit'
 - assertVisible: ${output.user.username}
@@ -42,10 +43,17 @@ tags:
 - tapOn:
     id: 'servers-history-button'
 - assertVisible:
-    id: 'servers-history-delete-https://mobile.rocket.chat'
-- tapOn:
-    id: 'servers-history-delete-https://mobile.rocket.chat'
+    id: 'servers-history-https://mobile.rocket.chat'
 
+# swipe left to reveal delete button and delete the server history
+- swipe:
+    direction: LEFT
+    from:
+      id: 'servers-history-https://mobile.rocket.chat'
+- waitForAnimationToEnd:
+    timeout: 500
+- tapOn:
+    id: 'servers-history-https://mobile.rocket.chat-delete'
 - extendedWaitUntil:
     notVisible:
       id: 'servers-history-button'

app/containers/ServerItem/ServerItem.stories.tsx

@@ -18,21 +18,21 @@ const ServerItem = ({
 	item,
 	theme = 'light',
 	onPress = () => alert('Press'),
-	onLongPress,
+	onDeletePress,
 	hasCheck
 }: {
 	item?: Partial<IServerItem['item']>;
 	theme?: TSupportedThemes;
 	onPress?: IServerItem['onPress'];
-	onLongPress?: IServerItem['onLongPress'];
+	onDeletePress?: IServerItem['onDeletePress'];
 	hasCheck?: IServerItem['hasCheck'];
 }) => (
 	<ThemeContext.Provider
 		value={{
 			theme,
 			colors: themes[theme]
 		}}>
-		<ServerItemComponent item={{ ...defaultItem, ...item }} onPress={onPress} onLongPress={onLongPress} hasCheck={hasCheck} />
+		<ServerItemComponent item={{ ...defaultItem, ...item }} onPress={onPress} onDeletePress={onDeletePress} hasCheck={hasCheck} />
 	</ThemeContext.Provider>
 );
 
@@ -53,9 +53,10 @@ export const Content = () => (
 	</>
 );
 
-export const Touchable = () => (
+export const SwipeActions = () => (
 	<>
-		<ServerItem onLongPress={() => alert('Long Press')} />
+		<ServerItem onDeletePress={() => alert('Delete Server')} />
+		<ServerItem item={{ name: 'Another Server', id: 'https://example.com/' }} onDeletePress={() => alert('Delete Server')} />
 	</>
 );
 

app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+	useAnimatedStyle,
+	interpolate,
+	withSpring,
+	runOnJS,
+	useAnimatedReaction,
+	useSharedValue,
+	type SharedValue
+} from 'react-native-reanimated';
+import { RectButton } from 'react-native-gesture-handler';
+import * as Haptics from 'expo-haptics';
+
+import { CustomIcon } from '../../CustomIcon';
+import { useTheme } from '../../../theme';
+import I18n from '../../../i18n';
+
+export interface IDeleteActionProps {
+	transX: SharedValue<number>;
+	width: number;
+	rowHeight: number;
+	actionWidth: number;
+	longSwipe: number;
+	onDeletePress(): void;
+	testID?: string;
+}
+
+const SERVER_ITEM_PADDING_VERTICAL = 12;
+
+export const DeleteAction = React.memo(
+	({ transX, width, rowHeight, actionWidth, longSwipe, onDeletePress, testID }: IDeleteActionProps) => {
+		const { colors } = useTheme();
+
+		const translateXDelete = useSharedValue(0);
+
+		const triggerDeleteAnimation = (toValue: number) => {
+			Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+			translateXDelete.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
+		};
+
+		useAnimatedReaction(
+			() => transX.value,
+			(currentTransX, previousTransX) => {
+				if (I18n.isRTL) {
+					if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
+						runOnJS(triggerDeleteAnimation)(actionWidth);
+					} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
+						runOnJS(triggerDeleteAnimation)(0);
+					}
+				} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
+					runOnJS(triggerDeleteAnimation)(-actionWidth);
+				} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
+					runOnJS(triggerDeleteAnimation)(0);
+				}
+			}
+		);
+
+		const animatedDeleteButtonStyles = useAnimatedStyle(() => {
+			if (I18n.isRTL) {
+				// RTL: delete button appears from the left when swiping right
+				if (transX.value > longSwipe && transX.value >= 2 * actionWidth) {
+					const parallaxSwipe = interpolate(
+						transX.value,
+						[2 * actionWidth, longSwipe],
+						[-actionWidth, -actionWidth - 0.1 * transX.value]
+					);
+					return {
+						transform: [{ translateX: parallaxSwipe - translateXDelete.value }],
+						left: 0,
+						right: undefined
+					};
+				}
+				return {
+					transform: [{ translateX: transX.value - actionWidth - translateXDelete.value }],
+					left: 0,
+					right: undefined
+				};
+			}
+			// LTR: delete button appears from the right when swiping left
+			if (transX.value < -longSwipe && transX.value <= -2 * actionWidth) {
+				const parallaxSwipe = interpolate(
+					transX.value,
+					[-2 * actionWidth, -longSwipe],
+					[actionWidth, actionWidth + 0.1 * transX.value]
+				);
+				return {
+					transform: [{ translateX: parallaxSwipe + translateXDelete.value }],
+					right: 0,
+					left: undefined
+				};
+			}
+			return {
+				transform: [{ translateX: transX.value + actionWidth + translateXDelete.value }],
+				right: 0,
+				left: undefined
+			};
+		});
+		const viewHeight = { height: rowHeight + SERVER_ITEM_PADDING_VERTICAL };
+
+		return (
+			<View
+				style={[styles.actionsLeftContainer, viewHeight, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
+				pointerEvents='box-none'>
+				<Animated.View
+					style={[
+						styles.actionRightButtonContainer,
+						{
+							width
+						},
+						viewHeight,
+						animatedDeleteButtonStyles
+					]}>
+					<RectButton
+						accessible
+						accessibilityLabel={I18n.t('Delete')}
+						testID={testID}
+						style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
+						onPress={onDeletePress}>
+						<CustomIcon size={24} name='delete' color={colors.fontWhite} />
+					</RectButton>
+				</Animated.View>
+			</View>
+		);
+	}
+);
+
+const styles = StyleSheet.create({
+	actionsLeftContainer: {
+		flexDirection: 'row',
+		position: 'absolute',
+		left: 0,
+		right: 0
+	},
+	actionRightButtonContainer: {
+		position: 'absolute',
+		justifyContent: 'center',
+		top: 0,
+		alignItems: 'flex-end'
+	},
+	actionButton: {
+		width: 80,
+		height: '100%',
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});