Merge pull request Expensify#19128 from christoph-pflueger/fix-worksp…

…ace-name-validation fix: Expensify#18447 - client-side validation for length of workspace name
ojasjadhav2 · May 19, 2023 · 9e43cb7 · 9e43cb7
2 parents fe8f91c + 08b011d
commit 9e43cb7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -1141,6 +1141,7 @@ export default {
             nameInputLabel: 'Name',
             nameInputHelpText: 'This is the name you will see on your workspace.',
             nameIsRequiredError: 'You need to define a name for your workspace.',
+            nameIsTooLongError: `Your workspace name can be at most ${CONST.WORKSPACE_NAME_CHARACTER_LIMIT} characters long.`,
             currencyInputLabel: 'Default currency',
             currencyInputHelpText: 'All expenses on this workspace will be converted to this currency.',
             currencyInputDisabledText: "The default currency can't be changed because this workspace is linked to a USD bank account.",

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -1147,6 +1147,7 @@ export default {
             nameInputLabel: 'Nombre',
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
+            nameIsTooLongError: `El nombre de su espacio de trabajo no puede tener más de ${CONST.WORKSPACE_NAME_CHARACTER_LIMIT} caracteres.`,
             currencyInputLabel: 'Moneda por defecto',
             currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.',
             currencyInputDisabledText: 'La moneda predeterminada no se puede cambiar porque este espacio de trabajo está vinculado a una cuenta bancaria en USD.',

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -45,6 +45,7 @@ const defaultProps = {
 
 function WorkspaceSettingsPage(props) {
     const nameIsRequiredError = props.translate('workspace.editor.nameIsRequiredError');
+    const nameIsTooLongError = props.translate('workspace.editor.nameIsTooLongError');
 
     const currencyItems = useMemo(() => {
         const currencyListKeys = _.keys(props.currencyList);
@@ -74,11 +75,15 @@ function WorkspaceSettingsPage(props) {
 
             if (!name || !name.length) {
                 errors.name = nameIsRequiredError;
+            } else if ([...name].length > CONST.WORKSPACE_NAME_CHARACTER_LIMIT) {
+                // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16
+                // code units.
+                errors.name = nameIsTooLongError;
             }
 
             return errors;
         },
-        [nameIsRequiredError],
+        [nameIsRequiredError, nameIsTooLongError],
     );
 
     const policyName = lodashGet(props.policy, 'name', '');