Merge pull request #9298 from strapi/features/i18n-front-edit

[I18N] init edit modal on settings

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

@@ -8,15 +8,35 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { getTrad } from '../../utils';
 
-// Fake permissions
-const canUpdate = true;
-const canDelete = true;
-
-const LocaleSettingsPage = ({ locale, onDelete }) => {
+const LocaleSettingsPage = ({ locale, onDelete, onEdit }) => {
   const { formatMessage } = useIntl();
 
+  const links = [];
+
+  if (onEdit) {
+    links.push({
+      icon: (
+        <span aria-label="Edit locale">
+          <Pencil fill="#0e1622" />
+        </span>
+      ),
+      onClick: () => onEdit(locale),
+    });
+  }
+
+  if (onDelete) {
+    links.push({
+      icon: !locale.isDefault ? (
+        <span aria-label="Delete locale">
+          <FontAwesomeIcon icon="trash-alt" />
+        </span>
+      ) : null,
+      onClick: () => onDelete(locale),
+    });
+  }
+
   return (
-    <CustomRow onClick={() => console.log('open modal')}>
+    <CustomRow>
       <td>
         <Text>{locale.code}</Text>
       </td>
@@ -31,39 +51,25 @@ const LocaleSettingsPage = ({ locale, onDelete }) => {
         </Text>
       </td>
       <td>
-        <IconLinks
-          links={[
-            {
-              icon: canUpdate ? (
-                <span aria-label="Edit locale">
-                  <Pencil fill="#0e1622" />
-                </span>
-              ) : null,
-              onClick: () => console.log('edit'),
-            },
-            {
-              icon:
-                canDelete && !locale.isDefault ? (
-                  <span aria-label="Delete locale">
-                    <FontAwesomeIcon icon="trash-alt" />
-                  </span>
-                ) : null,
-              onClick: onDelete,
-            },
-          ]}
-        />
+        <IconLinks links={links} />
       </td>
     </CustomRow>
   );
 };
 
+LocaleSettingsPage.defaultProps = {
+  onDelete: undefined,
+  onEdit: undefined,
+};
+
 LocaleSettingsPage.propTypes = {
   locale: PropTypes.shape({
     isDefault: PropTypes.bool,
     displayName: PropTypes.string,
     code: PropTypes.string.isRequired,
   }).isRequired,
-  onDelete: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onEdit: PropTypes.func,
 };
 
 export default LocaleSettingsPage;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Modal, ModalHeader, ModalSection, ModalFooter } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { Button, Padded } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import { Row } from 'reactstrap';
+
+import { getTrad } from '../../utils';
+
+const ModalEdit = ({ isLoading, isOpen, onCancel, onClosed, onClick, onOpened, onToggle }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Modal isOpen={isOpen} onOpened={onOpened} onToggle={onToggle} onClosed={onClosed}>
+      <ModalHeader headerBreadcrumbs={['Edit locale']} />
+      <ModalSection>
+        <div>
+          <Padded top size="md">
+            <Row>Put the form here</Row>
+          </Padded>
+        </div>
+      </ModalSection>
+      <ModalFooter>
+        <section>
+          <Button type="button" color="cancel" onClick={onCancel}>
+            {formatMessage({ id: 'app.components.Button.cancel' })}
+          </Button>
+          <Button color="success" type="button" onClick={onClick} isLoading={isLoading}>
+            {formatMessage({ id: getTrad('Settings.locales.modal.edit.confirmation') })}
+          </Button>
+        </section>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+ModalEdit.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onClosed: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onOpened: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default ModalEdit;

packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/index.js

@@ -3,13 +3,17 @@ import { useIntl } from 'react-intl';
 import { BaselineAlignment, ModalConfirm } from 'strapi-helper-plugin';
 import { Header, List } from '@buffetjs/custom';
 import { Button, Text } from '@buffetjs/core';
+import ModalEdit from '../../components/ModalEdit';
 import { LocaleRow } from '../../components';
 import { useLocales } from '../../hooks';
 import { getTrad } from '../../utils';
 import useDeleteLocale from '../../hooks/useDeleteLocale';
+import useEditLocale from '../../hooks/useEditLocale';
 
 // Fake permissions
 const canCreate = true;
+const canDelete = true;
+const canEdit = true;
 
 const LocaleSettingsPage = () => {
   const {
@@ -20,6 +24,8 @@ const LocaleSettingsPage = () => {
     hideDeleteModal,
   } = useDeleteLocale();
 
+  const { isEditing, isEditModalOpen, editLocale, showEditModal, hideEditModal } = useEditLocale();
+
   const { formatMessage } = useIntl();
   const { locales, isLoading } = useLocales();
 
@@ -59,6 +65,9 @@ const LocaleSettingsPage = () => {
     { number: locales.length }
   );
 
+  const handleDelete = canDelete ? showDeleteModal : undefined;
+  const handleEdit = canEdit ? showEditModal : undefined;
+
   return (
     <>
       <Header {...headerProps} />
@@ -68,7 +77,7 @@ const LocaleSettingsPage = () => {
         items={locales}
         isLoading={isLoading}
         customRowComponent={locale => (
-          <LocaleRow locale={locale} onDelete={() => showDeleteModal(locale)} />
+          <LocaleRow locale={locale} onDelete={handleDelete} onEdit={handleEdit} />
         )}
       />
 
@@ -90,6 +99,16 @@ const LocaleSettingsPage = () => {
           {formatMessage({ id: getTrad('Settings.locales.modal.delete.secondMessage') })}
         </Text>
       </ModalConfirm>
+
+      <ModalEdit
+        isLoading={isEditing}
+        isOpen={isEditModalOpen}
+        onCancel={hideEditModal}
+        onClosed={hideEditModal}
+        onClick={editLocale}
+        onOpened={() => null}
+        onToggle={hideEditModal}
+      />
     </>
   );
 };

packages/strapi-plugin-i18n/admin/src/containers/SettingsPage/tests/SettingsPage.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import React from 'react';
 import { fireEvent, render, screen, within, waitFor } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
@@ -8,7 +10,6 @@ import themes from '../../../../../../strapi-admin/admin/src/themes';
 // but it bugs somehow when run with jest
 jest.mock('strapi-helper-plugin', () => ({
   BaselineAlignment: () => <div />,
-  // eslint-disable-next-line react/prop-types
   ModalConfirm: ({ onConfirm, isOpen }) =>
     isOpen ? (
       <div role="dialog">
@@ -17,6 +18,11 @@ jest.mock('strapi-helper-plugin', () => ({
         </button>
       </div>
     ) : null,
+
+  Modal: ({ isOpen, children }) => isOpen && <div role="dialog">{children}</div>,
+  ModalHeader: ({ children }) => <div>{children}</div>,
+  ModalSection: ({ children }) => <div>{children}</div>,
+  ModalFooter: ({ children }) => <div>{children}</div>,
 }));
 
 jest.mock('../../../utils', () => ({
@@ -30,6 +36,14 @@ jest.mock('react-intl', () => ({
 }));
 
 describe('i18n settings page', () => {
+  beforeEach(() => {
+    strapi.notification.toggle = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   describe('initial state', () => {
     it('shows default EN locale with edit button but no delete button', async () => {
       render(
@@ -75,11 +89,47 @@ describe('i18n settings page', () => {
       const rowUtils = within(row);
 
       fireEvent.click(rowUtils.getByLabelText('Delete locale'));
-
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toBeVisible();
-
       fireEvent.click(screen.getByText('Confirm'));
+
+      await waitFor(() =>
+        expect(strapi.notification.toggle).toBeCalledWith({
+          type: 'success',
+          message: { id: 'Settings.locales.modal.delete.success' },
+        })
+      );
+    });
+  });
+
+  describe('edit', () => {
+    it('shows the default edit modal layout', async () => {
+      render(
+        <ThemeProvider theme={themes}>
+          <LocaleSettingsPage />
+        </ThemeProvider>
+      );
+
+      const row = await waitFor(() => screen.getByText('English').closest('tr'));
+      const rowUtils = within(row);
+
+      fireEvent.click(rowUtils.getByLabelText('Edit locale'));
+
+      expect(screen.getByText(`Settings.locales.modal.edit.confirmation`)).toBeVisible();
+    });
+
+    it('closes the edit modal when clicking on cancel', async () => {
+      render(
+        <ThemeProvider theme={themes}>
+          <LocaleSettingsPage />
+        </ThemeProvider>
+      );
+
+      const row = await waitFor(() => screen.getByText('English').closest('tr'));
+      const rowUtils = within(row);
+
+      fireEvent.click(rowUtils.getByLabelText('Edit locale'));
+      fireEvent.click(screen.getByText('app.components.Button.cancel'));
+
+      expect(screen.queryByText(`Edit locale`)).toBeFalsy();
     });
   });
 });

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

@@ -1,4 +1,5 @@
 import { useReducer } from 'react';
+import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import { SHOW_MODAL, HIDE_MODAL, RESOLVE_LOCALE, DELETE_LOCALE } from './constants';
 
@@ -11,6 +12,12 @@ const useDeleteLocale = () => {
     return new Promise(resolve =>
       setTimeout(() => {
         dispatch({ type: RESOLVE_LOCALE });
+
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('Settings.locales.modal.delete.success') },
+        });
+
         resolve();
       }, 1000)
     );

packages/strapi-plugin-i18n/admin/src/hooks/useEditLocale/constants.js

@@ -0,0 +1,4 @@
+export const SHOW_MODAL = 'SHOW_MODAL';
+export const HIDE_MODAL = 'HIDE_MODAL';
+export const EDIT_LOCALE = 'EDIT_LOCALE';
+export const RESOLVE_LOCALE_EDITION = 'RESOLVE_LOCALE_EDITION';

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

@@ -0,0 +1,35 @@
+import { useReducer } from 'react';
+import { getTrad } from '../../utils';
+import reducer, { initialState } from './reducer';
+import { SHOW_MODAL, HIDE_MODAL, RESOLVE_LOCALE_EDITION, EDIT_LOCALE } from './constants';
+
+const useEditLocale = () => {
+  const [{ isEditModalOpen, isEditing, localeToEdit }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
+
+  const editLocale = () => {
+    dispatch({ type: EDIT_LOCALE });
+
+    return new Promise(resolve =>
+      setTimeout(() => {
+        dispatch({ type: RESOLVE_LOCALE_EDITION });
+
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('Settings.locales.modal.edit.success') },
+        });
+
+        resolve();
+      }, 1000)
+    );
+  };
+
+  const showEditModal = localeToEdit => dispatch({ type: SHOW_MODAL, localeToEdit });
+  const hideEditModal = () => dispatch({ type: HIDE_MODAL });
+
+  return { isEditing, isEditModalOpen, localeToEdit, editLocale, showEditModal, hideEditModal };
+};
+
+export default useEditLocale;

packages/strapi-plugin-i18n/admin/src/hooks/useEditLocale/reducer.js

@@ -0,0 +1,41 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { SHOW_MODAL, HIDE_MODAL, RESOLVE_LOCALE_EDITION, EDIT_LOCALE } from './constants';
+
+export const initialState = {
+  localeToEdit: null,
+  isEditModalOpen: false,
+  isEditing: false,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case SHOW_MODAL: {
+        draftState.isEditModalOpen = true;
+        draftState.localeToEdit = action.localeToEdit;
+        break;
+      }
+      case HIDE_MODAL: {
+        draftState.isEditModalOpen = false;
+        draftState.localeToEdit = null;
+        break;
+      }
+      case EDIT_LOCALE: {
+        draftState.isEditing = true;
+        break;
+      }
+
+      case RESOLVE_LOCALE_EDITION: {
+        draftState.isEditing = false;
+        draftState.isEditModalOpen = false;
+        draftState.localeToEdit = null;
+        break;
+      }
+
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

packages/strapi-plugin-i18n/admin/src/hooks/useEditLocale/tests/reducer.test.js

@@ -0,0 +1,105 @@
+import reducer from '../reducer';
+import { SHOW_MODAL, HIDE_MODAL, RESOLVE_LOCALE_EDITION, EDIT_LOCALE } from '../constants';
+
+describe(`I18N Settings edit reducer`, () => {
+  describe(`Initial state`, () => {
+    it('returns the initialState', () => {
+      const state = {
+        localeToEdit: null,
+        isEditModalOpen: false,
+        isEditing: false,
+      };
+
+      expect(reducer(state, {})).toEqual(state);
+    });
+  });
+
+  describe(SHOW_MODAL, () => {
+    it('set the isEditModalOpen key to true', () => {
+      const state = {
+        localeToEdit: null,
+        isEditModalOpen: false,
+        isEditing: false,
+      };
+
+      const action = {
+        type: SHOW_MODAL,
+        localeToEdit: 'en-EN',
+      };
+
+      const expected = {
+        localeToEdit: 'en-EN',
+        isEditModalOpen: true,
+        isEditing: false,
+      };
+
+      expect(reducer(state, action)).toEqual(expected);
+    });
+  });
+
+  describe(HIDE_MODAL, () => {
+    it('sets the isEditModalOpen value to false when it was true', () => {
+      const state = {
+        localeToEdit: 'en-EN',
+        isEditModalOpen: true,
+        isEditing: false,
+      };
+
+      const action = {
+        type: HIDE_MODAL,
+      };
+
+      const expected = {
+        localeToEdit: null,
+        isEditModalOpen: false,
+        isEditing: false,
+      };
+
+      expect(reducer(state, action)).toEqual(expected);
+    });
+  });
+
+  describe(EDIT_LOCALE, () => {
+    it('sets the isEditing value to true', () => {
+      const state = {
+        localeToEdit: 'en-EN',
+        isEditModalOpen: true,
+        isEditing: false,
+      };
+
+      const action = {
+        type: EDIT_LOCALE,
+      };
+
+      const expected = {
+        localeToEdit: 'en-EN',
+        isEditModalOpen: true,
+        isEditing: true,
+      };
+
+      expect(reducer(state, action)).toEqual(expected);
+    });
+  });
+
+  describe(RESOLVE_LOCALE_EDITION, () => {
+    it('resets the state to its initial values when they were true', () => {
+      const state = {
+        localeToEdit: 'en-EN',
+        isEditModalOpen: true,
+        isEditing: true,
+      };
+
+      const action = {
+        type: RESOLVE_LOCALE_EDITION,
+      };
+
+      const expected = {
+        localeToEdit: null,
+        isEditModalOpen: false,
+        isEditing: false,
+      };
+
+      expect(reducer(state, action)).toEqual(expected);
+    });
+  });
+});

packages/strapi-plugin-i18n/admin/src/translations/en.json

@@ -8,5 +8,8 @@
   "Settings.locales.row.default-locale": "Default locale",
   "Settings.locales.modal.delete.confirm": "Yes, delete",
   "Settings.locales.modal.delete.message": "Deleting this locale will delete all associated content. If you want to keep some content, make sure to reallocate it to another locale first.",
-  "Settings.locales.modal.delete.secondMessage": "Do you want to delete this locale?"
+  "Settings.locales.modal.delete.secondMessage": "Do you want to delete this locale?",
+  "Settings.locales.modal.delete.success": "Locale successfully deleted",
+  "Settings.locales.modal.edit.confirmation": "Finish",
+  "Settings.locales.modal.edit.success": "Locale successfully edited"
 }