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 Díaz Martínez <[email protected]> Co-authored-by: Michel Díaz Martínez <[email protected]>
meilisearch · May 16, 2024 · d6b0cbb · d6b0cbb
2 parents ffcf43c + 5bbc698
commit d6b0cbb
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -129,3 +129,11 @@ playground/src/plugins
 
 # Sqlite Database from the playground
 data.db
+
+############################
+# Local
+############################
+.nvmrc
+.prettierignore
+.prettierrc.js
+.vscode
diff --git a/admin/src/Hooks/useAlert.js b/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,
  })
  }

diff --git a/admin/src/Hooks/useCollection.js b/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,
  })
  }

diff --git a/admin/src/Hooks/useCredential.js b/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)
  }
  }
 

diff --git a/admin/src/Hooks/useI18n.js b/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,
+ }
+}
diff --git a/admin/src/containers/Collection/CollectionColumn.js b/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>

diff --git a/admin/src/containers/Collection/CollectionTable.js b/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>

diff --git a/admin/src/containers/Collection/CollectionTableHeader.js b/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>

diff --git a/admin/src/containers/PluginHeader/index.js b/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>