[PLT-6452] Remove edit button on mobile, and have the edit icon beside the value, and the value as a link (#6565)

* Remove edit button on mobile, and have the edit icon beside the value, and the value as a link

* update per review

webapp/components/setting_item_min.jsx

@@ -10,7 +10,22 @@ import React from 'react';
 
 export default function SettingItemMin(props) {
     let editButton = null;
-    if (!props.disableOpen) {
+    let describeSection = null;
+    if (!props.disableOpen && Utils.isMobile()) {
+        editButton = (
+            <li className='col-xs-12 col-sm-3 section-edit'>
+                <a
+                    id={Utils.createSafeId(props.title) + 'Edit'}
+                    className='theme'
+                    href='#'
+                    onClick={props.updateSection}
+                >
+                    <i className='fa fa-pencil'/>
+                    {props.describe}
+                </a>
+            </li>
+        );
+    } else if (!props.disableOpen) {
         editButton = (
             <li className='col-xs-12 col-sm-3 section-edit'>
                 <a
@@ -27,6 +42,15 @@ export default function SettingItemMin(props) {
                 </a>
             </li>
         );
+
+        describeSection = (
+            <li
+                id={Utils.createSafeId(props.title) + 'Desc'}
+                className='col-xs-12 section-describe'
+            >
+                {props.describe}
+            </li>
+        );
     }
 
     return (
@@ -36,12 +60,7 @@ export default function SettingItemMin(props) {
         >
             <li className='col-xs-12 col-sm-9 section-title'>{props.title}</li>
             {editButton}
-            <li
-                id={Utils.createSafeId(props.title) + 'Desc'}
-                className='col-xs-12 section-describe'
-            >
-                {props.describe}
-            </li>
+            {describeSection}
         </ul>
     );
 }

webapp/components/user_settings/user_settings_general/user_settings_general.jsx

@@ -50,6 +50,10 @@ const holders = defineMessages({
         id: 'user.settings.general.uploadImage',
         defaultMessage: "Click 'Edit' to upload an image."
     },
+    uploadImageMobile: {
+        id: 'user.settings.general.mobile.uploadImage',
+        defaultMessage: 'Click to upload an image.'
+    },
     fullName: {
         id: 'user.settings.general.fullName',
         defaultMessage: 'Full Name'
@@ -822,6 +826,14 @@ class UserSettingsGeneralTab extends React.Component {
                         defaultMessage="Click 'Edit' to add your full name"
                     />
                 );
+                if (Utils.isMobile()) {
+                    describe = (
+                        <FormattedMessage
+                            id='user.settings.general.mobile.emptyName'
+                            defaultMessage='Click to add your full name'
+                        />
+                    );
+                }
             }
 
             nameSection = (
@@ -916,6 +928,14 @@ class UserSettingsGeneralTab extends React.Component {
                         defaultMessage="Click 'Edit' to add a nickname"
                     />
                 );
+                if (Utils.isMobile()) {
+                    describe = (
+                        <FormattedMessage
+                            id='user.settings.general.mobile.emptyNickname'
+                            defaultMessage='Click to add a nickname'
+                        />
+                    );
+                }
             }
 
             nicknameSection = (
@@ -1092,6 +1112,14 @@ class UserSettingsGeneralTab extends React.Component {
                         defaultMessage="Click 'Edit' to add your job title / position"
                     />
                 );
+                if (Utils.isMobile()) {
+                    describe = (
+                        <FormattedMessage
+                            id='user.settings.general.mobile.emptyPosition'
+                            defaultMessage='Click to add your job title / position'
+                        />
+                    );
+                }
             }
 
             positionSection = (
@@ -1128,6 +1156,9 @@ class UserSettingsGeneralTab extends React.Component {
             );
         } else {
             let minMessage = formatMessage(holders.uploadImage);
+            if (Utils.isMobile()) {
+                minMessage = formatMessage(holders.uploadImageMobile);
+            }
             if (user.last_picture_update) {
                 minMessage = (
                     <FormattedMessage

webapp/i18n/en.json

@@ -2243,8 +2243,11 @@
   "user.settings.general.emailSamlCantUpdate": "Login occurs through SAML. Email cannot be updated. Email address used for notifications is {email}.",
   "user.settings.general.emailUnchanged": "Your new email address is the same as your old email address.",
   "user.settings.general.emptyName": "Click 'Edit' to add your full name",
+  "user.settings.general.mobile.emptyName": "Click to add your full name",
   "user.settings.general.emptyNickname": "Click 'Edit' to add a nickname",
+  "user.settings.general.mobile.emptyNickname": "Click to add a nickname",
   "user.settings.general.emptyPosition": "Click 'Edit' to add your job title / position",
+  "user.settings.general.mobile.emptyPosition": "Click to add your job title / position",
   "user.settings.general.field_handled_externally": "This field is handled through your login provider. If you want to change it, you need to do so through your login provider.",
   "user.settings.general.firstName": "First Name",
   "user.settings.general.fullName": "Full Name",
@@ -2267,6 +2270,7 @@
   "user.settings.general.profilePicture": "Profile Picture",
   "user.settings.general.title": "General Settings",
   "user.settings.general.uploadImage": "Click 'Edit' to upload an image.",
+  "user.settings.general.mobile.uploadImage": "Click to upload an image.",
   "user.settings.general.username": "Username",
   "user.settings.general.usernameInfo": "Pick something easy for teammates to recognize and recall.",
   "user.settings.general.usernameReserved": "This username is reserved, please choose a new one.",