From 3c108fe5554f208cd2f605b121505380e9f5232c Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Mon, 8 Apr 2019 19:54:30 +0200
Subject: [PATCH] Fix PR feedback

---
 package.json                                  |   3 +-
 .../src/components/LeftMenuFooter/index.js    |   5 +-
 .../admin/src/containers/Admin/index.js       |  10 +-
 .../tests/__snapshots__/saga.test.js.snap     |   2 +-
 .../src/containers/Admin/tests/saga.test.js   |   3 +-
 .../admin/src/containers/App/index.js         |   5 +-
 .../src/containers/LocaleToggle/index.js      |  43 +++++--
 .../src/containers/LocaleToggle/reducer.js    |   7 +-
 .../src/containers/PluginDispatcher/index.js  |  21 ++-
 .../src/components/TableListRow/index.js      |  12 +-
 .../admin/src/containers/App/saga.js          |   2 +-
 .../admin/src/components/PopUpForm/index.js   | 121 +++++++++++-------
 12 files changed, 144 insertions(+), 90 deletions(-)

diff --git a/package.json b/package.json
index abd30c0b21..75685e1905 100644
--- a/package.json
+++ b/package.json
@@ -65,8 +65,7 @@
     "test:unit": "FORCE_COLOR=true lerna run test --parallel",
     "test:e2e": "FORCE_COLOR=true jest --config jest.config.e2e.js --runInBand --verbose --forceExit --detectOpenHandles",
     "test:generate-app": "node test/createTestApp.js",
-    "test:start-app": "node test/startTestApp.js",
-    "build": "node ./scripts/build.js"
+    "test:start-app": "node test/startTestApp.js"
   },
   "author": {
     "email": "hi@strapi.io",
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js b/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js
index b7d1021511..6d5448333a 100644
--- a/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js
@@ -15,7 +15,6 @@ import messages from './messages.json';
 defineMessages(messages);
 
 function LeftMenuFooter({ version, ...rest }) {
-  // eslint-disable-line react/prefer-stateless-function
   const staticLinks = [
     {
       icon: 'book',
@@ -28,6 +27,7 @@ function LeftMenuFooter({ version, ...rest }) {
       destination: 'https://strapi.io/help',
     },
   ];
+
   return (
     <div className={styles.leftMenuFooter}>
       <ul className={styles.list}>
@@ -44,7 +44,8 @@ function LeftMenuFooter({ version, ...rest }) {
         <FormattedMessage {...messages.poweredBy} key="poweredBy" />
         <a key="website" href="https://strapi.io" target="_blank">
           Strapi
-        </a>{' '}
+        </a>
+        &nbsp;
         <a
           href={`https://github.com/strapi/strapi/releases/tag/v${version}`}
           key="github"
diff --git a/packages/strapi-admin/admin/src/containers/Admin/index.js b/packages/strapi-admin/admin/src/containers/Admin/index.js
index 4a6f221e3a..7bbfb51168 100644
--- a/packages/strapi-admin/admin/src/containers/Admin/index.js
+++ b/packages/strapi-admin/admin/src/containers/Admin/index.js
@@ -99,17 +99,19 @@ export class Admin extends React.Component {
   componentDidUpdate(prevProps) {
     const {
       admin: { didGetSecuredData, isLoading, isSecured },
+      getHook,
+      getSecuredData,
       location: { pathname },
     } = this.props;
 
     if (!isLoading && this.state.shouldSecureAfterAllPluginsAreMounted) {
       if (!this.hasApluginNotReady(this.props)) {
-        this.props.getHook('willSecure');
+        getHook('willSecure');
       }
     }
 
     if (prevProps.location.pathname !== pathname) {
-      this.props.getHook('willSecure');
+      getHook('willSecure');
 
       /* istanbul ignore if */
       if (this.isAcceptingTracking()) {
@@ -120,11 +122,11 @@ export class Admin extends React.Component {
     }
 
     if (prevProps.admin.isSecured !== isSecured && isSecured) {
-      this.props.getSecuredData();
+      getSecuredData();
     }
 
     if (prevProps.admin.didGetSecuredData !== didGetSecuredData) {
-      this.props.getHook('didGetSecuredData');
+      getHook('didGetSecuredData');
     }
   }
 
diff --git a/packages/strapi-admin/admin/src/containers/Admin/tests/__snapshots__/saga.test.js.snap b/packages/strapi-admin/admin/src/containers/Admin/tests/__snapshots__/saga.test.js.snap
index a03e78169e..4ddf4eb2bc 100644
--- a/packages/strapi-admin/admin/src/containers/Admin/tests/__snapshots__/saga.test.js.snap
+++ b/packages/strapi-admin/admin/src/containers/Admin/tests/__snapshots__/saga.test.js.snap
@@ -60,7 +60,7 @@ Object {
 }
 `;
 
-exports[`getData Saga should dispatch the getInitDataSucceeded action it it requests the data successfully 1`] = `
+exports[`getData Saga should dispatch the getInitDataSucceeded action if it requests the data successfully 1`] = `
 Object {
   "@@redux-saga/IO": true,
   "ALL": Array [
diff --git a/packages/strapi-admin/admin/src/containers/Admin/tests/saga.test.js b/packages/strapi-admin/admin/src/containers/Admin/tests/saga.test.js
index f8f6f15bf7..74936be61f 100644
--- a/packages/strapi-admin/admin/src/containers/Admin/tests/saga.test.js
+++ b/packages/strapi-admin/admin/src/containers/Admin/tests/saga.test.js
@@ -4,7 +4,6 @@
 
 /* eslint-disable redux-saga/yield-effects */
 import { all, fork, put, takeLatest } from 'redux-saga/effects';
-// import { take, call, put, select } from 'redux-saga/effects';
 import defaultSaga, { emitter, getData, getSecuredData } from '../saga';
 
 import { getInitDataSucceeded } from '../actions';
@@ -26,7 +25,7 @@ describe('getData Saga', () => {
     expect(callDescriptor).toMatchSnapshot();
   });
 
-  it('should dispatch the getInitDataSucceeded action it it requests the data successfully', () => {
+  it('should dispatch the getInitDataSucceeded action if it requests the data successfully', () => {
     const response = [
       { uuid: 'uuid' },
       { strapiVersion: 'beta' },
diff --git a/packages/strapi-admin/admin/src/containers/App/index.js b/packages/strapi-admin/admin/src/containers/App/index.js
index 839667d73f..5c81c71ade 100644
--- a/packages/strapi-admin/admin/src/containers/App/index.js
+++ b/packages/strapi-admin/admin/src/containers/App/index.js
@@ -18,7 +18,6 @@ import LoadingIndicatorPage from 'components/LoadingIndicatorPage';
 
 import '../../styles/main.scss';
 
-// import AdminPage from '../AdminPage';
 import Admin from '../Admin';
 import NotFoundPage from '../NotFoundPage';
 import NotificationProvider from '../NotificationProvider';
@@ -39,10 +38,10 @@ function App(props) {
             <div className={styles.container}>
               <Switch>
                 <Route
-                  path='/'
+                  path="/"
                   render={router => <Admin {...props} {...router} />}
                 />
-                <Route path='' component={NotFoundPage} />
+                <Route path="" component={NotFoundPage} />
               </Switch>
             </div>
           );
diff --git a/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js b/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js
index fa5aff34ae..65803c12af 100644
--- a/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js
+++ b/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js
@@ -11,7 +11,12 @@ import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import cn from 'classnames';
 
-import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import {
+  ButtonDropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+} from 'reactstrap';
 
 import makeSelectLocale from '../LanguageProvider/selectors';
 import { changeLocale } from '../LanguageProvider/actions';
@@ -20,10 +25,11 @@ import { languages } from '../../i18n';
 import makeSelectLocaleToggle from './selectors';
 import styles from './styles.scss';
 
-export class LocaleToggle extends React.Component { // eslint-disable-line
+export class LocaleToggle extends React.Component {
+  // eslint-disable-line
   state = { isOpen: false };
 
-  getFlagUrl = (locale) => {
+  getFlagUrl = locale => {
     switch (locale) {
       case 'en':
         return 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/flags/4x3/us.svg';
@@ -41,13 +47,16 @@ export class LocaleToggle extends React.Component { // eslint-disable-line
       default:
         return `https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/flags/4x3/${locale}.svg`;
     }
-  }
+  };
 
   toggle = () => this.setState(prevState => ({ isOpen: !prevState.isOpen }));
 
   render() {
-    const { currentLocale: { locale }, localeToggle: { className } } = this.props;
-    const style = cn(styles.localeDropdownMenu, styles[className] );
+    const {
+      currentLocale: { locale },
+      localeToggle: { className },
+    } = this.props;
+    const style = cn(styles.localeDropdownMenu, styles[className]);
 
     return (
       <div className={styles.localeToggle}>
@@ -56,10 +65,17 @@ export class LocaleToggle extends React.Component { // eslint-disable-line
             <span>{locale}</span>
             <img src={this.getFlagUrl(locale)} alt={locale} />
           </DropdownToggle>
-          {/* <DropdownMenu className={cn(styles.localeDropdownMenu, this.props.isLogged ? '' : styles.localeDropdownMenuNotLogged)}> */}
+
           <DropdownMenu className={style}>
             {languages.map(language => (
-              <DropdownItem key={language} onClick={() => this.props.changeLocale(language)} className={cn(styles.localeToggleItem, locale === language ? styles.localeToggleItemActive : '')}>
+              <DropdownItem
+                key={language}
+                onClick={() => this.props.changeLocale(language)}
+                className={cn(
+                  styles.localeToggleItem,
+                  locale === language ? styles.localeToggleItemActive : '',
+                )}
+              >
                 {language.toUpperCase()}
               </DropdownItem>
             ))}
@@ -70,8 +86,6 @@ export class LocaleToggle extends React.Component { // eslint-disable-line
   }
 }
 
-
-
 LocaleToggle.propTypes = {
   changeLocale: PropTypes.func.isRequired,
   currentLocale: PropTypes.object.isRequired,
@@ -92,8 +106,9 @@ export function mapDispatchToProps(dispatch) {
   );
 }
 
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 
-export default compose(
-  withConnect,
-)(LocaleToggle);
+export default compose(withConnect)(LocaleToggle);
diff --git a/packages/strapi-admin/admin/src/containers/LocaleToggle/reducer.js b/packages/strapi-admin/admin/src/containers/LocaleToggle/reducer.js
index 2b05925f3d..16f9792982 100644
--- a/packages/strapi-admin/admin/src/containers/LocaleToggle/reducer.js
+++ b/packages/strapi-admin/admin/src/containers/LocaleToggle/reducer.js
@@ -5,10 +5,7 @@
  */
 
 import { fromJS } from 'immutable';
-import {
-  RESET_DEFAULT_CLASSNAME,
-  SET_CUSTOM_CLASSNAME,
-} from './constants';
+import { RESET_DEFAULT_CLASSNAME, SET_CUSTOM_CLASSNAME } from './constants';
 
 const initialState = fromJS({
   className: null,
@@ -17,7 +14,7 @@ const initialState = fromJS({
 function localeToggleReducer(state = initialState, action) {
   switch (action.type) {
     case RESET_DEFAULT_CLASSNAME:
-      return state.update('className', () => null);
+      return state.update('className', () => initialState.get('className'));
     case SET_CUSTOM_CLASSNAME:
       return state.update('className', () => action.className);
     default:
diff --git a/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js b/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js
index af5f0b263f..435ab6ef3b 100644
--- a/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js
+++ b/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js
@@ -26,14 +26,20 @@ export function PluginDispatcher(props) {
     return null;
   }
 
-  const { mainComponent, name, preventComponentRendering } = pluginToRender;
-  const blockerComponentProps = pluginToRender.blockerComponentProps;
+  const {
+    blockerComponent,
+    blockerComponentProps,
+    mainComponent,
+    name,
+    preventComponentRendering,
+  } = pluginToRender;
   let PluginEntryComponent = preventComponentRendering
     ? BlockerComponent
     : mainComponent;
 
-  if (preventComponentRendering && pluginToRender.blockerComponent) {
-    PluginEntryComponent = pluginToRender.blockerComponent;
+  // Change the plugin's blockerComponent if the plugin uses a custom one.
+  if (preventComponentRendering && blockerComponent) {
+    PluginEntryComponent = blockerComponent;
   }
 
   return (
@@ -47,9 +53,14 @@ export function PluginDispatcher(props) {
 }
 
 PluginDispatcher.defaultProps = {};
+
 PluginDispatcher.propTypes = {
   global: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      pluginId: PropTypes.string,
+    }),
+  }).isRequired,
 };
 
 export default memo(PluginDispatcher);
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/TableListRow/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/TableListRow/index.js
index 6c273ac3e2..4ec0507181 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/TableListRow/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/TableListRow/index.js
@@ -69,11 +69,11 @@ class TableListRow extends React.Component {
     );
   };
 
-  toggleModalWarning = () => this.setState({ showWarning: !this.state.showWarning });
+  toggleModalWarning = () => this.setState(prevState => ({ showWarning: !prevState.showWarning }));
 
   handleShowModalWarning = () => {
     if (this.props.canOpenModalAddContentType || this.props.rowItem.isTemporary === true) {
-      this.setState({ showWarning: !this.state.showWarning });
+      this.setState(prevState => ({ showWarning: !prevState.showWarning }));
     } else {
       strapi.notification.info(`${pluginId}.notification.info.contentType.creating.notSaved`);
     }
@@ -97,9 +97,7 @@ class TableListRow extends React.Component {
     ) : (
       ''
     );
-    const description = isEmpty(this.props.rowItem.description)
-      ? '-'
-      : this.props.rowItem.description;
+    const description = isEmpty(this.props.rowItem.description) ? '-' : this.props.rowItem.description;
     const spanStyle = this.props.rowItem.isTemporary ? '60%' : '100%';
     const icons = this.props.rowItem.source
       ? []
@@ -124,8 +122,8 @@ class TableListRow extends React.Component {
         <div className={`col-md-5 text-center ${styles.descriptionContainer}`}>
           <div>{description}</div>
         </div>
-        <div className='col-md-2 text-center'>{this.props.rowItem.fields}</div>
-        <div className='col-md-1'>
+        <div className="col-md-2 text-center">{this.props.rowItem.fields}</div>
+        <div className="col-md-1">
           <IcoContainer icons={icons} />
         </div>
         <PopUpWarning
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/saga.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/saga.js
index c088c61fb5..ec0d57643c 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/saga.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/saga.js
@@ -54,7 +54,7 @@ export function* deleteModel({
       const appMenu = get(
         appPlugins,
         ['content-manager', 'leftMenuSections'],
-        [],
+        [{ links: [] }],
       );
       const updatedMenu = appMenu[0].links.filter(
         el => el.destination !== modelName,
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js
index 0c8bd64e90..a5ddf37372 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js
@@ -37,7 +37,10 @@ class PopUpForm extends React.Component {
   componentWillReceiveProps(nextProps) {
     const { values } = nextProps;
 
-    if (get(values, 'enabled') && get(values, 'enabled') !== get(this.props.values, 'enabled')) {
+    if (
+      get(values, 'enabled') &&
+      get(values, 'enabled') !== get(this.props.values, 'enabled')
+    ) {
       this.setState({ enabled: get(values, 'enabled') });
     }
   }
@@ -60,13 +63,17 @@ class PopUpForm extends React.Component {
       default: {
         const value = get(this.props.values, 'callback', '');
 
-        return startsWith(value, 'http') ? value : `${strapi.backendURL}${value}`;
+        return startsWith(value, 'http')
+          ? value
+          : `${strapi.backendURL}${value}`;
       }
     }
   };
 
   generateRedirectURL = url => {
-    return startsWith(url, 'https://') || startsWith(url, 'http://') || this.state.isEditing
+    return startsWith(url, 'https://') ||
+      startsWith(url, 'http://') ||
+      this.state.isEditing
       ? url
       : `${strapi.backendURL}${startsWith(url, '/') ? '' : '/'}${url}`;
   };
@@ -92,37 +99,51 @@ class PopUpForm extends React.Component {
   handleFocus = () => this.setState({ isEditing: true });
 
   renderForm = () => {
-    const { dataToEdit, settingType, values } = this.props;
-    const form = Object.keys(values.options || values || {}).reduce((acc, current) => {
-      const path = settingType === 'email-templates' ? ['options', current] : [current];
-      const name = settingType === 'email-templates' ? 'options.' : '';
+    const {
+      dataToEdit,
+      didCheckErrors,
+      formErrors,
+      settingType,
+      values,
+    } = this.props;
+    const form = Object.keys(values.options || values || {}).reduce(
+      (acc, current) => {
+        const path =
+          settingType === 'email-templates' ? ['options', current] : [current];
+        const name = settingType === 'email-templates' ? 'options.' : '';
 
-      if (isObject(get(values, path)) && !isArray(get(values, path))) {
-        return Object.keys(get(values, path, {}))
-          .reduce((acc, curr) => {
-            acc.push(`${name}${current}.${curr}`);
+        if (isObject(get(values, path)) && !isArray(get(values, path))) {
+          return Object.keys(get(values, path, {}))
+            .reduce((acc, curr) => {
+              acc.push(`${name}${current}.${curr}`);
 
-            return acc;
-          }, [])
-          .concat(acc);
-      } else if (current !== 'icon' && current !== 'scope') {
-        acc.push(`${name}${current}`);
-      }
+              return acc;
+            }, [])
+            .concat(acc);
+        } else if (current !== 'icon' && current !== 'scope') {
+          acc.push(`${name}${current}`);
+        }
 
-      return acc;
-    }, []);
+        return acc;
+      },
+      [],
+    );
 
     if (settingType === 'providers') {
       return (
         <div className={`row ${styles.providerDisabled}`}>
           <Input
-            inputDescription={{ id: 'users-permissions.PopUpForm.Providers.enabled.description' }}
-            label={{ id: 'users-permissions.PopUpForm.Providers.enabled.label' }}
+            inputDescription={{
+              id: 'users-permissions.PopUpForm.Providers.enabled.description',
+            }}
+            label={{
+              id: 'users-permissions.PopUpForm.Providers.enabled.label',
+            }}
             name={`${settingType}.${dataToEdit}.enabled`}
             onChange={this.handleChange}
-            type='toggle'
+            type="toggle"
             validations={{}}
-            value={get(this.props.values, 'enabled', this.state.enabled)}
+            value={get(values, 'enabled', this.state.enabled)}
           />
 
           {form.length > 1 && <div className={styles.separator} />}
@@ -130,11 +151,11 @@ class PopUpForm extends React.Component {
           {map(tail(form), (value, key) => (
             <Input
               autoFocus={key === 0}
-              customBootstrapClass='col-md-12'
-              didCheckErrors={this.props.didCheckErrors}
+              customBootstrapClass="col-md-12"
+              didCheckErrors={didCheckErrors}
               errors={get(
-                this.props.formErrors,
-                [findIndex(this.props.formErrors, ['name', value]), 'errors'],
+                formErrors,
+                [findIndex(formErrors, ['name', value]), 'errors'],
                 [],
               )}
               key={value}
@@ -157,7 +178,7 @@ class PopUpForm extends React.Component {
                   : false
               }
               onChange={this.props.onChange}
-              type='text'
+              type="text"
               value={
                 includes(value, 'callback') || includes(value, 'redirect_uri')
                   ? this.generateRedirectURL(get(values, value))
@@ -168,13 +189,13 @@ class PopUpForm extends React.Component {
           ))}
           {dataToEdit !== 'email' && (
             <Input
-              customBootstrapClass='col-md-12'
+              customBootstrapClass="col-md-12"
               disabled
               label={{
                 id: `users-permissions.PopUpForm.Providers.${dataToEdit}.providerConfig.redirectURL`,
               }}
-              name='noName'
-              type='text'
+              name="noName"
+              type="text"
               onChange={() => {}}
               value={this.getRedirectURIProviderConf()}
               validations={{}}
@@ -187,16 +208,16 @@ class PopUpForm extends React.Component {
     const params = {
       link: (
         <a
-          href='https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/docs/email-templates.md'
-          target='_blank'
+          href="https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/docs/email-templates.md"
+          target="_blank"
         >
-          <FormattedMessage id='users-permissions.PopUpForm.Email.link.documentation' />
+          <FormattedMessage id="users-permissions.PopUpForm.Email.link.documentation" />
         </a>
       ),
     };
 
     return (
-      <div className='row'>
+      <div className="row">
         {map(take(form, 3), (value, key) => (
           <Input
             autoFocus={key === 0}
@@ -213,14 +234,16 @@ class PopUpForm extends React.Component {
             placeholder={`users-permissions.PopUpForm.Email.${value}.placeholder`}
             type={includes(value, 'email') ? 'email' : 'text'}
             value={get(values, value)}
-            validations={value !== 'options.response_email' ? { required: true } : {}}
+            validations={
+              value !== 'options.response_email' ? { required: true } : {}
+            }
           />
         ))}
-        <div className='col-md-6' />
+        <div className="col-md-6" />
         {map(takeRight(form, 2), value => (
           <Input
             key={value}
-            customBootstrapClass='col-md-12'
+            customBootstrapClass="col-md-12"
             didCheckErrors={this.props.didCheckErrors}
             errors={get(
               this.props.formErrors,
@@ -275,20 +298,30 @@ class PopUpForm extends React.Component {
           toggle={this.context.unsetDataToEdit}
           className={`${styles.modalPosition}`}
         >
-          <ModalHeader toggle={this.context.unsetDataToEdit} className={styles.modalHeader} />
+          <ModalHeader
+            toggle={this.context.unsetDataToEdit}
+            className={styles.modalHeader}
+          />
           <div className={styles.headerContainer}>
             <div>{header}</div>
           </div>
           <form onSubmit={this.props.onSubmit}>
             <ModalBody className={styles.modalBody}>
-              <div className='container-fluid'>{this.renderForm()}</div>
+              <div className="container-fluid">{this.renderForm()}</div>
             </ModalBody>
             <ModalFooter className={styles.modalFooter}>
-              <Button onClick={() => this.context.unsetDataToEdit()} className={styles.secondary}>
-                <FormattedMessage id='users-permissions.PopUpForm.button.cancel' />
+              <Button
+                onClick={() => this.context.unsetDataToEdit()}
+                className={styles.secondary}
+              >
+                <FormattedMessage id="users-permissions.PopUpForm.button.cancel" />
               </Button>
-              <Button type='submit' onClick={this.props.onSubmit} className={styles.primary}>
-                <FormattedMessage id='users-permissions.PopUpForm.button.save' />
+              <Button
+                type="submit"
+                onClick={this.props.onSubmit}
+                className={styles.primary}
+              >
+                <FormattedMessage id="users-permissions.PopUpForm.button.save" />
               </Button>
             </ModalFooter>
           </form>