Fixes #1325

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

@@ -39,10 +39,22 @@ function InputSelect(props) {
     >
       {map(props.selectOptions, (option, key) => {
         if (isObject(option)) {
+          if (option.label) {
+            return (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            );
+          } else {
             return <SelectOption key={key} {...option} />;
           }
+        }
 
-        return <option key={key} value={option}>{option}</option>;
+        return (
+          <option key={key} value={option}>
+            {option}
+          </option>
+        );
       })}
     </select>
   );

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

@@ -1,50 +0,0 @@
-/**
-*
-* SelectOption
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
-import styles from './styles.scss';
-
-/* eslint-disable react/require-default-props  */
-class SelectOptionLanguage extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-  handleSelect =  (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    this.props.onSelect(this.props.option, event);
-  }
-
-  handleMouseEnter  = (event) => {
-    this.props.onFocus(this.props.option, event);
-  }
-
-  handleMouseMove  = (event) => {
-    if (this.props.isFocused) return;
-    this.props.onFocus(this.props.option, event);
-  }
-
-  render() {
-    const flagName = formatLanguageLocale(this.props.option.value);
-    const flag = getFlag(flagName);
-
-    return (
-      <div className={styles.selectOption} onMouseEnter={this.handleMouseEnter} onMouseMove={this.handleMouseMove} onFocus={this.props.onFocus} onClick={this.handleSelect} id={this.props.option.value}>
-        <span className={`${styles.flagContainer} flag-icon flag-icon-${flag}`} />
-        <span className={styles.optionLabel}>{this.props.option.label}</span>
-      </div>
-    );
-  }
-}
-
-SelectOptionLanguage.propTypes = {
-  isFocused: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onSelect: PropTypes.func,
-  option: PropTypes.object,
-};
-
-export default SelectOptionLanguage;

packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/styles.scss

@@ -1,15 +0,0 @@
-.selectOption { /* stylelint-disable */
-  margin: 1rem;
-  background-image: url('assets/images/unknow_flag.png');
-  background-size: 1.3333em auto;
-  background-position: left center;
-}
-
-.flagContainer {
-  // margin-left: 1rem;
-}
-
-.optionLabel {
-  margin-left: 1rem;
-  text-transform: capitalize;
-}

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

@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import 'flag-icon-css/css/flag-icon.css';
-import 'react-select/dist/react-select.css';
 import { Switch, Route } from 'react-router-dom';
 import { isEmpty } from 'lodash';
 
@@ -83,7 +82,7 @@ export function mapDispatchToProps(dispatch) {
       menuFetch,
       environmentsFetch,
     },
-    dispatch
+    dispatch,
   );
 }
 
@@ -93,7 +92,10 @@ const mapStateToProps = createStructuredSelector({
 });
 
 // Wrap the component to inject dispatch and state into it
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 
 const withReducer = strapi.injectReducer({ key: 'global', reducer, pluginId });
 const withSaga = strapi.injectSaga({ key: 'global', saga, pluginId });

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

@@ -26,9 +26,10 @@ import {
 } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import Helmet from 'react-helmet';
-import Select from 'react-select';
 import { router } from 'app';
 
+import InputSelect from 'strapi-helper-plugin/lib/src/components/InputSelect';
+
 import pluginId from '../../pluginId';
 // design
 import ContentHeader from '../../components/ContentHeader';
@@ -36,15 +37,11 @@ import EditForm from '../../components/EditForm';
 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';
 import PluginLeftMenu from '../../components/PluginLeftMenu';
 
-// utils
-import unknowFlag from 'assets/images/unknow_flag.png';
-import supportedFlags from 'utils/supportedFlags.json';
 import { checkFormValidity, getRequiredInputsDb } from '../../utils/inputValidations';
-import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
+import { formatLanguageLocale } from '../../utils/getFlag';
 import sendUpdatedParams from '../../utils/sendUpdatedParams';
 // App selectors
 import { makeSelectSections, makeSelectEnvironments } from '../App/selectors';
@@ -74,7 +71,8 @@ import styles from './styles.scss';
 import config from './config.json';
 
 /* eslint-disable react/require-default-props  */
-export class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class HomePage extends React.Component {
+  // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
     this.customComponents = config.customComponents;
@@ -98,7 +96,10 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
     if (this.props.match.params.slug) {
       this.handleFetch(this.props);
     } else {
-      router.push(`/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug']) || 'application'}`);
+      router.push(
+        `/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug']) ||
+          'application'}`,
+      );
     }
   }
 
@@ -112,7 +113,11 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
         // redirect user if no params slug provided
         router.push(`/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug'])}`);
       }
-    } else if (this.props.match.params.env !== nextProps.match.params.env && nextProps.match.params.env && this.props.match.params.env) {
+    } else if (
+      this.props.match.params.env !== nextProps.match.params.env &&
+      nextProps.match.params.env &&
+      this.props.match.params.env
+    ) {
       // get data if params env updated
       this.handleFetch(nextProps);
     }
@@ -130,7 +135,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
 
   /* eslint-disable react/sort-comp */
   /* eslint-disable jsx-a11y/no-static-element-interactions */
-  addConnection = (e) => {
+  addConnection = e => {
     e.preventDefault();
     const newData = {};
     /* eslint-disable no-template-curly-in-string */
@@ -151,18 +156,18 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
     } else {
       this.props.setErrors(formErrors);
     }
-  }
+  };
 
   emptyDbModifiedData = () => {
     this.setState({ toggleDefaultConnection: false });
     this.props.emptyDbModifiedData();
-  }
+  };
 
-  getDatabase = (databaseName) => {
+  getDatabase = databaseName => {
     // allow state here just for modal purpose
     this.props.specificDatabaseFetch(databaseName, this.props.match.params.env);
     // this.setState({ modal: !this.state.modal });
-  }
+  };
 
   handleDefaultLanguageChange = ({ target }) => {
     // create new object configsDisplay based on store property configsDisplay
@@ -192,11 +197,17 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
     const defaultLanguageArray = formatLanguageLocale(target.id);
 
     // Edit the new config
-    this.props.editSettings({ 'language.defaultLocale': join(defaultLanguageArray, '_') }, 'i18n', this.context);
+    this.props.editSettings(
-  }
+      { 'language.defaultLocale': join(defaultLanguageArray, '_') },
+      'i18n',
+      this.context,
+    );
+  };
 
   handleFetch(props) {
-    const apiUrl = props.match.params.env ? `${props.match.params.slug}/${props.match.params.env}` : props.match.params.slug;
+    const apiUrl = props.match.params.env
+      ? `${props.match.params.slug}/${props.match.params.env}`
+      : props.match.params.slug;
 
     switch (props.match.params.slug) {
       case 'languages':
@@ -222,21 +233,31 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
 
     if (this.props.match.params.slug === 'databases') {
       if (name === this.props.home.dbNameTarget) {
-        const formErrors = value === this.props.home.addDatabaseSection.sections[1].items[0].value ?
+        const formErrors =
-          [{ target: name, errors: [{ id: 'settings-manager.request.error.database.exist' }] }] : [];
+          value === this.props.home.addDatabaseSection.sections[1].items[0].value
+            ? [{ target: name, errors: [{ id: 'settings-manager.request.error.database.exist' }] }]
+            : [];
         this.props.setErrors(formErrors);
       } else if (endsWith(name, '.settings.client')) {
         const item = find(this.props.home.addDatabaseSection.sections[0].items[1].items, { value });
         this.props.changeInput('database.connections.${name}.settings.port', item.port);
-        this.props.changeInput(`database.connections.${this.props.home.addDatabaseSection.sections[1].items[0].value}.settings.port`, item.port);
+        this.props.changeInput(
+          `database.connections.${
+            this.props.home.addDatabaseSection.sections[1].items[0].value
+          }.settings.port`,
+          item.port,
+        );
       } else {
         this.props.setErrors([]);
       }
     }
     this.props.changeInput(name, value);
-  }
+  };
 
-  handleChangeLanguage = (value) => this.props.changeInput('language.defaultLocale', value.value);
+  handleChangeLanguage = ({ target: { value } }) => {
+    console.log({ value });
+    this.props.changeInput('language.defaultLocale', value);
+  };
 
   handleCancel = () => this.props.cancelChanges();
 
@@ -247,26 +268,31 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
     const target = { name: 'database.defaultConnection', value };
     this.handleChange({ target });
     this.setState({ toggleDefaultConnection: !this.state.toggleDefaultConnection });
-  }
+  };
 
-  handleSubmit = (e) => { // eslint-disable-line consistent-return
+  handleSubmit = e => {
+    // eslint-disable-line consistent-return
     e.preventDefault();
-    const apiUrl = this.props.match.params.env ? `${this.props.match.params.slug}/${this.props.match.params.env}` : this.props.match.params.slug;
+    const apiUrl = this.props.match.params.env
+      ? `${this.props.match.params.slug}/${this.props.match.params.env}`
+      : this.props.match.params.slug;
 
     const isCreatingNewFields = this.props.match.params.slug === 'security';
     // send only updated settings
     const body = this.sendUpdatedParams(isCreatingNewFields);
     const formErrors = checkFormValidity(body, this.props.home.formValidations);
 
-    if (isEmpty(body)) return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
+    if (isEmpty(body))
+      return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
     if (isEmpty(formErrors)) {
       this.props.editSettings(body, apiUrl, this.context);
     } else {
       this.props.setErrors(formErrors);
     }
-  }
+  };
 
-  handleSubmitEditDatabase = (databaseName) => { // eslint-disable-line consistent-return
+  handleSubmitEditDatabase = databaseName => {
+    // eslint-disable-line consistent-return
     const body = this.sendUpdatedParams();
     const apiUrl = `${databaseName}/${this.props.match.params.env}`;
     const formErrors = checkFormValidity(body, this.props.home.formValidations, this.props.home.formErrors);
@@ -276,25 +302,21 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
       return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
     }
 
-
     if (isEmpty(formErrors)) {
       this.props.databaseEdit(body, apiUrl, this.context);
     } else {
       this.props.setErrors(formErrors);
     }
-  }
+  };
 
   // retrieve the language to delete using the target id
-  handleLanguageDelete = (languaToDelete) => this.props.languageDelete(languaToDelete);
+  handleLanguageDelete = languaToDelete => this.props.languageDelete(languaToDelete);
 
-  handleDatabaseDelete = (dbName) => {
+  handleDatabaseDelete = dbName => {
     this.context.enableGlobalOverlayBlocker();
     strapi.notification.success('settings-manager.strapi.notification.success.databaseDelete');
     this.props.databaseDelete(dbName, this.props.match.params.env, this.context);
-  }
+  };
-
-  // function used for react-select option
-  optionComponent = (props) => <SelectOptionLanguage {...props} />;
 
   // custom Row rendering for the component List with params slug === languages
   renderRowLanguage = (props, key, liStyles) => (
@@ -306,22 +328,36 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
       listLanguages={this.props.home.listLanguages}
       onDefaultLanguageChange={this.handleDefaultLanguageChange}
     />
-  )
+  );
 
   renderListTitle = () => {
     const availableContentNumber = size(this.props.home.configsDisplay.sections);
-    const title = availableContentNumber > 1 ? `list.${this.props.match.params.slug}.title.plural` : `list.${this.props.match.params.slug}.title.singular`;
+    const title =
+      availableContentNumber > 1
+        ? `list.${this.props.match.params.slug}.title.plural`
+        : `list.${this.props.match.params.slug}.title.singular`;
     const titleDisplay = title ? <FormattedMessage id={`settings-manager.${title}`} /> : '';
 
-    return <span>{availableContentNumber}&nbsp;{titleDisplay}</span>;
+    return (
-  }
+      <span>
+        {availableContentNumber}&nbsp;{titleDisplay}
+      </span>
+    );
+  };
 
   renderListButtonLabel = () => `list.${this.props.match.params.slug}.button.label`;
 
-  renderPopUpFormDatabase = (section, props, popUpStyles) => (
+  renderPopUpFormDatabase = (section, props, popUpStyles) =>
     map(section.items, (item, key) => {
-      const isActive = props.values[this.props.home.dbNameTarget] === this.props.home.modifiedData['database.defaultConnection'] ?
+      const isActive =
-        <div className={popUpStyles.rounded}><i className="fa fa-check" /></div> : '';
+        props.values[this.props.home.dbNameTarget] ===
+        this.props.home.modifiedData['database.defaultConnection'] ? (
+          <div className={popUpStyles.rounded}>
+            <i className="fa fa-check" />
+          </div>
+        ) : (
+          ''
+        );
 
       if (item.name === 'form.database.item.default') {
         return (
@@ -331,39 +367,35 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
             id={item.target}
             onClick={this.handleSetDefaultConnectionDb}
           >
-            <FormattedMessage id={`settings-manager.${item.name}`} />{isActive}
+            <FormattedMessage id={`settings-manager.${item.name}`} />
+            {isActive}
           </div>
         );
       }
-      return (
+      return props.renderInput(item, key);
-        props.renderInput(item, key)
+    });
-      );
-    })
-  )
 
-  renderPopUpFormLanguage = (section) => (
+  renderPopUpFormLanguage = section =>
-    map(section.items, (item) => {
+    map(section.items, item => {
-      const value = this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value;
+      const value =
+        this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value;
 
       return (
         <div className={`col-md-6`} key={item.name}>
           <div className={styles.modalLanguageLabel}>
             <FormattedMessage id={`settings-manager.${item.name}`} />
           </div>
-          <Select
+          <InputSelect
             name={item.target}
             value={value}
-            options={this.props.home.selectOptions.options}
+            selectOptions={this.props.home.selectOptions.options}
             onChange={this.handleChangeLanguage}
-            valueComponent={this.valueComponent}
+            validations={{}}
-            optionComponent={this.optionComponent}
-            clearable={false}
           />
           <div className={styles.popUpSpacer} />
         </div>
       );
-    })
+    });
-  )
 
   renderRowDatabase = (props, key) => (
     <RowDatabase
@@ -380,22 +412,30 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
       error={this.props.home.error}
       resetToggleDefaultConnection={this.resetToggleDefaultConnection}
     />
-  )
+  );
 
   renderComponent = () => {
     // check if  settingName (params.slug) has a custom view display
-    let specificComponent = findKey(this.customComponents, (value) => includes(value, this.props.match.params.slug));
+    let specificComponent = findKey(this.customComponents, value =>
+      includes(value, this.props.match.params.slug),
+    );
 
     if (!specificComponent) {
       // Check if params env : render HeaderNav component
-      specificComponent = !this.props.match.params.env ? 'defaultComponent' : 'defaultComponentWithEnvironments';
+      specificComponent = !this.props.match.params.env
+        ? 'defaultComponent'
+        : 'defaultComponentWithEnvironments';
     }
 
     // if custom view display render specificComponent
     const Component = this.components[specificComponent];
     const addRequiredInputDesign = this.props.match.params.slug === 'databases';
-    const listTitle = ['languages', 'databases'].includes(this.props.match.params.slug) ? this.renderListTitle() : '';
+    const listTitle = ['languages', 'databases'].includes(this.props.match.params.slug)
-    const listButtonLabel = ['languages', 'databases'].includes(this.props.match.params.slug) ? this.renderListButtonLabel() : '';
+      ? this.renderListTitle()
+      : '';
+    const listButtonLabel = ['languages', 'databases'].includes(this.props.match.params.slug)
+      ? this.renderListButtonLabel()
+      : '';
 
     // check if HeaderNav component needs to render a form or a list
     const renderListComponent = this.props.match.params.slug === 'databases';
@@ -459,7 +499,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
         showLoader={this.props.home.showLoader}
       />
     );
-  }
+  };
 
   // Set the toggleDefaultConnection to false
   resetToggleDefaultConnection = () => this.setState({ toggleDefaultConnection: false });
@@ -467,30 +507,19 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
   // Hide database modal
   toggle = () => this.setState({ modal: !this.state.modal });
 
-  // function used for react-select
-  valueComponent = (props) => {
-    const flagName = formatLanguageLocale(props.value.value);
-    const flag = getFlag(flagName);
-    const spanStyle = includes(supportedFlags.flags, flag) ? {} : { backgroundImage: `url(${unknowFlag})` };
-
-    return (
-      <span className={`${styles.flagContainer} flag-icon-background flag-icon-${flag}`} style={spanStyle}>
-        <FormattedMessage id="settings-manager.selectValue" defaultMessage='{language}' values={{ language: props.value.label}} className={styles.marginLeft} />
-      </span>
-    );
-  }
-
   render() {
     return (
       <div className="container-fluid">
         <div className="row">
-          <PluginLeftMenu sections={this.props.menuSections} environments={this.props.environments} envParams={this.props.match.params.env} />
+          <PluginLeftMenu
+            sections={this.props.menuSections}
+            environments={this.props.environments}
+            envParams={this.props.match.params.env}
+          />
           <div className={`${styles.home} col-md-9`}>
             <Helmet
               title="Settings Manager"
-              meta={[
+              meta={[{ name: 'Settings Manager Plugin', content: 'Modify your app settings' }]}
-                { name: 'Settings Manager Plugin', content: 'Modify your app settings' },
-              ]}
             />
             <ContentHeader
               name={this.props.home.configsDisplay.name}
@@ -531,7 +560,7 @@ function mapDispatchToProps(dispatch) {
       setErrors,
       specificDatabaseFetch,
     },
-    dispatch
+    dispatch,
   );
 }
 
@@ -563,7 +592,10 @@ HomePage.propTypes = {
   specificDatabaseFetch: PropTypes.func.isRequired,
 };
 
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 
 const withReducer = strapi.injectReducer({ key: 'homePage', reducer, pluginId });
 const withSaga = strapi.injectSaga({ key: 'homePage', saga, pluginId });

packages/strapi-plugin-settings-manager/package.json

@@ -25,7 +25,6 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "flag-icon-css": "^2.8.0",
-    "react-select": "^1.0.0-rc.5",
     "rimraf": "^2.6.3",
     "strapi-helper-plugin": "3.0.0-alpha.25.2"
   },