Surface room name errors and warn users about reserved policy room name error

src/CONST.js

@@ -247,6 +247,7 @@ const CONST = {
             RESTRICTED: 'restricted',
             PRIVATE: 'private',
         },
+        RESERVED_ROOM_NAMES: ['#admins', '#announce'],
         MAX_PREVIEW_AVATARS: 4,
         MAX_ROOM_NAME_LENGTH: 80,
     },

src/components/RoomNameInput.js

@@ -8,7 +8,6 @@ import styles from '../styles/styles';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from '../pages/workspace/withFullPolicy';
-
 import TextInputWithPrefix from './TextInputWithPrefix';
 
 const propTypes = {
@@ -105,11 +104,18 @@ class RoomNameInput extends Component {
             report => report && report.policyID === this.props.policyID && report.reportName === finalRoomName,
         );
 
+        let error = '';
+
         // We error if the room name already exists. We don't care if it matches the original name provided in this
         // component because then we are not changing the room's name.
-        const error = isExistingRoomName && finalRoomName !== this.originalRoomName
-            ? this.props.translate('newRoomPage.roomAlreadyExists')
-            : '';
+        if (isExistingRoomName && finalRoomName !== this.originalRoomName) {
+            error = this.props.translate('newRoomPage.roomAlreadyExistsError');
+        }
+
+        // Certain names are reserved for default rooms and should not be used for policy rooms.
+        if (_.contains(CONST.REPORT.RESERVED_ROOM_NAMES, finalRoomName)) {
+            error = this.props.translate('newRoomPage.roomNameReservedError');
+        }
 
         this.setState({
             roomName: finalRoomName,

src/components/TextInputWithPrefix/index.android.js

@@ -5,10 +5,11 @@ import _ from 'underscore';
 import React from 'react';
 import Text from '../Text';
 import styles from '../../styles/styles';
+import InlineErrorText from '../InlineErrorText';
 
 const propTypes = {
     /** Prefix character */
-    prefixCharacter: PropTypes.string,
+    prefixCharacter: PropTypes.string.isRequired,
 
     /** Text to show if there is an error */
     errorText: PropTypes.string,
@@ -22,22 +23,19 @@ const propTypes = {
 
 const defaultProps = {
     errorText: '',
-    prefixCharacter: '',
     disabled: false,
     onChangeText: () => {},
 };
 
-const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    ? <TextInput {..._.omit(props, ['prefixCharacter', 'errorText'])} />
-    : (
+const TextInputWithPrefix = props => (
+    <>
         <View
-                style={[
-                    styles.textInputWithPrefix.container,
-                    {paddingTop: 0},
-                    props.disabled && styles.inputDisabled,
-                    props.errorText && styles.errorOutline,
-                ]}
+            style={[
+                styles.textInputWithPrefix.container,
+                {paddingTop: 0},
+                props.disabled && styles.inputDisabled,
+                props.errorText && styles.errorOutline,
+            ]}
         >
             <Text style={[styles.textInputWithPrefix.prefix, {paddingTop: 10}]}>{props.prefixCharacter}</Text>
             <TextInput
@@ -51,7 +49,13 @@ const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
                 {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])}
             />
         </View>
-    ));
+        {!_.isEmpty(props.errorText) && (
+            <InlineErrorText>
+                {props.errorText}
+            </InlineErrorText>
+        )}
+    </>
+);
 
 TextInputWithPrefix.propTypes = propTypes;
 TextInputWithPrefix.defaultProps = defaultProps;

src/components/TextInputWithPrefix/index.js

@@ -5,10 +5,11 @@ import _ from 'underscore';
 import React from 'react';
 import Text from '../Text';
 import styles from '../../styles/styles';
+import InlineErrorText from '../InlineErrorText';
 
 const propTypes = {
     /** Prefix character */
-    prefixCharacter: PropTypes.string,
+    prefixCharacter: PropTypes.string.isRequired,
 
     /** Text to show if there is an error */
     errorText: PropTypes.string,
@@ -22,21 +23,18 @@ const propTypes = {
 
 const defaultProps = {
     errorText: '',
-    prefixCharacter: '',
     disabled: false,
     onChangeText: () => {},
 };
 
-const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    ? <TextInput {..._.omit(props, ['prefixCharacter', 'errorText'])} />
-    : (
+const TextInputWithPrefix = props => (
+    <>
         <View
-                style={[
-                    styles.textInputWithPrefix.container,
-                    props.disabled ? styles.inputDisabled : undefined,
-                    props.errorText ? styles.errorOutline : undefined,
-                ]}
+            style={[
+                styles.textInputWithPrefix.container,
+                props.disabled ? styles.inputDisabled : undefined,
+                props.errorText ? styles.errorOutline : undefined,
+            ]}
         >
             <Text style={styles.textInputWithPrefix.prefix}>{props.prefixCharacter}</Text>
             <TextInput
@@ -49,7 +47,13 @@ const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter)
                 {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])}
             />
         </View>
-    ));
+        {!_.isEmpty(props.errorText) && (
+            <InlineErrorText>
+                {props.errorText}
+            </InlineErrorText>
+        )}
+    </>
+);
 
 TextInputWithPrefix.propTypes = propTypes;
 TextInputWithPrefix.defaultProps = defaultProps;

src/languages/en.js

@@ -874,7 +874,8 @@ export default {
         restrictedDescription: 'People in your workspace are able to find this room using Search',
         privateDescription: 'Only people invited to this room are able to find it',
         createRoom: 'Create Room',
-        roomAlreadyExists: 'A room with this name already exists',
+        roomAlreadyExistsError: 'A room with this name already exists',
+        roomNameReservedError: 'This name is reserved and cannot be used',
         social: 'social',
         selectAWorkspace: 'Select a workspace',
         growlMessageOnError: 'Unable to create policy room, please check your connection and try again.',

src/languages/es.js

@@ -876,7 +876,8 @@ export default {
         restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala a través de "Buscar"',
         privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla',
         createRoom: 'Crea una sala de chat',
-        roomAlreadyExists: 'Ya existe una sala con este nombre',
+        roomAlreadyExistsError: 'Ya existe una sala con este nombre',
+        roomNameReservedError: 'Este nombre está reservado y no puede usarse',
         social: 'social',
         selectAWorkspace: 'Seleccionar un espacio de trabajo',
         growlMessageOnError: 'No ha sido posible crear el espacio de trabajo, por favor comprueba tu conexión e inténtalo de nuevo.',