Refactor apps modal autocomplete into AutocompleteSelector component #5229

mickmister · 2021-03-19T02:20:09Z

Summary

There was originally code copied to make the AppFormSelector work, mostly from the AutocompleteSelector and SelectorScreen components. Most of the code carried over had to do with the channel and user selectors, and the functionality for static and dynamic fields wasn't working correctly.

This PR removes the AppFormSelector, and instead extends the AutocompleteSelector to support dynamic values, so the AppFormField can provide dynamic lookup values. This way there is no code duplication, and any fixes made to AutocompleteSelector will be applied to the apps modal.

Tests have been added for the dynamic select that ensures the values are fetched on mount and used. Also that values are fetched on search and used.

Ticket Link

Fixes https://mattermost.atlassian.net/browse/MM-33718
Fixes https://mattermost.atlassian.net/browse/MM-33928

Awaiting merge of feature/cloud-apps -> master #5226

* 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

* 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 * 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

* Add refresh websocket event to refetch bindings * Add missing changes * Declare socket event constant and separate the handler to a different function

* 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 * Simplify return

* 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>

mattermod · 2021-03-19T02:20:11Z

Building app in separate branch.

mattermod · 2021-03-19T02:25:32Z

Successfully building:
https://circleci.com/gh/mattermost/mattermost-mobile/14488
https://circleci.com/gh/mattermost/mattermost-mobile/14487

mattermod · 2021-03-19T02:39:32Z

Artifact links:
https://14488-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.ipa
https://14487-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.apk

mattermod · 2021-03-19T17:14:55Z

Building app in separate branch.

mattermod · 2021-03-19T17:15:16Z

Successfully building:
https://circleci.com/gh/mattermost/mattermost-mobile/14488
https://circleci.com/gh/mattermost/mattermost-mobile/14487

mattermod · 2021-03-19T17:17:17Z

Artifact links:
https://14488-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.ipa
https://14487-70265724-gh.circle-artifacts.com/0/tmp/artifacts/Mattermost_Beta.apk

larkox

LGTM, just two minor comments.

larkox · 2021-03-22T12:15:58Z

app/mm-redux/types/integrations.ts

 };
 export type InteractiveDialogConfig = {
-    app_id: string;


This change seems unrelated.

I'm not sure when this field should be removed. It is an artifact of an early implementation of the apps modal

larkox · 2021-03-22T12:18:03Z

app/screens/apps_form/apps_form_field.tsx

+                break;
+            case AppFieldTypes.STATIC_SELECT:
+                if (field.options) {
+                    options = field.options.map((option) => ({text: option.label, value: option.value}));


Can we simplify to field.options?.map(...)?

I'm getting a type error when having it like this:

Type '{ text: string; value: string; }[] | undefined' is not assignable to type 'DialogOption[]'. Type 'undefined' is not assignable to type 'DialogOption[]'

I'll keep it with the if statement

DHaussermann

Tested and passed

Reviewed both Jira issues related and testes with test and htpp-hello app
Static select is resolved
Dynamic options in command parser is resolved
Confirmed there is test coverage in Zephyr for both of these issues

LGTM!

larkox and others added 21 commits February 10, 2021 15:23

Merge branch 'master' into feature/cloud-apps

bac1b79

Merge branch 'master' into feature/cloud-apps

cd516bb

Add App Forms (#5177)

069d9ed

* 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

Merge branch 'master' into feature/cloud-apps

fe12022

[MM-31508] Rename URL to Path in Call (#5186)

c55e68f

Add user agent to call context (#5193)

7735e37

Remove unneeded state reference (#5196)

b8229e8

Change user agent query on fetch bindings (#5201)

8462388

Add refresh websocket event to refetch bindings (#5194)

4452019

* 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)

009a723

Merge branch 'master' into feature/cloud-apps

ce6b1e7

Add feature flag (#5207)

4bd1776

* Add feature flag * Simplify return

Merge branch 'master' into feature/cloud-apps

581efad

migrate app selector to AutocompleteSelector

67269ba

add if statement to avoid missing prop

4dba51c

add tests for dynamic values

b296409

clean up

a36ba8a

mickmister added 2: Dev Review Requires review by a core commiter Build Apps for PR Build the mobile app for iOS and Android to test 3: QA Review Requires review by a QA tester labels Mar 19, 2021

mickmister requested review from larkox and DHaussermann March 19, 2021 02:20

mattermod removed the Build Apps for PR Build the mobile app for iOS and Android to test label Mar 19, 2021

mickmister requested a review from migbot March 19, 2021 15:31

DHaussermann added the Build Apps for PR Build the mobile app for iOS and Android to test label Mar 19, 2021

mattermod removed the Build Apps for PR Build the mobile app for iOS and Android to test label Mar 19, 2021

mickmister added the Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) label Mar 19, 2021

larkox approved these changes Mar 22, 2021

View reviewed changes

DHaussermann approved these changes Mar 22, 2021

View reviewed changes

DHaussermann removed the 3: QA Review Requires review by a QA tester label Mar 22, 2021

migbot approved these changes Mar 22, 2021

View reviewed changes

migbot added 4: Reviews Complete All reviewers have approved the pull request and removed 2: Dev Review Requires review by a core commiter labels Mar 22, 2021

DHaussermann mentioned this pull request Mar 22, 2021

Feature - Cloud Apps #5226

Merged

Base automatically changed from feature/cloud-apps to master March 22, 2021 22:02

mickmister removed the Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) label Mar 23, 2021

mickmister added 2 commits March 23, 2021 09:18

Merge branch 'master' into app-modals-select-fix

7941de8

remove old files

131f95b

mickmister requested a review from larkox March 23, 2021 13:27

larkox approved these changes Mar 23, 2021

View reviewed changes

larkox merged commit 11a9590 into master Mar 23, 2021

larkox deleted the app-modals-select-fix branch March 23, 2021 18:53

amyblais added this to the v1.42.0 milestone Mar 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor apps modal autocomplete into AutocompleteSelector component #5229

Refactor apps modal autocomplete into AutocompleteSelector component #5229

mickmister commented Mar 19, 2021 •

edited

Loading

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

larkox left a comment

larkox Mar 22, 2021

mickmister Mar 23, 2021

larkox Mar 22, 2021

mickmister Mar 23, 2021 •

edited

Loading

DHaussermann left a comment

Refactor apps modal autocomplete into AutocompleteSelector component #5229

Refactor apps modal autocomplete into AutocompleteSelector component #5229

Conversation

mickmister commented Mar 19, 2021 • edited Loading

Summary

Ticket Link

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

mattermod commented Mar 19, 2021

larkox left a comment

Choose a reason for hiding this comment

larkox Mar 22, 2021

Choose a reason for hiding this comment

mickmister Mar 23, 2021

Choose a reason for hiding this comment

larkox Mar 22, 2021

Choose a reason for hiding this comment

mickmister Mar 23, 2021 • edited Loading

Choose a reason for hiding this comment

DHaussermann left a comment

Choose a reason for hiding this comment

mickmister commented Mar 19, 2021 •

edited

Loading

mickmister Mar 23, 2021 •

edited

Loading