Merge pull request #9912 from strapi/i18n/display-locale-rbac

Only display allowed locales with rbac

packages/strapi-helper-plugin/lib/src/components/InjectionZone/InjectionZoneList.js

@@ -33,11 +33,19 @@ const InjectionZoneList = ({ area, ...props }) => {
 
   return (
     <List>
-      {compos.map(compo => (
-        <ListItem key={compo.name}>
-          <compo.Component {...props} />
-        </ListItem>
-      ))}
+      {compos.map(compo => {
+        const component = compo.Component(props);
+
+        if (component) {
+          return (
+            <ListItem key={compo.name}>
+              <compo.Component {...props} />
+            </ListItem>
+          );
+        }
+
+        return null;
+      })}
     </List>
   );
 };

packages/strapi-plugin-i18n/admin/src/components/CMEditViewInjectedComponents/index.js

@@ -4,12 +4,12 @@ import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { useContentManagerEditViewDataManager, useQueryParams } from 'strapi-helper-plugin';
 import selectI18NLocales from '../../selectors/selectI18nLocales';
+import useContentTypePermissions from '../../hooks/useContentTypePermissions';
 import CMEditViewLocalePicker from '../CMEditViewLocalePicker';
-import selectCollectionTypesRelatedPermissions from './selectors';
 
 const CMEditViewInjectedComponents = () => {
   const { layout, modifiedData, slug, isSingleType } = useContentManagerEditViewDataManager();
-  const colllectionTypesRelatedPermissions = useSelector(selectCollectionTypesRelatedPermissions);
+  const { createPermissions, readPermissions } = useContentTypePermissions(slug);
   const locales = useSelector(selectI18NLocales);
   const params = useParams();
   const [{ query }, setQuery] = useQueryParams();
@@ -37,10 +37,6 @@ const CMEditViewInjectedComponents = () => {
     return null;
   }
 
-  const currentCTRelatedPermissions = colllectionTypesRelatedPermissions[slug];
-  const readPermissions = currentCTRelatedPermissions['plugins::content-manager.explorer.read'];
-  const createPermissions = currentCTRelatedPermissions['plugins::content-manager.explorer.create'];
-
   const localizations = get(modifiedData, 'localizations', []);
 
   return (

packages/strapi-plugin-i18n/admin/src/components/DeleteModalAdditionalInfos/index.js

@@ -1,8 +1,15 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { getTrad } from '../../utils';
+import useHasI18n from '../../hooks/useHasI18n';
 
 const DeleteModalAdditionalInfos = () => {
+  const hasI18nEnabled = useHasI18n();
+
+  if (!hasI18nEnabled) {
+    return null;
+  }
+
   return (
     <span>
       <FormattedMessage

packages/strapi-plugin-i18n/admin/src/components/LocaleListCell/LocaleListCell.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from '@buffetjs/styles';
+import get from 'lodash/get';
 
 const mapToLocaleName = (locales, localeCode) =>
-  locales.find(({ code }) => code === localeCode).name;
+  get(
+    locales.find(({ code }) => code === localeCode),
+    'name',
+    localeCode
+  );
 
 const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id }) => {
   const allLocalizations = [{ locale: currentLocaleCode }, ...localizations];

packages/strapi-plugin-i18n/admin/src/components/LocalePicker/index.js

@@ -2,8 +2,11 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Picker, Padded, Text, Flex } from '@buffetjs/core';
 import { Carret, useQueryParams } from 'strapi-helper-plugin';
+import { useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 import get from 'lodash/get';
+import useContentTypePermissions from '../../hooks/useContentTypePermissions';
+import useHasI18n from '../../hooks/useHasI18n';
 import selectI18NLocales from '../../selectors/selectI18nLocales';
 import getInitialLocale from '../../utils/getInitialLocale';
 
@@ -37,20 +40,19 @@ const EllipsisParagraph = styled(Text)`
   text-align: left;
 `;
 
-const selectContentManagerListViewPluginOptions = state =>
-  state.get('content-manager_listView').contentType.pluginOptions;
-
 const LocalePicker = () => {
   const dispatch = useDispatch();
-  const pluginOptions = useSelector(selectContentManagerListViewPluginOptions);
   const locales = useSelector(selectI18NLocales);
   const [{ query }, setQuery] = useQueryParams();
+  const {
+    params: { slug },
+  } = useRouteMatch('/plugins/content-manager/collectionType/:slug');
+  const isFieldLocalized = useHasI18n();
+  const { createPermissions, readPermissions } = useContentTypePermissions(slug);
 
   const initialLocale = getInitialLocale(query, locales);
   const [selected, setSelected] = useState(initialLocale);
 
-  const isFieldLocalized = get(pluginOptions, 'i18n.localized', false);
-
   if (!isFieldLocalized) {
     return null;
   }
@@ -59,6 +61,17 @@ const LocalePicker = () => {
     return null;
   }
 
+  const displayedLocales = locales.filter(locale => {
+    const canCreate = createPermissions.find(({ properties }) => {
+      return get(properties, 'locales', []).includes(locale.code);
+    });
+    const canRead = readPermissions.find(({ properties }) =>
+      get(properties, 'locales', []).includes(locale.code)
+    );
+
+    return canCreate || canRead;
+  });
+
   return (
     <Picker
       position="right"
@@ -82,12 +95,12 @@ const LocalePicker = () => {
           onToggle();
         };
 
-        const hasMultipleLocales = locales.length > 1;
+        const hasMultipleLocales = displayedLocales.length > 1;
 
         return hasMultipleLocales ? (
           <Padded left right>
             <List>
-              {locales.map(locale => {
+              {displayedLocales.map(locale => {
                 if (locale.id === selected.id) {
                   return null;
                 }

packages/strapi-plugin-i18n/admin/src/hooks/useContentTypePermissions/index.js

@@ -0,0 +1,14 @@
+import { useSelector } from 'react-redux';
+import selectCollectionTypesRelatedPermissions from '../../selectors/selectCollectionTypesRelatedPermissions';
+
+const useContentTypePermissions = slug => {
+  const collectionTypesRelatedPermissions = useSelector(selectCollectionTypesRelatedPermissions);
+
+  const currentCTRelatedPermissions = collectionTypesRelatedPermissions[slug];
+  const readPermissions = currentCTRelatedPermissions['plugins::content-manager.explorer.read'];
+  const createPermissions = currentCTRelatedPermissions['plugins::content-manager.explorer.create'];
+
+  return { createPermissions, readPermissions };
+};
+
+export default useContentTypePermissions;

packages/strapi-plugin-i18n/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;