Add prompt when an existing model has been modified but not saved

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

@@ -84,8 +84,6 @@ export class App extends React.Component {
       return <Loader />;
     }
 
-    // console.log(this.props);
-
     return (
       <div className={styles.app}>
         <Switch>

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

@@ -12,6 +12,7 @@ import { bindActionCreators, compose } from 'redux';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 import { get, isEqual, pickBy } from 'lodash';
+import { Prompt } from 'react-router';
 
 import Button from 'components/Button';
 import EmptyAttributesBlock from 'components/EmptyAttributesBlock';
@@ -60,6 +61,19 @@ export class ModelPage extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   state = { attrToDelete: null, showWarning: false };
 
+  componentDidUpdate(prevProps) {
+    const {
+      match: {
+        params: { modelName },
+      },
+      resetEditExistingContentType,
+    } = prevProps;
+
+    if (!this.isUpdatingTemporaryContentType(modelName) && modelName !== this.props.match.params.modelName) {
+      resetEditExistingContentType(modelName);
+    }
+  }
+
   getFormData = () => {
     const {
       location: { search },
@@ -227,10 +241,21 @@ export class ModelPage extends React.Component {
     push({ search: nextSearch });
   };
 
-  isUpdatingTemporaryContentType = () => {
+  hasModelBeenModified = () => {
+    const {
+      initialData,
+      location: { search },
+      modifiedData,
+    } = this.props;
+    const currentModel = this.getModelName();
+
+    return !isEqual(initialData[currentModel], modifiedData[currentModel]) && search === '';
+  };
+
+  isUpdatingTemporaryContentType = (modelName = this.getModelName()) => {
     const { models } = this.props;
     /* istanbul ignore next */
-    const currentModel = models.find(model => model.name === this.getModelName()) || { isTemporary: true };
+    const currentModel = models.find(model => model.name === modelName) || { isTemporary: true };
 
     const { isTemporary } = currentModel;
 
@@ -310,6 +335,9 @@ export class ModelPage extends React.Component {
 
     return (
       <div className={styles.modelpage}>
+        <FormattedMessage id={`${pluginId}.prompt.content.unsaved`}>
+          {msg => <Prompt when={this.hasModelBeenModified()} message={msg} />}
+        </FormattedMessage>
         <div className="container-fluid">
           <div className="row">
             <LeftMenu>

packages/strapi-plugin-content-type-builder/admin/src/translations/en.json

@@ -155,5 +155,6 @@
   "table.contentType.head.fields": "Fields",
   "table.contentType.head.name": "Name",
   "table.contentType.title.plural": "Content Types are available",
-  "table.contentType.title.singular": "Content Type is available"
+  "table.contentType.title.singular": "Content Type is available",
+  "prompt.content.unsaved": "Are you sure you want to leave this content type? All your modifications will be lost."
 }

packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json

@@ -154,5 +154,6 @@
   "table.contentType.head.fields": "Champs",
   "table.contentType.head.name": "Nom",
   "table.contentType.title.plural": "Modèles sont disponibles",
-  "table.contentType.title.singular": "Modèle est disponible"
+  "table.contentType.title.singular": "Modèle est disponible",
+  "prompt.content.unsaved": "Etes-vous sûr de vouloir quitter ce model? Toutes vos modifications seront perdues."
 }