Created RowLanguage to handle popupwarning when deleting a language

packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js

@@ -0,0 +1,87 @@
+/**
+*
+* RowLanguage
+*
+*/
+
+import React from 'react';
+import { find, get, join, isObject } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import PopUpWarning from 'components/PopUpWarning';
+// utils
+import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
+
+class RowLanguage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      showWarning: false,
+    };
+  }
+
+  deleteLanguage = () => {
+    this.setState({ showWarning: !this.state.showWarning });
+    this.props.handleLanguageDelete(this.props.name);
+  }
+
+  toggleWarning = () => this.setState({ showWarning: !this.state.showWarning });
+
+  render() {
+    // assign the target id the language name to prepare for delete
+    const deleteIcon = this.props.active ? '' : <i className="fa fa-trash"  onClick={this.toggleWarning} id={this.props.name} />; // eslint-disable-line jsx-a11y/no-static-element-interactions
+
+    // format the locale to
+    const defaultLanguageArray = formatLanguageLocale(this.props.name);
+    const flag = getFlag(defaultLanguageArray);
+    // retrieve language name from i18n translation
+    const languageObject = find(get(this.props.listLanguages, ['sections', '0', 'items', '0', 'items']), ['value', join(defaultLanguageArray, '_')]);
+    // apply i18n
+    const languageDisplay = isObject(languageObject) ? <FormattedMessage {...{ id: languageObject.name }} /> : '';
+
+    const languageLabel = this.props.active ?
+      <span className={this.props.liStyles.italicText}>
+        <FormattedMessage {...{id: 'list.languages.default.languages'}} />
+      </span> :
+      // set the span's id with the language name to retrieve it
+        <FormattedMessage {...{id: 'list.languages.set.languages'}}>
+          {(message) => (
+            <button className={this.props.liStyles.normal} onClick={this.props.changeDefaultLanguage} id={this.props.name}>
+              {message}
+            </button>
+          )}
+        </FormattedMessage>;
+
+    return (
+      <li>
+        <div className={this.props.liStyles.flexLi}>
+          <div className={this.props.liStyles.flexed}>
+            <div><span className={`flag-icon flag-icon-${flag}`} /></div>
+            <div className={`${this.props.liStyles.label} ${this.props.liStyles.capitalized}`}>{languageDisplay}</div>
+          </div>
+          <div>{this.props.name}</div>
+          <div className={this.props.liStyles.centered}>{languageLabel}</div>
+          <div>{deleteIcon}</div>
+        </div>
+        <div>
+          <PopUpWarning
+            isOpen={this.state.showWarning}
+            toggleModal={this.toggleWarning}
+            handleConfirm={this.deleteLanguage}
+            warningMessage={'popUpWarning.languages.delete.message'}
+          />
+        </div>
+      </li>
+    );
+  }
+}
+
+RowLanguage.propTypes = {
+  active: React.PropTypes.bool,
+  changeDefaultLanguage: React.PropTypes.func.isRequired,
+  handleLanguageDelete: React.PropTypes.func.isRequired,
+  listLanguages: React.PropTypes.object.isRequired,
+  liStyles: React.PropTypes.object,
+  name: React.PropTypes.string.isRequired,
+};
+
+export default RowLanguage;

packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/tests/index.test.js

@@ -0,0 +1,11 @@
+// import RowLanguage from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<RowLanguage />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js

@@ -10,14 +10,12 @@ import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 
 import {
-  find,
   findIndex,
   findKey,
   forEach,
   get,
   isEmpty,
   includes,
-  isObject,
   join,
   map,
   replace,
@@ -36,6 +34,7 @@ import HeaderNav from 'components/HeaderNav';
 import List from 'components/List';
 import RowDatabase from 'components/RowDatabase';
 import SelectOptionLanguage from 'components/SelectOptionLanguage';
+import RowLanguage from 'components/RowLanguage';
 
 // App selectors
 import { makeSelectSections, makeSelectEnvironments } from 'containers/App/selectors';
@@ -231,7 +230,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
   }
 
   // retrieve the language to delete using the target id
-  handleLanguageDelete = ({ target }) => this.props.languageDelete(target.id);
+  handleLanguageDelete = (languaToDelete) => this.props.languageDelete(languaToDelete);
 
   handleDatabaseDelete = (dbName) => {
     window.Strapi.notification.success('Deleting database');
@@ -242,45 +241,16 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
   optionComponent = (props) => <SelectOptionLanguage {...props} />;
 
   // custom Row rendering for the component List with params slug === languages
-  renderRowLanguage = (props, key, liStyles) => {
-    // assign the target id the language name to prepare for delete
-    const deleteIcon = props.active ? '' : <i className="fa fa-trash"  onClick={this.handleLanguageDelete} id={props.name} />; // eslint-disable-line jsx-a11y/no-static-element-interactions
-
-    // format the locale to
-    const defaultLanguageArray = formatLanguageLocale(props.name);
-    const flag = getFlag(defaultLanguageArray);
-    // retrieve language name from i18n translation
-    const languageObject = find(get(this.props.home.listLanguages, ['sections', '0', 'items', '0', 'items']), ['value', join(defaultLanguageArray, '_')]);
-    // apply i18n
-    const languageDisplay = isObject(languageObject) ? <FormattedMessage {...{ id: languageObject.name }} /> : '';
-
-    const languageLabel = props.active ?
-      <span className={liStyles.italicText}>
-        <FormattedMessage {...{id: 'list.languages.default.languages'}} />
-      </span> :
-      // set the span's id with the language name to retrieve it
-        <FormattedMessage {...{id: 'list.languages.set.languages'}}>
-          {(message) => (
-            <button className={liStyles.normal} onClick={this.changeDefaultLanguage} id={props.name}>
-              {message}
-            </button>
-          )}
-        </FormattedMessage>;
-
-    return (
-      <li key={key}>
-        <div className={liStyles.flexLi}>
-          <div className={liStyles.flexed}>
-            <div><span className={`flag-icon flag-icon-${flag}`} /></div>
-            <div className={`${liStyles.label} ${liStyles.capitalized}`}>{languageDisplay}</div>
-          </div>
-          <div>{props.name}</div>
-          <div className={liStyles.centered}>{languageLabel}</div>
-          <div>{deleteIcon}</div>
-        </div>
-      </li>
-    )
-  }
+  renderRowLanguage = (props, key, liStyles) => (
+    <RowLanguage
+      key={key}
+      {...props}
+      liStyles={liStyles}
+      handleLanguageDelete={this.handleLanguageDelete}
+      listLanguages={this.props.home.listLanguages}
+      changeDefaultLanguage={this.changeDefaultLanguage}
+    />
+  )
 
   renderListTitle = () => {
     const availableContentNumber = this.props.home.configsDisplay.sections.length;

packages/strapi-plugin-settings-manager/admin/src/translations/en.json

@@ -132,6 +132,7 @@
 
   "popUpWarning.title": "Please confirm",
   "popUpWarning.databases.delete.message": "Are you sure you want to delete this connection ?",
+  "popUpWarning.languages.delete.message": "Are you sure you want to delete this language ?",
 
   "language.af": "Afrikaans",
   "language.af_NA": "Afrikaans (Namibië)",

packages/strapi-plugin-settings-manager/admin/src/translations/fr.json

@@ -131,6 +131,7 @@
 
   "popUpWarning.title": "Merci de confirmer",
   "popUpWarning.databases.delete.message": "Etes-vous sûre de vouloir supprimer cette connexion ?",
+  "popUpWarning.languages.delete.message": "Etes-vous sûre de vouloir supprimer ce language ?",
 
   "language.af": "Afrikaans",
   "language.af_NA": "Afrikaans (Namibië)",