Use strapi helper plugin PoPUpWarning component in content type builder

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

@@ -14,6 +14,9 @@
   "components.AutoReloadBlocker.header": "Reload feature is required for this plugin.",
   "components.AutoReloadBlocker.description": "Open the following file and enable the feature.",
   "components.ProductionBlocker.header": "This plugin is only available in development.",
-  "components.ProductionBlocker.description": "For safety we have to disable this plugin in other environments."
+  "components.ProductionBlocker.description": "For safety we have to disable this plugin in other environments.",
-
+  "components.popUpWarning.button.cancel": "Cancel",
+  "components.popUpWarning.button.confirm": "Confirm",
+  "components.popUpWarning.title": "Please confirm",
+  "components.popUpWarning.message": "Are you sure you want to delete this?"
 }

packages/strapi-admin/admin/src/translations/fr.json

@@ -14,5 +14,10 @@
   "components.AutoReloadBlocker.header": "L'autoReload doit être activé pour ce plugin.",
   "components.AutoReloadBlocker.description": "Ouvrez le fichier suivant pour activer cette fonctionnalité.",
   "components.ProductionBlocker.header": "Ce plugin est disponible uniquement en développement.",
-  "components.ProductionBlocker.description": "Pour des raisons de sécurité il est désactivé dans les autres environnements."
+  "components.ProductionBlocker.description": "Pour des raisons de sécurité il est désactivé dans les autres environnements.",
+  "comonents.popUpWarning.button.cancel": "Annuler",
+  "comonents.popUpWarning.button.confirm": "Confirmer",
+  "components.popUpWarning.title": "Merci de confirmer",
+  "components.popUpWarning.message": "Etes-vous sure de vouloir le supprimer?"
+
 }

packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js

@@ -35,25 +35,25 @@ class PopUpWarning extends React.Component { // eslint-disable-line react/prefer
       <div className={styles.popUpWarning}>
         <Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} className={styles.modalPosition}>
           <ModalHeader toggle={this.props.toggleModal} className={styles.header}>
-            <FormattedMessage id={this.props.content.title || `popUpWarning.title`} />
+            <FormattedMessage id={this.props.content.title || `components.popUpWarning.title`} />
           </ModalHeader>
           <div className={styles.bordered} />
           <ModalBody>
             <div className={styles.modalDangerBodyContainer}>
               <img src={this.icons[this.props.popUpWarningType]} alt="icon" />
-              <FormattedMessage id={this.props.content.message}>
+              <FormattedMessage id={this.props.content.message || 'components.popUpWarning.message'}>
                 {(message) => (
                   <p>{message}</p>
                 )}
               </FormattedMessage>
             </div>
             <div className={styles.buttonContainer}>
-              <FormattedMessage id={this.props.content.cancel || `popUpWarning.button.cancel`}>
+              <FormattedMessage id={this.props.content.cancel || `components.popUpWarning.button.cancel`}>
                 {(message) => (
                   <Button onClick={this.props.toggleModal} className={styles.secondary}>{message}</Button>
                 )}
               </FormattedMessage>
-              <FormattedMessage id={this.props.content.confirm || `popUpWarning.button.confirm`}>
+              <FormattedMessage id={this.props.content.confirm || `components.popUpWarning.button.confirm`}>
                 {(message) => (
                   <Button onClick={this.props.onConfirm} className={styles.primary}>{message}</Button>
                 )}
@@ -68,11 +68,21 @@ class PopUpWarning extends React.Component { // eslint-disable-line react/prefer
 }
 
 PopUpWarning.propTypes = {
-  bodyMessage: PropTypes.string,
+  content: PropTypes.shape({
+    confirm: PropTypes.string,
+    message: PropTypes.string,
+    title: PropTypes.string,
+  }),
   isOpen: PropTypes.bool.isRequired,
   onConfirm: PropTypes.func,
   popUpWarningType: PropTypes.string,
   toggleModal: PropTypes.func.isRequired,
 }
 
+PopUpWarning.defaultProps = {
+  content: {
+    message: 'components.popUpWarning.message',
+  },
+}
+
 export default PopUpWarning;

packages/strapi-plugin-content-type-builder/admin/src/components/AttributeRow/index.js

@@ -48,7 +48,7 @@ class AttributeRow extends React.Component { // eslint-disable-line react/prefer
     this.props.onEditAttribute(this.props.row.name);
   }
 
-  delete = () => {
+  handleDelete = () => {
     this.props.onDelete(this.props.row.name);
     this.setState({ showWarning: false });
   }
@@ -98,9 +98,9 @@ class AttributeRow extends React.Component { // eslint-disable-line react/prefer
         <PopUpWarning
           isOpen={this.state.showWarning}
           toggleModal={this.toggleModalWarning}
-          bodyMessage={'content-type-builder.popUpWarning.bodyMessage.contentType.delete'}
+          content={{ messagee: 'content-type-builder.popUpWarning.bodyMessage.contentType.delete' }}
           popUpWarningType={'danger'}
-          handleConfirm={this.delete}
+          onConfirm={this.handleDelete}
         />
       </li>
     );

packages/strapi-plugin-content-type-builder/admin/src/components/TableListRow/index.js

@@ -27,7 +27,7 @@ class TableListRow extends React.Component { // eslint-disable-line react/prefer
     router.push(`/plugins/content-type-builder/#edit${this.props.rowItem.name}::contentType::baseSettings`);
   }
 
-  delete = (e) => {
+  handleDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
     this.props.onDelete(this.props.rowItem.name)
@@ -72,9 +72,9 @@ class TableListRow extends React.Component { // eslint-disable-line react/prefer
         <PopUpWarning
           isOpen={this.state.showWarning}
           toggleModal={this.toggleModalWarning}
-          bodyMessage={'content-type-builder.popUpWarning.bodyMessage.contentType.delete'}
+          content={{ message: 'content-type-builder.popUpWarning.bodyMessage.contentType.delete' }}
           popUpWarningType={'danger'}
-          handleConfirm={this.delete}
+          onConfirm={this.handleDelete}
         />
       </li>
     );