Add defaultMessage, add plural syntax

packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js

@@ -30,7 +30,10 @@ const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
   return (
     <Wrapper hasConditions={hasConditions} className={className}>
       <Button variant={variant} startIcon={<Settings />} onClick={onClick}>
-        {formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' })}
+        {formatMessage({
+          id: 'app.components.LeftMenuLinkContainer.settings',
+          defaultMessage: 'Settings',
+        })}
       </Button>
     </Wrapper>
   );

packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js

@@ -28,6 +28,7 @@ const ActionRow = ({
         <TableLabel textColor="neutral500">
           {formatMessage({
             id: 'Settings.permissions.conditions.can',
+            defaultMessage: 'Can',
           })}
           &nbsp;
         </TableLabel>
@@ -41,6 +42,7 @@ const ActionRow = ({
           &nbsp;
           {formatMessage({
             id: 'Settings.permissions.conditions.when',
+            defaultMessage: 'When',
           })}
         </TableLabel>
       </Row>

packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js

@@ -118,16 +118,14 @@ const ConditionsModal = ({
             const shouldDisplayChevron = index < translatedHeaders.length - 1;
 
             return (
-              <>
+              <React.Fragment key={key}>
-                <TextButton textColor="neutral800" key={key}>
+                <TextButton textColor="neutral800">{element}</TextButton>
-                  {element}
-                </TextButton>
                 {shouldDisplayChevron && (
                   <Icon>
                     <After />
                   </Icon>
                 )}
-              </>
+              </React.Fragment>
             );
           })}
         </Stack>
@@ -137,12 +135,19 @@ const ConditionsModal = ({
           <H2>
             {formatMessage({
               id: 'Settings.permissions.conditions.define-conditions',
+              defaultMessage: 'Define conditions',
             })}
           </H2>
           <Separator />
           <Box>
             {actionsToDisplay.length === 0 && (
-              <Text>{formatMessage({ id: 'Settings.permissions.conditions.no-actions' })}</Text>
+              <Text>
+                {formatMessage({
+                  id: 'Settings.permissions.conditions.no-actions',
+                  defaultMessage:
+                    'You first need to select actions (create, read, update, ...) before defining conditions on them.',
+                })}
+              </Text>
             )}
             {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
               const name = pathToConditionsObject.join('..');
@@ -167,13 +172,14 @@ const ConditionsModal = ({
       <ModalFooter
         startActions={
           <Button variant="tertiary" onClick={onToggle}>
-            {formatMessage({ id: 'app.components.Button.cancel' })}
+            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
           </Button>
         }
         endActions={
           <Button onClick={handleSubmit}>
             {formatMessage({
               id: 'Settings.permissions.conditions.apply',
+              defaultMessage: 'Apply',
             })}
           </Button>
         }

packages/core/admin/admin/src/components/Roles/Permissions/index.js

@@ -111,7 +111,9 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) =>
       <TabGroup id="tabs">
         <Tabs>
           {TAB_LABELS.map(tabLabel => (
-            <Tab key={tabLabel.id}>{formatMessage({ id: tabLabel.labelId })}</Tab>
+            <Tab key={tabLabel.id}>
+              {formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage })}
+            </Tab>
           ))}
         </Tabs>
         <TabPanels>

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js

@@ -91,7 +91,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
               indeterminate={hasSomeActionsSelected}
               value={hasAllActionsSelected}
             >
-              {formatMessage({ id: 'app.utils.select-all' })}
+              {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
             </Checkbox>
           </Box>
         </Row>

packages/core/admin/admin/src/pages/SettingsPage/index.js

@@ -63,7 +63,10 @@ function SettingsPage() {
     return <Redirect to="/settings/application-infos" />;
   }
 
-  const settingTitle = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+  const settingTitle = formatMessage({
+    id: 'app.components.LeftMenuLinkContainer.settings',
+    defaultMessage: 'Settings',
+  });
 
   return (
     <SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>

packages/core/admin/admin/src/translations/en.json

@@ -127,7 +127,7 @@
   "Settings.roles.create.title": "Create a role",
   "Settings.roles.created": "Role created",
   "Settings.roles.edit.title": "Edit a role",
-  "Settings.roles.form.button.users-with-role": "{number} users with this role",
+  "Settings.roles.form.button.users-with-role": "{number, plural, =0 {# users} one {# user} other {# users}} with this role",
   "Settings.roles.form.created": "Created",
   "Settings.roles.form.description": "Name and description of the role",
   "Settings.roles.form.input.description": "Description",

packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js

@@ -169,6 +169,7 @@ const CreatePage = () => {
                           <Text highlighted>
                             {formatMessage({
                               id: 'Settings.roles.form.title',
+                              defaultMessage: 'Details',
                             })}
                           </Text>
                         </Box>
@@ -176,6 +177,7 @@ const CreatePage = () => {
                           <Text textColor="neutral500" small>
                             {formatMessage({
                               id: 'Settings.roles.form.description',
+                              defaultMessage: 'Name and description of the role',
                             })}
                           </Text>
                         </Box>
@@ -184,6 +186,8 @@ const CreatePage = () => {
                         {formatMessage(
                           {
                             id: 'Settings.roles.form.button.users-with-role',
+                            defaultMessage:
+                              '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
                           },
                           { number: 0 }
                         )}
@@ -194,7 +198,10 @@ const CreatePage = () => {
                         <TextInput
                           name="name"
                           error={errors.name && formatMessage({ id: errors.name })}
-                          label={formatMessage({ id: 'Settings.roles.form.input.name' })}
+                          label={formatMessage({
+                            id: 'Settings.roles.form.input.name',
+                            defaultMessage: 'Name',
+                          })}
                           onChange={handleChange}
                           onBlur={handleBlur}
                           value={values.name}
@@ -202,7 +209,10 @@ const CreatePage = () => {
                       </GridItem>
                       <GridItem col={6}>
                         <Textarea
-                          label={formatMessage({ id: 'Settings.roles.form.input.description' })}
+                          label={formatMessage({
+                            id: 'Settings.roles.form.input.description',
+                            defaultMessage: 'Description',
+                          })}
                           name="description"
                           error={errors.name && formatMessage({ id: errors.name })}
                           onChange={handleChange}

packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * Tests for CreatePage
+ *
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CreatePage } from './index';
+
+describe('<CreatePage />', () => {
+  it('renders and matches the snapshot', () => {
+    const {
+      container: { firstChild },
+    } = render(<CreatePage />);
+
+    expect(firstChild).toMatchInlineSnapshot();
+  });
+});