Merge pull request #176 from eclipse-sw360/heliocastro/update_refactor

Refactor i18n with next-intl 3.x
eclipse-sw360 · Nov 26, 2023 · 585cfff · 585cfff
2 parents fff6ac4 + 7338971
commit 585cfff
Show file tree

Hide file tree

Showing 39 changed files with 240 additions and 140 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,6 +3,7 @@
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         //"plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@next/next/recommended",
         "next",
         "prettier"
     ],
@@ -22,7 +23,8 @@
     },
     "rules": {
         "@typescript-eslint/no-explicit-any": ["warn", { "fixToUnknown": true }],
-        "@typescript-eslint/no-unused-vars": ["error"]
+        "@typescript-eslint/no-unused-vars": ["error"],
+        "@typescript-eslint/ban-ts-comment": ["error", { "ts-expect-error": "allow-with-description" }]
     },
     "root": true
 }
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,11 @@
+// Copyright (c) Helio Chissini de Castro, 2023. Part of the SW360 Frontend Project.
+//
+// This program and the accompanying materials are made
+// available under the terms of the Eclipse Public License 2.0
+// which is available at https://www.eclipse.org/legal/epl-2.0/
+//
+// SPDX-License-Identifier: EPL-2.0
+// License-Filename: LICENSE
+
+type Messages = typeof import('./messages/en.json')
+declare interface IntlMessages extends Messages {}
diff --git a/messages/ja.json b/messages/ja.json
@@ -18,7 +18,7 @@
         "Add Component": "コンポーネントの追加",
         "Add License": "ライセンスの追加",
         "Add License To Release": "このリリースにデータを追加",
-        "Add Project": "Add Project",
+        "Add Project": "プロジェクトの追加",
         "Add Projects": "プロジェクトの追加",
         "Add Release": "リリースの追加",
         "Add User": "ユーザーを追加する",

diff --git a/messages/pt-BR.json b/messages/pt-BR.json
@@ -20,7 +20,7 @@
         "Add Component": "Adicionar Componente",
         "Add License": "Adicionar licença",
         "Add License To Release": "Adicionar licença ao release",
-        "Add Project": "Add Project",
+        "Add Project": "Adicionar projeto",
         "Add Projects": "Adicionar Projetos",
         "Add Release": "Adicionar Novo Release",
         "Add User": "Adicionar Usuário",

diff --git a/messages/vn.json → messages/vi.json b/messages/vn.json → messages/vi.json
diff --git a/messages/cn.json → messages/zh-CN.json b/messages/cn.json → messages/zh-CN.json
diff --git a/next.config.js b/next.config.js
@@ -7,9 +7,12 @@
 // SPDX-License-Identifier: EPL-2.0
 // License-Filename: LICENSE
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const withNextIntl = require('next-intl/plugin')()
+
 const nextConfig = {
-  reactStrictMode: true,
-  output: 'standalone'
+    reactStrictMode: true,
+    output: 'standalone',
 }
 
-module.exports = nextConfig
+module.exports = withNextIntl(nextConfig)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
         "flag-icons": "^6.11.2",
         "gridjs": "^6.0.6",
         "next": "^14.0.3",
-        "next-auth": "^4.24.4",
-        "next-intl": "^2.21.0",
+        "next-auth": "^4.24.5",
+        "next-intl": "^3.1.4",
         "npm": "^10.2.1",
         "react": "18.2.0",
         "react-bootstrap": "^2.9.1",

diff --git a/src/app/[locale]/admin/components/Admin.tsx b/src/app/[locale]/admin/components/Admin.tsx
@@ -10,7 +10,7 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { AiOutlineTags, AiOutlineUnorderedList } from 'react-icons/ai'
 import { BsBag, BsFileEarmarkText, BsFilter, BsSearch } from 'react-icons/bs'
 import { FiEdit2 } from 'react-icons/fi'

diff --git a/src/app/[locale]/components/detail/[id]/components/DeleteReleaseModal.tsx b/src/app/[locale]/components/detail/[id]/components/DeleteReleaseModal.tsx
@@ -133,7 +133,10 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
             </Modal.Header>
             <Modal.Body>
                 <Alert variant={variant} onClose={() => setShowMessage(false)} dismissible show={showMessage}>
-                    {t(message)}
+                    {
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                        t(message)
+                    }
                 </Alert>
                 <Form>
                     {t.rich('Do you really want to delete the release?', {

diff --git a/src/app/[locale]/components/detail/[id]/components/ReleaseOverview.tsx b/src/app/[locale]/components/detail/[id]/components/ReleaseOverview.tsx
@@ -85,8 +85,11 @@ const ReleaseOverview = ({ componentId }: Props) => {
                     const data = releaseLinks['_embedded']['sw360:releaseLinks'].map((item: ReleaseLink) => [
                         item.name,
                         [item.id, item.version],
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
                         t(item.clearingState),
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
                         t(item.clearingReport.clearingReportStatus),
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
                         t(item.mainlineState),
                         item.id,
                     ])

diff --git a/src/app/[locale]/components/releases/detail/[id]/components/AssessmentSummaryInfo.tsx b/src/app/[locale]/components/releases/detail/[id]/components/AssessmentSummaryInfo.tsx
@@ -55,7 +55,12 @@ const AssessmentSummaryInfo = ({ embeddedAttachments, releaseId }: Props) => {
             if (key !== '#text') {
                 return (
                     <tr key={key}>
-                        <td>{t(key)}</td>
+                        <td>
+                            {
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                                t(key)
+                            }
+                        </td>
                         <td>{assessmentSummaryInfo[key]}</td>
                     </tr>
                 )

diff --git a/src/app/[locale]/components/releases/detail/[id]/components/ClearingDetails.tsx b/src/app/[locale]/components/releases/detail/[id]/components/ClearingDetails.tsx
@@ -55,9 +55,11 @@ const ClearingDetails = ({ release, releaseId, embeddedAttachments }: Props) =>
                     <tr>
                         <td>{t('Clearing State')}:</td>
                         <td>
-                            {t(release.clearingState)}
+                            {
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                                t(release.clearingState)
+                            }
                             <Image
-                                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                                 src={fossologyIcon}
                                 width={15}
                                 height={15}

diff --git a/...p/[locale]/components/releases/detail/[id]/components/CommercialDetailsAdministration.tsx b/...p/[locale]/components/releases/detail/[id]/components/CommercialDetailsAdministration.tsx
@@ -9,7 +9,7 @@
 // License-Filename: LICENSE
 
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { useState } from 'react'
 import { CiCircleRemove } from 'react-icons/ci'
 import { FiCheckCircle } from 'react-icons/fi'

diff --git a/src/app/[locale]/components/releases/detail/[id]/components/ECCDetails.tsx b/src/app/[locale]/components/releases/detail/[id]/components/ECCDetails.tsx
@@ -38,7 +38,12 @@ const ECCDetails = ({ release }: Props) => {
                 <tbody hidden={toggle}>
                     <tr>
                         <td>{t('ECC Status')}:</td>
-                        <td>{t(release.eccInformation.eccStatus)}</td>
+                        <td>
+                            {
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                                t(release.eccInformation.eccStatus)
+                            }
+                        </td>
                     </tr>
                     <tr>
                         <td>{t('AL')}:</td>

diff --git a/src/app/[locale]/components/releases/detail/[id]/components/LinkedReleases.tsx b/src/app/[locale]/components/releases/detail/[id]/components/LinkedReleases.tsx
@@ -38,8 +38,10 @@ const LinkedReleases = ({ releaseId }: Props) => {
                             key={child.id}
                             href={`components/releases/details/${child.id}`}
                         >{`${child.name} ${child.version}`}</a>,
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
                         t(child.releaseRelationship),
                         CommonUtils.isNullEmptyOrUndefinedArray(child.licenseIds) ? '' : child.licenseIds.join(', '),
+                        // @ts-expect-error: TS2345 invalidate translation even if is valid under
                         t(child.clearingState),
                     ],
                     children: child._embedded ? convertNodeData(child._embedded['sw360:releaseLinks']) : [],
@@ -61,10 +63,12 @@ const LinkedReleases = ({ releaseId }: Props) => {
                                     key={node.id}
                                     href={`components/releases/details/${node.id}`}
                                 >{`${node.name} ${node.version}`}</a>,
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
                                 t(node.releaseRelationship),
                                 CommonUtils.isNullEmptyOrUndefinedArray(node.licenseIds)
                                     ? ''
                                     : node.licenseIds.join(', '),
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
                                 t(node.clearingState),
                             ],
                             children: node._embedded ? convertNodeData(node._embedded['sw360:releaseLinks']) : [],

diff --git a/src/app/[locale]/components/releases/detail/[id]/components/SPDXLicenseView.tsx b/src/app/[locale]/components/releases/detail/[id]/components/SPDXLicenseView.tsx
@@ -108,7 +108,12 @@ const SPDXLicenseView = ({ licenseInfo, isISR, attachmentName }: Props) => {
             ) : (
                 <>
                     <div>
-                        <b>{t(licenseInfo.otherLicense as string)}</b>
+                        <b>
+                            {
+                                // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                                t(licenseInfo.otherLicense as string)
+                            }
+                        </b>
                     </div>
                     <ul>{renderLicenseIds(licenseInfo['otherLicenseIds'] as Array<string>)}</ul>
                 </>

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -14,14 +14,14 @@ import '@/styles/gridjs/sw360.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'flag-icons/css/flag-icons.min.css'
 
-import { ReactNode } from 'react'
-import { Providers } from '../provider'
-
 import { Metadata } from 'next'
 import { NextIntlClientProvider } from 'next-intl'
+import { unstable_setRequestLocale } from 'next-intl/server'
 import { notFound } from 'next/navigation'
+import { ReactNode } from 'react'
 
 import { Footer, Header } from 'next-sw360'
+import { Providers } from '../provider'
 
 export const metadata: Metadata = {
     title: {
@@ -48,6 +48,9 @@ async function RootLayout({ children, params: { locale } }: Props) {
     } catch (error) {
         notFound()
     }
+
+    unstable_setRequestLocale(locale)
+
     return (
         <html lang={locale}>
             <body>

diff --git a/src/app/[locale]/projects/components/LinkProjects.tsx b/src/app/[locale]/projects/components/LinkProjects.tsx
@@ -11,7 +11,7 @@
 
 import { signOut, useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { useRef, useState } from 'react'
 import { Alert, Button, Col, Form, Modal, OverlayTrigger, Row, Tooltip } from 'react-bootstrap'

diff --git a/src/app/[locale]/vulnerabilities/components/AddValues.tsx b/src/app/[locale]/vulnerabilities/components/AddValues.tsx
@@ -59,7 +59,12 @@ export default function AddValues({
         <>
             <div className='row mb-4 mx-0'>
                 <div className='row header mb-2 pb-2 px-2'>
-                    <h6>{t(componentName)}</h6>
+                    <h6>
+                        {
+                            // @ts-expect-error: TS2345 invalidate translation even if is valid under
+                            t(componentName)
+                        }
+                    </h6>
                 </div>
                 {(payload[payloadKeyName] as Array<string>).map((elem, i) => (
                     <div className='row mb-2' key={i}>

diff --git a/src/app/[locale]/vulnerabilities/detail/[id]/components/Summary.tsx b/src/app/[locale]/vulnerabilities/detail/[id]/components/Summary.tsx
@@ -10,7 +10,7 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { useState } from 'react'
 
 import { Vulnerability } from '@/object-types'

diff --git a/src/components/ComponentVulnerabilities/ComponentVulnerabilities.tsx b/src/components/ComponentVulnerabilities/ComponentVulnerabilities.tsx
@@ -9,7 +9,7 @@
 // License-Filename: LICENSE
 
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Alert, Button, Form } from 'react-bootstrap'
 import { FaInfoCircle } from 'react-icons/fa'

diff --git a/src/components/ResourcesUsing/ComponentsUsing.tsx b/src/components/ResourcesUsing/ComponentsUsing.tsx
@@ -10,7 +10,7 @@
 
 import { Component } from '@/object-types'
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Table, _ } from '../sw360'
 import styles from './ResourceUsing.module.css'

diff --git a/src/components/ResourcesUsing/ProjectsUsing.tsx b/src/components/ResourcesUsing/ProjectsUsing.tsx
@@ -11,7 +11,7 @@
 import { Table, _ } from '@/components/sw360'
 import { Project, RestrictedResource } from '@/object-types'
 import { useTranslations } from 'next-intl'
-import Link from 'next-intl/link'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Alert } from 'react-bootstrap'