From ac4289458ad30744d83f1b43cf8452b14ca875d3 Mon Sep 17 00:00:00 2001 From: Thiago Gomes Date: Fri, 13 Sep 2024 01:23:16 -0300 Subject: [PATCH 1/5] feat: add internationalization to header --- n18n.config.js | 2 +- public/locales/en/header.json | 10 ++++++++++ public/locales/pt/header.json | 10 ++++++++++ .../[repository]/components/Header/Header.tsx | 20 ++++++++++--------- 4 files changed, 32 insertions(+), 10 deletions(-) create mode 100644 public/locales/en/header.json create mode 100644 public/locales/pt/header.json diff --git a/n18n.config.js b/n18n.config.js index 28b1050e..728d055f 100644 --- a/n18n.config.js +++ b/n18n.config.js @@ -3,7 +3,7 @@ const supportedLngs = ['en', 'pt']; export const ni18nConfig = { fallbackLng: supportedLngs, supportedLngs, - ns: ['translation', 'home', 'about', 'sidebar', 'settings', 'releases', 'repositories', 'overview'], + ns: ['translation', 'home', 'about', 'sidebar', 'settings', 'releases', 'repositories', 'overview', 'header'], react: { useSuspense: false } diff --git a/public/locales/en/header.json b/public/locales/en/header.json new file mode 100644 index 00000000..a3795409 --- /dev/null +++ b/public/locales/en/header.json @@ -0,0 +1,10 @@ +{ + "repository": "Repository", + "edit_intervals": "Edit Intervals", + "cancel": "Cancel", + "save": "Save", + "warning_message": "Attention: This configuration will be applied to all product repositories.", + "error_message": "An error occurred while trying to load the information.", + "update_success": "Intervals updated successfully!", + "update_error": "Error updating intervals!" +} diff --git a/public/locales/pt/header.json b/public/locales/pt/header.json new file mode 100644 index 00000000..ab5dd0d2 --- /dev/null +++ b/public/locales/pt/header.json @@ -0,0 +1,10 @@ +{ + "repository": "Repositório", + "edit_intervals": "Editar Intervalos", + "cancel": "Cancelar", + "save": "Salvar", + "warning_message": "Atenção: Essa configuração será aplicada a todos os repositórios do produto.", + "error_message": "Ocorreu um erro ao tentar carregar as informações.", + "update_success": "Intervalos atualizados com sucesso!", + "update_error": "Erro ao atualizar intervalos!" +} diff --git a/src/pages/products/[product]/repositories/[repository]/components/Header/Header.tsx b/src/pages/products/[product]/repositories/[repository]/components/Header/Header.tsx index abda9867..be69cf92 100644 --- a/src/pages/products/[product]/repositories/[repository]/components/Header/Header.tsx +++ b/src/pages/products/[product]/repositories/[repository]/components/Header/Header.tsx @@ -12,6 +12,7 @@ import ReactEcharts from 'echarts-for-react'; import { ProductFormData } from '@services/product'; import { toNumber } from 'lodash'; import { useProductQuery } from '@pages/products/hooks/useProductQuery'; +import { useTranslation } from 'react-i18next'; import GaugeSlider from '../GaugeSlider'; import CopyBadgeModal from '../CopyBadgeModal'; @@ -29,6 +30,8 @@ function Header() { const { query } = useRouter(); + const { t } = useTranslation('header'); + useEffect(() => { if (initialValues && !values) { setValues(initialValues); @@ -89,12 +92,11 @@ function Header() { const result = await updateProduct(productId, productData); if (result.type === 'success') { - toast.success('Intervalos atualizados com sucesso!'); + toast.success(t("update_success")); setCurrentProduct(result.value); } else { - toast.success('Erro ao atualizar intervalos!'); + toast.success(t("update_error")); } - setOpenModal(false); } }; @@ -104,7 +106,7 @@ function Header() { - Repositório + {t("repository")} {currentRepository?.name} @@ -138,7 +140,7 @@ function Header() { }} > - Editar Intervalos + {t("edit_intervals")} {values ? <> @@ -170,22 +172,22 @@ function Header() { onClick={handleCloseModal} variant='outlined' > - Cancelar + {t("cancel")} } sx={{ display: "flex", justifyContent: "center", textAlign: 'center' }} severity="warning"> - Atenção: Essa configuração será aplicada a todos os repositórios do produto. + {t("warning_message")} : - Ocorreu um erro ao tentar carregar as informações. + {t("error_message")} } From b4bc0105218fc2fbf71e0413ee4da287f1904dda Mon Sep 17 00:00:00 2001 From: Thiago Gomes Date: Fri, 13 Sep 2024 01:28:58 -0300 Subject: [PATCH 2/5] feat: add internationalization to latest value table --- n18n.config.js | 13 ++++++++++++- public/locales/en/latest_value_table.json | 6 ++++++ public/locales/pt/latest_value_table.json | 6 ++++++ .../LatestValueTable/LatestValueTable.tsx | 11 +++++++---- 4 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 public/locales/en/latest_value_table.json create mode 100644 public/locales/pt/latest_value_table.json diff --git a/n18n.config.js b/n18n.config.js index 728d055f..c111cd8b 100644 --- a/n18n.config.js +++ b/n18n.config.js @@ -3,7 +3,18 @@ const supportedLngs = ['en', 'pt']; export const ni18nConfig = { fallbackLng: supportedLngs, supportedLngs, - ns: ['translation', 'home', 'about', 'sidebar', 'settings', 'releases', 'repositories', 'overview', 'header'], + ns: [ + 'translation', + 'home', + 'about', + 'sidebar', + 'settings', + 'releases', + 'repositories', + 'overview', + 'header', + 'lates_value_table' + ], react: { useSuspense: false } diff --git a/public/locales/en/latest_value_table.json b/public/locales/en/latest_value_table.json new file mode 100644 index 00000000..c108564a --- /dev/null +++ b/public/locales/en/latest_value_table.json @@ -0,0 +1,6 @@ +{ + "lastValue": "Latest value", + "lastMeasurement": "Latest measurement", + "error": "An error occurred while trying to load the information", + "noData": "No data available to display" +} diff --git a/public/locales/pt/latest_value_table.json b/public/locales/pt/latest_value_table.json new file mode 100644 index 00000000..6d4dc4bc --- /dev/null +++ b/public/locales/pt/latest_value_table.json @@ -0,0 +1,6 @@ +{ + "lastValue": "Último valor", + "lastMeasurement": "Última medição", + "error": "Ocorreu um erro ao tentar carregar as informações", + "noData": "Não há dados para serem exibidos" +} diff --git a/src/shared/components/LatestValueTable/LatestValueTable.tsx b/src/shared/components/LatestValueTable/LatestValueTable.tsx index 0b8ec798..1517c378 100644 --- a/src/shared/components/LatestValueTable/LatestValueTable.tsx +++ b/src/shared/components/LatestValueTable/LatestValueTable.tsx @@ -17,6 +17,7 @@ import { import _ from 'lodash'; import { useRequestValues } from '@hooks/useRequestValues'; +import { useTranslation } from 'react-i18next'; interface Prop { title: string; @@ -24,6 +25,8 @@ interface Prop { } function LatestValueTable({ title, value }: Prop) { + const { t } = useTranslation('lates_value_table'); + const { data, error, isLoading, isEmpty } = useRequestValues({ type: 'latest-values', value }); const tableRows: { name: string; latestValue: number; latestData: string }[] = []; @@ -48,8 +51,8 @@ function LatestValueTable({ title, value }: Prop) { {title} - Último valor - Última medição + {t('lastValue')} + {t('lastMeasurement')} @@ -71,14 +74,14 @@ function LatestValueTable({ title, value }: Prop) { {error && ( - Ocorreu um erro ao tentar carregar as informações + {t('error')} )} {isEmpty && ( - Não há dados para serem exibidos + {t('noData')} )} From 88d6d82a89a0418685494fe26b776b46f9dcb93f Mon Sep 17 00:00:00 2001 From: Thiago Gomes Date: Fri, 13 Sep 2024 01:33:30 -0300 Subject: [PATCH 3/5] feat: add internationalization to graphic chart --- n18n.config.js | 3 ++- public/locales/en/graphic_chart.json | 4 ++++ public/locales/pt/graphic_chart.json | 4 ++++ .../components/GraphicChart/GraphicChart.tsx | 16 ++++++++-------- 4 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 public/locales/en/graphic_chart.json create mode 100644 public/locales/pt/graphic_chart.json diff --git a/n18n.config.js b/n18n.config.js index c111cd8b..086c650c 100644 --- a/n18n.config.js +++ b/n18n.config.js @@ -13,7 +13,8 @@ export const ni18nConfig = { 'repositories', 'overview', 'header', - 'lates_value_table' + 'lates_value_table', + 'graphic_chart' ], react: { useSuspense: false diff --git a/public/locales/en/graphic_chart.json b/public/locales/en/graphic_chart.json new file mode 100644 index 00000000..527ca0c6 --- /dev/null +++ b/public/locales/en/graphic_chart.json @@ -0,0 +1,4 @@ +{ + "error": "An error occurred while trying to load the information", + "noData": "No data available to display" +} diff --git a/public/locales/pt/graphic_chart.json b/public/locales/pt/graphic_chart.json new file mode 100644 index 00000000..e5228b14 --- /dev/null +++ b/public/locales/pt/graphic_chart.json @@ -0,0 +1,4 @@ +{ + "error": "Ocorreu um erro ao tentar carregar as informações", + "noData": "Não há dados para serem exibidos" +} diff --git a/src/shared/components/GraphicChart/GraphicChart.tsx b/src/shared/components/GraphicChart/GraphicChart.tsx index 99fff311..848efa7e 100644 --- a/src/shared/components/GraphicChart/GraphicChart.tsx +++ b/src/shared/components/GraphicChart/GraphicChart.tsx @@ -14,6 +14,7 @@ import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrow import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'; import { useProductContext } from '@contexts/ProductProvider'; import { HistoryDateRange } from '@customTypes/product'; +import { useTranslation } from 'react-i18next'; interface Prop { title: string; @@ -57,6 +58,7 @@ const GraphicChart = ({ const [showCharts, setShowCharts] = useState(false); const { currentProduct } = useProductContext(); + const { t } = useTranslation('graphic_chart'); const sliceHistorical = (rowIdx: number): Historical[] => { if (!autoGrid) return historical; @@ -124,12 +126,10 @@ const GraphicChart = ({ > {(type !== 'gauge') || (type === 'gauge' && showCharts) && (typeof window !== 'undefined') ? (typeof window !== 'undefined') && chartsOption.map((option) => ( - <> - < ReactEcharts - ref={echartsRef} - onEvents={option?.onEvents} - key={option.key} notMerge lazyUpdate style={chartStyle} option={option} /> - + < ReactEcharts + ref={echartsRef} + onEvents={option?.onEvents} + key={option.key} notMerge lazyUpdate style={chartStyle} option={option} /> )) : (typeof window !== 'undefined') && filteredChartsOptions.map((option) => ( @@ -154,13 +154,13 @@ const GraphicChart = ({ {error && ( - Ocorreu um erro ao tentar carregar as informações + {t('error')} )} {isEmpty && ( - Não há dados para serem exibidos + {t('noData')} )} From a31a86d351995448472351e0661ae127e1f9b3ef Mon Sep 17 00:00:00 2001 From: Thiago Gomes Date: Fri, 13 Sep 2024 01:34:35 -0300 Subject: [PATCH 4/5] fix: adjust breadcrumbs --- src/shared/components/Layout/Breadcrumbs/Breadcrumbs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/Layout/Breadcrumbs/Breadcrumbs.tsx b/src/shared/components/Layout/Breadcrumbs/Breadcrumbs.tsx index 35f49742..b27f0231 100644 --- a/src/shared/components/Layout/Breadcrumbs/Breadcrumbs.tsx +++ b/src/shared/components/Layout/Breadcrumbs/Breadcrumbs.tsx @@ -25,7 +25,7 @@ export function Breadcrumbs() { if (pathArray[0] === '') { return ( - Produtos# + {t('products')} ); } From 06ca43244b8f01674cffe7e9d2726f96850d9fed Mon Sep 17 00:00:00 2001 From: Thiago Gomes Date: Fri, 13 Sep 2024 01:45:25 -0300 Subject: [PATCH 5/5] test: update snapshots and adjust tests --- .../tests/__snapshots__/Releases.spec.tsx.snap | 8 ++------ .../[repository]/components/Header/Header.tsx | 4 ++-- .../tests/__snapshots__/Header.spec.tsx.snap | 2 +- .../__snapshots__/TreeViewFilter.spec.tsx.snap | 8 ++------ .../tests/__snapshots__/Repository.spec.tsx.snap | 2 +- .../__snapshots__/Repositories.spec.tsx.snap | 16 ++++------------ .../__snapshots__/GraphicChart.spec.tsx.snap | 4 ++-- .../__snapshots__/LatestValueTable.spec.tsx.snap | 16 ++++++++-------- 8 files changed, 22 insertions(+), 38 deletions(-) diff --git a/src/pages/products/[product]/releases/tests/__snapshots__/Releases.spec.tsx.snap b/src/pages/products/[product]/releases/tests/__snapshots__/Releases.spec.tsx.snap index cb56f344..fe9918bf 100644 --- a/src/pages/products/[product]/releases/tests/__snapshots__/Releases.spec.tsx.snap +++ b/src/pages/products/[product]/releases/tests/__snapshots__/Releases.spec.tsx.snap @@ -73,6 +73,7 @@ exports[` Deve corresponder ao snapshot 1`] = ` aria-label="search-bar-label" class="MuiFormControl-root MuiTextField-root text css-1u3bzj6-MuiFormControl-root-MuiTextField-root" data-testid="input" + style="min-width: 250px;" >
Deve corresponder ao snapshot 1`] = ` value="" />
- - ​ -

should render correctly 1`] = ` aria-label="search" class="MuiFormControl-root MuiTextField-root text css-1u3bzj6-MuiFormControl-root-MuiTextField-root" data-testid="input" + style="min-width: 250px;" >

diff --git a/src/shared/components/LatestValueTable/tests/__snapshots__/LatestValueTable.spec.tsx.snap b/src/shared/components/LatestValueTable/tests/__snapshots__/LatestValueTable.spec.tsx.snap index 499a2476..5009cb41 100644 --- a/src/shared/components/LatestValueTable/tests/__snapshots__/LatestValueTable.spec.tsx.snap +++ b/src/shared/components/LatestValueTable/tests/__snapshots__/LatestValueTable.spec.tsx.snap @@ -29,13 +29,13 @@ exports[` should render correctly 1`] = ` class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignRight MuiTableCell-sizeMedium css-i02g0k-MuiTableCell-root" scope="col" > - Último valor + lastValue - Última medição + lastMeasurement @@ -118,13 +118,13 @@ exports[` should render correctly with empty data 1`] = ` class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignRight MuiTableCell-sizeMedium css-i02g0k-MuiTableCell-root" scope="col" > - Último valor + lastValue - Última medição + lastMeasurement @@ -156,7 +156,7 @@ exports[` should render correctly with empty data 1`] = `
- Não há dados para serem exibidos + noData
@@ -192,13 +192,13 @@ exports[` should render correctly with error 1`] = ` class="MuiTableCell-root MuiTableCell-head MuiTableCell-stickyHeader MuiTableCell-alignRight MuiTableCell-sizeMedium css-i02g0k-MuiTableCell-root" scope="col" > - Último valor + lastValue - Última medição + lastMeasurement @@ -230,7 +230,7 @@ exports[` should render correctly with error 1`] = `
- Ocorreu um erro ao tentar carregar as informações + error