From 2009999090415a262e6fe7ae8f74a7fb626cd83d Mon Sep 17 00:00:00 2001
From: CJ <38697367+imisshtml@users.noreply.github.com>
Date: Fri, 27 Sep 2019 17:44:48 -0400
Subject: [PATCH] MM-18464 Interactive dialog renders out of safe area view on
 landscape orientation (#3335)

* MM-18464

Updated Dialog Items to support isLandscape for SafeArea View

* MM-18464 Updated SafeAreaView

Updated Autoselector Component

* MM-18464 Resolved Issues

Resolved issues for MM-18464

* MM-18464 Resolved Snapshot

Resolved snapshots
---
 .../autocomplete_selector.js                  | 17 ++++--
 app/components/autocomplete_selector/index.js |  2 +
 .../custom_list/option_list_row/index.js      |  3 +-
 .../option_list_row/option_list_row.js        |  7 +++
 .../widgets/settings/bool_setting.js          | 16 +++---
 .../dialog_introduction_text.test.js.snap     |  9 ++--
 .../interactive_dialog.test.js.snap           |  1 +
 .../interactive_dialog/dialog_element.js      |  3 ++
 .../dialog_introduction_text.js               |  5 +-
 .../dialog_introduction_text.test.js          |  1 +
 .../interactive_dialog/interactive_dialog.js  |  1 +
 .../selector_screen.test.js.snap              | 54 ++++++++++++-------
 app/screens/selector_screen/index.js          |  3 +-
 .../selector_screen/selector_screen.js        |  8 ++-
 .../selector_screen/selector_screen.test.js   |  1 +
 15 files changed, 93 insertions(+), 38 deletions(-)

diff --git a/app/components/autocomplete_selector/autocomplete_selector.js b/app/components/autocomplete_selector/autocomplete_selector.js
index ce9b75459..83abb8488 100644
--- a/app/components/autocomplete_selector/autocomplete_selector.js
+++ b/app/components/autocomplete_selector/autocomplete_selector.js
@@ -10,6 +10,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 
 import FormattedText from 'app/components/formatted_text';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import TouchableWithFeedback from 'app/components/touchable_with_feedback';
 import {preventDoubleTap} from 'app/utils/tap';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
@@ -34,6 +35,7 @@ export default class AutocompleteSelector extends PureComponent {
         helpText: PropTypes.node,
         errorText: PropTypes.node,
         roundedBorders: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -116,6 +118,7 @@ export default class AutocompleteSelector extends PureComponent {
             optional,
             showRequiredAsterisk,
             roundedBorders,
+            isLandscape,
         } = this.props;
         const {selectedText} = this.state;
         const style = getStyleSheet(theme);
@@ -181,7 +184,9 @@ export default class AutocompleteSelector extends PureComponent {
 
         return (
             <View style={style.container}>
-                {labelContent}
+                <View style={padding(isLandscape)}>
+                    {labelContent}
+                </View>
                 <TouchableWithFeedback
                     style={style.flex}
                     onPress={this.goToSelectorScreen}
@@ -189,7 +194,7 @@ export default class AutocompleteSelector extends PureComponent {
                 >
                     <View style={inputStyle}>
                         <Text
-                            style={selectedStyle}
+                            style={[selectedStyle, padding(isLandscape)]}
                             numberOfLines={1}
                         >
                             {text}
@@ -197,12 +202,14 @@ export default class AutocompleteSelector extends PureComponent {
                         <Icon
                             name='chevron-down'
                             color={changeOpacity(theme.centerChannelColor, 0.5)}
-                            style={style.icon}
+                            style={[style.icon, padding(isLandscape)]}
                         />
                     </View>
                 </TouchableWithFeedback>
-                {helpTextContent}
-                {errorTextContent}
+                <View style={padding(isLandscape)}>
+                    {helpTextContent}
+                    {errorTextContent}
+                </View>
             </View>
         );
     }
diff --git a/app/components/autocomplete_selector/index.js b/app/components/autocomplete_selector/index.js
index dc77afea9..3a0c42d46 100644
--- a/app/components/autocomplete_selector/index.js
+++ b/app/components/autocomplete_selector/index.js
@@ -9,11 +9,13 @@ import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selector
 import {setAutocompleteSelector} from 'app/actions/views/post';
 
 import AutocompleteSelector from './autocomplete_selector';
+import {isLandscape} from 'app/selectors/device';
 
 function mapStateToProps(state) {
     return {
         teammateNameDisplay: getTeammateNameDisplaySetting(state),
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/custom_list/option_list_row/index.js b/app/components/custom_list/option_list_row/index.js
index 5df0d18f8..83aa84821 100644
--- a/app/components/custom_list/option_list_row/index.js
+++ b/app/components/custom_list/option_list_row/index.js
@@ -4,12 +4,13 @@
 import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import OptionListRow from './option_list_row';
 
 function mapStateToProps(state) {
     return {
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/custom_list/option_list_row/option_list_row.js b/app/components/custom_list/option_list_row/option_list_row.js
index 680b7424b..64ba5d4a2 100644
--- a/app/components/custom_list/option_list_row/option_list_row.js
+++ b/app/components/custom_list/option_list_row/option_list_row.js
@@ -17,12 +17,17 @@ export default class OptionListRow extends React.PureComponent {
         id: PropTypes.string,
         theme: PropTypes.object.isRequired,
         ...CustomListRow.propTypes,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
         intl: intlShape,
     };
 
+    static defaultProps = {
+        isLandscape: false,
+    };
+
     onPress = () => {
         if (this.props.onPress) {
             this.props.onPress(this.props.id, this.props.item);
@@ -36,6 +41,7 @@ export default class OptionListRow extends React.PureComponent {
             selected,
             theme,
             item,
+            isLandscape,
         } = this.props;
 
         const {text, value} = item;
@@ -48,6 +54,7 @@ export default class OptionListRow extends React.PureComponent {
                 enabled={enabled}
                 selectable={selectable}
                 selected={selected}
+                isLandscape={isLandscape}
             >
                 <View style={style.textContainer}>
                     <View>
diff --git a/app/components/widgets/settings/bool_setting.js b/app/components/widgets/settings/bool_setting.js
index c9e7f324c..11a0dff8c 100644
--- a/app/components/widgets/settings/bool_setting.js
+++ b/app/components/widgets/settings/bool_setting.js
@@ -104,25 +104,27 @@ export default class BoolSetting extends PureComponent {
         }
 
         return (
-            <View style={padding(isLandscape)}>
-                {labelContent}
+            <React.Fragment>
+                <View style={padding(isLandscape)}>
+                    {labelContent}
+                </View>
                 <View style={style.separator}/>
-                <View style={[style.inputContainer]}>
-                    <Text style={style.placeholderText}>
+                <View style={style.inputContainer}>
+                    <Text style={[style.placeholderText, padding(isLandscape)]}>
                         {placeholder}
                     </Text>
                     <Switch
                         onValueChange={this.handleChange}
                         value={value}
-                        style={style.inputSwitch}
+                        style={[style.inputSwitch, padding(isLandscape)]}
                     />
                 </View>
                 <View style={style.separator}/>
-                <View>
+                <View style={padding(isLandscape)}>
                     {helpTextContent}
                     {errorTextContent}
                 </View>
-            </View>
+            </React.Fragment>
         );
     }
 }
diff --git a/app/screens/interactive_dialog/__snapshots__/dialog_introduction_text.test.js.snap b/app/screens/interactive_dialog/__snapshots__/dialog_introduction_text.test.js.snap
index 4ecbe6655..261557971 100644
--- a/app/screens/interactive_dialog/__snapshots__/dialog_introduction_text.test.js.snap
+++ b/app/screens/interactive_dialog/__snapshots__/dialog_introduction_text.test.js.snap
@@ -5,9 +5,12 @@ exports[`DialogIntroductionText should not render the component with an empty va
 exports[`DialogIntroductionText should render the introduction text correctly 1`] = `
 <View
   style={
-    Object {
-      "marginHorizontal": 15,
-    }
+    Array [
+      Object {
+        "marginHorizontal": 15,
+      },
+      null,
+    ]
   }
 >
   <Connect(Markdown)
diff --git a/app/screens/interactive_dialog/__snapshots__/interactive_dialog.test.js.snap b/app/screens/interactive_dialog/__snapshots__/interactive_dialog.test.js.snap
index a2753b402..8dc6f43f0 100644
--- a/app/screens/interactive_dialog/__snapshots__/interactive_dialog.test.js.snap
+++ b/app/screens/interactive_dialog/__snapshots__/interactive_dialog.test.js.snap
@@ -18,6 +18,7 @@ exports[`InteractiveDialog should display introduction text if present 1`] = `
   >
     <Connect(StatusBar) />
     <DialogIntroductionText
+      isLandscape={false}
       theme={
         Object {
           "awayIndicator": "#ffbc42",
diff --git a/app/screens/interactive_dialog/dialog_element.js b/app/screens/interactive_dialog/dialog_element.js
index 85f90c4d6..a16ea5482 100644
--- a/app/screens/interactive_dialog/dialog_element.js
+++ b/app/screens/interactive_dialog/dialog_element.js
@@ -118,6 +118,7 @@ export default class DialogElement extends PureComponent {
                     multiline={multiline}
                     keyboardType={keyboardType}
                     secureTextEntry={secureTextEntry}
+                    isLandscape={isLandscape}
                 />
             );
         } else if (type === 'select') {
@@ -135,6 +136,7 @@ export default class DialogElement extends PureComponent {
                     showRequiredAsterisk={true}
                     selected={this.state.selected}
                     roundedBorders={false}
+                    isLandscape={isLandscape}
                 />
             );
         } else if (type === 'radio') {
@@ -148,6 +150,7 @@ export default class DialogElement extends PureComponent {
                     theme={theme}
                     default={value}
                     onChange={this.onChange}
+                    isLandscape={isLandscape}
                 />
             );
         } else if (type === 'bool') {
diff --git a/app/screens/interactive_dialog/dialog_introduction_text.js b/app/screens/interactive_dialog/dialog_introduction_text.js
index db54b075f..fbe4e09cc 100644
--- a/app/screens/interactive_dialog/dialog_introduction_text.js
+++ b/app/screens/interactive_dialog/dialog_introduction_text.js
@@ -9,17 +9,20 @@ import Markdown from 'app/components/markdown';
 
 import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class DialogIntroductionText extends PureComponent {
     static propTypes = {
         value: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     render() {
         const {
             value,
             theme,
+            isLandscape,
         } = this.props;
 
         if (value) {
@@ -28,7 +31,7 @@ export default class DialogIntroductionText extends PureComponent {
             const textStyles = getMarkdownTextStyles(theme);
 
             return (
-                <View style={style.introductionTextView}>
+                <View style={[style.introductionTextView, padding(isLandscape)]}>
                     <Markdown
                         baseTextStyle={style.introductionText}
                         textStyles={textStyles}
diff --git a/app/screens/interactive_dialog/dialog_introduction_text.test.js b/app/screens/interactive_dialog/dialog_introduction_text.test.js
index bf54f5353..2e727672c 100644
--- a/app/screens/interactive_dialog/dialog_introduction_text.test.js
+++ b/app/screens/interactive_dialog/dialog_introduction_text.test.js
@@ -12,6 +12,7 @@ describe('DialogIntroductionText', () => {
     const baseProps = {
         theme: Preferences.THEMES.default,
         value: '**bold** *italic* [link](https://mattermost.com/) <br/> [link target blank](!https://mattermost.com/)',
+        isLandscape: false,
     };
 
     test('should render the introduction text correctly', () => {
diff --git a/app/screens/interactive_dialog/interactive_dialog.js b/app/screens/interactive_dialog/interactive_dialog.js
index b00c23dda..03f70ea44 100644
--- a/app/screens/interactive_dialog/interactive_dialog.js
+++ b/app/screens/interactive_dialog/interactive_dialog.js
@@ -179,6 +179,7 @@ export default class InteractiveDialog extends PureComponent {
                         <DialogIntroductionText
                             value={introductionText}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     }
                     {elements && elements.map((e) => {
diff --git a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
index aed79b6d0..8c500650a 100644
--- a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
+++ b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
@@ -12,9 +12,12 @@ exports[`SelectorScreen should match snapshot for channels 1`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -104,9 +107,12 @@ exports[`SelectorScreen should match snapshot for channels 2`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -196,9 +202,12 @@ exports[`SelectorScreen should match snapshot for explicit options 1`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -295,9 +304,12 @@ exports[`SelectorScreen should match snapshot for searching 1`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -387,9 +399,12 @@ exports[`SelectorScreen should match snapshot for users 1`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -479,9 +494,12 @@ exports[`SelectorScreen should match snapshot for users 2`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
diff --git a/app/screens/selector_screen/index.js b/app/screens/selector_screen/index.js
index e5f69d1fd..47c5f45f0 100644
--- a/app/screens/selector_screen/index.js
+++ b/app/screens/selector_screen/index.js
@@ -8,7 +8,7 @@ import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getProfiles, searchProfiles} from 'mattermost-redux/actions/users';
 import {getChannels, searchChannels} from 'mattermost-redux/actions/channels';
-
+import {isLandscape} from 'app/selectors/device';
 import SelectorScreen from './selector_screen';
 
 function mapStateToProps(state) {
@@ -22,6 +22,7 @@ function mapStateToProps(state) {
         dataSource: menuAction.dataSource,
         onSelect: menuAction.onSelect,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/selector_screen/selector_screen.js b/app/screens/selector_screen/selector_screen.js
index fc7be8b56..6b1793265 100644
--- a/app/screens/selector_screen/selector_screen.js
+++ b/app/screens/selector_screen/selector_screen.js
@@ -33,6 +33,8 @@ import {
 import {t} from 'app/utils/i18n';
 import {popTopScreen} from 'app/actions/navigation';
 
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
+
 export default class SelectorScreen extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
@@ -47,6 +49,7 @@ export default class SelectorScreen extends PureComponent {
         dataSource: PropTypes.string,
         onSelect: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -293,7 +296,7 @@ export default class SelectorScreen extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {theme, dataSource} = this.props;
+        const {theme, dataSource, isLandscape} = this.props;
         const {loading, term} = this.state;
         const style = getStyleFromTheme(theme);
 
@@ -322,7 +325,7 @@ export default class SelectorScreen extends PureComponent {
         return (
             <View style={style.container}>
                 <StatusBar/>
-                <View style={style.searchBar}>
+                <View style={[style.searchBar, padding(isLandscape)]}>
                     <SearchBar
                         ref='search_bar'
                         placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@@ -353,6 +356,7 @@ export default class SelectorScreen extends PureComponent {
                     onRowPress={this.handleSelectItem}
                     renderItem={rowComponent}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </View>
         );
diff --git a/app/screens/selector_screen/selector_screen.test.js b/app/screens/selector_screen/selector_screen.test.js
index b017809f9..bd15c32cc 100644
--- a/app/screens/selector_screen/selector_screen.test.js
+++ b/app/screens/selector_screen/selector_screen.test.js
@@ -76,6 +76,7 @@ describe('SelectorScreen', () => {
         data: [{text: 'text', value: 'value'}],
         dataSource: null,
         theme: Preferences.THEMES.default,
+        isLandscape: false,
     };
 
     test('should match snapshot for explicit options', async () => {