fix(widget-list): add missing translations in widget list top bar (#5471) (#5679)

Author: josiang

packages/netlify-cms-locales/src/en/index.js

@@ -197,6 +197,10 @@ const en = {
       datetime: {
         now: 'Now',
       },
+      list: {
+        add: 'Add %{item}',
+        addType: 'Add %{item} item',
+      },
     },
   },
   mediaLibrary: {

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -65,6 +65,7 @@ class ObjectWidgetTopBar extends React.Component {
     collapsed: PropTypes.bool,
     heading: PropTypes.node,
     label: PropTypes.string,
+    t: PropTypes.func.isRequired,
   };
 
   renderAddUI() {
@@ -82,7 +83,9 @@ class ObjectWidgetTopBar extends React.Component {
     return (
       <Dropdown
         renderButton={() => (
-          <StyledDropdownButton>Add {this.props.label} item</StyledDropdownButton>
+          <StyledDropdownButton>
+            {this.props.t('editor.editorWidgets.list.addType', { item: this.props.label })}
+          </StyledDropdownButton>
         )}
       >
         {types.map((type, idx) => (
@@ -99,7 +102,8 @@ class ObjectWidgetTopBar extends React.Component {
   renderAddButton() {
     return (
       <AddButton onClick={this.props.onAdd}>
-        Add {this.props.label} <Icon type="add" size="xsmall" />
+        {this.props.t('editor.editorWidgets.list.add', { item: this.props.label })}
+        <Icon type="add" size="xsmall" />
       </AddButton>
     );
   }

packages/netlify-cms-widget-list/src/ListControl.js

@@ -128,6 +128,7 @@ export default class ListControl extends React.Component {
     clearFieldErrors: PropTypes.func.isRequired,
     fieldsErrors: ImmutablePropTypes.map.isRequired,
     entry: ImmutablePropTypes.map.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -604,7 +605,7 @@ export default class ListControl extends React.Component {
   }
 
   renderListControl() {
-    const { value, forID, field, classNameWrapper } = this.props;
+    const { value, forID, field, classNameWrapper, t } = this.props;
     const { itemsCollapsed, listCollapsed } = this.state;
     const items = value || List();
     const label = field.get('label', field.get('name'));
@@ -635,6 +636,7 @@ export default class ListControl extends React.Component {
               label={labelSingular.toLowerCase()}
               onCollapseToggle={this.handleCollapseAllToggle}
               collapsed={selfCollapsed}
+              t={t}
             />
             {(!selfCollapsed || !minimizeCollapsedItems) && (
               <SortableList

packages/netlify-cms-widget-list/src/__tests__/ListControl.spec.js

@@ -587,7 +587,7 @@ describe('ListControl', () => {
 
     expect(queryByTestId('object-control-0')).toBeNull();
 
-    fireEvent.click(getByText('Add list'));
+    fireEvent.click(getByText('editor.editorWidgets.list.add'));
 
     expect(props.onChange).toHaveBeenCalledTimes(1);
     expect(props.onChange).toHaveBeenCalledWith(fromJS([{}]));

packages/netlify-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap

@@ -177,7 +177,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -406,7 +406,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -665,7 +665,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -905,7 +905,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -1163,7 +1163,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -1422,7 +1422,7 @@ exports[`ListControl should render list with fields with default collapse ("true
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -1663,7 +1663,7 @@ exports[`ListControl should render list with fields with default collapse ("true
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -1862,7 +1862,7 @@ exports[`ListControl should render list with nested object 1`] = `
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >
@@ -2120,7 +2120,7 @@ exports[`ListControl should render list with nested object with collapse = false
       <button
         class="emotion-10 emotion-11"
       >
-        Add list 
+        editor.editorWidgets.list.add
         <span
           class="emotion-0 emotion-8 emotion-2"
         >

packages/netlify-cms-widget-object/src/ObjectControl.js

@@ -38,6 +38,7 @@ export default class ObjectControl extends React.Component {
     clearFieldErrors: PropTypes.func.isRequired,
     fieldsErrors: ImmutablePropTypes.map.isRequired,
     hasError: PropTypes.bool,
+    t: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -135,7 +136,7 @@ export default class ObjectControl extends React.Component {
   };
 
   render() {
-    const { field, forID, classNameWrapper, forList, hasError } = this.props;
+    const { field, forID, classNameWrapper, forList, hasError, t } = this.props;
     const collapsed = forList ? this.props.collapsed : this.state.collapsed;
     const multiFields = field.get('fields');
     const singleField = field.get('field');
@@ -168,6 +169,7 @@ export default class ObjectControl extends React.Component {
                   collapsed={collapsed}
                   onCollapseToggle={this.handleCollapseToggle}
                   heading={collapsed && this.objectLabel()}
+                  t={t}
                 />
               )}
               <div