Enable upload providers configuration

packages/strapi-plugin-upload/admin/src/components/EditForm/index.js

@@ -15,9 +15,7 @@ import Input from 'components/InputsIndex';
 import styles from './styles.scss';
 
 class EditForm extends React.Component  {
-  getSelectedProviderIndex = () => findIndex(this.props.settings.providers, ['provider', get(this.props.modifiedData, 'provider')]);
-
-  getProviderForm = () => get(this.props.settings, ['providers', this.getSelectedProviderIndex(), 'auth'], {});
+  getProviderForm = () => get(this.props.settings, ['providers', this.props.selectedProviderIndex, 'auth'], {});
 
   generateSelectOptions = () => (
     Object.keys(get(this.props.settings, 'providers', {})).reduce((acc, current) => {
@@ -47,12 +45,12 @@ class EditForm extends React.Component  {
           />
         </div>
         {!isEmpty(this.getProviderForm()) && (
-
           <div className={styles.subFormWrapper}>
             <div className="row">
-
               {map(this.getProviderForm(), (value, key) => (
                 <Input
+                  didCheckErrors={this.props.didCheckErrors}
+                  errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', key]), 'errors'])}
                   key={key}
                   label={{ id: value.label }}
                   name={key}
@@ -97,9 +95,13 @@ EditForm.defaultProps = {
     providers: [],
   },
 };
+
 EditForm.propTypes = {
+  didCheckErrors: PropTypes.bool.isRequired,
+  formErrors: PropTypes.array.isRequired,
   modifiedData: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
+  selectedProviderIndex: PropTypes.number.isRequired,
   settings: PropTypes.object,
 };
 

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/actions.js

@@ -10,6 +10,10 @@ import {
   GET_SETTINGS_SUCCEEDED,
   ON_CANCEL,
   ON_CHANGE,
+  SET_ERRORS,
+  SUBMIT,
+  SUBMIT_ERROR,
+  SUBMIT_SUCCEEDED,
 } from './constants';
 
 export function getSettings(env) {
@@ -43,3 +47,30 @@ export function onChange({ target }) {
     value,
   };
 }
+
+export function setErrors(errors) {
+  return {
+    type: SET_ERRORS,
+    errors,
+  };
+}
+
+export function submit() {
+  return {
+    type: SUBMIT,
+  };
+}
+
+export function submitError(errors) {
+  return {
+    type: SUBMIT_ERROR,
+    errors,
+  };
+}
+
+export function submitSucceeded(data) {
+  return {
+    type: SUBMIT_SUCCEEDED,
+    data,
+  };
+}

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/constants.js

@@ -8,3 +8,7 @@ export const GET_SETTINGS = 'Upload/ConfigPage/GET_SETTINGS';
 export const GET_SETTINGS_SUCCEEDED = 'Upload/ConfigPage/GET_SETTINGS_SUCCEEDED';
 export const ON_CANCEL = 'Upload/ConfigPage/ON_CANCEL';
 export const ON_CHANGE = 'Upload/ConfigPage/ON_CHANGE';
+export const SET_ERRORS = 'Upload/ConfigPage/SET_ERRORS';
+export const SUBMIT = 'Upload/ConfigPage/SUBMIT';
+export const SUBMIT_ERROR = 'Upload/ConfigPage/SUBMIT_ERROR';
+export const SUBMIT_SUCCEEDED = 'Upload/ConfigPage/SUBMIT_SUCCEEDED';

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
-// import { get, findIndex } from 'lodash';
+import { findIndex, get, isEmpty } from 'lodash';
 
 // You can find these components in either
 // ./node_modules/strapi-helper-plugin/lib/src
@@ -30,6 +30,8 @@ import {
   getSettings,
   onCancel,
   onChange,
+  setErrors,
+  submit,
 } from './actions';
 
 import reducer from './reducer';
@@ -48,6 +50,8 @@ class ConfigPage extends React.Component {
     }
   }
 
+  getSelectedProviderIndex = () => findIndex(this.props.settings.providers, ['provider', get(this.props.modifiedData, 'provider')]);
+
   /**
    * Get Settings depending on the props
    * @param  {Object} props
@@ -68,6 +72,25 @@ class ConfigPage extends React.Component {
     return headerNavLinks;
   }
 
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const formErrors = Object.keys(get(this.props.settings, ['providers', this.getSelectedProviderIndex(), 'auth'], {})).reduce((acc, current) => {
+      if (isEmpty(get(this.props.modifiedData, current, ''))) {
+        acc.push({
+          name: current,
+          errors: [{ id: 'components.Input.error.validation.required' }],
+        });
+      }
+      return acc;
+    }, []);
+
+    if (!isEmpty(formErrors)) {
+      return this.props.setErrors(formErrors);
+    }
+
+    return this.props.submit();
+  }
+
   pluginHeaderActions = [
     {
       kind: 'secondary',
@@ -78,17 +101,15 @@ class ConfigPage extends React.Component {
     {
       kind: 'primary',
       label: 'app.components.Button.save',
-      onClick: () => console.log('will save'),
-      type: 'button',
+      onClick: this.handleSubmit,
+      type: 'submit',
     },
   ];
 
   render() {
-    console.log('modifiedData', this.props.modifiedData);
-    console.log('settings', this.props.settings);
     return (
       <div>
-        <form onSubmit={(e) => e.preventDefault()}>
+        <form onSubmit={this.handleSubmit}>
           <ContainerFluid>
             <PluginHeader
               actions={this.pluginHeaderActions}
@@ -97,8 +118,11 @@ class ConfigPage extends React.Component {
             />
             <HeaderNav links={this.generateLinks()} />
             <EditForm
+              didCheckErrors={this.props.didCheckErrors}
+              formErrors={this.props.formErrors}
               modifiedData={this.props.modifiedData}
               onChange={this.props.onChange}
+              selectedProviderIndex={this.getSelectedProviderIndex()}
               settings={this.props.settings}
             />
           </ContainerFluid>
@@ -113,18 +137,23 @@ ConfigPage.contextTypes = {
 };
 
 ConfigPage.defaultProps = {
+  formErrors: [],
   settings: {
     providers: [],
   },
 };
 
 ConfigPage.propTypes = {
+  didCheckErrors: PropTypes.bool.isRequired,
+  formErrors: PropTypes.array,
   getSettings: PropTypes.func.isRequired,
   match: PropTypes.object.isRequired,
   modifiedData: PropTypes.object.isRequired,
   onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
+  setErrors: PropTypes.func.isRequired,
   settings: PropTypes.object,
+  submit: PropTypes.func.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
@@ -133,6 +162,8 @@ function mapDispatchToProps(dispatch) {
       getSettings,
       onCancel,
       onChange,
+      setErrors,
+      submit,
     },
     dispatch,
   );

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/reducer.js

@@ -4,17 +4,22 @@
  *
  */
 
-import { fromJS, Map } from 'immutable';
+import { fromJS, List, Map } from 'immutable';
 
 import {
   GET_SETTINGS,
   GET_SETTINGS_SUCCEEDED,
   ON_CANCEL,
   ON_CHANGE,
+  SET_ERRORS,
+  SUBMIT_ERROR,
+  SUBMIT_SUCCEEDED,
 } from './constants';
 
 const initialState = fromJS({
+  didCheckErrors: false,
   env: '',
+  formErrors: List([]),
   initialData: Map({}),
   modifiedData: Map({}),
   settings: {},
@@ -26,14 +31,30 @@ function configPageReducer(state = initialState, action) {
       return state.update('env', () => action.env);
     case GET_SETTINGS_SUCCEEDED:
       return state
+        .update('didCheckErrors', (v) => v = !v)
+        .update('formErrors', () => List([]))
         .update('initialData', () => Map(action.initialData))
         .update('modifiedData', () => Map(action.initialData))
         .update('settings', () => action.settings);
     case ON_CANCEL:
-      return state.update('modifiedData', () => state.get('initialData'));
+      return state
+        .update('didCheckErrors', (v) => v = !v)
+        .update('formErrors', () => List([]))
+        .update('modifiedData', () => state.get('initialData'));
     case ON_CHANGE:
       return state
         .updateIn(action.keys, () => action.value);
+    case SET_ERRORS:
+    case SUBMIT_ERROR:
+      return state
+        .update('didCheckErrors', (v) => v = !v)
+        .update('formErrors', () => List(action.errors));
+    case SUBMIT_SUCCEEDED:
+      return state
+        .update('didCheckErrors', (v) => v = !v)
+        .update('formErrors', () => List([]))
+        .update('initialData', () => Map(action.data))
+        .update('modifiedData', () => Map(action.data));
     default:
       return state;
   }

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/saga.js

@@ -1,13 +1,19 @@
 // import { LOCATION_CHANGE } from 'react-router-redux';
-import { call, fork, put, takeLatest } from 'redux-saga/effects';
+import { call, fork, put, select, takeLatest } from 'redux-saga/effects';
 import request from 'utils/request';
 
 import {
   getSettingsSucceeded,
+  submitSucceeded,
 } from './actions';
 import {
   GET_SETTINGS,
+  SUBMIT,
 } from './constants';
+import {
+  makeSelectEnv,
+  makeSelectModifiedData,
+} from './selectors';
 
 export function* settingsGet(action) {
   try {
@@ -19,8 +25,33 @@ export function* settingsGet(action) {
   }
 }
 
+export function* submit() {
+  try {
+    const env = yield select(makeSelectEnv());
+    let body = yield select(makeSelectModifiedData());
+
+    if (body.provider === 'local') {
+      body = {
+        enabled: body.enabled,
+        provider: 'local',
+        sizeLimit: body.sizeLimit,
+      };
+    }
+    const requestURL = `/upload/settings/${env}`;
+    yield call(request, requestURL, { method: 'PUT', body });
+
+    // Update reducer with optimisticResponse
+    yield put(submitSucceeded(body));
+  } catch(err) {
+    console.log('err', err);
+    strapi.notification.error('notification.error');
+    // TODO handle error PUT
+  }
+}
+
 function* defaultSaga() {
   yield fork(takeLatest, GET_SETTINGS, settingsGet);
+  yield fork(takeLatest, SUBMIT, submit);
 }
 
 export default defaultSaga;

packages/strapi-plugin-upload/admin/src/containers/ConfigPage/selectors.js

@@ -14,4 +14,18 @@ const selectConfigPage = () => createSelector(
   (substate) => substate.toJS(),
 );
 
+const makeSelectEnv = () => createSelector(
+  selectConfigPageDomain(),
+  (substate) => substate.get('env'),
+);
+
+const makeSelectModifiedData = () => createSelector(
+  selectConfigPageDomain(),
+  (substate) => substate.get('modifiedData').toJS(),
+);
+
 export default selectConfigPage;
+export {
+  makeSelectEnv,
+  makeSelectModifiedData,
+};