fix(locale): remove hard coded strings (#3193)

.gitignore

@@ -7,6 +7,7 @@ npm-debug.log
 .tern-project
 yarn-error.log
 .vscode/
+.idea/
 manifest.yml
 .imdone/
 website/data/contributors.json
@@ -18,4 +19,4 @@ coverage/
 *.log
 .env
 .temp/
-storybook-static/
+storybook-static/

packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js

@@ -17,6 +17,7 @@ export default class BitbucketAuthenticationPage extends React.Component {
     authEndpoint: PropTypes.string,
     config: PropTypes.object.isRequired,
     clearHash: PropTypes.func,
+    t: PropTypes.func.isRequired,
   };
 
   state = {};
@@ -70,7 +71,7 @@ export default class BitbucketAuthenticationPage extends React.Component {
   };
 
   render() {
-    const { inProgress, config } = this.props;
+    const { inProgress, config, t } = this.props;
 
     return (
       <AuthenticationPage
@@ -82,7 +83,7 @@ export default class BitbucketAuthenticationPage extends React.Component {
         renderButtonContent={() => (
           <React.Fragment>
             <LoginButtonIcon type="bitbucket" />
-            {inProgress ? 'Logging in...' : 'Login with Bitbucket'}
+            {inProgress ? t('auth.loggingIn') : t('auth.loginWithBitbucket')}
           </React.Fragment>
         )}
       />

packages/netlify-cms-backend-github/src/AuthenticationPage.js

@@ -29,6 +29,7 @@ export default class GitHubAuthenticationPage extends React.Component {
     authEndpoint: PropTypes.string,
     config: PropTypes.object.isRequired,
     clearHash: PropTypes.func,
+    t: PropTypes.func.isRequired,
   };
 
   state = {};
@@ -92,15 +93,17 @@ export default class GitHubAuthenticationPage extends React.Component {
     });
   };
 
-  renderLoginButton = () =>
+  renderLoginButton = () => {
-    this.props.inProgress || this.state.findingFork ? (
+    const { inProgress, t } = this.props;
-      'Logging in...'
+    return inProgress || this.state.findingFork ? (
+      t('auth.loggingIn')
     ) : (
       <React.Fragment>
         <LoginButtonIcon type="github" />
-        {' Login with GitHub'}
+        {t('auth.loginWithGitHub')}
       </React.Fragment>
     );
+  };
 
   getAuthenticationPageRenderArgs() {
     const { requestingFork } = this.state;

packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js

@@ -17,6 +17,7 @@ export default class GitLabAuthenticationPage extends React.Component {
     authEndpoint: PropTypes.string,
     config: PropTypes.object.isRequired,
     clearHash: PropTypes.func,
+    t: PropTypes.func.isRequired,
   };
 
   state = {};
@@ -68,7 +69,7 @@ export default class GitLabAuthenticationPage extends React.Component {
   };
 
   render() {
-    const { inProgress, config } = this.props;
+    const { inProgress, config, t } = this.props;
     return (
       <AuthenticationPage
         onLogin={this.handleLogin}
@@ -78,7 +79,8 @@ export default class GitLabAuthenticationPage extends React.Component {
         siteUrl={config.site_url}
         renderButtonContent={() => (
           <React.Fragment>
-            <LoginButtonIcon type="gitlab" /> {inProgress ? 'Logging in...' : 'Login with GitLab'}
+            <LoginButtonIcon type="gitlab" />{' '}
+            {inProgress ? t('auth.loggingIn') : t('auth.loginWithGitLab')}
           </React.Fragment>
         )}
       />

packages/netlify-cms-backend-proxy/src/AuthenticationPage.js

@@ -38,6 +38,7 @@ export default class AuthenticationPage extends React.Component {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
     config: PropTypes.object.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   handleLogin = e => {
@@ -46,13 +47,13 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
-    const { config, inProgress } = this.props;
+    const { config, inProgress, t } = this.props;
 
     return (
       <StyledAuthenticationPage>
         <PageLogoIcon size="300px" type="netlify-cms" />
         <LoginButton disabled={inProgress} onClick={this.handleLogin}>
-          {inProgress ? 'Logging in...' : 'Login'}
+          {inProgress ? t('auth.loggingIn') : t('auth.login')}
         </LoginButton>
         {config.site_url && <GoBackButton href={config.site_url}></GoBackButton>}
       </StyledAuthenticationPage>

packages/netlify-cms-backend-test/src/AuthenticationPage.js

@@ -38,6 +38,7 @@ export default class AuthenticationPage extends React.Component {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
     config: PropTypes.object.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
@@ -56,13 +57,13 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
-    const { config, inProgress } = this.props;
+    const { config, inProgress, t } = this.props;
 
     return (
       <StyledAuthenticationPage>
         <PageLogoIcon size="300px" type="netlify-cms" />
         <LoginButton disabled={inProgress} onClick={this.handleLogin}>
-          {inProgress ? 'Logging in...' : 'Login'}
+          {inProgress ? t('auth.loggingIn') : t('auth.login')}
         </LoginButton>
         {config.site_url && <GoBackButton href={config.site_url}></GoBackButton>}
       </StyledAuthenticationPage>

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -182,7 +182,9 @@ class EditorControl extends React.Component {
               hasErrors={!!errors}
               htmlFor={this.uniqueFieldId}
             >
-              {`${field.get('label', field.get('name'))}${isFieldOptional ? ' (optional)' : ''}`}
+              {`${field.get('label', field.get('name'))}${
+                isFieldOptional ? ` (${t('editor.editorControl.field.optional')})` : ''
+              }`}
             </FieldLabel>
             <Widget
               classNameWrapper={cx(

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

@@ -3,6 +3,9 @@ const en = {
     login: 'Login',
     loggingIn: 'Logging in...',
     loginWithNetlifyIdentity: 'Login with Netlify Identity',
+    loginWithBitbucket: 'Login with Bitbucket',
+    loginWithGitHub: 'Login with GitHub',
+    loginWithGitLab: 'Login with GitLab',
     errors: {
       email: 'Make sure to enter your email.',
       password: 'Please enter your password.',
@@ -44,6 +47,11 @@ const en = {
     },
   },
   editor: {
+    editorControl: {
+      field: {
+        optional: 'optional',
+      },
+    },
     editorControlPane: {
       widget: {
         required: '%{fieldLabel} is required.',
@@ -105,6 +113,20 @@ const en = {
       deployButtonLabel: 'View Live',
     },
     editorWidgets: {
+      markdown: {
+        richText: 'Rich Text',
+        markdown: 'Markdown',
+      },
+      image: {
+        choose: 'Choose an image',
+        chooseDifferent: 'Choose different image',
+        remove: 'Remove image',
+      },
+      file: {
+        choose: 'Choose a file',
+        chooseDifferent: 'Choose different file',
+        remove: 'Remove file',
+      },
       unknownControl: {
         noControl: "No control for widget '%{widget}'.",
       },

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

@@ -102,6 +102,20 @@ const ja = {
       deployButtonLabel: 'ライブで見る',
     },
     editorWidgets: {
+      markdown: {
+        richText: 'リッチテキスト',
+        markdown: 'マークダウン',
+      },
+      image: {
+        choose: '画像を選択',
+        chooseDifferent: '他の画像を選択',
+        remove: '画像を削除',
+      },
+      file: {
+        choose: 'ファイルを選択',
+        chooseDifferent: '他のファイルを選択',
+        remove: 'ファイルを削除',
+      },
       unknownControl: {
         noControl: "'%{widget}'はウィジェットとして利用できません。",
       },

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

@@ -33,6 +33,11 @@ const pl = {
     },
   },
   editor: {
+    editorControl: {
+      field: {
+        optional: 'opcjonalne',
+      },
+    },
     editorControlPane: {
       widget: {
         required: '%{fieldLabel} jest wymagane.',

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -104,6 +104,7 @@ export default function withFileControl({ forImage } = {}) {
       onRemoveMediaControl: PropTypes.func.isRequired,
       classNameWrapper: PropTypes.string.isRequired,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+      t: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
@@ -236,37 +237,40 @@ export default function withFileControl({ forImage } = {}) {
       );
     };
 
-    renderSelection = subject => (
+    renderSelection = subject => {
-      <div>
+      const { t } = this.props;
-        {forImage ? this.renderImages() : null}
+      return (
         <div>
-          {forImage ? null : this.renderFileLinks()}
+          {forImage ? this.renderImages() : null}
-          <FileWidgetButton onClick={this.handleChange}>
+          <div>
-            Choose different {subject}
+            {forImage ? null : this.renderFileLinks()}
-          </FileWidgetButton>
+            <FileWidgetButton onClick={this.handleChange}>
-          <FileWidgetButtonRemove onClick={this.handleRemove}>
+              {t(`editor.editorWidgets.${subject}.chooseDifferent`)}
-            Remove {subject}
+            </FileWidgetButton>
-          </FileWidgetButtonRemove>
+            <FileWidgetButtonRemove onClick={this.handleRemove}>
+              {t(`editor.editorWidgets.${subject}.remove`)}
+            </FileWidgetButtonRemove>
+          </div>
         </div>
-      </div>
+      );
-    );
+    };
 
-    renderNoSelection = (subject, article) => (
+    renderNoSelection = subject => {
-      <FileWidgetButton onClick={this.handleChange}>
+      const { t } = this.props;
-        Choose {article} {subject}
+      return (
-      </FileWidgetButton>
+        <FileWidgetButton onClick={this.handleChange}>
-    );
+          {t(`editor.editorWidgets.${subject}.choose`)}
+        </FileWidgetButton>
+      );
+    };
 
     render() {
       const { value, classNameWrapper } = this.props;
       const subject = forImage ? 'image' : 'file';
-      const article = forImage ? 'an' : 'a';
 
       return (
         <div className={classNameWrapper}>
-          <span>
+          <span>{value ? this.renderSelection(subject) : this.renderNoSelection(subject)}</span>
-            {value ? this.renderSelection(subject) : this.renderNoSelection(subject, article)}
-          </span>
         </div>
       );
     }

packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

@@ -101,7 +101,7 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { className, field } = this.props;
+    const { className, field, t } = this.props;
     return (
       <RawEditorContainer>
         <EditorControlBar>
@@ -110,6 +110,7 @@ export default class RawEditor extends React.Component {
             buttons={field.get('buttons')}
             disabled
             rawMode
+            t={t}
           />
         </EditorControlBar>
         <ClassNames>
@@ -127,6 +128,7 @@ export default class RawEditor extends React.Component {
               onCut={this.handleCut}
               onCopy={this.handleCopy}
               ref={this.processRef}
+              t={t}
             />
           )}
         </ClassNames>
@@ -141,4 +143,5 @@ RawEditor.propTypes = {
   className: PropTypes.string.isRequired,
   value: PropTypes.string,
   field: ImmutablePropTypes.map.isRequired,
+  t: PropTypes.func.isRequired,
 };

packages/netlify-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -83,6 +83,7 @@ export default class Toolbar extends React.Component {
     hasMark: PropTypes.func,
     hasInline: PropTypes.func,
     hasBlock: PropTypes.func,
+    t: PropTypes.func.isRequired,
   };
 
   isHidden = button => {
@@ -113,6 +114,7 @@ export default class Toolbar extends React.Component {
       hasMark = () => {},
       hasInline = () => {},
       hasBlock = () => {},
+      t,
     } = this.props;
 
     return (
@@ -246,10 +248,12 @@ export default class Toolbar extends React.Component {
         </div>
         <ToolbarToggle>
           <ToolbarToggleLabel isActive={!rawMode} offPosition>
-            Rich Text
+            {t('editor.editorWidgets.markdown.richText')}
           </ToolbarToggleLabel>
           <StyledToggle active={rawMode} onChange={onToggleMode} />
-          <ToolbarToggleLabel isActive={rawMode}>Markdown</ToolbarToggleLabel>
+          <ToolbarToggleLabel isActive={rawMode}>
+            {t('editor.editorWidgets.markdown.markdown')}
+          </ToolbarToggleLabel>
         </ToolbarToggle>
       </ToolbarContainer>
     );

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -82,6 +82,7 @@ export default class Editor extends React.Component {
     value: PropTypes.string,
     field: ImmutablePropTypes.map.isRequired,
     getEditorComponents: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -142,7 +143,7 @@ export default class Editor extends React.Component {
   };
 
   render() {
-    const { onAddAsset, getAsset, className, field } = this.props;
+    const { onAddAsset, getAsset, className, field, t } = this.props;
     return (
       <div
         css={coreCss`
@@ -163,6 +164,7 @@ export default class Editor extends React.Component {
             hasMark={this.hasMark}
             hasInline={this.hasInline}
             hasBlock={this.hasBlock}
+            t={t}
           />
         </EditorControlBar>
         <ClassNames>

packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js

@@ -24,6 +24,7 @@ export default class MarkdownControl extends React.Component {
     value: PropTypes.string,
     field: ImmutablePropTypes.map.isRequired,
     getEditorComponents: PropTypes.func,
+    t: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -61,6 +62,7 @@ export default class MarkdownControl extends React.Component {
       field,
       getEditorComponents,
       resolveWidget,
+      t,
     } = this.props;
 
     const { mode, pendingFocus } = this.state;
@@ -77,6 +79,7 @@ export default class MarkdownControl extends React.Component {
           getEditorComponents={getEditorComponents}
           resolveWidget={resolveWidget}
           pendingFocus={pendingFocus && this.setFocusReceived}
+          t={t}
         />
       </div>
     );
@@ -91,6 +94,7 @@ export default class MarkdownControl extends React.Component {
           value={value}
           field={field}
           pendingFocus={pendingFocus && this.setFocusReceived}
+          t={t}
         />
       </div>
     );