diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSelect/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSelect/index.js index 6577f6061e..a87df23880 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputSelect/index.js +++ b/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)) { - return ; + if (option.label) { + return ( + + ); + } else { + return ; + } } - return ; + return ( + + ); })} ); diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/index.js deleted file mode 100644 index 90233805e2..0000000000 --- a/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/index.js +++ /dev/null @@ -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 ( -
- - {this.props.option.label} -
- ); - } -} - -SelectOptionLanguage.propTypes = { - isFocused: PropTypes.bool, - onFocus: PropTypes.func, - onSelect: PropTypes.func, - option: PropTypes.object, -}; - -export default SelectOptionLanguage; diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/styles.scss deleted file mode 100644 index 4befbfa18f..0000000000 --- a/packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/styles.scss +++ /dev/null @@ -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; -} diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js b/packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js index 86538147a1..22895219f6 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js +++ b/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 }); diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js index 47bf915d96..5769644bc6 100644 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js +++ b/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,13 +197,19 @@ 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) { + switch (props.match.params.slug) { case 'languages': return this.props.languagesFetch(); case 'databases': @@ -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 ? - [{ target: name, errors: [{ id: 'settings-manager.request.error.database.exist' }] }] : []; + const formErrors = + 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(); @@ -245,28 +266,33 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre ? this.props.home.addDatabaseSection.sections[1].items[0].value : this.props.home.modifiedData[this.props.home.dbNameTarget]; const target = { name: 'database.defaultConnection', value }; - this.handleChange({target}); + 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) => ; + }; // 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 ? : ''; - return {availableContentNumber} {titleDisplay}; - } + return ( + + {availableContentNumber} {titleDisplay} + + ); + }; 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 = + props.values[this.props.home.dbNameTarget] === + this.props.home.modifiedData['database.defaultConnection'] ? ( +
+ +
+ ) : ( + '' + ); 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} > - {isActive} + + {isActive} ); } - return ( - props.renderInput(item, key) - ); - }) - ) + return props.renderInput(item, key); + }); - renderPopUpFormLanguage = (section) => ( - map(section.items, (item) => { - const value = this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value; + renderPopUpFormLanguage = section => + map(section.items, item => { + const value = + this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value; return (
-