From 3ed078f4cee713429918f377af93de05a02dc2af Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Mon, 12 Aug 2019 16:13:29 +0200
Subject: [PATCH] Automated cherry pick of #3087 (#3106)

* Add flex 1

* Add snapshot test

* Fix placeholder text color
---
 .../text_input_with_localized_placeholder.js  |   5 +-
 ...on_settings_mentions_keywords.test.js.snap | 252 ++++++++++++++++++
 ...notification_settings_mentions_keywords.js |   1 +
 ...ication_settings_mentions_keywords.test.js |  30 +++
 4 files changed, 287 insertions(+), 1 deletion(-)
 create mode 100644 app/screens/settings/notification_settings_mentions_keywords/__snapshots__/notification_settings_mentions_keywords.test.js.snap
 create mode 100644 app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.test.js

diff --git a/app/components/text_input_with_localized_placeholder.js b/app/components/text_input_with_localized_placeholder.js
index 771721587..ba12c7ff7 100644
--- a/app/components/text_input_with_localized_placeholder.js
+++ b/app/components/text_input_with_localized_placeholder.js
@@ -14,6 +14,10 @@ export default class TextInputWithLocalizedPlaceholder extends PureComponent {
         placeholder: PropTypes.object.isRequired,
     };
 
+    static defaultProps = {
+        placeholderTextColor: changeOpacity('#000', 0.5),
+    };
+
     static contextTypes = {
         intl: intlShape.isRequired,
     };
@@ -39,7 +43,6 @@ export default class TextInputWithLocalizedPlaceholder extends PureComponent {
                 ref='input'
                 {...otherProps}
                 placeholder={placeholderString}
-                placeholderTextColor={changeOpacity('#000', 0.5)}
                 disableFullscreenUI={true}
             />
         );
diff --git a/app/screens/settings/notification_settings_mentions_keywords/__snapshots__/notification_settings_mentions_keywords.test.js.snap b/app/screens/settings/notification_settings_mentions_keywords/__snapshots__/notification_settings_mentions_keywords.test.js.snap
new file mode 100644
index 000000000..f8a6236ef
--- /dev/null
+++ b/app/screens/settings/notification_settings_mentions_keywords/__snapshots__/notification_settings_mentions_keywords.test.js.snap
@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationSettingsMentionsKeywords should match snapshot 1`] = `
+NotificationSettingsMentionsKeywords {
+  "context": Object {},
+  "handleSubmit": [Function],
+  "keywordsRef": [Function],
+  "navigationEventListener": Object {
+    "remove": [Function],
+  },
+  "onKeywordsChangeText": [Function],
+  "props": Object {
+    "actions": Object {
+      "popTopScreen": [MockFunction],
+    },
+    "componentId": "component-id",
+    "intl": Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    },
+    "keywords": "",
+    "onBack": [MockFunction],
+    "theme": Object {
+      "awayIndicator": "#ffbc42",
+      "buttonBg": "#166de0",
+      "buttonColor": "#ffffff",
+      "centerChannelBg": "#ffffff",
+      "centerChannelColor": "#3d3c40",
+      "codeTheme": "github",
+      "dndIndicator": "#f74343",
+      "errorTextColor": "#fd5960",
+      "linkColor": "#2389d7",
+      "mentionBj": "#ffffff",
+      "mentionColor": "#145dbf",
+      "mentionHighlightBg": "#ffe577",
+      "mentionHighlightLink": "#166de0",
+      "newMessageSeparator": "#ff8800",
+      "onlineIndicator": "#06d6a0",
+      "sidebarBg": "#145dbf",
+      "sidebarHeaderBg": "#1153ab",
+      "sidebarHeaderTextColor": "#ffffff",
+      "sidebarText": "#ffffff",
+      "sidebarTextActiveBorder": "#579eff",
+      "sidebarTextActiveColor": "#ffffff",
+      "sidebarTextHoverBg": "#4578bf",
+      "sidebarUnreadText": "#ffffff",
+      "type": "Mattermost",
+    },
+  },
+  "refs": Object {},
+  "setState": [Function],
+  "state": Object {
+    "keywords": "",
+  },
+  "updater": Updater {
+    "_callbacks": Array [],
+    "_renderer": ReactShallowRenderer {
+      "_context": Object {},
+      "_didScheduleRenderPhaseUpdate": false,
+      "_dispatcher": Object {
+        "readContext": [Function],
+        "useCallback": [Function],
+        "useContext": [Function],
+        "useDebugValue": [Function],
+        "useEffect": [Function],
+        "useImperativeHandle": [Function],
+        "useLayoutEffect": [Function],
+        "useMemo": [Function],
+        "useReducer": [Function],
+        "useRef": [Function],
+        "useState": [Function],
+      },
+      "_element": <NotificationSettingsMentionsKeywords
+        actions={
+          Object {
+            "popTopScreen": [MockFunction],
+          }
+        }
+        componentId="component-id"
+        intl={
+          Object {
+            "defaultFormats": Object {},
+            "defaultLocale": "en",
+            "formatDate": [Function],
+            "formatHTMLMessage": [Function],
+            "formatMessage": [Function],
+            "formatNumber": [Function],
+            "formatPlural": [Function],
+            "formatRelative": [Function],
+            "formatTime": [Function],
+            "formats": Object {},
+            "formatters": Object {
+              "getDateTimeFormat": [Function],
+              "getMessageFormat": [Function],
+              "getNumberFormat": [Function],
+              "getPluralFormat": [Function],
+              "getRelativeFormat": [Function],
+            },
+            "locale": "en",
+            "messages": Object {},
+            "now": [Function],
+            "onError": [Function],
+            "textComponent": "span",
+            "timeZone": null,
+          }
+        }
+        keywords=""
+        onBack={[MockFunction]}
+        theme={
+          Object {
+            "awayIndicator": "#ffbc42",
+            "buttonBg": "#166de0",
+            "buttonColor": "#ffffff",
+            "centerChannelBg": "#ffffff",
+            "centerChannelColor": "#3d3c40",
+            "codeTheme": "github",
+            "dndIndicator": "#f74343",
+            "errorTextColor": "#fd5960",
+            "linkColor": "#2389d7",
+            "mentionBj": "#ffffff",
+            "mentionColor": "#145dbf",
+            "mentionHighlightBg": "#ffe577",
+            "mentionHighlightLink": "#166de0",
+            "newMessageSeparator": "#ff8800",
+            "onlineIndicator": "#06d6a0",
+            "sidebarBg": "#145dbf",
+            "sidebarHeaderBg": "#1153ab",
+            "sidebarHeaderTextColor": "#ffffff",
+            "sidebarText": "#ffffff",
+            "sidebarTextActiveBorder": "#579eff",
+            "sidebarTextActiveColor": "#ffffff",
+            "sidebarTextHoverBg": "#4578bf",
+            "sidebarUnreadText": "#ffffff",
+            "type": "Mattermost",
+          }
+        }
+      />,
+      "_firstWorkInProgressHook": null,
+      "_forcedUpdate": false,
+      "_instance": [Circular],
+      "_isReRender": false,
+      "_newState": null,
+      "_numberOfReRenders": 0,
+      "_renderPhaseUpdates": null,
+      "_rendered": <View
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "flex": 1,
+          }
+        }
+      >
+        <Connect(StatusBar) />
+        <ScrollViewMock
+          alwaysBounceVertical={false}
+          contentContainerStyle={
+            Object {
+              "backgroundColor": "rgba(61,60,64,0.06)",
+              "flex": 1,
+              "paddingTop": 35,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#ffffff",
+                "borderBottomColor": "rgba(61,60,64,0.1)",
+                "borderBottomWidth": 1,
+                "borderTopColor": "rgba(61,60,64,0.1)",
+                "borderTopWidth": 1,
+              }
+            }
+          >
+            <TextInputWithLocalizedPlaceholder
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoFocus={true}
+              blurOnSubmit={true}
+              multiline={true}
+              numberOfLines={1}
+              onChangeText={[Function]}
+              onSubmitEditing={[Function]}
+              placeholder={
+                Object {
+                  "defaultMessage": "Other words that trigger a mention",
+                  "id": "mobile.notification_settings_mentions.keywordsDescription",
+                }
+              }
+              placeholderTextColor="rgba(61,60,64,0.4)"
+              returnKeyType="done"
+              style={
+                Object {
+                  "color": "#3d3c40",
+                  "fontSize": 15,
+                  "height": 150,
+                  "paddingHorizontal": 15,
+                  "paddingVertical": 10,
+                }
+              }
+              value=""
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "marginTop": 10,
+                "paddingHorizontal": 15,
+              }
+            }
+          >
+            <FormattedText
+              defaultMessage="Keywords are non-case sensitive and should be separated by a comma."
+              id="mobile.notification_settings_mentions.keywordsHelp"
+              style={
+                Object {
+                  "color": "rgba(61,60,64,0.4)",
+                  "fontSize": 13,
+                }
+              }
+            />
+          </View>
+        </ScrollViewMock>
+      </View>,
+      "_rendering": false,
+      "_updater": [Circular],
+      "_workInProgressHook": null,
+    },
+  },
+}
+`;
diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
index f6ab36b92..37ef06ada 100644
--- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
+++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
@@ -107,6 +107,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         wrapper: {
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
+            flex: 1,
             paddingTop: 35,
         },
         inputContainer: {
diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.test.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.test.js
new file mode 100644
index 000000000..afb44f247
--- /dev/null
+++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.test.js
@@ -0,0 +1,30 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import {shallowWithIntl} from 'test/intl-test-helper';
+
+import NotificationSettingsMentionsKeywords from './notification_settings_mentions_keywords';
+
+describe('NotificationSettingsMentionsKeywords', () => {
+    const baseProps = {
+        actions: {
+            popTopScreen: jest.fn(),
+        },
+        componentId: 'component-id',
+        keywords: '',
+        onBack: jest.fn(),
+        theme: Preferences.THEMES.default,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallowWithIntl(
+            <NotificationSettingsMentionsKeywords {...baseProps}/>
+        );
+
+        expect(wrapper.instance()).toMatchSnapshot();
+    });
+});