Separate calls for Apps

actions/apps.ts

@@ -2,9 +2,9 @@
 // See LICENSE.txt for license information.
 
 import {Client4} from 'mattermost-redux/client';
-import {Action, ActionFunc} from 'mattermost-redux/types/actions';
-import {AppCallResponse, AppForm, AppCallType, AppCallRequest, AppContext, AppBinding} from 'mattermost-redux/types/apps';
-import {AppCallTypes, AppCallResponseTypes} from 'mattermost-redux/constants/apps';
+import {Action, ActionFunc, DispatchFunc} from 'mattermost-redux/types/actions';
+import {AppCallResponse, AppForm, AppCallRequest, AppContext, AppBinding} from 'mattermost-redux/types/apps';
+import {AppCallResponseTypes} from 'mattermost-redux/constants/apps';
 import {Post} from 'mattermost-redux/types/posts';
 import {CommandArgs} from 'mattermost-redux/types/integrations';
 
@@ -15,16 +15,74 @@ import AppsForm from 'components/apps_form';
 import {ModalIdentifiers} from 'utils/constants';
 import {getSiteURL, shouldOpenInNewTab} from 'utils/url';
 import {browserHistory} from 'utils/browser_history';
-import {makeCallErrorResponse} from 'utils/apps';
+import {createCallRequest, makeCallErrorResponse} from 'utils/apps';
 
 import {cleanForm} from 'mattermost-redux/utils/apps';
 
 import {sendEphemeralPost} from './global_actions';
 
-export function doAppCall<Res=unknown>(call: AppCallRequest, type: AppCallType, intl: any): ActionFunc {
+export function handleBindingClick<Res=unknown>(binding: AppBinding, context: AppContext, intl: any): ActionFunc {
+    return async (dispatch: DispatchFunc) => {
+        // Fetch form
+        let form = binding.form;
+        if (form?.source) {
+            const callRequest = createCallRequest(form.source, context);
+            const res = await dispatch(doAppFetchForm<Res>(callRequest, intl));
+            if (res.error) {
+                return res;
+            }
+            form = res.data.form;
+        }
+
+        // Open form
+        if (form) {
+            // This should come properly formed, but using preventive checks
+            if (!form?.submit) {
+                const errMsg = intl.formatMessage({
+                    id: 'apps.error.malformed_binding',
+                    defaultMessage: 'This binding is not properly formed. Contact the App developer.',
+                });
+                return {error: makeCallErrorResponse(errMsg)};
+            }
+
+            const res: AppCallResponse = {
+                type: AppCallResponseTypes.FORM,
+                form,
+            };
+            return {data: res};
+        }
+
+        // Submit binding
+        // This should come properly formed, but using preventive checks
+        if (!binding.submit) {
+            const errMsg = intl.formatMessage({
+                id: 'apps.error.malformed_binding',
+                defaultMessage: 'This binding is not properly formed. Contact the App developer.',
+            });
+            return {error: makeCallErrorResponse(errMsg)};
+        }
+
+        const callRequest = createCallRequest(
+            binding.submit,
+            context,
+        );
+
+        const res = await dispatch(doAppSubmit<Res>(callRequest, intl));
+        return res;
+    };
+}
+
+export function doAppSubmit<Res=unknown>(inCall: AppCallRequest, intl: any): ActionFunc {
     return async () => {
         try {
-            const res = await Client4.executeAppCall(call, type) as AppCallResponse<Res>;
+            const call: AppCallRequest = {
+                ...inCall,
+                context: {
+                    ...inCall.context,
+                    track_as_submit: true,
+                },
+            };
+            const res = await Client4.executeAppCall(call, true) as AppCallResponse<Res>;
             const responseType = res.type || AppCallResponseTypes.OK;
 
             switch (responseType) {
@@ -33,41 +91,102 @@ export function doAppCall<Res=unknown>(call: AppCallRequest, type: AppCallType,
             case AppCallResponseTypes.ERROR:
                 return {error: res};
             case AppCallResponseTypes.FORM:
-                if (!res.form) {
+                if (!res.form?.submit) {
                     const errMsg = intl.formatMessage({
                         id: 'apps.error.responses.form.no_form',
-                        defaultMessage: 'Response type is `form`, but no form was included in response.',
+                        defaultMessage: 'Response type is `form`, but no valid form was included in response.',
                     });
                     return {error: makeCallErrorResponse(errMsg)};
                 }
 
                 cleanForm(res.form);
-
                 return {data: res};
-            case AppCallResponseTypes.NAVIGATE:
+
+            case AppCallResponseTypes.NAVIGATE: {
                 if (!res.navigate_to_url) {
                     const errMsg = intl.formatMessage({
                         id: 'apps.error.responses.navigate.no_url',
                         defaultMessage: 'Response type is `navigate`, but no url was included in response.',
                     });
                     return {error: makeCallErrorResponse(errMsg)};
                 }
+                if (shouldOpenInNewTab(res.navigate_to_url, getSiteURL())) {
+                    window.open(res.navigate_to_url);
+                    return {data: res};
+                }
+                const navigateURL = res.navigate_to_url.startsWith(getSiteURL()) ?
+                    res.navigate_to_url.slice(getSiteURL().length) :
+                    res.navigate_to_url;
+                browserHistory.push(navigateURL);
+                return {data: res};
+            }
+            default: {
+                const errMsg = intl.formatMessage({
+                    id: 'apps.error.responses.unknown_type',
+                    defaultMessage: 'App response type not supported. Response type: {type}.',
+                }, {type: responseType});
+                return {error: makeCallErrorResponse(errMsg)};
+            }
+            }
+        } catch (error: any) {
+            const errMsg = error.message || intl.formatMessage({
+                id: 'apps.error.responses.unexpected_error',
+                defaultMessage: 'Received an unexpected error.',
+            });
+            return {error: makeCallErrorResponse(errMsg)};
+        }
+    };
+}
+
+export function doAppFetchForm<Res=unknown>(call: AppCallRequest, intl: any): ActionFunc {
+    return async () => {
+        try {
+            const res = await Client4.executeAppCall(call, false) as AppCallResponse<Res>;
+            const responseType = res.type || AppCallResponseTypes.OK;
 
-                if (type !== AppCallTypes.SUBMIT) {
+            switch (responseType) {
+            case AppCallResponseTypes.ERROR:
+                return {error: res};
+            case AppCallResponseTypes.FORM:
+                if (!res.form?.submit) {
                     const errMsg = intl.formatMessage({
-                        id: 'apps.error.responses.navigate.no_submit',
-                        defaultMessage: 'Response type is `navigate`, but the call was not a submission.',
+                        id: 'apps.error.responses.form.no_form',
+                        defaultMessage: 'Response type is `form`, but no valid form was included in response.',
                     });
                     return {error: makeCallErrorResponse(errMsg)};
                 }
+                cleanForm(res.form);
+                return {data: res};
+            default: {
+                const errMsg = intl.formatMessage({
+                    id: 'apps.error.responses.unknown_type',
+                    defaultMessage: 'App response type not supported. Response type: {type}.',
+                }, {type: responseType});
+                return {error: makeCallErrorResponse(errMsg)};
+            }
+            }
+        } catch (error: any) {
+            const errMsg = error.message || intl.formatMessage({
+                id: 'apps.error.responses.unexpected_error',
+                defaultMessage: 'Received an unexpected error.',
+            });
+            return {error: makeCallErrorResponse(errMsg)};
+        }
+    };
+}
 
-                if (shouldOpenInNewTab(res.navigate_to_url, getSiteURL())) {
-                    window.open(res.navigate_to_url);
-                    return {data: res};
-                }
+export function doAppLookup<Res=unknown>(call: AppCallRequest, intl: any): ActionFunc {
+    return async () => {
+        try {
+            const res = await Client4.executeAppCall(call, false) as AppCallResponse<Res>;
+            const responseType = res.type || AppCallResponseTypes.OK;
 
-                browserHistory.push(res.navigate_to_url.slice(getSiteURL().length));
+            switch (responseType) {
+            case AppCallResponseTypes.OK:
                 return {data: res};
+            case AppCallResponseTypes.ERROR:
+                return {error: res};
+
             default: {
                 const errMsg = intl.formatMessage({
                     id: 'apps.error.responses.unknown_type',
@@ -76,7 +195,7 @@ export function doAppCall<Res=unknown>(call: AppCallRequest, type: AppCallType,
                 return {error: makeCallErrorResponse(errMsg)};
             }
             }
-        } catch (error) {
+        } catch (error: any) {
             const errMsg = error.message || intl.formatMessage({
                 id: 'apps.error.responses.unexpected_error',
                 defaultMessage: 'Received an unexpected error.',
@@ -101,13 +220,13 @@ export function makeFetchBindings(location: string): (userId: string, channelId:
     };
 }
 
-export function openAppsModal(form: AppForm, call: AppCallRequest): Action {
+export function openAppsModal(form: AppForm, context: AppContext): Action {
     return openModal({
         modalId: ModalIdentifiers.APPS_MODAL,
         dialogType: AppsForm,
         dialogProps: {
             form,
-            call,
+            context,
         },
     });
 }

actions/command.test.js

@@ -85,10 +85,10 @@ const initialState = {
                                         app_id: 'appid',
                                         label: 'custom',
                                         description: 'Run the command.',
-                                        call: {
-                                            path: 'https://someserver.com/command',
-                                        },
                                         form: {
+                                            submit: {
+                                                path: 'https://someserver.com/command',
+                                            },
                                             fields: [
                                                 {
                                                     name: 'key1',
@@ -291,6 +291,7 @@ describe('executeCommand', () => {
                     location: '/command/appid/custom',
                     root_id: '',
                     team_id: '456',
+                    track_as_submit: true,
                 },
                 raw_command: '/appid custom value1 --key2 value2',
                 path: 'https://someserver.com/command',
@@ -301,7 +302,7 @@ describe('executeCommand', () => {
                 expand: {},
                 query: undefined,
                 selected_field: undefined,
-            }, 'submit');
+            }, true);
             expect(result).toEqual({data: true});
         });
     });

actions/command.ts

@@ -12,7 +12,7 @@ import {IntegrationTypes} from 'mattermost-redux/action_types';
 import {ActionFunc, DispatchFunc, GetStateFunc} from 'mattermost-redux/types/actions';
 import type {CommandArgs} from 'mattermost-redux/types/integrations';
 
-import {AppCallResponseTypes, AppCallTypes} from 'mattermost-redux/constants/apps';
+import {AppCallResponseTypes} from 'mattermost-redux/constants/apps';
 
 import {DoAppCallResult} from 'types/apps';
 
@@ -36,7 +36,7 @@ import {GlobalState} from 'types/store';
 
 import {t} from 'utils/i18n';
 
-import {doAppCall, openAppsModal, postEphemeralCallResponseForCommandArgs} from './apps';
+import {doAppSubmit, openAppsModal, postEphemeralCallResponseForCommandArgs} from './apps';
 
 export function executeCommand(message: string, args: CommandArgs): ActionFunc {
     return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
@@ -123,16 +123,16 @@ export function executeCommand(message: string, args: CommandArgs): ActionFunc {
             const parser = new AppCommandParser({dispatch, getState: getGlobalState} as any, intlShim, args.channel_id, args.team_id, args.root_id);
             if (parser.isAppCommand(msg)) {
                 try {
-                    const {call, errorMessage} = await parser.composeCallFromCommand(msg);
-                    if (!call) {
+                    const {creq, errorMessage} = await parser.composeCommandSubmitCall(msg);
+                    if (!creq) {
                         return createErrorMessage(errorMessage!);
                     }
 
-                    const res = await dispatch(doAppCall(call, AppCallTypes.SUBMIT, intlShim)) as DoAppCallResult;
+                    const res = await dispatch(doAppSubmit(creq, intlShim)) as DoAppCallResult;
 
                     if (res.error) {
                         const errorResponse = res.error;
-                        return createErrorMessage(errorResponse.error || intlShim.formatMessage({
+                        return createErrorMessage(errorResponse.text || intlShim.formatMessage({
                             id: 'apps.error.unknown',
                             defaultMessage: 'Unknown error.',
                         }));
@@ -141,13 +141,13 @@ export function executeCommand(message: string, args: CommandArgs): ActionFunc {
                     const callResp = res.data!;
                     switch (callResp.type) {
                     case AppCallResponseTypes.OK:
-                        if (callResp.markdown) {
-                            dispatch(postEphemeralCallResponseForCommandArgs(callResp, callResp.markdown, args));
+                        if (callResp.text) {
+                            dispatch(postEphemeralCallResponseForCommandArgs(callResp, callResp.text, args));
                         }
                         return {data: true};
                     case AppCallResponseTypes.FORM:
                         if (callResp.form) {
-                            dispatch(openAppsModal(callResp.form, call));
+                            dispatch(openAppsModal(callResp.form, creq.context));
                         }
                         return {data: true};
                     case AppCallResponseTypes.NAVIGATE:
@@ -159,7 +159,7 @@ export function executeCommand(message: string, args: CommandArgs): ActionFunc {
                             {type: callResp.type},
                         ));
                     }
-                } catch (err) {
+                } catch (err: any) {
                     return createErrorMessage(err.message || localizeMessage('apps.error.unknown', 'Unknown error.'));
                 }
             }

components/app_bar/app_bar_binding.tsx

@@ -6,14 +6,14 @@ import {useDispatch, useSelector} from 'react-redux';
 import {useIntl} from 'react-intl';
 import {Tooltip} from 'react-bootstrap';
 
-import {AppCallResponseTypes, AppCallTypes} from 'mattermost-redux/constants/apps';
+import {AppCallResponseTypes} from 'mattermost-redux/constants/apps';
 import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/common';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {AppBinding, AppCallResponse} from 'mattermost-redux/types/apps';
 
-import {doAppCall, openAppsModal, postEphemeralCallResponseForContext} from 'actions/apps';
+import {handleBindingClick, openAppsModal, postEphemeralCallResponseForContext} from 'actions/apps';
 
-import {createCallContext, createCallRequest} from 'utils/apps';
+import {createCallContext} from 'utils/apps';
 import Constants from 'utils/constants';
 import {DoAppCallResult} from 'types/apps';
 
@@ -33,33 +33,17 @@ const AppBarBinding = (props: BindingComponentProps) => {
     const teamId = useSelector(getCurrentTeamId);
 
     const submitAppCall = async () => {
-        const call = binding.form?.call || binding.call;
-
-        if (!call) {
-            return;
-        }
         const context = createCallContext(
             binding.app_id,
             binding.location,
             channelId,
             teamId,
-            '',
-            '',
-        );
-        const callRequest = createCallRequest(
-            call,
-            context,
         );
 
-        if (binding.form) {
-            dispatch(openAppsModal(binding.form, callRequest));
-            return;
-        }
-
-        const result = await dispatch(doAppCall(callRequest, AppCallTypes.SUBMIT, intl)) as DoAppCallResult;
+        const result = await dispatch(handleBindingClick(binding, context, intl)) as DoAppCallResult;
 
         if (result.error) {
-            const errMsg = result.error.error || 'An error occurred';
+            const errMsg = result.error.text || 'An error occurred';
             dispatch(postEphemeralCallResponseForContext(result.error, errMsg, context));
             return;
         }
@@ -68,13 +52,13 @@ const AppBarBinding = (props: BindingComponentProps) => {
 
         switch (callResp.type) {
         case AppCallResponseTypes.OK:
-            if (callResp.markdown) {
-                dispatch(postEphemeralCallResponseForContext(callResp, callResp.markdown, context));
+            if (callResp.text) {
+                dispatch(postEphemeralCallResponseForContext(callResp, callResp.text, context));
             }
             return;
         case AppCallResponseTypes.FORM:
             if (callResp.form) {
-                dispatch(openAppsModal(callResp.form, callRequest));
+                dispatch(openAppsModal(callResp.form, context));
             }
             return;
         case AppCallResponseTypes.NAVIGATE: