@akemona-org/strapi-plugin-i18n 3.7.0

package/admin/src/components/CMEditViewCopyLocale/utils/tests/generateOptions.test.js

@@ -0,0 +1,79 @@
+import generateOptions from '../generateOptions';
+
+const appLocales = [
+  { code: 'en', name: 'English' },
+  { code: 'fr', name: 'French' },
+  { code: 'it', name: 'Italian' },
+];
+
+describe('I18n | Components | CMEditViewCopyLocale | utils', () => {
+  describe('generateOptions', () => {
+    it('should return an array', () => {
+      expect(generateOptions([])).toEqual([]);
+    });
+
+    it('should remove the current locale from the array', () => {
+      const permissions = [
+        { properties: { locales: [] } },
+        { properties: { locales: ['en', 'fr', 'it'] } },
+      ];
+      const currentLocale = 'en';
+      const localizations = [
+        { published_at: 'test', locale: 'en', id: 1 },
+        { published_at: 'test', locale: 'fr', id: 2 },
+        { published_at: 'test', locale: 'it', id: 3 },
+      ];
+
+      const expected = [
+        { label: 'French', value: 2 },
+        { label: 'Italian', value: 3 },
+      ];
+
+      expect(generateOptions(appLocales, currentLocale, localizations, permissions)).toEqual(
+        expected
+      );
+    });
+
+    it('should remove the locales that are not contained in the localizations array', () => {
+      const permissions = [
+        { properties: { locales: [] } },
+        { properties: { locales: ['en', 'fr', 'it'] } },
+      ];
+      const localizations = [
+        { published_at: 'test', locale: 'en', id: 1 },
+        { published_at: 'test', locale: 'fr', id: 2 },
+      ];
+
+      const expected = [
+        { label: 'English', value: 1 },
+        { label: 'French', value: 2 },
+      ];
+      const currentLocale = 'test';
+      expect(generateOptions(appLocales, currentLocale, localizations, permissions)).toEqual(
+        expected
+      );
+    });
+
+    it('should remove the locales when the user does not have the permission to read', () => {
+      const permissions = [
+        { properties: { locales: ['en'] } },
+        { properties: { locales: ['it'] } },
+      ];
+      const currentLocale = 'test';
+      const localizations = [
+        { published_at: 'test', locale: 'en', id: 1 },
+        { published_at: 'test', locale: 'fr', id: 2 },
+        { published_at: 'test', locale: 'it', id: 3 },
+      ];
+
+      const expected = [
+        { label: 'English', value: 1 },
+        { label: 'Italian', value: 3 },
+      ];
+
+      expect(generateOptions(appLocales, currentLocale, localizations, permissions)).toEqual(
+        expected
+      );
+    });
+  });
+});

package/admin/src/components/CMEditViewCopyLocale/utils/tests/removePasswordAndRelationsFieldFromData.test.js

@@ -0,0 +1,40 @@
+import testData from './data';
+import removePasswordAndRelationsFieldFromData from '../removePasswordAndRelationsFieldFromData';
+
+describe('I18n | Components | CMEditViewCopyLocale | utils', () => {
+  describe('removePasswordAndRelationsFieldFromData', () => {
+    it('should return an empty object', () => {
+      const { components, contentType } = testData;
+
+      expect(removePasswordAndRelationsFieldFromData({}, contentType, components)).toEqual({});
+    });
+
+    it('should return the initial data if there is no password field', () => {
+      const { components, contentType } = testData;
+
+      expect(
+        removePasswordAndRelationsFieldFromData({ name: 'test' }, contentType, components)
+      ).toEqual({
+        name: 'test',
+      });
+    });
+
+    it('should remove the password field for a simple data structure', () => {
+      const { components, contentType } = testData;
+      const data = { name: 'test', password: 'password' };
+      const expected = { name: 'test' };
+
+      expect(removePasswordAndRelationsFieldFromData(data, contentType, components)).toEqual(
+        expected
+      );
+    });
+
+    it('should remove all password fields', () => {
+      const { components, contentType, modifiedData, expectedModifiedData } = testData;
+
+      expect(
+        removePasswordAndRelationsFieldFromData(modifiedData, contentType, components)
+      ).toEqual(expectedModifiedData);
+    });
+  });
+});

package/admin/src/components/CMEditViewInjectedComponents/index.js

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import get from 'lodash/get';
+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';
+
+const CMEditViewInjectedComponents = () => {
+  const { layout, modifiedData, slug, isSingleType } = useContentManagerEditViewDataManager();
+  const { createPermissions, readPermissions } = useContentTypePermissions(slug);
+  const locales = useSelector(selectI18NLocales);
+  const params = useParams();
+  const [{ query }, setQuery] = useQueryParams();
+
+  const id = get(params, 'id', null);
+  const currentEntityId = id;
+  const defaultLocale = locales.find(loc => loc.isDefault);
+  const currentLocale = get(query, 'plugins.i18n.locale', defaultLocale.code);
+  const hasI18nEnabled = get(layout, ['pluginOptions', 'i18n', 'localized'], false);
+  const hasDraftAndPublishEnabled = get(layout, ['options', 'draftAndPublish'], false);
+
+  const defaultQuery = useMemo(() => {
+    if (!query) {
+      return { plugins: { i18n: { locale: currentLocale } } };
+    }
+
+    return query;
+  }, [query, currentLocale]);
+
+  if (!hasI18nEnabled) {
+    return null;
+  }
+
+  if (!currentLocale) {
+    return null;
+  }
+
+  const localizations = get(modifiedData, 'localizations', []);
+
+  return (
+    <CMEditViewLocalePicker
+      appLocales={locales}
+      currentEntityId={currentEntityId}
+      createPermissions={createPermissions}
+      hasDraftAndPublishEnabled={hasDraftAndPublishEnabled}
+      localizations={localizations}
+      isSingleType={isSingleType}
+      query={defaultQuery}
+      readPermissions={readPermissions}
+      setQuery={setQuery}
+      slug={slug}
+    />
+  );
+};
+
+export default CMEditViewInjectedComponents;

package/admin/src/components/CMEditViewLocalePicker/Option.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+import { components } from 'react-select';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { Flex, Text } from '@buffetjs/core';
+import { RelationDPState } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+
+const TextGrow = styled(Text)`
+  flex-grow: 2;
+`;
+
+const statusToTitleMap = {
+  draft: 'content-manager.components.Select.draft-info-title',
+  published: 'content-manager.components.Select.publish-info-title',
+  'did-not-create-locale': getTrad('components.Select.locales.not-available'),
+};
+
+const Option = props => {
+  const { formatMessage } = useIntl();
+  const Component = components.Option;
+  const options = get(props, ['selectProps', 'options'], {});
+  const currentOption = options.find(option => option.value === props.value);
+  const titleLabelID = statusToTitleMap[currentOption.status];
+  const title = formatMessage({ id: titleLabelID });
+  const fontWeight = props.isFocused ? 'bold' : 'regular';
+
+  return (
+    <Component {...props}>
+      <Flex>
+        <RelationDPState
+          {...currentOption}
+          marginLeft="0"
+          marginTop="1px"
+          marginRight="10px"
+          marginBottom="0"
+          title={title}
+        />
+
+        <TextGrow ellipsis as="div" fontWeight={fontWeight} title={props.label}>
+          {props.label}&nbsp;
+        </TextGrow>
+      </Flex>
+    </Component>
+  );
+};
+
+Option.defaultProps = {};
+
+Option.propTypes = {
+  label: PropTypes.string.isRequired,
+  isFocused: PropTypes.bool.isRequired,
+  selectProps: PropTypes.shape({
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        status: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+      }).isRequired
+    ).isRequired,
+  }).isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default Option;

package/admin/src/components/CMEditViewLocalePicker/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-bottom: ${({ paddingBottom }) => paddingBottom};
+  border-top: 1px solid rgba(14, 22, 34, 0.04);
+`;
+
+export default Wrapper;

package/admin/src/components/CMEditViewLocalePicker/index.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label, Text, Padded } from '@buffetjs/core';
+import get from 'lodash/get';
+import Select, { components } from 'react-select';
+import { useIntl } from 'react-intl';
+import { useTheme } from 'styled-components';
+import { DropdownIndicator, BaselineAlignment, selectStyles } from 'strapi-helper-plugin';
+import { useHistory } from 'react-router-dom';
+import { stringify } from 'qs';
+import { getTrad } from '../../utils';
+import { addStatusColorToLocale, createLocalesOption } from './utils';
+import CMEditViewCopyLocale from '../CMEditViewCopyLocale';
+import OptionComponent from './Option';
+import Wrapper from './Wrapper';
+
+const CMEditViewLocalePicker = ({
+  appLocales,
+  createPermissions,
+  currentEntityId,
+  hasDraftAndPublishEnabled,
+  isSingleType,
+  localizations,
+  query,
+  readPermissions,
+  setQuery,
+  slug,
+}) => {
+  const { formatMessage } = useIntl();
+  const theme = useTheme();
+  const currentLocale = get(query, 'plugins.i18n.locale', false);
+  const { push } = useHistory();
+
+  const handleChange = ({ status, value, id }) => {
+    let defaultParams = {
+      plugins: {
+        ...query.plugins,
+        i18n: { ...query.plugins.i18n, locale: value },
+      },
+    };
+
+    if (currentEntityId) {
+      defaultParams.plugins.i18n.relatedEntityId = currentEntityId;
+    }
+
+    if (isSingleType) {
+      setQuery(defaultParams);
+
+      return;
+    }
+
+    if (status === 'did-not-create-locale') {
+      push({
+        pathname: `/plugins/content-manager/collectionType/${slug}/create`,
+        search: stringify(defaultParams, { encode: false }),
+      });
+
+      return;
+    }
+
+    push({
+      pathname: `/plugins/content-manager/collectionType/${slug}/${id}`,
+      search: stringify(defaultParams, { encode: false }),
+    });
+  };
+
+  const styles = selectStyles(theme);
+
+  const options = addStatusColorToLocale(
+    createLocalesOption(appLocales, localizations),
+    theme
+  ).filter(({ status, value }) => {
+    if (status === 'did-not-create-locale') {
+      return createPermissions.find(({ properties }) =>
+        get(properties, 'locales', []).includes(value)
+      );
+    }
+
+    return readPermissions.find(({ properties }) => get(properties, 'locales', []).includes(value));
+  });
+  const filteredOptions = options.filter(({ value }) => value !== currentLocale);
+  const value = options.find(({ value }) => {
+    return value === currentLocale;
+  });
+
+  const Option = hasDraftAndPublishEnabled ? OptionComponent : components.Option;
+  const paddingBottom = localizations.length ? '19px' : '29px';
+
+  return (
+    <Wrapper paddingBottom={paddingBottom}>
+      <BaselineAlignment top size="18px" />
+      <Padded left right size="smd">
+        <Text fontWeight="bold">
+          {formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Internationalization' })}
+        </Text>
+        <BaselineAlignment top size="18px" />
+        <span id="select-locale">
+          <Label htmlFor="">
+            {formatMessage({
+              id: getTrad('Settings.locales.modal.locales.label'),
+            })}
+          </Label>
+        </span>
+        <BaselineAlignment top size="3px" />
+        <Select
+          aria-labelledby="select-locale"
+          components={{ DropdownIndicator, Option }}
+          isSearchable={false}
+          onChange={handleChange}
+          options={filteredOptions}
+          styles={{
+            ...styles,
+            control: (base, state) => ({ ...base, ...styles.control(base, state), height: '34px' }),
+            indicatorsContainer: (base, state) => ({
+              ...base,
+              ...styles.indicatorsContainer(base, state),
+              height: '32px',
+            }),
+            valueContainer: base => ({
+              ...base,
+              padding: '2px 0px 4px 10px',
+              lineHeight: '18px',
+            }),
+          }}
+          value={value}
+        />
+        <CMEditViewCopyLocale
+          appLocales={appLocales}
+          currentLocale={currentLocale}
+          localizations={localizations}
+          readPermissions={readPermissions}
+        />
+      </Padded>
+    </Wrapper>
+  );
+};
+
+CMEditViewLocalePicker.defaultProps = {
+  createPermissions: [],
+  currentEntityId: null,
+  isSingleType: false,
+  localizations: [],
+  query: {},
+  readPermissions: [],
+};
+
+CMEditViewLocalePicker.propTypes = {
+  appLocales: PropTypes.array.isRequired,
+  createPermissions: PropTypes.array,
+  currentEntityId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hasDraftAndPublishEnabled: PropTypes.bool.isRequired,
+  isSingleType: PropTypes.bool,
+  localizations: PropTypes.array,
+  query: PropTypes.object,
+  readPermissions: PropTypes.array,
+  setQuery: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
+export default CMEditViewLocalePicker;

package/admin/src/components/CMEditViewLocalePicker/utils/addStatusColorToLocale.js

@@ -0,0 +1,24 @@
+const addStatusColorToLocale = (locales, theme) =>
+  locales.map(({ status, ...rest }) => {
+    const statusMap = {
+      'did-not-create-locale': {
+        backgroundColor: theme.main.colors.white,
+        border: `1px solid ${theme.main.colors.grey}`,
+      },
+      draft: {
+        backgroundColor: theme.main.colors.mediumBlue,
+      },
+      published: {
+        backgroundColor: theme.main.colors.green,
+      },
+    };
+    const props = statusMap[status];
+
+    return {
+      ...props,
+      status,
+      ...rest,
+    };
+  });
+
+export default addStatusColorToLocale;

package/admin/src/components/CMEditViewLocalePicker/utils/createLocalesOption.js

@@ -0,0 +1,20 @@
+const createLocalesOption = (localesToDisplay, localesFromData) => {
+  return localesToDisplay.map(({ name, code }) => {
+    const matchingLocaleInData = localesFromData.find(({ locale }) => locale === code);
+
+    let status = 'did-not-create-locale';
+
+    if (matchingLocaleInData) {
+      status = matchingLocaleInData.published_at === null ? 'draft' : 'published';
+    }
+
+    return {
+      id: matchingLocaleInData ? matchingLocaleInData.id : null,
+      label: name,
+      value: code,
+      status,
+    };
+  });
+};
+
+export default createLocalesOption;

package/admin/src/components/CMEditViewLocalePicker/utils/index.js

@@ -0,0 +1,2 @@
+export { default as addStatusColorToLocale } from './addStatusColorToLocale';
+export { default as createLocalesOption } from './createLocalesOption';

package/admin/src/components/CheckboxConfirmation/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: 18px;
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/CheckboxConfirmation/index.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Checkbox, Text } from '@buffetjs/core';
+import { ModalConfirm } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+import Wrapper from './Wrapper';
+
+const CheckboxConfirmation = ({ description, isCreating, label, name, onChange, ...rest }) => {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = e => {
+    if (isCreating || e.target.value) {
+      return onChange(e);
+    }
+
+    if (!e.target.value) {
+      return setIsOpen(true);
+    }
+
+    return null;
+  };
+
+  const handleConfirm = () => {
+    onChange({ target: { name, value: false, type: 'checkbox' } });
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => setIsOpen(prev => !prev);
+
+  return (
+    <>
+      <Wrapper>
+        <Checkbox {...rest} message={label} name={name} onChange={handleChange} type="checkbox" />
+        {description && (
+          <Text color="grey" title={description} fontSize="sm" ellipsis>
+            {description}
+          </Text>
+        )}
+      </Wrapper>
+      <ModalConfirm
+        confirmButtonLabel={{ id: getTrad('CheckboxConfirmation.Modal.button-confirm') }}
+        content={{ id: getTrad('CheckboxConfirmation.Modal.content') }}
+        isOpen={isOpen}
+        toggle={handleToggle}
+        onConfirm={handleConfirm}
+      >
+        <Text fontWeight="bold">
+          {formatMessage({ id: getTrad('CheckboxConfirmation.Modal.body') })}
+        </Text>
+      </ModalConfirm>
+    </>
+  );
+};
+
+CheckboxConfirmation.defaultProps = {
+  description: null,
+  isCreating: false,
+};
+
+CheckboxConfirmation.propTypes = {
+  description: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  isCreating: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CheckboxConfirmation;

package/admin/src/components/DeleteModalAdditionalInfos/index.js

@@ -0,0 +1,25 @@
+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
+        id={getTrad('Settings.list.actions.deleteAdditionalInfos')}
+        values={{
+          em: chunks => <em>{chunks}</em>,
+        }}
+      />
+    </span>
+  );
+};
+
+export default DeleteModalAdditionalInfos;

package/admin/src/components/LocaleList/index.js

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { EmptyState, ListButton } from 'strapi-helper-plugin';
+import { List } from '@buffetjs/custom';
+import { Button } from '@buffetjs/core';
+import { Plus } from '@buffetjs/icons';
+import PropTypes from 'prop-types';
+import useLocales from '../../hooks/useLocales';
+import LocaleRow from '../LocaleRow';
+import { getTrad } from '../../utils';
+import ModalEdit from '../ModalEdit';
+import ModalDelete from '../ModalDelete';
+import ModalCreate from '../ModalCreate';
+
+const LocaleList = ({ canUpdateLocale, canDeleteLocale, onToggleCreateModal, isCreating }) => {
+  const [localeToDelete, setLocaleToDelete] = useState();
+  const [localeToEdit, setLocaleToEdit] = useState();
+  const { locales, isLoading } = useLocales();
+  const { formatMessage } = useIntl();
+
+  // Delete actions
+  const closeModalToDelete = () => setLocaleToDelete(undefined);
+  const handleDeleteLocale = canDeleteLocale ? setLocaleToDelete : undefined;
+
+  // Edit actions
+  const closeModalToEdit = () => {
+    setLocaleToEdit(undefined);
+  };
+  const handleEditLocale = canUpdateLocale ? setLocaleToEdit : undefined;
+
+  if (isLoading || (locales && locales.length > 0)) {
+    const listTitle = isLoading
+      ? null
+      : formatMessage(
+          {
+            id: getTrad(
+              `Settings.locales.list.title${locales.length > 1 ? '.plural' : '.singular'}`
+            ),
+          },
+          { number: locales.length }
+        );
+
+    return (
+      <>
+        <List
+          radius="2px"
+          title={listTitle}
+          items={locales}
+          isLoading={isLoading}
+          customRowComponent={locale => (
+            <LocaleRow locale={locale} onDelete={handleDeleteLocale} onEdit={handleEditLocale} />
+          )}
+        />
+
+        <ModalCreate
+          isOpened={isCreating}
+          onClose={onToggleCreateModal}
+          alreadyUsedLocales={locales}
+        />
+        <ModalDelete localeToDelete={localeToDelete} onClose={closeModalToDelete} />
+        <ModalEdit localeToEdit={localeToEdit} onClose={closeModalToEdit} locales={locales} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <EmptyState
+        title={formatMessage({ id: getTrad('Settings.list.empty.title') })}
+        description={formatMessage({ id: getTrad('Settings.list.empty.description') })}
+      />
+
+      {onToggleCreateModal && (
+        <ListButton>
+          <Button
+            label={formatMessage({ id: getTrad('Settings.list.actions.add') })}
+            onClick={onToggleCreateModal}
+            color="primary"
+            type="button"
+            icon={<Plus fill="#007eff" width="11px" height="11px" />}
+          />
+        </ListButton>
+      )}
+
+      <ModalCreate isOpened={isCreating} onClose={onToggleCreateModal} />
+    </>
+  );
+};
+
+LocaleList.defaultProps = {
+  onToggleCreateModal: undefined,
+};
+
+LocaleList.propTypes = {
+  canUpdateLocale: PropTypes.bool.isRequired,
+  canDeleteLocale: PropTypes.bool.isRequired,
+  onToggleCreateModal: PropTypes.func,
+  isCreating: PropTypes.bool.isRequired,
+};
+
+export default LocaleList;