Repository: nodejs/nodejs.dev
Pull request #3148 (2023-01-08 21:45:11)

Feat (i18n): Added possibility to translate copy button
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

Added the possibility to translate the 'copy' button from ShellBox and CodeBox.

## Related Issues
No related issue

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

### Check List

<!--
ATTENTION
Please follow this check list to ensure that you've followed all items before opening this PR
-->

- [X] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [X] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [X] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [X] I have checked that the build works locally and that `npm run build` work fine.
- [ ] I've covered new added functionality with unit tests if necessary.


github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/3148/
ovflowd: @ItaloPussi, could you please remove the translations? Otherwise, I'll need to ping the respective i18n teams to review these translations (which is fine also)
ItaloPussi: > @ItaloPussi, could you please remove the translations? Otherwise, I'll need to ping the respective i18n teams to review these translations (which is fine also)

Done
As only two translations are active at the moment, I believe it'd be better to revert and let the respective team translate it later.
ItaloPussi: @AugustinMauroy and @ovflowd sorry to tag you.
I'm doing something wrong but I don't understand why. Can you help me?

https://prnt.sc/bgL1To9BE2Qq

I've checked the file through prettier and my machine is not giving any errors of formatting...

shanpriyan: > @AugustinMauroy and @ovflowd sorry to tag you. I'm doing something wrong but I don't understand why. Can you help me?
> 
> https://prnt.sc/bgL1To9BE2Qq
> 
> I've checked the file through prettier and my machine is not giving any errors of formatting...

Run `npm run format` that would solve the issue :)
AugustinMauroy: Did you see if you had to update the test?
ItaloPussi: > > @AugustinMauroy and @ovflowd sorry to tag you. I'm doing something wrong but I don't understand why. Can you help me?
> > https://prnt.sc/bgL1To9BE2Qq
> > I've checked the file through prettier and my machine is not giving any errors of formatting...
> 
> Run `npm run format` that would solve the issue :)

Nothing has changed in the git stage environment after running the command. Seeing Augustin commit difference, apparently, it was a mistake in my GitHub configuration file with CRLF.

Thank you again both!
codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
Base: **66.02**% // Head: **66.39**% // Increases project coverage by **`+0.36%`** :tada:
> Coverage data is based on head [(`1394df2`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) compared to base [(`fd57b87`)](https://codecov.io/gh/nodejs/nodejs.dev/commit/fd57b871c2b1ad2f6fb812ed066dec074d76db22?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).
> Patch has no changes to coverable lines.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #3148      +/-   ##
==========================================
+ Coverage   66.02%   66.39%   +0.36%     
==========================================
  Files         118      145      +27     
  Lines        1351     1702     +351     
  Branches      342      393      +51     
==========================================
+ Hits          892     1130     +238     
- Misses        422      528     +106     
- Partials       37       44       +7     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/templates/blog.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9ibG9nLnRzeA==) | `0.00% <0.00%> (-100.00%)` | :arrow_down: |
| [util-node/getNodeReleasesData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE5vZGVSZWxlYXNlc0RhdGEuanM=) | `91.30% <0.00%> (-6.32%)` | :arrow_down: |
| [src/\_\_fixtures\_\_/page.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9wYWdlLnRzeA==) | `94.11% <0.00%> (-5.89%)` | :arrow_down: |
| [src/pages/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3BhZ2VzL2luZGV4LnRzeA==) | `100.00% <0.00%> (ø)` | |
| [src/templates/api.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9hcGkudHN4) | `0.00% <0.00%> (ø)` | |
| [src/templates/learn.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9sZWFybi50c3g=) | `100.00% <0.00%> (ø)` | |
| [util-node/createSlug.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2NyZWF0ZVNsdWcuanM=) | `100.00% <0.00%> (ø)` | |
| [util-node/getNvmData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE52bURhdGEuanM=) | `100.00% <0.00%> (ø)` | |
| [src/hooks/useOnScreen.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2hvb2tzL3VzZU9uU2NyZWVuLnRzeA==) | `100.00% <0.00%> (ø)` | |
| [src/pages/about/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3BhZ2VzL2Fib3V0L2luZGV4LnRzeA==) | `100.00% <0.00%> (ø)` | |
| ... and [185 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3148?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).


Patch:
diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx
index 92444290..f0f39f3d 100644
--- a/src/components/ArticleComponents/Codebox/index.tsx
+++ b/src/components/ArticleComponents/Codebox/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { highlight, languages } from 'prismjs';
 import { sanitize } from 'isomorphic-dompurify';
 import classnames from 'classnames';
@@ -62,7 +63,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => {
       <div className={styles.top}>
         <span>{replaceLabelLanguages(language)}</span>
         <button type="button" onClick={handleCopyCode}>
-          {copied ? 'copied' : 'copy'}
+          <FormattedMessage id="components.codeBox.copy" values={{ copied }} />
         </button>
       </div>
       <div
diff --git a/src/components/CommonComponents/ShellBox/index.tsx b/src/components/CommonComponents/ShellBox/index.tsx
index 347fb0e2..2e989577 100644
--- a/src/components/CommonComponents/ShellBox/index.tsx
+++ b/src/components/CommonComponents/ShellBox/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import styles from './index.module.scss';
 
@@ -22,7 +23,7 @@ const ShellBox = ({
       <div className={styles.top}>
         <span>SHELL</span>
         <button type="button" onClick={handleCopyCode}>
-          {copied ? 'copied' : 'copy'}
+          <FormattedMessage id="components.shellBox.copy" values={{ copied }} />
         </button>
       </div>
       <code>{children}</code>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0ef9e1fa..49222e47 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
   "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Current Versions"
-}
+  "components.downloadToggle.currentVersions": "Current Versions",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 0ef9e1fa..49222e47 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
   "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Current Versions"
-}
+  "components.downloadToggle.currentVersions": "Current Versions",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index fb50239f..faf9e66d 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Catégorie de blog pour les annonces des versions de Node.js",
   "blog.categories.vulnerability.description": "Catégorie de blog concernant les vulnérabilités de sécurité",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Versions actuelles"
-}
+  "components.downloadToggle.currentVersions": "Versions actuelles",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
index 07a35b33..517455f5 100644
--- a/src/i18n/locales/he.json
+++ b/src/i18n/locales/he.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "קטגוריית הבלוגים של Node.js לגבי כל השחרורים",
   "blog.categories.vulnerability.description": "קטגוריית בלוג בנושא פגיעויות אבטחה",
   "components.downloadToggle.ltsVersions": "גרסאות LTS",
-  "components.downloadToggle.currentVersions": "גרסאות נוכחיות"
-}
+  "components.downloadToggle.currentVersions": "גרסאות נוכחיות",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 675f9eda..b7d62b15 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Node.jsのリリース案内カテゴリ",
   "blog.categories.vulnerability.description": "セキュリティや脆弱性カテゴリ",
   "components.downloadToggle.ltsVersions": "LTSバージョン",
-  "components.downloadToggle.currentVersions": "現在のバージョン"
-}
+  "components.downloadToggle.currentVersions": "現在のバージョン",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file
diff --git a/src/i18n/locales/zh-cn.json b/src/i18n/locales/zh-cn.json
index 605addbf..5366b2a2 100644
--- a/src/i18n/locales/zh-cn.json
+++ b/src/i18n/locales/zh-cn.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "关于 Node.js 所有的发布信息",
   "blog.categories.vulnerability.description": "涉及到安全隐患方面的所有信息",
   "components.downloadToggle.ltsVersions": "长期维护版（LTS）",
-  "components.downloadToggle.currentVersions": "尝鲜版"
-}
+  "components.downloadToggle.currentVersions": "尝鲜版",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
\ No newline at end of file


Test patch:
diff --git a/src/hooks/__tests__/useCopyToClipboard.test.tsx b/src/hooks/__tests__/useCopyToClipboard.test.tsx
index cbf94b96..633d35ff 100644
--- a/src/hooks/__tests__/useCopyToClipboard.test.tsx
+++ b/src/hooks/__tests__/useCopyToClipboard.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
 
 describe('useCopyToClipboard', () => {
@@ -8,7 +9,7 @@ describe('useCopyToClipboard', () => {
 
     return (
       <button onClick={() => copyText(text)} type="button">
-        {copied ? 'copied' : 'copy'}
+        <FormattedMessage id="components.codeBox.copy" values={{ copied }} />
       </button>
     );
   };