Merge #915

915: Implement language translations for handling multi-language plugin r=brunoocasali a=mimartinez

# Pull Request

## Related issue
Fixes #85

## What does this PR do?
- Implement language translations for handling multi-language plugin
- Added translation files `en.json` and `es.json`

## PR checklist
Please check if your PR fulfills the following requirements:
- [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
- [x] Have you read the contributing guidelines?
- [x] Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!


Co-authored-by: Michel Díaz Martínez <[email protected]>
Co-authored-by: Michel Díaz Martínez <[email protected]>

Author: meili-bors[bot]

.gitignore

@@ -129,3 +129,11 @@ playground/src/plugins
 
 # Sqlite Database from the playground
 data.db
+
+############################
+# Local
+############################
+.nvmrc
+.prettierignore
+.prettierrc.js
+.vscode

admin/src/Hooks/useAlert.js

@@ -1,21 +1,27 @@
 import { useNotification } from '@strapi/helper-plugin'
+import { useI18n } from './useI18n'
 
 export function useAlert() {
   const toggleNotification = useNotification() // HERE
+  const { i18n } = useI18n()
+
   /**
    * @param  {object} options
    * @param  {string} [options.type='info']
    * @param  {string} [options.message='SomethingoccuredinMeilisearch']
    * @param  {object} [options.link]
    * @param  {boolean} [options.blockTransition]
    */
-  const handleNotification = ({
+  function handleNotification({
     type = 'info',
-    message = 'Something occured in Meilisearch',
+    message = i18n(
+      'plugin.message.something',
+      'Something occured in Meilisearch',
+    ),
     link,
     blockTransition = true,
     title,
-  }) => {
+  }) {
     toggleNotification({
       // optional
       title,
@@ -40,9 +46,12 @@ export function useAlert() {
     const status = response?.payload?.error?.status
     if (status && status === 403) {
       handleNotification({
-        title: 'Forbidden',
+        title: i18n('plugin.message.forbidden.title', 'Forbidden'),
         type: 'warning',
-        message: 'You do not have permission to do this action',
+        message: i18n(
+          'plugin.message.forbidden.description',
+          'You do not have permission to do this action',
+        ),
         blockTransition: false,
       })
     }

admin/src/Hooks/useCollection.js

@@ -2,13 +2,7 @@ import { useState, useEffect } from 'react'
 import { request } from '@strapi/helper-plugin'
 import pluginId from '../pluginId'
 import useAlert from './useAlert'
-
-const hookingTextRendering = ({ indexed, listened }) => {
-  if (indexed && !listened) return 'Reload needed'
-  if (!indexed && listened) return 'Reload needed'
-  if (indexed && listened) return 'Hooked'
-  if (!indexed && !listened) return '/'
-}
+import { useI18n } from './useI18n'
 
 export function useCollection() {
   const [collections, setCollections] = useState([])
@@ -17,10 +11,20 @@ export function useCollection() {
   const [realTimeReports, setRealTimeReports] = useState(false)
 
   const { handleNotification, checkForbiddenError } = useAlert()
+  const { i18n } = useI18n()
 
   const refetchCollection = () =>
     setRefetchIndex(prevRefetchIndex => !prevRefetchIndex)
 
+  const hookingTextRendering = ({ indexed, listened }) => {
+    if (indexed && listened)
+      return i18n('plugin.table.td.hookingText.hooked', 'Hooked')
+
+    if (!indexed && !listened) return '/'
+
+    return i18n('plugin.table.td.hookingText.reload', 'Reload needed')
+  }
+
   const fetchCollections = async () => {
     const { data, error } = await request(`/${pluginId}/content-type/`, {
       method: 'GET',
@@ -41,7 +45,9 @@ export function useCollection() {
         return collection
       })
       const reload = collections.find(
-        col => col.reloadNeeded === 'Reload needed',
+        col =>
+          col.reloadNeeded ===
+          i18n('plugin.table.td.hookingText.reload', 'Reload needed'),
       )
 
       const isIndexing = collections.find(col => col.isIndexing === true)
@@ -74,7 +80,10 @@ export function useCollection() {
         refetchCollection()
         handleNotification({
           type: 'success',
-          message: 'Request to delete content-type is successful',
+          message: i18n(
+            'plugin.message.success.delete',
+            'Request to delete content-type is successful',
+          ),
           blockTransition: false,
         })
       }
@@ -101,7 +110,10 @@ export function useCollection() {
         refetchCollection()
         handleNotification({
           type: 'success',
-          message: 'Request to add a content-type is successful',
+          message: i18n(
+            'plugin.message.success.add',
+            'Request to add a content-type is successful',
+          ),
           blockTransition: false,
         })
       }
@@ -129,7 +141,10 @@ export function useCollection() {
         refetchCollection()
         handleNotification({
           type: 'success',
-          message: 'Request to update content-type is successful',
+          message: i18n(
+            'plugin.message.success.update',
+            'Request to update content-type is successful',
+          ),
           blockTransition: false,
         })
       }

admin/src/Hooks/useCredential.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { request } from '@strapi/helper-plugin'
 import pluginId from '../pluginId'
 import useAlert from './useAlert'
+import { useI18n } from './useI18n'
 
 export function useCredential() {
   const [credentials, setCredentials] = useState({
@@ -13,36 +14,36 @@ export function useCredential() {
   const [refetchIndex, setRefetchIndex] = useState(true)
   const [host, setHost] = useState('')
   const [apiKey, setApiKey] = useState('')
-  const { handleNotification, checkForbiddenError } = useAlert()
+  const { handleNotification } = useAlert()
+  const { i18n } = useI18n()
 
   const refetchCredentials = () =>
     setRefetchIndex(prevRefetchIndex => !prevRefetchIndex)
 
   const updateCredentials = async () => {
-    try {
-      const { error } = await request(`/${pluginId}/credential`, {
-        method: 'POST',
-        body: {
-          apiKey: apiKey,
-          host: host,
-        },
+    const { error } = await request(`/${pluginId}/credential`, {
+      method: 'POST',
+      body: {
+        apiKey: apiKey,
+        host: host,
+      },
+    })
+    if (error) {
+      handleNotification({
+        type: 'warning',
+        message: error.message,
+        link: error.link,
+      })
+    } else {
+      refetchCredentials()
+      handleNotification({
+        type: 'success',
+        message: i18n(
+          'plugin.message.success.credentials',
+          'Credentials sucessfully updated!',
+        ),
+        blockTransition: false,
       })
-      if (error) {
-        handleNotification({
-          type: 'warning',
-          message: error.message,
-          link: error.link,
-        })
-      } else {
-        refetchCredentials()
-        handleNotification({
-          type: 'success',
-          message: 'Credentials sucessfully updated!',
-          blockTransition: false,
-        })
-      }
-    } catch (error) {
-      checkForbiddenError(error)
     }
   }
 

admin/src/Hooks/useI18n.js

@@ -0,0 +1,17 @@
+import { useIntl } from 'react-intl'
+import pluginId from '../pluginId'
+
+export const useI18n = () => {
+  const { formatMessage } = useIntl()
+
+  const i18n = (key, defaultMessage) => {
+    return formatMessage({
+      id: `${pluginId}.${key}`,
+      defaultMessage,
+    })
+  }
+
+  return {
+    i18n,
+  }
+}

admin/src/containers/Collection/CollectionColumn.js

@@ -8,6 +8,7 @@ import {
   Tr,
   Typography,
 } from '@strapi/design-system'
+import { useI18n } from '../../Hooks/useI18n'
 import { CheckPermissions } from '@strapi/helper-plugin'
 import { PERMISSIONS } from '../../constants'
 
@@ -17,6 +18,7 @@ const CollectionColumn = ({
   addCollection,
   updateCollection,
 }) => {
+  const { i18n } = useI18n()
   return (
     <Tr key={entry.contentType}>
       <CheckPermissions permissions={PERMISSIONS.createAndDelete}>
@@ -39,13 +41,17 @@ const CollectionColumn = ({
       {/* // IN MEILISEARCH */}
       <Td>
         <Typography textColor="neutral800">
-          {entry.indexed ? 'Yes' : 'No'}
+          {entry.indexed
+            ? i18n('plugin.table.td.yes', 'Yes')
+            : i18n('plugin.table.td.no', 'No')}
         </Typography>
       </Td>
       {/* // INDEXING */}
       <Td>
         <Typography textColor="neutral800">
-          {entry.isIndexing ? 'Yes' : 'No'}
+          {entry.isIndexing
+            ? i18n('plugin.table.td.yes', 'Yes')
+            : i18n('plugin.table.td.no', 'No')}
         </Typography>
       </Td>
       {/* // INDEX NAME */}
@@ -74,7 +80,7 @@ const CollectionColumn = ({
                   size="S"
                   variant="secondary"
                 >
-                  Update
+                  {i18n('plugin.update', 'Update')}
                 </Button>
               )}
             </Box>

admin/src/containers/Collection/CollectionTable.js

@@ -5,6 +5,7 @@ import CollectionTableHeader from './CollectionTableHeader'
 import CollectionColumn from './CollectionColumn'
 import useCollection from '../../Hooks/useCollection'
 import pluginId from '../../pluginId'
+import { useI18n } from '../../Hooks/useI18n'
 
 const Collection = () => {
   const {
@@ -19,6 +20,8 @@ const Collection = () => {
     useAutoReloadOverlayBlocker()
   const [reload, setReload] = useState(false)
 
+  const { i18n } = useI18n()
+
   const ROW_COUNT = 6
   const COL_COUNT = 10
 
@@ -65,7 +68,9 @@ const Collection = () => {
       </Table>
       {reloadNeeded && (
         <Box padding={5}>
-          <Button onClick={() => setReload(true)}>Reload server</Button>
+          <Button onClick={() => setReload(true)}>
+            {i18n('plugin.reload-server', 'Reload server')}
+          </Button>
         </Box>
       )}
     </Box>

admin/src/containers/Collection/CollectionTableHeader.js

@@ -6,10 +6,12 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system'
+import { useI18n } from '../../Hooks/useI18n'
 import { CheckPermissions } from '@strapi/helper-plugin'
 import { PERMISSIONS } from '../../constants'
 
 const CollectionTableHeader = () => {
+  const { i18n } = useI18n()
   return (
     <Thead>
       <Tr>
@@ -19,22 +21,34 @@ const CollectionTableHeader = () => {
           </Th>
         </CheckPermissions>
         <Th>
-          <Typography variant="sigma">NAME</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.name', 'NAME')}
+          </Typography>
         </Th>
         <Th>
-          <Typography variant="sigma">IN MEILISEARCH ?</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.in-meilisearch', 'IN MEILISEARCH ?')}
+          </Typography>
         </Th>
         <Th>
-          <Typography variant="sigma">INDEXING ?</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.indexing', 'INDEXING ?')}
+          </Typography>
         </Th>
         <Th>
-          <Typography variant="sigma">INDEX NAME</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.index-name', 'INDEX NAME')}
+          </Typography>
         </Th>
         <Th>
-          <Typography variant="sigma">DOCUMENTS</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.documents', 'DOCUMENTS')}
+          </Typography>
         </Th>
         <Th>
-          <Typography variant="sigma">HOOKS</Typography>
+          <Typography variant="sigma">
+            {i18n('plugin.table.header.hooks', 'HOOKS')}
+          </Typography>
         </Th>
         <CheckPermissions permissions={PERMISSIONS.update}>
           <Th>

admin/src/containers/PluginHeader/index.js

@@ -1,18 +1,24 @@
 import React, { memo } from 'react'
 import { Box, Link, BaseHeaderLayout } from '@strapi/design-system'
 import { ArrowLeft } from '@strapi/icons'
+import { useI18n } from '../../Hooks/useI18n'
 
 const PluginHeader = () => {
+  const { i18n } = useI18n()
+
   return (
     <Box background="neutral100">
       <BaseHeaderLayout
         navigationAction={
           <Link startIcon={<ArrowLeft />} to="/">
-            Go back
+            {i18n('plugin.go-back', 'Go Back')}
           </Link>
         }
-        title="Meilisearch"
-        subtitle="strapi-plugin-meilisearch"
+        title={i18n('plugin.name', 'Meilisearch')}
+        subtitle={i18n(
+          'plugin.description',
+          'Search in your content-types with the Meilisearch plugin',
+        )}
         as="h2"
       />
     </Box>