diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 6a8803999560..1d117e7c366a 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -40,33 +40,44 @@ This is a checklist for PR authors & reviewers. Please make sure to complete all - [ ] I wrote clear testing steps that cover the changes made in this PR - [ ] I added steps for local testing in the `Tests` section - [ ] I added steps for Staging and/or Production testing in the `QA steps` section - - [ ] I added steps to cover failure scenarios (if applicable, i.e. verify an input displays the correct error message if the entered data is not correct) - - [ ] I added steps to cover offline scenarios (if applicable, i.e. verify the default avatar icon is displayed if app is offline) + - [ ] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct) + - [ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline) - [ ] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms) -- [ ] I ran the tests & verified they passed on: +- [ ] I ran the tests on **all platforms** & verified they passed on: - [ ] iOS / native - [ ] Android / native - [ ] iOS / Safari - [ ] Android / Chrome - [ ] MacOS / Chrome - [ ] MacOS / Desktop -- [ ] I verified there are no console errors related to changes in this PR +- [ ] I verified there are no console errors (if there’s a console error not related to the PR, report it or open an issue for it to be fixed) - [ ] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md#reviewing-the-code)) - - [ ] I added comments when the code was not self explanatory - - [ ] I put all copy / text shown in the product in all `src/languages/*` files (if applicable) - - [ ] I followed proper naming convention for platform-specific files (if applicable) - - [ ] I followed style guidelines (in [`Styling.md`](https://github.com/Expensify/App/blob/main/STYLING.md)) for all style edits I made - - [ ] I followed the JSDocs style guidelines (in [`STYLE.md`](https://github.com/Expensify/App/blob/main/STYLE.md#jsdocs)) + - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. “toggleReport” and not “onIconClick”) + - [ ] I verified that comments were added to code that is not self explanatory + - [ ] I verified that any new or modified comments were clear, correct english, and explained “why” the code was doing something instead of only explaining “what” the code was doing. + - [ ] I verified any copy / text shown in the product was added in all `src/languages/*` files + - [ ] I verified any copy / text that was added to the app is correct english and approved by marketing by tagging the marketing team on the original GH to get the correct copy. + - [ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README. + - [ ] I verified the JSDocs style guidelines (in [`STYLE.md`](https://github.com/Expensify/App/blob/main/STYLE.md#jsdocs)) were followed +- [ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers - [ ] I followed the guidelines as stated in the [Review Guidelines](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md) - [ ] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like `Avatar`, I verified the components using `Avatar` are working as expected) +- [ ] I verified all code is DRY +- [ ] I verified any variables that can be defined as constants (ie. in CONST.js) are defined as such - [ ] If a new component is created I verified that: - [ ] A similar component doesn't exist in the codebase - - [ ] Has the `displayName` property if it’s a Functional Component - - [ ] Has Storybook stories (optional) - - [ ] Has Unit tests (optional) + - [ ] All props are defined accurately and each prop has a `/** comment above it */` + - [ ] Any functional components have the `displayName` property + - [ ] The file is named correctly + - [ ] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone + - [ ] The only data being stored in the state is data necessary for rendering and nothing else + - [ ] Any internal methods are bound to “this” properly so there are no scoping issues + - [ ] Any internal methods bound to “this” are necessary to be bound + - [ ] All JSX used for rendering exists in the render method + - [ ] The component has the minimum amount of code necessary for its purpose and it is - [ ] If a new CSS style is added I verified that: - [ ] A similar style doesn’t already exist - - [ ] The style can’t be created with a [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function + - [ ] The style can’t be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`) @@ -76,8 +87,8 @@ This is a checklist for PR authors & reviewers. Please make sure to complete all - [ ] I verified testing steps are clear and they cover the changes made in this PR - [ ] I verified the steps for local testing are in the `Tests` section - [ ] I verified the steps for Staging and/or Production testing are in the `QA steps` section - - [ ] I verified the steps cover failure scenarios (if applicable, i.e. verify an input displays the correct error message if the entered data is not correct) - - [ ] I verified steps cover offline scenarios (if applicable, i.e. verify the default avatar icon is displayed if app is offline) + - [ ] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct) + - [ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline) - [ ] I checked that screenshots or videos are included for tests on [all platforms](https://github.com/Expensify/App/blob/main/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms) - [ ] I verified tests pass on **all platforms** & I tested again on: - [ ] iOS / native @@ -86,23 +97,34 @@ This is a checklist for PR authors & reviewers. Please make sure to complete all - [ ] Android / Chrome - [ ] MacOS / Chrome - [ ] MacOS / Desktop -- [ ] I verified there are no console errors related to changes in this PR +- [ ] I verified there are no console errors (if there’s a console error not related to the PR, report it or open an issue for it to be fixed) - [ ] I verified proper code patterns were followed (see [Reviewing the code](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md#reviewing-the-code)) - - [ ] I verified comments were added when the code was not self explanatory - - [ ] I verified any copy / text shown in the product was added in all `src/languages/*` files (if applicable) - - [ ] I verified proper naming convention for platform-specific files was followed (if applicable) - - [ ] I verified [style guidelines](https://github.com/Expensify/App/blob/main/STYLING.md) were followed + - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. “toggleReport” and not “onIconClick”). + - [ ] I verified that comments were added to code that is not self explanatory + - [ ] I verified that any new or modified comments were clear, correct english, and explained “why” the code was doing something instead of only explaining “what” the code was doing. + - [ ] I verified any copy / text shown in the product was added in all `src/languages/*` files + - [ ] I verified any copy / text that was added to the app is correct english and approved by marketing by tagging the marketing team on the original GH to get the correct copy. + - [ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README. - [ ] I verified the JSDocs style guidelines (in [`STYLE.md`](https://github.com/Expensify/App/blob/main/STYLE.md#jsdocs)) were followed +- [ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers - [ ] I verified that this PR follows the guidelines as stated in the [Review Guidelines](https://github.com/Expensify/App/blob/main/PR_REVIEW_GUIDELINES.md) - [ ] I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like `Avatar`, I verified the components using `Avatar` are working as expected) +- [ ] I verified all code is DRY +- [ ] I verified any variables that can be defined as constants (ie. in CONST.js) are defined as such - [ ] If a new component is created I verified that: - [ ] A similar component doesn't exist in the codebase - - [ ] Has the `displayName` property if it’s a Functional Component - - [ ] Has Storybook stories (optional) - - [ ] Has Unit tests (optional) + - [ ] All props are defined accurately and each prop has a `/** comment above it */` + - [ ] Any functional components have the `displayName` property + - [ ] The file is named correctly + - [ ] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone + - [ ] The only data being stored in the state is data necessary for rendering and nothing else + - [ ] Any internal methods are bound to “this” properly so there are no scoping issues + - [ ] Any internal methods bound to “this” are necessary to be bound + - [ ] All JSX used for rendering exists in the render method + - [ ] The component has the minimum amount of code necessary for its purpose and it is broken down into smaller components in order to separate concerns and functions - [ ] If a new CSS style is added I verified that: - [ ] A similar style doesn’t already exist - - [ ] The style can’t be created with a [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function + - [ ] The style can’t be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`) ### QA Steps diff --git a/android/app/build.gradle b/android/app/build.gradle index ff70e9f52dc4..84173005d047 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -152,8 +152,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001014302 - versionName "1.1.43-2" + versionCode 1001014400 + versionName "1.1.44-0" } splits { abi { diff --git a/assets/images/avatars/admin-room.svg b/assets/images/avatars/admin-room.svg new file mode 100644 index 000000000000..b358608ed994 --- /dev/null +++ b/assets/images/avatars/admin-room.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/assets/images/avatars/announce-room.svg b/assets/images/avatars/announce-room.svg new file mode 100644 index 000000000000..d29ff8c76976 --- /dev/null +++ b/assets/images/avatars/announce-room.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + diff --git a/assets/images/avatars/deleted-room.svg b/assets/images/avatars/deleted-room.svg index cfce5daab440..c68c13a23fef 100644 --- a/assets/images/avatars/deleted-room.svg +++ b/assets/images/avatars/deleted-room.svg @@ -1,9 +1,9 @@ - + diff --git a/assets/images/avatars/room.svg b/assets/images/avatars/room.svg index f138146a65cb..bb677bac3714 100644 --- a/assets/images/avatars/room.svg +++ b/assets/images/avatars/room.svg @@ -1,9 +1,9 @@ - + diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 342b28c7a941..ad0e7af14312 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -17,7 +17,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.1.43 + 1.1.44 CFBundleSignature ???? CFBundleURLTypes @@ -31,7 +31,7 @@ CFBundleVersion - 1.1.43.2 + 1.1.44.0 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 29c3d0e53466..6d5a83cbb7a6 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.1.43 + 1.1.44 CFBundleSignature ???? CFBundleVersion - 1.1.43.2 + 1.1.44.0 diff --git a/package-lock.json b/package-lock.json index dfcf6a255fe9..9d25967a5bc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.43-2", + "version": "1.1.44-0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 78dcb7f96d3d..d4ccb2777d7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.43-2", + "version": "1.1.44-0", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index efa074e05c4c..f494895af102 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -102,11 +102,9 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { {LabelComponent && ()} - {!_.isEmpty(props.errorText) && ( - - {props.errorText} - - )} + + {props.errorText} + ); }); diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 40e0342153b6..4dc6b42dff85 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -72,10 +72,14 @@ import Wallet from '../../../assets/images/wallet.svg'; import Workspace from '../../../assets/images/workspace-default-avatar.svg'; import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg'; import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg'; +import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg'; +import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg'; export { ActiveRoomAvatar, + AdminRoomAvatar, Android, + AnnounceRoomAvatar, Apple, ArrowRight, BackArrow, diff --git a/src/components/InlineErrorText.js b/src/components/InlineErrorText.js index d77a5c4aacee..8f6f705329f4 100644 --- a/src/components/InlineErrorText.js +++ b/src/components/InlineErrorText.js @@ -6,14 +6,13 @@ import Text from './Text'; const propTypes = { /** Text to display */ - children: PropTypes.string, + children: PropTypes.string.isRequired, /** Styling for inline error text */ styles: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { - children: 'Error', styles: [], }; diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index f7a00dd71bc7..b7277fcda73e 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -63,11 +63,9 @@ class Picker extends PureComponent { {...pickerProps} /> - {!_.isEmpty(this.props.errorText) && ( - - {this.props.errorText} - - )} + + {this.props.errorText} + ); } diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js index f958adb750b4..630981970c2c 100644 --- a/src/components/RadioButtonWithLabel.js +++ b/src/components/RadioButtonWithLabel.js @@ -75,11 +75,9 @@ const RadioButtonWithLabel = (props) => { {LabelComponent && ()} - {!_.isEmpty(props.errorText) && ( - - {props.errorText} - - )} + + {props.errorText} + ); }; diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 7c0e8b8f254b..a03b8045feed 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -80,7 +80,8 @@ const ReportWelcomeText = (props) => { {isPolicyExpenseChat && ( <> - + {/* Add align center style individually because of limited style inheritance in React Native https://reactnative.dev/docs/text#limited-style-inheritance */} + {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')} @@ -100,7 +101,8 @@ const ReportWelcomeText = (props) => { )} {isChatRoom && ( <> - + {/* Add align center style individually because of limited style inheritance in React Native https://reactnative.dev/docs/text#limited-style-inheritance */} + {isResctrictedRoom ? `${props.translate('reportActionsView.beginningOfChatHistoryRestrictedPartOne')}` : `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartOne')}`} @@ -117,7 +119,8 @@ const ReportWelcomeText = (props) => { )} {isDefault && ( <> - + {/* Add align center style individually because of limited style inheritance in React Native https://reactnative.dev/docs/text#limited-style-inheritance */} + {props.translate('reportActionsView.beginningOfChatHistory')} {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => ( diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 87dae0aff7da..9e2693f2d333 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -11,6 +11,7 @@ import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; +import InlineErrorText from '../InlineErrorText'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -187,8 +188,6 @@ class BaseTextInput extends Component { // eslint-disable-next-line react/forbid-foreign-prop-types const inputProps = _.omit(this.props, _.keys(baseTextInputPropTypes.propTypes)); const hasLabel = Boolean(this.props.label.length); - const inputHelpText = this.props.errorText || this.props.hint; - const formHelpStyles = this.props.errorText ? styles.formError : styles.formHelp; const placeholder = (this.props.prefixCharacter || this.state.isFocused || !hasLabel || (hasLabel && this.props.forceActiveLabel)) ? this.props.placeholder : null; const textInputContainerStyles = _.reduce([ styles.textInputContainer, @@ -287,27 +286,9 @@ class BaseTextInput extends Component { - {(!_.isEmpty(inputHelpText) || !_.isNull(this.props.maxLength)) && ( - - {!_.isEmpty(inputHelpText) && ( - {inputHelpText} - )} - {!_.isNull(this.props.maxLength) && ( - - {this.state.value.length} - / - {this.props.maxLength} - - )} - - )} + + {this.props.errorText} + {/* Text input component doesn't support auto grow by default. diff --git a/src/libs/API.js b/src/libs/API.js index 1fbfe935e5bf..4dae5926bc28 100644 --- a/src/libs/API.js +++ b/src/libs/API.js @@ -333,33 +333,6 @@ function reauthenticate(command = '') { }); } -/** - * Calls the command=Authenticate API with an accountID, validateCode, and optional 2FA code. This is used specifically - * for sharing sessions between e.com and this app. It will return an authToken that is used for initiating a session - * in this app. This API call doesn't have any special handling (like retries or special error handling). - * - * @param {Object} parameters - * @param {String} parameters.accountID - * @param {String} parameters.validateCode - * @param {String} [parameters.twoFactorAuthCode] - * @returns {Promise} - */ -function AuthenticateWithAccountID(parameters) { - const commandName = 'Authenticate'; - - requireParameters([ - 'accountID', - 'validateCode', - ], parameters, commandName); - - return Network.post(commandName, { - accountID: parameters.accountID, - validateCode: parameters.validateCode, - twoFactorAuthCode: parameters.twoFactorAuthCode, - shouldRetry: false, - }); -} - /** * @param {Object} parameters * @returns {Promise} @@ -1247,7 +1220,6 @@ function GetStatementPDF(parameters) { export { Authenticate, - AuthenticateWithAccountID, AddBillingCard, BankAccount_Create, BankAccount_Get, diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 3937b60fb342..9401ca7c05ee 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -219,6 +219,12 @@ function getAvatarSources(report) { if (ReportUtils.isArchivedRoom(report)) { return Expensicons.DeletedRoomAvatar; } + if (ReportUtils.isAdminRoom(report)) { + return Expensicons.AdminRoomAvatar; + } + if (ReportUtils.isAnnounceRoom(report)) { + return Expensicons.AnnounceRoomAvatar; + } if (ReportUtils.isChatRoom(report)) { return Expensicons.ActiveRoomAvatar; } diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index db932c39a9e9..d58583855e66 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -340,31 +340,6 @@ function setPassword(password, validateCode, accountID) { }); } -/** - * This is used when a user clicks on a link from e.com that goes to this application. We want the user to be able to - * be automatically logged into this app. If the user is not already logged into this app, then this method is called - * in order to retrieve an authToken from e.com and be signed in. - * - * @param {String} accountID - * @param {String} validateCode - * @param {String} [twoFactorAuthCode] - */ -function continueSessionFromECom(accountID, validateCode, twoFactorAuthCode) { - API.AuthenticateWithAccountID({ - accountID, - validateCode, - twoFactorAuthCode, - }).then((data) => { - // If something failed, it doesn't really matter what, send the user to the sign in form to log in normally - if (data.jsonCode !== 200) { - Navigation.navigate(ROUTES.HOME); - return; - } - - setSuccessfulSignInData(data); - }); -} - /** * Clear the credentials and partial sign in session so the user can taken back to first Login step */ @@ -537,7 +512,6 @@ function setShouldShowComposeInput(shouldShowComposeInput) { } export { - continueSessionFromECom, fetchAccountDetails, setOrChangePassword, setPassword, diff --git a/src/libs/reportUtils.js b/src/libs/reportUtils.js index 59f83ff1db9e..aae2e0da77e6 100644 --- a/src/libs/reportUtils.js +++ b/src/libs/reportUtils.js @@ -92,6 +92,26 @@ function isDefaultRoom(report) { ], lodashGet(report, ['chatType'], '')); } +/** + * Whether the provided report is an Admin room + * @param {Object} report + * @param {String} report.chatType + * @returns {Boolean} + */ +function isAdminRoom(report) { + return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS; +} + +/** + * Whether the provided report is a Announce room + * @param {Object} report + * @param {String} report.chatType + * @returns {Boolean} + */ +function isAnnounceRoom(report) { + return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE; +} + /** * Whether the provided report is a user created policy room * @param {Object} report @@ -257,6 +277,8 @@ export { canDeleteReportAction, sortReportsByLastVisited, isDefaultRoom, + isAdminRoom, + isAnnounceRoom, isUserCreatedPolicyRoom, isChatRoom, getChatRoomSubtitle, diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index b6b9bf791756..34af6c026e13 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -95,6 +95,7 @@ const IdentityForm = (props) => { value={props.values.dob} onChange={value => props.onFieldChange({dob: value})} errorText={dobErrorText} + maximumDate={new Date()} /> policy.id === this.props.report.policyID); @@ -165,12 +165,7 @@ class ReportSettingsPage extends Component { /> - - - {this.props.translate('common.notifications')} - - - + { @@ -184,48 +179,59 @@ class ReportSettingsPage extends Component { /> - {shouldShowRename && ( + {shouldShowRoomName && ( - - {this.props.translate('newRoomPage.roomName')} - - + - this.clearErrorAndSetValue('newRoomName', newRoomName)} - disabled={shouldDisableRename} - /> + {shouldDisableRename ? ( + + + {this.props.translate('newRoomPage.roomName')} + + + {this.state.newRoomName} + + + ) + : ( + this.clearErrorAndSetValue('newRoomName', newRoomName)} + disabled={shouldDisableRename} + /> + )} - + {!shouldDisableRename && ( + + )} )} {linkedWorkspace && ( - + {this.props.translate('workspace.common.workspace')} - + {linkedWorkspace.name} )} {this.props.report.visibility && ( - + {this.props.translate('newRoomPage.visibility')} {this.props.report.visibility} diff --git a/src/styles/styles.js b/src/styles/styles.js index f78e815d0f2a..9eab8076ae71 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -809,6 +809,10 @@ const styles = { color: themeColors.textSupporting, }, + lh16: { + lineHeight: 16, + }, + formLabel: { fontFamily: fontFamily.GTA_BOLD, fontWeight: fontWeightBold,