Add spanish translation

admin/src/components/ActionButtons/index.js

@@ -5,6 +5,7 @@ import { isEmpty } from 'lodash';
 import { Button } from '@strapi/design-system';
 import { Map } from 'immutable';
 import { useNotification } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
 
 import ConfirmModal from '../ConfirmModal';
 import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
@@ -15,6 +16,7 @@ const ActionButtons = () => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [actionType, setActionType] = useState('');
   const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
+  const { formatMessage } = useIntl();
 
   const closeModal = () => {
     setActionType('');
@@ -28,8 +30,12 @@ const ActionButtons = () => {
 
   return (
     <ActionButtonsStyling>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>Import</Button>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>Export</Button>
+      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>
+        {formatMessage({ id: 'config-sync.Buttons.Import' })}
+      </Button>
+      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>
+        {formatMessage({ id: 'config-sync.Buttons.Export' })}
+      </Button>
       {!isEmpty(partialDiff) && (
         <h4 style={{ display: 'inline' }}>{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</h4>
       )}

admin/src/components/ConfigDiff/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+import { useIntl } from 'react-intl';
 
 import {
   ModalLayout,
@@ -11,9 +12,8 @@ import {
 } from '@strapi/design-system';
 
 const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
-  if (!isOpen) {
-    return null;
-  }
+  const { formatMessage } = useIntl();
+  if (!isOpen) return null;
 
   return (
     <ModalLayout
@@ -22,16 +22,16 @@ const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
     >
       <ModalHeader>
         <Typography variant="omega" fontWeight="bold" textColor="neutral800">
-          Config changes for {configName}
+          {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
         </Typography>
       </ModalHeader>
       <ModalBody>
         <Grid paddingBottom={4} style={{ textAlign: 'center' }}>
           <GridItem col={6}>
-            <Typography variant="delta">Sync directory</Typography>
+            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
           </GridItem>
           <GridItem col={6}>
-            <Typography variant="delta">Database</Typography>
+            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
           </GridItem>
         </Grid>
         <ReactDiffViewer

admin/src/components/ConfigList/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
 import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 
@@ -19,6 +20,7 @@ import NoChanges from '../NoChanges';
 import ConfigListRow from './ConfigListRow';
 import { setConfigPartialDiffInState } from '../../state/actions/Config';
 
+
 const ConfigList = ({ diff, isLoading }) => {
   const [openModal, setOpenModal] = useState(false);
   const [originalConfig, setOriginalConfig] = useState({});
@@ -27,23 +29,24 @@ const ConfigList = ({ diff, isLoading }) => {
   const [rows, setRows] = useState([]);
   const [checkedItems, setCheckedItems] = useState([]);
   const dispatch = useDispatch();
+  const { formatMessage } = useIntl();
 
   const getConfigState = (configName) => {
     if (
       diff.fileConfig[configName]
       && diff.databaseConfig[configName]
     ) {
-      return 'Different';
+      return formatMessage({ id: 'config-sync.ConfigList.Different' });
     } else if (
       diff.fileConfig[configName]
       && !diff.databaseConfig[configName]
     ) {
-      return 'Only in sync dir';
+      return formatMessage({ id: 'config-sync.ConfigList.OnlyDir' });
     } else if (
       !diff.fileConfig[configName]
       && diff.databaseConfig[configName]
     ) {
-      return 'Only in DB';
+      return formatMessage({ id: 'config-sync.ConfigList.OnlyDB' });
     }
   };
 
@@ -96,7 +99,7 @@ const ConfigList = ({ diff, isLoading }) => {
   if (isLoading) {
     return (
       <div style={{ textAlign: 'center', marginTop: 40 }}>
-        <Loader>Loading content...</Loader>
+        <Loader>{formatMessage({ id: 'config-sync.ConfigList.Loading' })}</Loader>
       </div>
     );
   }
@@ -126,20 +129,20 @@ const ConfigList = ({ diff, isLoading }) => {
           <Tr>
             <Th>
               <BaseCheckbox
-                aria-label="Select all entries"
+                aria-label={formatMessage({ id: 'config-sync.ConfigList.SelectAll' })}
                 indeterminate={isIndeterminate}
                 onValueChange={(value) => setCheckedItems(checkedItems.map(() => value))}
                 value={allChecked}
               />
             </Th>
             <Th>
-              <Typography variant="sigma">Config name</Typography>
+              <Typography variant="sigma">{formatMessage({ id: 'config-sync.ConfigList.ConfigName' })}</Typography>
             </Th>
             <Th>
-              <Typography variant="sigma">Config type</Typography>
+              <Typography variant="sigma">{formatMessage({ id: 'config-sync.ConfigList.ConfigType' })}</Typography>
             </Th>
             <Th>
-              <Typography variant="sigma">State</Typography>
+              <Typography variant="sigma">{formatMessage({ id: 'config-sync.ConfigList.State' })}</Typography>
             </Th>
           </Tr>
         </Thead>

admin/src/components/ConfirmModal/index.js

@@ -26,7 +26,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
   return (
     <Dialog
       onClose={onClose}
-      title="Confirmation"
+      title={formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>

admin/src/components/FirstExport/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { NoContent, useNotification } from '@strapi/helper-plugin';
 import { Button } from '@strapi/design-system';
@@ -10,6 +11,7 @@ const FirstExport = () => {
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
   const [modalIsOpen, setModalIsOpen] = useState(false);
+  const { formatMessage } = useIntl();
 
   return (
     <div>
@@ -23,9 +25,9 @@ const FirstExport = () => {
         content={{
           id: 'emptyState',
           defaultMessage:
-            'Looks like this is your first time using config-sync for this project.',
+          formatMessage({ id: 'config-sync.FirstExport.Message' }),
         }}
-        action={<Button onClick={() => setModalIsOpen(true)}>Make the initial export</Button>}
+        action={<Button onClick={() => setModalIsOpen(true)}>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>}
       />
     </div>
   );

admin/src/components/NoChanges/index.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { NoContent } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
 
-const NoChanges = () => (
-  <NoContent
-    content={{
-      id: 'emptyState',
-      defaultMessage:
-        'No differences between DB and sync directory. You are up-to-date!',
-    }}
-  />
-);
+const NoChanges = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <NoContent
+      content={{
+        id: 'emptyState',
+        defaultMessage:
+          formatMessage({ id: 'config-sync.NoChanges.Message' }),
+      }}
+    />
+  );
+};
 
 export default NoChanges;

admin/src/translations/en.json

@@ -7,10 +7,32 @@
   "popUpWarning.button.export": "Yes, export",
   "popUpWarning.button.cancel": "Cancel",
   "popUpWarning.force": "Force",
+  "popUpWarning.Confirmation": "Confirmation",
 
   "Header.Title": "Config Sync",
   "Header.Description": "Manage your database config across environments.",
 
+  "ConfigList.Loading": "Loading content...",
+  "ConfigList.SelectAll": "Select all entries",
+  "ConfigList.ConfigName": "Config name",
+  "ConfigList.ConfigType": "Config type",
+  "ConfigList.State": "State",
+  "ConfigList.Different": "Different",
+  "ConfigList.OnlyDir": "Only in sync dir",
+  "ConfigList.OnlyDB": "Only in DB",
+
+  "NoChanges.Message": "No differences between DB and sync directory. You are up-to-date!",
+
+  "ConfigDiff.Title": "Config changes for",
+  "ConfigDiff.SyncDirectory": "Sync directory",
+  "ConfigDiff.Database": "Database",
+
+  "Buttons.Export": "Export",
+  "Buttons.Import": "Import",
+
+  "FirstExport.Message": "Looks like this is your first time using config-sync for this project.",
+  "FirstExport.Button": "Make the initial export",
+
   "Settings.Tool.Title": "Interface",
 
   "plugin.name": "Config Sync"

admin/src/translations/es.json

@@ -1 +1,39 @@
-{}
+{ 
+  "popUpWarning.warning.import_1": "Si continuas todos tus ficheros de configuración locales",
+  "popUpWarning.warning.import_2": "se importarán a la base de datos.",
+  "popUpWarning.warning.export_1": "Si continuas las configuraciones de tu base de datos",
+  "popUpWarning.warning.export_2": "se escribirán en ficheros de configuración locales.",
+  "popUpWarning.button.import": "Sí, importar",
+  "popUpWarning.button.export": "Sí, exportar",
+  "popUpWarning.button.cancel": "Cancelar",
+  "popUpWarning.force": "Forzar",
+  "popUpWarning.Confirmation": "Confirmación",
+
+  "Header.Title": "Config Sync",
+  "Header.Description": "Gestiona las configuraciones de tu base de datos entre diferentes entornos o instancias.",
+
+  "ConfigList.Loading": "Cargando contenido...",
+  "ConfigList.SelectAll": "Seleccionar todas las entradas",
+  "ConfigList.ConfigName": "Nombre",
+  "ConfigList.ConfigType": "Tipo",
+  "ConfigList.State": "Estado",
+  "ConfigList.Different": "Diferentes",
+  "ConfigList.OnlyDir": "Sólo en directorio de sincronización",
+  "ConfigList.OnlyDB": "Sólo en la base de datos",
+
+  "NoChanges.Message": "No hay diferencia entre la base de datos y el directorio de sincronización. ¡Estás actualizado!",
+
+  "ConfigDiff.Title": "Cambios en la configuración para",
+  "ConfigDiff.SyncDirectory": "Directorio de sincronización",
+  "ConfigDiff.Database": "Base de datos",
+
+  "Buttons.Import": "Importar",
+  "Buttons.Export": "Exportar",
+
+  "FirstExport.Message": "Parece ser la primera vez que se usa config-sync en este proyecto.",
+  "FirstExport.Button": "Hacer la exportación inicial",
+
+  "Settings.Tool.Title": "Interfaz",
+
+  "plugin.name": "Config Sync"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-config-sync",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Migrate your config data across environments using the CLI or Strapi admin panel.",
   "strapi": {
     "displayName": "Config Sync",