@akemona-org/strapi-plugin-i18n 3.7.0

package/admin/src/components/LocaleListCell/LocaleListCell.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Padded, Text } from '@buffetjs/core';
+import { Tooltip } from '@buffetjs/styles';
+import get from 'lodash/get';
+import styled from 'styled-components';
+
+const mapToLocaleName = (locales, localeCode) =>
+  get(
+    locales.find(({ code }) => code === localeCode),
+    'name',
+    localeCode
+  );
+
+const LocaleName = styled.div`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id }) => {
+  const allLocalizations = [{ locale: currentLocaleCode }, ...localizations];
+  const localizationNames = allLocalizations.map(locale => locale.locale);
+  const defaultLocale = locales.find(locale => locale.isDefault);
+  const hasDefaultLocale = localizationNames.includes(defaultLocale.code);
+
+  let localesArray = [];
+
+  if (hasDefaultLocale) {
+    const ctLocalesWithoutDefault = localizationNames.filter(
+      locale => locale !== defaultLocale.code
+    );
+    const ctLocalesNamesWithoutDefault = ctLocalesWithoutDefault.map(locale =>
+      mapToLocaleName(locales, locale)
+    );
+
+    ctLocalesNamesWithoutDefault.sort();
+
+    const ctLocalesNamesWithDefault = [
+      `${defaultLocale.name} (default)`,
+      ...ctLocalesNamesWithoutDefault,
+    ];
+
+    localesArray = ctLocalesNamesWithDefault;
+  } else {
+    const ctLocales = localizationNames.map(locale => mapToLocaleName(locales, locale));
+    ctLocales.sort();
+
+    localesArray = ctLocales;
+  }
+
+  const elId = `entry-${id}__locale`;
+  const localesNames = localesArray.join(', ');
+
+  return (
+    <div>
+      <LocaleName data-for={elId} data-tip={localesNames}>
+        {localesNames}
+      </LocaleName>
+      <Tooltip id={elId} place="bottom" delay={0}>
+        {localesArray.map(name => (
+          <Padded key={name} top bottom size="xs">
+            <Text ellipsis color="white">
+              {name}
+            </Text>
+          </Padded>
+        ))}
+      </Tooltip>
+    </div>
+  );
+};
+
+LocaleListCell.propTypes = {
+  id: PropTypes.number.isRequired,
+  localizations: PropTypes.arrayOf(
+    PropTypes.shape({
+      locale: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  locales: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      code: PropTypes.string.isRequired,
+      isDefault: PropTypes.bool,
+    })
+  ).isRequired,
+  locale: PropTypes.string.isRequired,
+};
+
+export default LocaleListCell;

package/admin/src/components/LocaleListCell/tests/LocaleListCell.test.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LocaleListCell from '../LocaleListCell';
+
+jest.mock('@buffetjs/styles', () => ({
+  Tooltip: () => null,
+}));
+
+jest.mock('@buffetjs/core', () => ({
+  Padded: props => <div {...props} />,
+  Text: props => <p {...props} />,
+}));
+
+describe('LocaleListCell', () => {
+  it('returns the default locale first, then the others sorted alphabetically', () => {
+    const locales = [
+      {
+        id: 1,
+        name: 'English',
+        code: 'en',
+        created_at: '2021-03-09T14:57:03.016Z',
+        updated_at: '2021-03-09T14:57:03.016Z',
+        isDefault: false,
+      },
+      {
+        id: 2,
+        name: 'French',
+        code: 'fr-FR',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: true,
+      },
+      {
+        id: 3,
+        name: 'Arabic',
+        code: 'ar',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: false,
+      },
+    ];
+
+    const locale = 'en';
+    const localizations = [{ locale: 'fr-FR' }, { locale: 'ar' }];
+
+    render(
+      <LocaleListCell id={12} locales={locales} locale={locale} localizations={localizations} />
+    );
+
+    expect(screen.getByText('French (default), Arabic, English')).toBeVisible();
+  });
+
+  it('returns the "ar" when there s 2 locales available', () => {
+    const locales = [
+      {
+        id: 1,
+        name: 'English',
+        code: 'en',
+        created_at: '2021-03-09T14:57:03.016Z',
+        updated_at: '2021-03-09T14:57:03.016Z',
+        isDefault: false,
+      },
+      {
+        id: 2,
+        name: 'French',
+        code: 'fr-FR',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: true,
+      },
+      {
+        id: 3,
+        name: 'Arabic',
+        code: 'ar',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: false,
+      },
+    ];
+
+    const locale = 'en';
+    const localizations = [{ locale: 'ar' }];
+
+    render(
+      <LocaleListCell id={12} locales={locales} locale={locale} localizations={localizations} />
+    );
+
+    expect(screen.getByText('Arabic, English')).toBeVisible();
+  });
+
+  it('returns the "ar" and "en" locales  alphabetically sorted', () => {
+    const locales = [
+      {
+        id: 1,
+        name: 'English',
+        code: 'en',
+        created_at: '2021-03-09T14:57:03.016Z',
+        updated_at: '2021-03-09T14:57:03.016Z',
+        isDefault: false,
+      },
+      {
+        id: 2,
+        name: 'French',
+        code: 'fr-FR',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: true,
+      },
+      {
+        id: 3,
+        name: 'Arabic',
+        code: 'ar',
+        created_at: '2021-03-09T15:03:06.992Z',
+        updated_at: '2021-03-17T13:01:03.569Z',
+        isDefault: false,
+      },
+    ];
+
+    const locale = 'fr-FR';
+    const localizations = [{ locale: 'en' }, { locale: 'ar' }];
+
+    render(
+      <LocaleListCell id={12} locales={locales} locale={locale} localizations={localizations} />
+    );
+
+    expect(screen.getByText('French (default), Arabic, English')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,126 @@
+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';
+
+const List = styled.ul`
+  list-style-type: none;
+  padding: 3px 0;
+  margin: 0;
+`;
+
+const ListItem = styled.li`
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -10px;
+  margin-right: -10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+
+  &:hover {
+    background: ${props => props.theme.main.colors.mediumGrey};
+  }
+`;
+
+const EllipsisParagraph = styled(Text)`
+  width: ${props => props.width};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+`;
+
+const LocalePicker = () => {
+  const dispatch = useDispatch();
+  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);
+
+  if (!isFieldLocalized) {
+    return null;
+  }
+
+  if (!locales || locales.length === 0) {
+    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"
+      renderButtonContent={isOpen => (
+        <Flex>
+          <EllipsisParagraph width="20ch">{selected.name}</EllipsisParagraph>
+
+          <Padded left size="sm">
+            <Carret fill={isOpen ? '#007eff' : '#292b2c'} isUp={isOpen} />
+          </Padded>
+        </Flex>
+      )}
+      renderSectionContent={onToggle => {
+        const handleClick = locale => {
+          dispatch({ type: 'ContentManager/RBACManager/RESET_PERMISSIONS' });
+          setSelected(locale);
+
+          setQuery({
+            plugins: { ...query.plugins, i18n: { locale: locale.code } },
+          });
+          onToggle();
+        };
+
+        const hasMultipleLocales = displayedLocales.length > 1;
+
+        return hasMultipleLocales ? (
+          <Padded left right>
+            <List>
+              {displayedLocales.map(locale => {
+                if (locale.id === selected.id) {
+                  return null;
+                }
+
+                return (
+                  <ListItem key={locale.id}>
+                    <button onClick={() => handleClick(locale)} type="button">
+                      <EllipsisParagraph width="200px">
+                        {locale.name || locale.code}
+                      </EllipsisParagraph>
+                    </button>
+                  </ListItem>
+                );
+              })}
+            </List>
+          </Padded>
+        ) : null;
+      }}
+    />
+  );
+};
+
+export default LocalePicker;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Pencil } from '@buffetjs/icons';
+import { Text, IconLinks } from '@buffetjs/core';
+import { CustomRow } from '@buffetjs/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getTrad } from '../../utils';
+
+const LocaleSettingsPage = ({ locale, onDelete, onEdit }) => {
+  const { formatMessage } = useIntl();
+
+  const links = [];
+
+  if (onEdit) {
+    links.push({
+      icon: (
+        <span aria-label={formatMessage({ id: getTrad('Settings.list.actions.edit') })}>
+          <Pencil fill="#0e1622" />
+        </span>
+      ),
+      onClick: () => onEdit(locale),
+    });
+  }
+
+  if (onDelete && !locale.isDefault) {
+    links.push({
+      icon: !locale.isDefault ? (
+        <span aria-label={formatMessage({ id: getTrad('Settings.list.actions.delete') })}>
+          <FontAwesomeIcon icon="trash-alt" />
+        </span>
+      ) : null,
+      onClick: e => {
+        e.stopPropagation();
+        onDelete(locale);
+      },
+    });
+  }
+
+  return (
+    <CustomRow onClick={() => onEdit(locale)}>
+      <td>
+        <Text>{locale.code}</Text>
+      </td>
+      <td>
+        <Text fontWeight="regular">{locale.name}</Text>
+      </td>
+      <td>
+        <Text>
+          {locale.isDefault
+            ? formatMessage({ id: getTrad('Settings.locales.row.default-locale') })
+            : null}
+        </Text>
+      </td>
+      <td>
+        <IconLinks links={links} />
+      </td>
+    </CustomRow>
+  );
+};
+
+LocaleSettingsPage.defaultProps = {
+  onDelete: undefined,
+  onEdit: undefined,
+};
+
+LocaleSettingsPage.propTypes = {
+  locale: PropTypes.shape({
+    isDefault: PropTypes.bool,
+    name: PropTypes.string,
+    code: PropTypes.string.isRequired,
+  }).isRequired,
+  onDelete: PropTypes.func,
+  onEdit: PropTypes.func,
+};
+
+export default LocaleSettingsPage;

package/admin/src/components/ModalCreate/AdvancedForm.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, Checkbox, Padded } from '@buffetjs/core';
+import { useFormikContext } from 'formik';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+
+const AdvancedForm = () => {
+  const { values, setFieldValue } = useFormikContext();
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <BaselineAlignment top size="2px" />
+      <Padded bottom size="sm">
+        <Text color="grey" textTransform="uppercase">
+          {formatMessage({
+            id: getTrad('Settings.locales.modal.advanced.settings'),
+          })}
+        </Text>
+      </Padded>
+
+      <BaselineAlignment top size="10px" />
+      <Checkbox
+        id="default-checkbox"
+        name="default-checkbox"
+        onChange={() => setFieldValue('isDefault', !values.isDefault)}
+        message={formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault'),
+        })}
+        someChecked={false}
+        value={values.isDefault}
+        htmlFor="default-checkbox"
+      />
+
+      <Text color="grey" fontSize="sm">
+        {formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault.hint'),
+        })}
+      </Text>
+    </div>
+  );
+};
+
+export default AdvancedForm;

package/admin/src/components/ModalCreate/BaseForm.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '@buffetjs/core';
+import { Inputs } from '@buffetjs/custom';
+import Select, { createFilter } from 'react-select';
+import { Col, Row } from 'reactstrap';
+import { useIntl } from 'react-intl';
+import { useTheme } from 'styled-components';
+import { BaselineAlignment, selectStyles, DropdownIndicator } from 'strapi-helper-plugin';
+import { useFormikContext } from 'formik';
+import { getTrad } from '../../utils';
+
+const reactSelectLocaleFilter = createFilter({
+  ignoreCase: true,
+  ignoreAccents: true,
+  matchFrom: 'start',
+});
+
+const BaseForm = ({ options, defaultOption }) => {
+  const theme = useTheme();
+  const { formatMessage } = useIntl();
+  const { values, handleChange, setFieldValue } = useFormikContext();
+
+  const styles = selectStyles(theme);
+
+  return (
+    <Row>
+      <Col>
+        <span id="locale-code">
+          <Label htmlFor="">
+            {formatMessage({
+              id: getTrad('Settings.locales.modal.locales.label'),
+            })}
+          </Label>
+        </span>
+
+        <BaselineAlignment top size="5px" />
+
+        <Select
+          aria-labelledby="locale-code"
+          options={options}
+          defaultValue={defaultOption}
+          filterOption={reactSelectLocaleFilter}
+          onChange={selection => {
+            setFieldValue('displayName', selection.value);
+            setFieldValue('code', selection.label);
+          }}
+          components={{ DropdownIndicator }}
+          styles={{
+            ...styles,
+            control: (base, state) => ({ ...base, ...styles.control(base, state), height: '34px' }),
+            indicatorsContainer: (base, state) => ({
+              ...base,
+              ...styles.indicatorsContainer(base, state),
+              height: '32px',
+            }),
+          }}
+        />
+      </Col>
+
+      <Col>
+        <BaselineAlignment top size="2px" />
+
+        <Inputs
+          label={formatMessage({
+            id: getTrad('Settings.locales.modal.locales.displayName'),
+          })}
+          name="displayName"
+          description={formatMessage({
+            id: getTrad('Settings.locales.modal.locales.displayName.description'),
+          })}
+          type="text"
+          value={values.displayName}
+          onChange={handleChange}
+          validations={{
+            max: 50,
+          }}
+          translatedErrors={{
+            max: formatMessage({
+              id: getTrad('Settings.locales.modal.locales.displayName.error'),
+            }),
+          }}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+BaseForm.defaultProps = {
+  defaultOption: undefined,
+};
+
+BaseForm.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.exact({ value: PropTypes.string.isRequired, label: PropTypes.string.isRequired })
+  ).isRequired,
+  defaultOption: PropTypes.exact({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+  }),
+};
+
+export default BaseForm;

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

@@ -0,0 +1,136 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalFooter, TabPanel, useUser } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { Button } from '@buffetjs/core';
+import { Formik } from 'formik';
+import localeFormSchema from '../../schemas';
+import { getTrad } from '../../utils';
+import SettingsModal from '../SettingsModal';
+import useDefaultLocales from '../../hooks/useDefaultLocales';
+import useAddLocale from '../../hooks/useAddLocale';
+import BaseForm from './BaseForm';
+import AdvancedForm from './AdvancedForm';
+
+const ModalCreate = ({ alreadyUsedLocales, onClose, isOpened }) => {
+  const { defaultLocales, isLoading } = useDefaultLocales();
+  const { isAdding, addLocale } = useAddLocale();
+  const { formatMessage } = useIntl();
+
+  const { fetchUserPermissions } = useUser();
+  const shouldUpdatePermissions = useRef(false);
+
+  if (isLoading) {
+    return (
+      <div>
+        <p>
+          {formatMessage({ id: getTrad('Settings.locales.modal.create.defaultLocales.loading') })}
+        </p>
+      </div>
+    );
+  }
+
+  const handleClosed = async () => {
+    if (shouldUpdatePermissions.current) {
+      await fetchUserPermissions();
+    }
+
+    shouldUpdatePermissions.current = true;
+  };
+
+  const options = (defaultLocales || [])
+    .map(locale => ({
+      label: locale.code,
+      value: locale.name,
+    }))
+    .filter(({ label }) => {
+      const foundLocale = alreadyUsedLocales.find(({ code }) => code === label);
+
+      return !foundLocale;
+    });
+
+  const defaultOption = options[0];
+
+  if (!defaultOption) {
+    return null;
+  }
+
+  return (
+    <Modal isOpen={isOpened} onToggle={onClose} withoverflow="true" onClosed={handleClosed}>
+      <Formik
+        initialValues={{
+          code: defaultOption.label,
+          displayName: defaultOption.value,
+          isDefault: false,
+        }}
+        onSubmit={values =>
+          addLocale({
+            code: values.code,
+            name: values.displayName,
+            isDefault: values.isDefault,
+          })
+            .then(() => {
+              shouldUpdatePermissions.current = true;
+            })
+            .then(() => {
+              onClose();
+            })}
+        validationSchema={localeFormSchema}
+      >
+        {({ handleSubmit, errors }) => (
+          <form onSubmit={handleSubmit}>
+            <SettingsModal
+              title={formatMessage({
+                id: getTrad('Settings.locales.modal.title'),
+              })}
+              breadCrumb={[formatMessage({ id: getTrad('Settings.list.actions.add') })]}
+              tabsAriaLabel={formatMessage({
+                id: getTrad('Settings.locales.modal.create.tab.label'),
+              })}
+              tabsId="i18n-settings-tabs-create"
+            >
+              <TabPanel>
+                <BaseForm
+                  options={options}
+                  defaultOption={defaultOption}
+                  alreadyUsedLocales={alreadyUsedLocales}
+                />
+              </TabPanel>
+              <TabPanel>
+                <AdvancedForm />
+              </TabPanel>
+            </SettingsModal>
+
+            <ModalFooter>
+              <section>
+                <Button type="button" color="cancel" onClick={onClose}>
+                  {formatMessage({ id: 'app.components.Button.cancel' })}
+                </Button>
+                <Button
+                  color="success"
+                  type="submit"
+                  isLoading={isAdding}
+                  disabled={Object.keys(errors).length > 0}
+                >
+                  {formatMessage({ id: getTrad('Settings.locales.modal.create.confirmation') })}
+                </Button>
+              </section>
+            </ModalFooter>
+          </form>
+        )}
+      </Formik>
+    </Modal>
+  );
+};
+
+ModalCreate.defaultProps = {
+  alreadyUsedLocales: [],
+};
+
+ModalCreate.propTypes = {
+  alreadyUsedLocales: PropTypes.array,
+  onClose: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default ModalCreate;