@akemona-org/strapi-plugin-i18n 3.7.0

package/admin/src/hooks/useHasI18n/index.js

@@ -0,0 +1,13 @@
+import { useSelector } from 'react-redux';
+import get from 'lodash/get';
+
+const selectContentManagerListViewPluginOptions = state =>
+  state.get('content-manager_listView').contentType.pluginOptions;
+
+const useHasI18n = () => {
+  const pluginOptions = useSelector(selectContentManagerListViewPluginOptions);
+
+  return get(pluginOptions, 'i18n.localized', false);
+};
+
+export default useHasI18n;

package/admin/src/hooks/useLocales/index.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useSelector, useDispatch } from 'react-redux';
+import { RESOLVE_LOCALES } from '../constants';
+
+const fetchLocalesList = async () => {
+  try {
+    const data = await request('/i18n/locales', {
+      method: 'GET',
+    });
+
+    return data;
+  } catch (e) {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return e;
+  }
+};
+
+const useLocales = () => {
+  const dispatch = useDispatch();
+  const locales = useSelector(state => state.get('i18n_locales').locales);
+  const isLoading = useSelector(state => state.get('i18n_locales').isLoading);
+
+  useEffect(() => {
+    fetchLocalesList().then(locales => dispatch({ type: RESOLVE_LOCALES, locales }));
+  }, [dispatch]);
+
+  return { locales, isLoading };
+};
+
+export default useLocales;

package/admin/src/index.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import get from 'lodash/get';
+import * as yup from 'yup';
+import pluginPkg from '../../package.json';
+import pluginLogo from './assets/images/logo.svg';
+import CheckboxConfirmation from './components/CheckboxConfirmation';
+import CMEditViewInjectedComponents from './components/CMEditViewInjectedComponents';
+import Initializer from './containers/Initializer';
+import SettingsPage from './containers/SettingsPage';
+import LocalePicker from './components/LocalePicker';
+import middlewares from './middlewares';
+import pluginPermissions from './permissions';
+import pluginId from './pluginId';
+import trads from './translations';
+import { getTrad } from './utils';
+import mutateCTBContentTypeSchema from './utils/mutateCTBContentTypeSchema';
+import LOCALIZED_FIELDS from './utils/localizedFields';
+import i18nReducers from './hooks/reducers';
+import DeleteModalAdditionalInfos from './components/DeleteModalAdditionalInfos';
+
+export default strapi => {
+  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
+
+  middlewares.forEach(middleware => {
+    strapi.middlewares.add(middleware);
+  });
+
+  const plugin = {
+    description: pluginDescription,
+    icon: pluginPkg.strapi.icon,
+    id: pluginId,
+    isReady: false,
+    isRequired: pluginPkg.strapi.required || false,
+    mainComponent: null,
+    name: pluginPkg.strapi.name,
+    pluginLogo,
+    preventComponentRendering: false,
+    settings: {
+      global: {
+        links: [
+          {
+            title: {
+              id: getTrad('plugin.name'),
+              defaultMessage: 'Internationalization',
+            },
+            name: 'internationalization',
+            to: `${strapi.settingsBaseURL}/internationalization`,
+            Component: () => <SettingsPage />,
+            permissions: pluginPermissions.accessMain,
+          },
+        ],
+      },
+    },
+    trads,
+    reducers: i18nReducers,
+    boot(app) {
+      const ctbPlugin = app.getPlugin('content-type-builder');
+      const cmPlugin = app.getPlugin('content-manager');
+
+      if (cmPlugin) {
+        cmPlugin.injectComponent('editView', 'informations', {
+          name: 'i18n-locale-filter-edit-view',
+          Component: CMEditViewInjectedComponents,
+        });
+        cmPlugin.injectComponent('listView', 'actions', {
+          name: 'i18n-locale-filter',
+          Component: LocalePicker,
+        });
+
+        cmPlugin.injectComponent('listView', 'deleteModalAdditionalInfos', {
+          name: 'i18n-delete-bullets-in-modal',
+          Component: DeleteModalAdditionalInfos,
+        });
+      }
+
+      if (ctbPlugin) {
+        const ctbFormsAPI = ctbPlugin.apis.forms;
+        ctbFormsAPI.addContentTypeSchemaMutation(mutateCTBContentTypeSchema);
+        ctbFormsAPI.components.add({ id: 'checkboxConfirmation', component: CheckboxConfirmation });
+
+        ctbFormsAPI.extendContentType({
+          validator: () => ({
+            i18n: yup.object().shape({
+              localized: yup.bool(),
+            }),
+          }),
+          form: {
+            advanced() {
+              return [
+                [
+                  {
+                    name: 'pluginOptions.i18n.localized',
+                    description: {
+                      id: getTrad('plugin.schema.i18n.localized.description-content-type'),
+                    },
+                    type: 'checkboxConfirmation',
+                    label: { id: getTrad('plugin.schema.i18n.localized.label-content-type') },
+                  },
+                ],
+              ];
+            },
+          },
+        });
+
+        ctbFormsAPI.extendFields(LOCALIZED_FIELDS, {
+          validator: args => ({
+            i18n: yup.object().shape({
+              localized: yup.bool().test({
+                name: 'ensure-unique-localization',
+                message: getTrad('plugin.schema.i18n.ensure-unique-localization'),
+                test(value) {
+                  if (value === undefined || value) {
+                    return true;
+                  }
+
+                  const unique = get(args, ['3', 'modifiedData', 'unique'], null);
+
+                  // Unique fields must be localized
+                  if (unique && !value) {
+                    return false;
+                  }
+
+                  return true;
+                },
+              }),
+            }),
+          }),
+          form: {
+            advanced({ contentTypeSchema, forTarget, type, step }) {
+              if (forTarget !== 'contentType') {
+                return [];
+              }
+
+              const hasI18nEnabled = get(
+                contentTypeSchema,
+                ['schema', 'pluginOptions', 'i18n', 'localized'],
+                false
+              );
+
+              if (!hasI18nEnabled) {
+                return [];
+              }
+
+              if (type === 'component' && step === '1') {
+                return [];
+              }
+
+              return [
+                [
+                  {
+                    name: 'pluginOptions.i18n.localized',
+                    description: {
+                      id: getTrad('plugin.schema.i18n.localized.description-field'),
+                    },
+                    type: 'checkbox',
+                    label: { id: getTrad('plugin.schema.i18n.localized.label-field') },
+                  },
+                ],
+              ];
+            },
+          },
+        });
+      }
+    },
+    initializer: Initializer,
+  };
+
+  return strapi.registerPlugin(plugin);
+};

package/admin/src/middlewares/addCommonFieldsToInitialDataMiddleware.js

@@ -0,0 +1,83 @@
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import cloneDeep from 'lodash/cloneDeep';
+import { parse } from 'qs';
+import {
+  request,
+  formatComponentData,
+  contentManagementUtilRemoveFieldsFromData,
+} from 'strapi-helper-plugin';
+import pluginId from '../pluginId';
+
+const addCommonFieldsToInitialDataMiddleware = () => ({ getState, dispatch }) => next => action => {
+  if (action.type !== 'ContentManager/CrudReducer/INIT_FORM') {
+    return next(action);
+  }
+
+  if (!action.rawQuery) {
+    return next(action);
+  }
+
+  const search = action.rawQuery.substring(1);
+  const query = parse(search);
+  const relatedEntityId = get(query, 'plugins.i18n.relatedEntityId', null);
+  const locale = get(query, 'plugins.i18n.locale', null);
+  const isSingleType = action.isSingleType;
+
+  if (!relatedEntityId && !isSingleType) {
+    return next(action);
+  }
+
+  const cmDataStore = getState().get('content-manager_editViewCrudReducer');
+  const cmLayoutStore = getState().get('content-manager_editViewLayoutManager');
+  const { contentTypeDataStructure } = cmDataStore;
+  const { currentLayout } = cmLayoutStore;
+
+  const getData = async () => {
+    // Show a loader
+    dispatch({ type: 'ContentManager/CrudReducer/GET_DATA' });
+    const defaultDataStructure = cloneDeep(contentTypeDataStructure);
+
+    try {
+      const requestURL = `/${pluginId}/content-manager/actions/get-non-localized-fields`;
+      const body = { model: currentLayout.contentType.uid, id: relatedEntityId, locale };
+
+      const data = await request(requestURL, { method: 'POST', body });
+
+      const { nonLocalizedFields, localizations } = data;
+
+      const merged = merge(defaultDataStructure, nonLocalizedFields);
+
+      const fieldsToRemove = [
+        'created_by',
+        'updated_by',
+        'published_at',
+        'id',
+        '_id',
+        'updated_at',
+        'created_at',
+      ];
+      const cleanedMerged = contentManagementUtilRemoveFieldsFromData(
+        merged,
+        currentLayout.contentType,
+        currentLayout.components,
+        fieldsToRemove
+      );
+      cleanedMerged.localizations = localizations;
+
+      action.data = formatComponentData(
+        cleanedMerged,
+        currentLayout.contentType,
+        currentLayout.components
+      );
+    } catch (err) {
+      // Silent
+    }
+
+    return next(action);
+  };
+
+  return getData();
+};
+
+export default addCommonFieldsToInitialDataMiddleware;

package/admin/src/middlewares/addLocaleColumnToListViewMiddleware.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import get from 'lodash/get';
+import LocaleListCell from '../components/LocaleListCell/LocaleListCell';
+
+const addLocaleColumnToListViewMiddleware = () => ({ getState }) => next => action => {
+  if (action.type !== 'ContentManager/ListView/SET_LIST_LAYOUT ') {
+    return next(action);
+  }
+
+  const isFieldLocalized = get(action, 'contentType.pluginOptions.i18n.localized', false);
+
+  if (!isFieldLocalized) {
+    return next(action);
+  }
+
+  const store = getState();
+  const { locales } = store.get('i18n_locales');
+
+  const locale = {
+    key: '__locale_key__',
+    fieldSchema: { type: 'string' },
+    metadatas: { label: 'Content available in', searchable: false, sortable: false },
+    name: 'locales',
+    cellFormatter: props => <LocaleListCell {...props} locales={locales} />,
+  };
+
+  action.displayedHeaders = [...action.displayedHeaders, locale];
+
+  return next(action);
+};
+
+export default addLocaleColumnToListViewMiddleware;

package/admin/src/middlewares/addLocaleToCollectionTypesMiddleware.js

@@ -0,0 +1,25 @@
+import addLocaleToLinksSearch from './utils/addLocaleToLinksSearch';
+
+const addLocaleToCollectionTypesMiddleware = () => ({ getState }) => next => action => {
+  if (action.type !== 'StrapiAdmin/LeftMenu/SET_CT_OR_ST_LINKS') {
+    return next(action);
+  }
+
+  if (action.data.authorizedCtLinks.length) {
+    const store = getState();
+    const { locales } = store.get('i18n_locales');
+    const { collectionTypesRelatedPermissions } = store.get('permissionsManager');
+
+    action.data.authorizedCtLinks = addLocaleToLinksSearch(
+      action.data.authorizedCtLinks,
+      'collectionType',
+      action.data.contentTypeSchemas,
+      locales,
+      collectionTypesRelatedPermissions
+    );
+  }
+
+  return next(action);
+};
+
+export default addLocaleToCollectionTypesMiddleware;

package/admin/src/middlewares/addLocaleToSingleTypesMiddleware.js

@@ -0,0 +1,25 @@
+import addLocaleToLinksSearch from './utils/addLocaleToLinksSearch';
+
+const addLocaleToSingleTypesMiddleware = () => ({ getState }) => next => action => {
+  if (action.type !== 'StrapiAdmin/LeftMenu/SET_CT_OR_ST_LINKS') {
+    return next(action);
+  }
+
+  if (action.data.authorizedStLinks.length) {
+    const store = getState();
+    const { locales } = store.get('i18n_locales');
+    const { collectionTypesRelatedPermissions } = store.get('permissionsManager');
+
+    action.data.authorizedStLinks = addLocaleToLinksSearch(
+      action.data.authorizedStLinks,
+      'singleType',
+      action.data.contentTypeSchemas,
+      locales,
+      collectionTypesRelatedPermissions
+    );
+  }
+
+  return next(action);
+};
+
+export default addLocaleToSingleTypesMiddleware;

package/admin/src/middlewares/extendCMEditViewLayoutMiddleware.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import get from 'lodash/get';
+import { Globe, GlobeCrossed } from '@buffetjs/icons';
+import { getTrad } from '../utils';
+
+const enhanceRelationLayout = (layout, locale) =>
+  layout.map(current => {
+    const labelIcon = {
+      title: {
+        id: getTrad('Field.localized'),
+        defaultMessage: 'This value is unique for the selected locale',
+      },
+      icon: <Globe />,
+    };
+    let queryInfos = current.queryInfos;
+
+    if (get(current, ['targetModelPluginOptions', 'i18n', 'localized'], false)) {
+      queryInfos = {
+        ...queryInfos,
+        defaultParams: { ...queryInfos.defaultParams, _locale: locale },
+        paramsToKeep: ['plugins.i18n.locale'],
+      };
+    }
+
+    return { ...current, labelIcon, queryInfos };
+  });
+
+const enhanceEditLayout = layout =>
+  layout.map(row => {
+    const enhancedRow = row.reduce((acc, field) => {
+      const type = get(field, ['fieldSchema', 'type'], null);
+      const hasI18nEnabled = get(
+        field,
+        ['fieldSchema', 'pluginOptions', 'i18n', 'localized'],
+        type === 'uid'
+      );
+
+      const labelIcon = {
+        title: {
+          id: hasI18nEnabled ? getTrad('Field.localized') : getTrad('Field.not-localized'),
+          defaultMessage: hasI18nEnabled
+            ? 'This value is unique for the selected locale'
+            : 'This value is common to all locales',
+        },
+        icon: hasI18nEnabled ? <Globe /> : <GlobeCrossed />,
+      };
+
+      acc.push({ ...field, labelIcon });
+
+      return acc;
+    }, []);
+
+    return enhancedRow;
+  });
+
+const enhanceComponentsLayout = (components, locale) => {
+  return Object.keys(components).reduce((acc, current) => {
+    const currentComponentLayout = components[current];
+
+    const enhancedEditLayout = enhanceComponentLayoutForRelations(
+      currentComponentLayout.layouts.edit,
+      locale
+    );
+
+    acc[current] = {
+      ...currentComponentLayout,
+      layouts: { ...currentComponentLayout.layouts, edit: enhancedEditLayout },
+    };
+
+    return acc;
+  }, {});
+};
+
+const enhanceComponentLayoutForRelations = (layout, locale) =>
+  layout.map(row => {
+    const enhancedRow = row.reduce((acc, field) => {
+      if (
+        get(field, ['fieldSchema', 'type']) === 'relation' &&
+        get(field, ['targetModelPluginOptions', 'i18n', 'localized'], false)
+      ) {
+        const queryInfos = {
+          ...field.queryInfos,
+          defaultParams: { ...field.queryInfos.defaultParams, _locale: locale },
+          paramsToKeep: ['plugins.i18n.locale'],
+        };
+
+        acc.push({ ...field, queryInfos });
+
+        return acc;
+      }
+
+      acc.push({ ...field });
+
+      return acc;
+    }, []);
+
+    return enhancedRow;
+  });
+
+const extendCMEditViewLayoutMiddleware = () => () => next => action => {
+  if (action.type !== 'ContentManager/EditViewLayoutManager/SET_LAYOUT') {
+    return next(action);
+  }
+
+  const hasi18nEnabled = get(
+    action,
+    getPathToContentType(['pluginOptions', 'i18n', 'localized']),
+    false
+  );
+
+  if (!hasi18nEnabled) {
+    return next(action);
+  }
+
+  const currentLocale = get(action, ['query', 'plugins', 'i18n', 'locale'], null);
+
+  // This might break the cm, has the user might be redirected to the homepage
+  if (!currentLocale) {
+    return next(action);
+  }
+
+  const editLayoutPath = getPathToContentType(['layouts', 'edit']);
+  const editRelationsPath = getPathToContentType(['layouts', 'editRelations']);
+  const editLayout = get(action, editLayoutPath);
+  const editRelationsLayout = get(action, editRelationsPath);
+  const nextEditRelationLayout = enhanceRelationLayout(editRelationsLayout, currentLocale);
+  const nextEditLayout = enhanceEditLayout(editLayout);
+
+  const enhancedLayouts = {
+    ...action.layout.contentType.layouts,
+    editRelations: nextEditRelationLayout,
+    edit: nextEditLayout,
+  };
+  const components = enhanceComponentsLayout(action.layout.components, currentLocale);
+
+  const enhancedAction = {
+    ...action,
+    layout: {
+      ...action.layout,
+      contentType: {
+        ...action.layout.contentType,
+        layouts: enhancedLayouts,
+      },
+      components,
+    },
+  };
+
+  return next(enhancedAction);
+};
+
+const getPathToContentType = pathArray => ['layout', 'contentType', ...pathArray];
+
+export default extendCMEditViewLayoutMiddleware;
+export {
+  enhanceComponentLayoutForRelations,
+  enhanceComponentsLayout,
+  enhanceEditLayout,
+  enhanceRelationLayout,
+};

package/admin/src/middlewares/extendCTBAttributeInitialDataMiddleware.js

@@ -0,0 +1,58 @@
+const extendCTBAttributeInitialDataMiddleware = () => {
+  return ({ getState }) => next => action => {
+    const enhanceAction = () => {
+      // the block here is to catch the error when trying to access the state
+      // of the ctb when the plugin is not mounted
+      try {
+        const hasi18nEnabled = getState().getIn([
+          'content-type-builder_dataManagerProvider',
+          'modifiedData',
+          'contentType',
+          'schema',
+          'pluginOptions',
+          'i18n',
+          'localized',
+        ]);
+
+        if (hasi18nEnabled) {
+          const pluginOptions = action.options
+            ? { ...action.options.pluginOptions, i18n: { localized: true } }
+            : { i18n: { localized: true } };
+
+          return next({
+            ...action,
+            options: {
+              pluginOptions,
+            },
+          });
+        }
+
+        return next(action);
+      } catch (err) {
+        return next(action);
+      }
+    };
+
+    if (
+      action.type === 'ContentTypeBuilder/FormModal/SET_ATTRIBUTE_DATA_SCHEMA' &&
+      action.forTarget === 'contentType' &&
+      !['relation', 'component'].includes(action.attributeType) &&
+      !action.isEditing
+    ) {
+      return enhanceAction();
+    }
+
+    if (
+      (action.type ===
+        'ContentTypeBuilder/FormModal/RESET_PROPS_AND_SET_FORM_FOR_ADDING_AN_EXISTING_COMPO' ||
+        action.type === 'ContentTypeBuilder/FormModal/RESET_PROPS_AND_SAVE_CURRENT_DATA') &&
+      action.forTarget === 'contentType'
+    ) {
+      return enhanceAction();
+    }
+
+    return next(action);
+  };
+};
+
+export default extendCTBAttributeInitialDataMiddleware;

package/admin/src/middlewares/extendCTBInitialDataMiddleware.js

@@ -0,0 +1,33 @@
+import { has } from 'lodash';
+
+const extendCTBInitialDataMiddleware = () => {
+  return () => next => action => {
+    if (
+      action.type === 'ContentTypeBuilder/FormModal/SET_DATA_TO_EDIT' &&
+      action.modalType === 'contentType'
+    ) {
+      const i18n = { localized: false };
+
+      const pluginOptions = action.data.pluginOptions
+        ? { ...action.data.pluginOptions, i18n }
+        : { i18n };
+
+      const data = { ...action.data, pluginOptions };
+
+      if (action.actionType === 'create') {
+        return next({ ...action, data });
+      }
+
+      // Override the action if the pluginOption config does not contain i18n
+      // In this case we need to set the proper initialData shape
+      if (!has(action.data.pluginOptions, 'i18n.localized')) {
+        return next({ ...action, data });
+      }
+    }
+
+    // action is not the one we want to override
+    return next(action);
+  };
+};
+
+export default extendCTBInitialDataMiddleware;

package/admin/src/middlewares/index.js

@@ -0,0 +1,21 @@
+import addCommonFieldsToInitialDataMiddleware from './addCommonFieldsToInitialDataMiddleware';
+import addLocaleToCollectionTypesMiddleware from './addLocaleToCollectionTypesMiddleware';
+import addLocaleToSingleTypesMiddleware from './addLocaleToSingleTypesMiddleware';
+import extendCMEditViewLayoutMiddleware from './extendCMEditViewLayoutMiddleware';
+import extendCTBInitialDataMiddleware from './extendCTBInitialDataMiddleware';
+import extendCTBAttributeInitialDataMiddleware from './extendCTBAttributeInitialDataMiddleware';
+import addLocaleColumnToListViewMiddleware from './addLocaleColumnToListViewMiddleware';
+import localePermissionMiddleware from './localePermissionMiddleware';
+
+const middlewares = [
+  addCommonFieldsToInitialDataMiddleware,
+  addLocaleToCollectionTypesMiddleware,
+  addLocaleToSingleTypesMiddleware,
+  extendCMEditViewLayoutMiddleware,
+  extendCTBInitialDataMiddleware,
+  extendCTBAttributeInitialDataMiddleware,
+  addLocaleColumnToListViewMiddleware,
+  localePermissionMiddleware,
+];
+
+export default middlewares;