Refactor apps modal autocomplete into AutocompleteSelector component (#…

…5229) * Apps bindings support (#5012) * Add redux related information * Add binding loading on channel refresh * Add channel header and post option bindings * Fix test * Minor fixes * Fix snapshots * Handle errors and show bindings only on main channel * Update Expand Levels keys and values to match latest changes * Add NAVIGATE call response handling. * Add more isolation to apps related code * Add defaults to send ephemeral * Update variable naming * Rename shouldProcessApps by a more meaningful appsEnabled * Embedded forms (#5169) * Add redux related information * Add binding loading on channel refresh * Add channel header and post option bindings * Fix test * Minor fixes * Fix snapshots * Handle errors and show bindings only on main channel * Update Expand Levels keys and values to match latest changes * Add NAVIGATE call response handling. * Add more isolation to apps related code * Add Embedded Forms * Fix snapshots * Add Embedded Forms * Improve naming, change the root element to be a binding and improve binding handling * Get post down on the buttons, remove unneeded variables and minor fixes from the review * Allow undefined bindings to fillBindingsInformation and add logging for error. * Address review feedback * Add App Forms (#5177) * Add App Forms * Address feedback and self review * Add dynamic select * Fixes and improvements * Add the ability to refresh on submit. * Use AppFormValue instead of redoing the type * Address feedback * [MM-31508] Rename URL to Path in Call (#5186) * Add user agent to call context (#5193) * Remove unneeded state reference (#5196) * Change user agent query on fetch bindings (#5201) * Add refresh websocket event to refetch bindings (#5194) * Add refresh websocket event to refetch bindings * Add missing changes * Declare socket event constant and separate the handler to a different function * Add binding validation on binding fetch (#5200) * Apps commands (#5107) * Add redux related information * Add binding loading on channel refresh * Add channel header and post option bindings * Fix test * Minor fixes * Fix snapshots * apps modals draft * Handle errors and show bindings only on main channel * Update Expand Levels keys and values to match latest changes * Add NAVIGATE call response handling. * Add more isolation to apps related code * reuse command parser throughout slash_suggestion component's lifecycle * fix prop and lint * using alert to show error message. need another way * duplicate import * types * types * types * rename file * copy webapp parser and test * dependencies moved. tests pass * move app command parser into its own folder * converted to typescript, all tests are passing * automated and manual tests work * lint * lint * remove fall throughs with blocks * types * doAppCall type * extract displayError to deps file * test types * lint * fix tests * unused import * PR feedback * fix imports and show errors * types * remove execute suggestion for mobile * watch feature flag * fix tests * change form text arugment behavior to show user input and not hint * return call response error in doAppCall * update tests to remove hint from text field suggestions * lint * use new base command structure * fix tests * wrap appsEnabled * typescript actions/command.ts * update app constants * PR feedback * fix error handling from doAppCall action * Use App CallRequest structure (#5212) * error handling * move test files * remove unused import Co-authored-by: Daniel Espino García <larkox@gmail.com> * Add feature flag (#5207) * Add feature flag * Simplify return * Add localization, call validation and use call type on subpath (#5221) * Add localization, call validation and use call type on subpath * Add more localization to the parser and bring fixes from webapp * Fix ephemerals and channel header / post options crashes * fix app command parser deps and alert messages * Improve suggestion handling * Fix test * Fix lint * Return errors as error * Address PR feedback * return error property * fix error string wordings Co-authored-by: Michael Kochell <6913320+mickmister@users.noreply.github.com> * migrate app selector to AutocompleteSelector * add if statement to avoid missing prop * add tests for dynamic values * clean up * remove old files Co-authored-by: Daniel Espino García <larkox@gmail.com> Co-authored-by: Ben Schumacher <ben.schumacher@mattermost.com>
mattermost · Mar 23, 2021 · 11a9590 · 11a9590
1 parent d73d346
commit 11a9590
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 1,587 deletions.
diff --git a/app/actions/views/post.js b/app/actions/views/post.js
@@ -73,13 +73,14 @@ export function sendAddToChannelEphemeralPost(user, addedUsername, message, chan
     };
 }
 
-export function setAutocompleteSelector(dataSource, onSelect, options) {
+export function setAutocompleteSelector(dataSource, onSelect, options, getDynamicOptions) {
     return {
         type: ViewTypes.SELECTED_ACTION_MENU,
         data: {
             dataSource,
             onSelect,
             options,
+            getDynamicOptions,
         },
     };
 }

diff --git a/app/components/autocomplete_selector/autocomplete_selector.js b/app/components/autocomplete_selector/autocomplete_selector.js
@@ -21,6 +21,7 @@ export default class AutocompleteSelector extends PureComponent {
         actions: PropTypes.shape({
             setAutocompleteSelector: PropTypes.func.isRequired,
         }).isRequired,
+        getDynamicOptions: PropTypes.func,
         label: PropTypes.string,
         placeholder: PropTypes.string.isRequired,
         dataSource: PropTypes.string,
@@ -98,11 +99,11 @@ export default class AutocompleteSelector extends PureComponent {
 
     goToSelectorScreen = preventDoubleTap(() => {
         const {formatMessage} = this.context.intl;
-        const {actions, dataSource, options, placeholder} = this.props;
+        const {actions, dataSource, options, placeholder, getDynamicOptions} = this.props;
         const screen = 'SelectorScreen';
         const title = placeholder || formatMessage({id: 'mobile.action_menu.select', defaultMessage: 'Select an option'});
 
-        actions.setAutocompleteSelector(dataSource, this.handleSelect, options);
+        actions.setAutocompleteSelector(dataSource, this.handleSelect, options, getDynamicOptions);
         goToScreen(screen, title);
     });
 

diff --git a/app/constants/view.js b/app/constants/view.js
@@ -137,6 +137,7 @@ export default {
     PROFILE_PICTURE_EMOJI_SIZE: 28,
     DATA_SOURCE_USERS: 'users',
     DATA_SOURCE_CHANNELS: 'channels',
+    DATA_SOURCE_DYNAMIC: 'dynamic',
     NotificationLevels,
     SidebarSectionTypes,
     IOS_HORIZONTAL_LANDSCAPE: 44,

diff --git a/app/mm-redux/types/integrations.ts b/app/mm-redux/types/integrations.ts
@@ -94,6 +94,10 @@ export type DialogSubmission = {
     };
     cancelled: boolean;
 };
+export type DialogOption = {
+    text: string;
+    value: string;
+};
 export type DialogElement = {
     display_name: string;
     name: string;
@@ -106,10 +110,7 @@ export type DialogElement = {
     min_length: number;
     max_length: number;
     data_source: string;
-    options: Array<{
-        text: string;
-        value: any;
-    }>;
+    options: Array<DialogOption>;
 };
 export type InteractiveDialogConfig = {
     app_id: string;