Add markdown to apps forms descriptions and errors (#5426)

* Add markdown to apps forms descriptions and errors

* Minor reference fixes and add markdown to command descriptions

* Revert changes that include markdown on command suggestions

* Disable unneeded markdown

app/components/autocomplete_selector/autocomplete_selector.js

@@ -10,7 +10,9 @@ import {displayUsername} from '@mm-redux/utils/user_utils';
 
 import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
+import Markdown from '@components/markdown';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
+import {getMarkdownBlockStyles, getMarkdownTextStyles} from '@utils/markdown';
 import {preventDoubleTap} from '@utils/tap';
 import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
 import {ViewTypes} from '@constants';
@@ -122,6 +124,8 @@ export default class AutocompleteSelector extends PureComponent {
         } = this.props;
         const {selectedText} = this.state;
         const style = getStyleSheet(theme);
+        const textStyles = getMarkdownTextStyles(theme);
+        const blockStyles = getMarkdownBlockStyles(theme);
 
         let text = placeholder || intl.formatMessage({id: 'mobile.action_menu.select', defaultMessage: 'Select an option'});
         let selectedStyle = style.dropdownPlaceholder;
@@ -167,18 +171,30 @@ export default class AutocompleteSelector extends PureComponent {
         let helpTextContent;
         if (helpText) {
             helpTextContent = (
-                <Text style={style.helpText}>
-                    {helpText}
-                </Text>
+                <View style={style.helpTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.helpText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={helpText}
+                    />
+                </View>
             );
         }
 
         let errorTextContent;
         if (errorText) {
             errorTextContent = (
-                <Text style={style.errorText}>
-                    {errorText}
-                </Text>
+                <View style={style.errorTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.errorText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={errorText}
+                        disableAtChannelMentionHighlight={true}
+                        disableHashtags={true}
+                    />
+                </View>
             );
         }
 
@@ -265,17 +281,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontSize: 14,
             marginLeft: 5,
         },
+        helpTextContainer: {
+            marginHorizontal: 15,
+            marginTop: 10,
+        },
         helpText: {
             fontSize: 12,
             color: changeOpacity(theme.centerChannelColor, 0.5),
+        },
+        errorTextContainer: {
             marginHorizontal: 15,
             marginVertical: 10,
         },
         errorText: {
             fontSize: 12,
             color: theme.errorTextColor,
-            marginHorizontal: 15,
-            marginVertical: 10,
         },
         asterisk: {
             color: theme.errorTextColor,

app/components/widgets/settings/bool_setting.js

@@ -10,6 +10,8 @@ import {
 } from 'react-native';
 
 import FormattedText from '@components/formatted_text';
+import Markdown from '@components/markdown';
+import {getMarkdownBlockStyles, getMarkdownTextStyles} from '@utils/markdown';
 import {
     changeOpacity,
     makeStyleSheetFromTheme,
@@ -49,6 +51,8 @@ export default class BoolSetting extends PureComponent {
             theme,
         } = this.props;
         const style = getStyleSheet(theme);
+        const textStyles = getMarkdownTextStyles(theme);
+        const blockStyles = getMarkdownBlockStyles(theme);
 
         let optionalContent;
         let asterisk;
@@ -81,18 +85,28 @@ export default class BoolSetting extends PureComponent {
         let helpTextContent;
         if (helpText) {
             helpTextContent = (
-                <Text style={style.helpText}>
-                    {helpText}
-                </Text>
+                <View style={style.helpTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.helpText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={helpText}
+                    />
+                </View>
             );
         }
 
         let errorTextContent;
         if (errorText) {
             errorTextContent = (
-                <Text style={style.errorText}>
-                    {errorText}
-                </Text>
+                <View style={style.errorTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.errorText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={errorText}
+                    />
+                </View>
             );
         }
 
@@ -159,17 +173,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontSize: 14,
             marginLeft: 5,
         },
+        helpTextContainer: {
+            marginHorizontal: 15,
+            marginTop: 10,
+        },
         helpText: {
             fontSize: 12,
             color: changeOpacity(theme.centerChannelColor, 0.5),
+        },
+        errorTextContainer: {
             marginHorizontal: 15,
-            marginTop: 10,
+            marginVertical: 10,
         },
         errorText: {
             fontSize: 12,
             color: theme.errorTextColor,
-            marginHorizontal: 15,
-            marginVertical: 10,
         },
         asterisk: {
             color: theme.errorTextColor,

app/components/widgets/settings/text_setting.js

@@ -11,6 +11,8 @@ import {
 } from 'react-native';
 
 import FormattedText from '@components/formatted_text';
+import Markdown from '@components/markdown';
+import {getMarkdownBlockStyles, getMarkdownTextStyles} from '@utils/markdown';
 import {
     changeOpacity,
     makeStyleSheetFromTheme,
@@ -82,6 +84,8 @@ export default class TextSetting extends PureComponent {
             testID,
         } = this.props;
         const style = getStyleSheet(theme);
+        const textStyles = getMarkdownTextStyles(theme);
+        const blockStyles = getMarkdownBlockStyles(theme);
 
         let labelContent = label;
         if (label && label.defaultMessage) {
@@ -130,27 +134,42 @@ export default class TextSetting extends PureComponent {
         let helpTextContent;
         if (helpText) {
             helpTextContent = (
-                <Text style={style.helpText}>
-                    {helpText}
-                </Text>
+                <View style={style.helpTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.helpText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={helpText}
+                    />
+                </View>
             );
         }
 
         let errorTextContent;
         if (errorText) {
             errorTextContent = (
-                <Text style={style.errorText}>
-                    {errorText}
-                </Text>
+                <View style={style.errorTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.errorText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={errorText}
+                    />
+                </View>
             );
         }
 
         let disabledTextContent;
         if (disabled && disabledText) {
             disabledTextContent = (
-                <Text style={style.helpText}>
-                    {disabledText}
-                </Text>
+                <View style={style.helpTextContainer} >
+                    <Markdown
+                        baseTextStyle={style.helpText}
+                        textStyles={textStyles}
+                        blockStyles={blockStyles}
+                        value={disabledText}
+                    />
+                </View>
             );
         }
 
@@ -238,17 +257,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontSize: 14,
             marginLeft: 5,
         },
+        helpTextContainer: {
+            marginHorizontal: 15,
+            marginTop: 10,
+        },
         helpText: {
             fontSize: 12,
             color: changeOpacity(theme.centerChannelColor, 0.5),
+        },
+        errorTextContainer: {
             marginHorizontal: 15,
-            marginTop: 10,
+            marginVertical: 10,
         },
         errorText: {
             fontSize: 12,
             color: theme.errorTextColor,
-            marginHorizontal: 15,
-            marginTop: 10,
         },
         asterisk: {
             color: theme.errorTextColor,

app/screens/apps_form/apps_form_component.tsx

@@ -3,28 +3,29 @@
 
 import {intlShape} from 'react-intl';
 import React, {PureComponent} from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {EventSubscription, Navigation} from 'react-native-navigation';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
-import {checkDialogElementForError, checkIfErrorsMatchElements} from '@mm-redux/utils/integration_utils';
-
-import ErrorText from 'app/components/error_text';
-import StatusBar from 'app/components/status_bar';
-import FormattedText from '@components/formatted_text';
-
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
-import {dismissModal} from 'app/actions/navigation';
-
-import DialogIntroductionText from './dialog_introduction_text';
-import {Theme} from '@mm-redux/types/preferences';
+import {AppCallResponseTypes} from '@mm-redux/constants/apps';
 import {AppCallRequest, AppField, AppForm, AppFormValue, AppFormValues, AppLookupResponse, AppSelectOption, FormResponseData} from '@mm-redux/types/apps';
 import {DialogElement} from '@mm-redux/types/integrations';
-import {AppCallResponseTypes} from '@mm-redux/constants/apps';
-import AppsFormField from './apps_form_field';
+import {Theme} from '@mm-redux/types/preferences';
+import {checkDialogElementForError, checkIfErrorsMatchElements} from '@mm-redux/utils/integration_utils';
+
+import StatusBar from '@components/status_bar';
+import FormattedText from '@components/formatted_text';
+import Markdown from '@components/markdown';
+
+import {dismissModal} from '@actions/navigation';
+import {getMarkdownBlockStyles, getMarkdownTextStyles} from '@utils/markdown';
 import {preventDoubleTap} from '@utils/tap';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {DoAppCallResult} from 'types/actions/apps';
 
+import AppsFormField from './apps_form_field';
+import DialogIntroductionText from './dialog_introduction_text';
+
 export type Props = {
     call: AppCallRequest;
     form: AppForm;
@@ -343,11 +344,14 @@ export default class AppsFormComponent extends PureComponent<Props, State> {
                 >
                     <StatusBar/>
                     {formError && (
-                        <ErrorText
-                            testID='interactive_dialog.error.text'
-                            textStyle={style.errorContainer}
-                            error={formError}
-                        />
+                        <View style={style.errorContainer} >
+                            <Markdown
+                                baseTextStyle={style.errorLabel}
+                                textStyles={getMarkdownTextStyles(theme)}
+                                blockStyles={getMarkdownBlockStyles(theme)}
+                                value={formError}
+                            />
+                        </View>
                     )}
                     {header &&
                         <DialogIntroductionText
@@ -399,5 +403,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
             marginBottom: 20,
             marginTop: 10,
         },
+        errorLabel: {
+            fontSize: 12,
+            textAlign: 'left',
+            color: (theme.errorTextColor || '#DA4A4A'),
+        },
     };
 });