Created custom checkbox to warn when disabling i18n

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -251,6 +251,7 @@ const FormModal = () => {
           data: {
             draftAndPublish: true,
           },
+          pluginOptions: {},
         });
       }
 
@@ -260,12 +261,13 @@ const FormModal = () => {
         state.modalType !== 'contentType' &&
         actionType === 'edit'
       ) {
-        const { name, collectionName, draftAndPublish, kind } = get(
+        const { name, collectionName, draftAndPublish, kind, pluginOptions } = get(
           allDataSchema,
           [...pathToSchema, 'schema'],
           {
             name: null,
             collectionName: null,
+            pluginOptions: {},
           }
         );
 
@@ -278,6 +280,7 @@ const FormModal = () => {
             collectionName,
             draftAndPublish,
             kind,
+            pluginOptions,
           },
         });
       }

packages/strapi-plugin-i18n/admin/src/components/CheckboxConfirmation/Wrapper.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: 27px;
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  > p {
+    width: 100%;
+    padding-top: 10px;
+    font-size: 13px;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -8px;
+  }
+  input[type='checkbox'] {
+    margin-bottom: 13px;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Checkbox, Text } from '@buffetjs/core';
+import { Description } from '@buffetjs/styles';
+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 && <Description title={description}>{description}</Description>}
+      </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;

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

@@ -6,6 +6,7 @@ import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import trads from './translations';
 import { getTrad } from './utils';
+import CheckboxConfirmation from './components/CheckboxConfirmation';
 import SettingsPage from './containers/SettingsPage';
 import pluginPermissions from './permissions';
 
@@ -48,7 +49,7 @@ export default strapi => {
 
       if (ctbPlugin) {
         const ctbFormsAPI = ctbPlugin.apis.forms;
-        ctbFormsAPI.components.add({ id: 'localesPicker', component: () => 'locale picker' });
+        ctbFormsAPI.components.add({ id: 'checkboxConfirmation', component: CheckboxConfirmation });
 
         ctbFormsAPI.extendContentType({
           validator: () => ({
@@ -63,7 +64,7 @@ export default strapi => {
                   {
                     name: 'pluginOptions.i18n.localized',
                     description: { id: getTrad('plugin.schema.i18n.localized.description') },
-                    type: 'checkbox',
+                    type: 'checkboxConfirmation',
                     label: { id: getTrad('plugin.schema.i18n.localized.label') },
                   },
                 ],

packages/strapi-plugin-i18n/admin/src/middlewares.js

@@ -1,11 +1,12 @@
+import { has } from 'lodash';
+
 const extendCTBInitialDataMiddleware = () => {
   return () => next => action => {
     if (
       action.type === 'ContentTypeBuilder/FormModal/SET_DATA_TO_EDIT' &&
-      action.modalType === 'contentType' &&
-      action.actionType === 'create'
+      action.modalType === 'contentType'
     ) {
-      const i18n = { localized: true };
+      const i18n = { localized: false };
 
       const pluginOptions =
         action.data && action.data.pluginOptions
@@ -14,7 +15,15 @@ const extendCTBInitialDataMiddleware = () => {
 
       const data = { ...action.data, pluginOptions };
 
-      return next({ ...action, data });
+      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')) {
+        return next({ ...action, data });
+      }
     }
 
     // action is not the one we want to override

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

@@ -7,6 +7,9 @@
   "Settings.permissions.read.denied.description": "In order to be able to read this, make sure to get in touch with the administrator of your system.",
   "plugin.schema.i18n.localized.label": "Enable localization for this Content-Type",
   "plugin.schema.i18n.localized.description": "Allow you to have content in different locales",
+  "CheckboxConfirmation.Modal.content": "Disabling localization will engender the deletion of all your content but the one associated to your default locale (if existing).",
+  "CheckboxConfirmation.Modal.body": "Do you want to disable it?",
+  "CheckboxConfirmation.Modal.button-confirm": "Yes, disable",
   "Settings.list.description": "Configure the settings for the internationalization plugin",
   "Settings.list.empty.title": "There are no locales.",
   "Settings.list.empty.description": "This is not a usual behavior, meaning that you have eventually modified the database manually. Make sure to have at least one locale saved in your database in order to be able to use Strapi correctly.",