Allow profile button configuration (#947)

* Allow profile button configuration

* Renamed config to experimental and moved to separate function

app/components/vector_icon.js

@@ -3,13 +3,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Text} from 'react-native';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import FoundationIcon from 'react-native-vector-icons/Foundation';
 
-export default function settingsItemIcon(props) {
-    const {name, type, style} = props;
+export default function vectorIcon(props) {
+    const {name, type, style, size} = props;
 
     switch (type) {
     case 'fontawesome':
@@ -17,6 +18,7 @@ export default function settingsItemIcon(props) {
             <FontAwesomeIcon
                 name={name}
                 style={style}
+                size={size}
             />
         );
     case 'foundation':
@@ -24,6 +26,7 @@ export default function settingsItemIcon(props) {
             <FoundationIcon
                 name={name}
                 style={style}
+                size={size}
             />
         );
     case 'ion':
@@ -31,6 +34,7 @@ export default function settingsItemIcon(props) {
             <IonIcon
                 name={name}
                 style={style}
+                size={size}
             />
         );
     case 'material':
@@ -38,6 +42,7 @@ export default function settingsItemIcon(props) {
             <MaterialIcon
                 name={name}
                 style={style}
+                size={size}
             />
         );
     }
@@ -45,8 +50,13 @@ export default function settingsItemIcon(props) {
     return null;
 }
 
-settingsItemIcon.propTypes = {
+vectorIcon.propTypes = {
     name: PropTypes.string,
     type: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    size: PropTypes.number,
+    style: Text.propTypes.style
+};
+
+vectorIcon.defaultProps = {
+    size: 14
 };

app/screens/settings/settings_item/index.js

@@ -7,8 +7,8 @@ import {TouchableOpacity, View} from 'react-native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 import FormattedText from 'app/components/formatted_text';
+import VectorIcon from 'app/components/vector_icon.js';
 
-import SettingItemIcon from './setting_item_icon';
 import getStyleSheet from './style';
 
 export default class SettingsItem extends PureComponent {
@@ -58,7 +58,7 @@ export default class SettingsItem extends PureComponent {
         let icon;
         if (iconType && iconName) {
             icon = (
-                <SettingItemIcon
+                <VectorIcon
                     name={iconName}
                     type={iconType}
                     style={[style.icon, destructor]}

app/screens/user_profile/user_profile.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import {
     ScrollView,
     Text,
-    View
+    View,
+    Linking
 } from 'react-native';
 import {injectIntl, intlShape} from 'react-intl';
 
@@ -19,6 +20,7 @@ import {alertErrorWithFallback} from 'app/utils/general';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import UserProfileRow from './user_profile_row';
+import Config from 'assets/config';
 
 class UserProfile extends PureComponent {
     static propTypes = {
@@ -30,7 +32,6 @@ class UserProfile extends PureComponent {
         currentChannel: PropTypes.object.isRequired,
         currentDisplayName: PropTypes.string,
         currentUserId: PropTypes.string.isRequired,
-        createChannelRequest: PropTypes.object.isRequired,
         intl: intlShape.isRequired,
         navigator: PropTypes.object,
         teammateNameDisplay: PropTypes.string,
@@ -103,6 +104,46 @@ class UserProfile extends PureComponent {
         }
     };
 
+    handleLinkPress = (link) => {
+        const username = this.props.user.username;
+        const email = this.props.user.email;
+
+        return () => {
+            var hydrated = link.replace(/{email}/, email);
+            hydrated = hydrated.replace(/{username}/, username);
+            Linking.openURL(hydrated);
+        };
+    };
+
+    renderAdditionalOptions = () => {
+        if (!Config.ExperimentalProfileLinks) {
+            return null;
+        }
+
+        const profileLinks = Config.ExperimentalProfileLinks;
+
+        const additionalOptions = profileLinks.map((l) => {
+            var action;
+            if (l.type === 'link') {
+                action = this.handleLinkPress(l.url);
+            }
+
+            return (
+                <UserProfileRow
+                    key={l.defaultMessage}
+                    action={action}
+                    defaultMessage={l.defaultMessage}
+                    textId={l.textId}
+                    icon={l.icon}
+                    iconType={l.iconType}
+                    theme={this.props.theme}
+                />
+            );
+        });
+
+        return additionalOptions;
+    }
+
     render() {
         const {config, theme, user} = this.props;
         const style = createStyleSheet(theme);
@@ -134,10 +175,12 @@ class UserProfile extends PureComponent {
                         action={this.sendMessage}
                         defaultMessage='Send Message'
                         icon='paper-plane-o'
+                        iconType='fontawesome'
                         textId='mobile.routes.user_profile.send_message'
                         theme={theme}
                     />
                     }
+                    {this.renderAdditionalOptions()}
                 </ScrollView>
             </View>
         );

app/screens/user_profile/user_profile_row.js

@@ -9,10 +9,10 @@ import {
     TouchableHighlight,
     View
 } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import FormattedText from 'app/components/formatted_text';
+import VectorIcon from 'app/components/vector_icon.js';
 
 const createStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
@@ -61,7 +61,7 @@ function createTouchableComponent(children, action) {
 }
 
 function userProfileRow(props) {
-    const {action, defaultMessage, detail, icon, textId, togglable, theme, shouldRender = true} = props;
+    const {action, defaultMessage, detail, icon, textId, togglable, theme, iconType, shouldRender = true} = props;
 
     if (!shouldRender) {
         return null;
@@ -72,9 +72,10 @@ function userProfileRow(props) {
     const RowComponent = (
         <View style={style.wrapper}>
             <View style={style.container}>
-                <Icon
+                <VectorIcon
                     name={icon}
                     size={15}
+                    type={iconType}
                     style={style.leftIcon}
                 />
                 <FormattedText
@@ -88,9 +89,10 @@ function userProfileRow(props) {
                         onValueChange={action}
                         value={detail}
                     /> :
-                    <Icon
+                    <VectorIcon
                         name='chevron-right'
                         size={15}
+                        type={'fontawesome'}
                         style={style.rightIcon}
                     />
                 }
@@ -114,6 +116,7 @@ userProfileRow.propTypes = {
         PropTypes.bool
     ]),
     icon: PropTypes.string.isRequired,
+    iconType: PropTypes.oneOf(['fontawesome', 'foundation', 'ion', 'material']),
     iconColor: PropTypes.string,
     textId: PropTypes.string.isRequired,
     togglable: PropTypes.bool,

docs/base_configs.md

@@ -0,0 +1,21 @@
+# Base Configs
+The application has a configuration JSON file to control a number of application concerns. This config holds small feature flags, generally for use in white-labeling the App.
+
+## Options
+
+**Profile Links**
+The `ProfileLinks` array allows custom buttons to be set in a user's profile. Currently, only one type is supported: `link`. It supports i18n defaultMessage and textId. As well as any icon from `fontawesome`, `ion`, `foundation`, `material`. Finally, the `url` must be specified. You can put in any valid URL and can have `{email}` or `{username}` replaced with currently displayed profile.
+
+Example:
+```
+"ProfileLinks": [
+    {
+        "type": "link",
+        "defaultMessage": "Whober",
+        "textId": "user_profile.custom_link.whober",
+        "icon": "ios-person-outline",
+        "iconType": "ion",
+        "url": "https://www.custompage.com/{email}/view"
+    }
+]
+```