feat: apps button on SidebarView

.maestro/scripts/data-setup.js

@@ -195,6 +195,43 @@ const reactAsNewUsers = (count, messageId, emoji) => {
     return reactors;
 };
 
+const appsApiGet = (path) => {
+    const response = getWithRetry(`${data.server}/api/apps/${path}`, {
+        headers: {
+            'Content-Type': 'application/json',
+            ...headers
+        }
+    });
+
+    return json(response.body);
+};
+
+const findAppActionButton = (username, password, context, actionId) => {
+    login(username, password);
+
+    const button = appsApiGet('actionButtons').find(b => b.context === context && b.actionId === actionId);
+
+    if (!button) {
+        throw new Error(`No ${context} action button "${actionId}" installed on ${data.server}`);
+    }
+
+    return button;
+};
+
+// App labels ship with the app, not with the mobile bundle, so resolve them from the server.
+const getAppTranslation = (username, password, appId, key) => {
+    login(username, password);
+
+    const app = appsApiGet('languages').apps.find(a => a.id === appId);
+    const translation = app && app.languages && app.languages.en && app.languages.en[key];
+
+    if (!translation) {
+        throw new Error(`App ${appId} has no en translation for "${key}"`);
+    }
+
+    return translation;
+};
+
 const createDM = (username, password, otherUsername) => {
     login(username, password);
 
@@ -294,6 +331,8 @@ output.utils = {
     login,
     getDeepLink,
     createDM,
+    findAppActionButton,
+    getAppTranslation,
     sleep,
     groupMessageCount
 };

.maestro/tests/uikit/poll.yaml

@@ -0,0 +1,117 @@
+appId: ${APP_ID}
+name: Apps Engine Poll
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-9
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+- evalScript: ${output.room = output.utils.createRandomRoom(output.user.username, output.user.password)}
+- evalScript: ${output.pollButton = output.utils.findAppActionButton(output.user.username, output.user.password, 'messageBoxAction', 'message-box-create-poll')}
+- evalScript: ${output.pollLabel = output.utils.getAppTranslation(output.user.username, output.user.password, output.pollButton.appId, 'create_poll_button')}
+- evalScript: ${output.pollAction = 'message-composer-app-action-' + output.pollButton.appId + '/' + output.pollButton.actionId}
+- evalScript: ${output.question = 'Poll ' + output.random()}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+
+- runFlow:
+    file: '../../helpers/navigate-to-room.yaml'
+    env:
+      ROOM: ${output.room.name}
+
+# should list the Poll app messageBoxAction in the composer actions, labeled with the app's own i18n
+- extendedWaitUntil:
+    visible:
+      id: 'message-composer-actions'
+    timeout: 60000
+- tapOn:
+    id: 'message-composer-actions'
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: '${output.pollAction}'
+    timeout: 60000
+- assertVisible:
+    text: '${output.pollLabel}'
+
+# should open the app's modal and dismiss it without creating a poll
+- tapOn:
+    id: '${output.pollAction}'
+- extendedWaitUntil:
+    visible:
+      id: 'uikit-input-question'
+    timeout: 60000
+- assertVisible:
+    id: 'submit-modal-uikit'
+- tapOn:
+    id: 'close-modal-uikit'
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-${output.room.name}'
+    timeout: 60000
+
+# should create a poll from the modal
+- tapOn:
+    id: 'message-composer-actions'
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- tapOn:
+    id: '${output.pollAction}'
+- extendedWaitUntil:
+    visible:
+      id: 'uikit-input-question'
+    timeout: 60000
+- tapOn:
+    id: 'uikit-input-question'
+- inputText: ${output.question}
+- tapOn:
+    id: 'uikit-input-option-0'
+- inputText: 'Option A'
+- tapOn:
+    id: 'uikit-input-option-1'
+- inputText: 'Option B'
+- tapOn:
+    id: 'submit-modal-uikit'
+
+# should render the poll blocks the app posted back
+- extendedWaitUntil:
+    visible:
+      text: '${output.question}'
+    timeout: 60000
+- assertVisible:
+    text: 'Option A'
+- assertVisible:
+    text: 'Option B'
+- assertVisible:
+    text: '.*0.00% \(0\).*'
+
+# should vote and see the results
+- tapOn:
+    text: '(poll_vote|Vote)'
+    index: 0
+- tapOn:
+    id: 'header-back'
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view'
+    timeout: 60000
+- runFlow:
+    file: '../../helpers/navigate-to-room.yaml'
+    env:
+      ROOM: ${output.room.name}
+- extendedWaitUntil:
+    visible:
+      text: '.*100.00% \(1\).*'
+    timeout: 60000

.sniffler/test-map.json

@@ -444,6 +444,15 @@
 	},
 	{
 		"test": ".maestro/tests/uikit/button-kit.yaml",
-		"dependsOn": ["app/containers/UIKit/**"]
+		"dependsOn": ["app/containers/UIKit/**", "app/lib/apps/**"]
+	},
+	{
+		"test": ".maestro/tests/uikit/poll.yaml",
+		"dependsOn": [
+			"app/containers/UIKit/**",
+			"app/lib/apps/**",
+			"app/containers/MessageComposer/**",
+			"app/views/ModalBlockView.tsx"
+		]
 	}
 ]

app/containers/MessageComposer/MessageComposer.tsx

@@ -20,7 +20,7 @@ import { EventTypes } from '../EmojiPicker/interfaces';
 import { type IEmoji } from '~/definitions';
 import database from '~/lib/database';
 import { sanitizeLikeString } from '~/lib/database/utils';
-import { generateTriggerId } from '~/lib/methods/actions';
+import { generateTriggerId } from '~/lib/apps/actions';
 import { runSlashCommand } from '~/lib/services/restApi';
 import log from '~/lib/methods/helpers/log';
 import { prepareQuoteMessage, insertEmojiAtCursor, lastGlyphLength } from './helpers';

app/containers/MessageComposer/components/Buttons/ActionsButton.tsx

@@ -10,12 +10,20 @@ import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { usePermissions } from '~/lib/hooks/usePermissions';
 import { useCanUploadFile, useChooseMedia } from '~/containers/MessageComposer/hooks';
 import { useComposerRid, useComposerTmid, useComposerType } from '~/containers/MessageComposer/ComposerStore';
+import { UIActionButtonContext } from '~/lib/apps/definitions';
+import { useAppActionButtons } from '~/lib/apps/useAppActionButtons';
+import { triggerAppActionButton } from '~/lib/apps/triggerAppActionButton';
+
+const COMPOSER_APP_FILTERS = [
+	{ context: UIActionButtonContext.ROOM_ACTION, category: 'ai' as const },
+	{ context: UIActionButtonContext.MESSAGE_BOX_ACTION }
+];
 
 export const ActionsButton = () => {
 	const rid = useComposerRid();
 	const tmid = useComposerTmid();
 	const t = useComposerType();
-	const { closeEmojiKeyboardAndAction } = useContext(MessageInnerContext);
+	const { closeEmojiKeyboardAndAction, getText } = useContext(MessageInnerContext);
 	const permissionToUpload = useCanUploadFile(rid);
 	const [permissionToViewCannedResponses] = usePermissions(['view-canned-responses'], rid);
 	const { takePhoto, takeVideo, chooseFromLibrary, chooseFile } = useChooseMedia({
@@ -25,6 +33,7 @@ export const ActionsButton = () => {
 	});
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const isMasterDetail = useMasterDetail();
+	const [aiActions, appActions] = useAppActionButtons({ filters: COMPOSER_APP_FILTERS, rid });
 
 	const createDiscussion = async () => {
 		if (!rid) return;
@@ -95,6 +104,30 @@ export const ActionsButton = () => {
 			onPress: () => createDiscussion()
 		});
 
+		aiActions.forEach(({ id, label, button }) => {
+			options.push({
+				title: label,
+				icon: 'stars',
+				danger: button.variant === 'danger',
+				testID: `message-composer-ai-action-${id}`,
+				onPress: () => {
+					triggerAppActionButton({ button, rid, tmid });
+				}
+			});
+		});
+
+		appActions.forEach(({ id, label, button }) => {
+			options.push({
+				title: label,
+				icon: 'apps',
+				danger: button.variant === 'danger',
+				testID: `message-composer-app-action-${id}`,
+				onPress: () => {
+					triggerAppActionButton({ button, rid, tmid, message: getText() ?? '' });
+				}
+			});
+		});
+
 		closeEmojiKeyboardAndAction(showActionSheet, { options });
 	};
 

app/containers/MessageComposer/components/Buttons/__tests__/ActionsButton.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { type IAppActionButtonItem } from '~/lib/apps/useAppActionButtons';
+import { ActionsButton } from '../ActionsButton';
+
+const mockUseAppActionButtons = jest.fn((_params: unknown): IAppActionButtonItem[] => []);
+jest.mock('~/lib/apps/useAppActionButtons', () => ({
+	useAppActionButtons: ({ filters, rid }: { filters: { context: string; category?: string }[]; rid?: string }) =>
+		filters.map(filter => mockUseAppActionButtons({ ...filter, rid }))
+}));
+
+const mockTriggerAppActionButton = jest.fn();
+jest.mock('~/lib/apps/triggerAppActionButton', () => ({
+	triggerAppActionButton: (params: unknown) => mockTriggerAppActionButton(params)
+}));
+
+const mockShowActionSheet = jest.fn();
+jest.mock('~/containers/ActionSheet', () => ({
+	useActionSheet: () => ({ showActionSheet: mockShowActionSheet, hideActionSheet: jest.fn() })
+}));
+
+jest.mock('~/containers/MessageComposer/ComposerStore', () => ({
+	useComposerRid: () => 'rid-1',
+	useComposerTmid: () => 'tmid-1',
+	useComposerType: () => 'c'
+}));
+
+jest.mock('~/containers/MessageComposer/context', () => {
+	const ReactActual = jest.requireActual('react');
+	return {
+		MessageInnerContext: ReactActual.createContext({
+			closeEmojiKeyboardAndAction: (action: Function, params: unknown) => action(params),
+			getText: () => 'draft text'
+		})
+	};
+});
+
+jest.mock('~/containers/MessageComposer/hooks', () => ({
+	useCanUploadFile: () => false,
+	useChooseMedia: () => ({ takePhoto: jest.fn(), takeVideo: jest.fn(), chooseFromLibrary: jest.fn(), chooseFile: jest.fn() })
+}));
+jest.mock('~/lib/hooks/usePermissions', () => ({ usePermissions: () => [false] }));
+jest.mock('~/lib/hooks/useMasterDetail', () => ({ useMasterDetail: () => false }));
+jest.mock('~/lib/database/services/Subscription', () => ({ getSubscriptionByRoomId: jest.fn() }));
+
+jest.mock('../BaseButton', () => {
+	const ReactActual = jest.requireActual('react');
+	return {
+		BaseButton: ({ onPress, testID }: { onPress: () => void; testID: string }) =>
+			ReactActual.createElement('BaseButton', { onPress, testID })
+	};
+});
+
+const item = (id: string, overrides = {}): IAppActionButtonItem => ({
+	id,
+	label: `Label ${id}`,
+	button: { appId: 'app-id', actionId: id, context: 'messageBoxAction', labelI18n: 'label', ...overrides }
+});
+
+const openSheet = () => {
+	render(<ActionsButton />);
+	screen.getByTestId('message-composer-actions').props.onPress();
+	return mockShowActionSheet.mock.calls[0][0].options as { title: string; testID?: string; onPress: () => void }[];
+};
+
+describe('ActionsButton', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseAppActionButtons.mockImplementation(() => []);
+	});
+
+	it('shows only the built-in actions when no app registered any', () => {
+		const options = openSheet();
+
+		expect(options.map(option => option.title)).toEqual(['Create discussion']);
+	});
+
+	it('lists ai room actions then message box actions after the built-in ones', () => {
+		mockUseAppActionButtons.mockImplementation(params =>
+			(params as { context: string }).context === 'messageBoxAction'
+				? [item('translate')]
+				: [item('summarize', { context: 'roomAction', category: 'ai' })]
+		);
+
+		const options = openSheet();
+
+		expect(options.map(option => option.title)).toEqual(['Create discussion', 'Label summarize', 'Label translate']);
+		expect(options[1].testID).toBe('message-composer-ai-action-summarize');
+		expect(options[2].testID).toBe('message-composer-app-action-translate');
+	});
+
+	it('asks for the ai category of the room action context', () => {
+		openSheet();
+
+		expect(mockUseAppActionButtons).toHaveBeenCalledWith({ context: 'messageBoxAction', rid: 'rid-1' });
+		expect(mockUseAppActionButtons).toHaveBeenCalledWith({ context: 'roomAction', category: 'ai', rid: 'rid-1' });
+	});
+
+	it('sends the thread and the composer draft with a message box action', () => {
+		const messageBoxItem = item('translate');
+		mockUseAppActionButtons.mockImplementation(params =>
+			(params as { context: string }).context === 'messageBoxAction' ? [messageBoxItem] : []
+		);
+
+		openSheet()[1].onPress();
+
+		expect(mockTriggerAppActionButton).toHaveBeenCalledWith({
+			button: messageBoxItem.button,
+			rid: 'rid-1',
+			tmid: 'tmid-1',
+			message: 'draft text'
+		});
+	});
+
+	it('sends the thread but not the composer draft with an ai action', () => {
+		const aiItem = item('summarize', { context: 'roomAction', category: 'ai' });
+		mockUseAppActionButtons.mockImplementation(params =>
+			(params as { context: string }).context === 'roomAction' ? [aiItem] : []
+		);
+
+		openSheet()[1].onPress();
+
+		expect(mockTriggerAppActionButton).toHaveBeenCalledWith({ button: aiItem.button, rid: 'rid-1', tmid: 'tmid-1' });
+	});
+});

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -34,7 +34,7 @@ import { emitter } from '~/lib/methods/helpers/emitter';
 import { useComposerRid, useComposerRoomTitle, useComposerSharing, useComposerTmid, useComposerType } from '../ComposerStore';
 import { useMessageAction, useMessageActionStoreApi } from '~/containers/message/stores/MessageActionStore';
 import { getMessageById } from '~/lib/database/services/Message';
-import { generateTriggerId } from '~/lib/methods/actions';
+import { generateTriggerId } from '~/lib/apps/actions';
 import { executeCommandPreview } from '~/lib/services/restApi';
 import log from '~/lib/methods/helpers/log';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';