chore: upgrade intl dependencies (#1920)

12 files changed, 201 insertions, 229 deletions

diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a9601836b..3cf937f98 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -2,19 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import classnames from 'classnames';
 
 import Modal from '../../components/ui/Modal';
 import Input from '../../components/ui/Input';
 import Button from '../../components/ui/Button';
 
-import {
-  state,
-  resetState,
-  sendCredentials,
-  cancelLogin,
-} from './store';
+import { state, resetState, sendCredentials, cancelLogin } from './store';
 import Form from './Form';
 
 import styles from './styles';
@@ -23,17 +18,15 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   signIn: {
     id: 'feature.basicAuth.signIn',
-    defaultMessage: '!!!Sign In',
+    defaultMessage: 'Sign In',
   },
 });
 
-export default @injectSheet(styles) @observer class BasicAuthModal extends Component {
+@injectSheet(styles)
+@observer
+class BasicAuthModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-  }
-
-  static contextTypes = {
-    intl: intlShape,
   };
 
   submit(e) {
@@ -56,20 +49,15 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
   }
 
   render() {
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const {
-      isModalVisible,
-      authInfo,
-    } = state;
+    const { isModalVisible, authInfo } = state;
 
     if (!authInfo) {
       return null;
     }
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -89,10 +77,7 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
           onSubmit={this.submit.bind(this)}
           className={classnames('franz-form', classes.form)}
         >
-          <Input
-            field={Form.$('user')}
-            showLabel={false}
-          />
+          <Input field={Form.$('user')} showLabel={false} />
           <Input
             field={Form.$('password')}
             showLabel={false}
@@ -105,13 +90,11 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
               buttonType="secondary"
               onClick={this.cancel.bind(this)}
             />
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.signIn)}
-            />
+            <Button type="submit" label={intl.formatMessage(messages.signIn)} />
           </div>
         </form>
       </Modal>
     );
   }
 }
+export default injectIntl(BasicAuthModal);
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index e43287db5..814d529d9 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { H1 } from '@meetfranz/ui';
 
 import Modal from '../../components/ui/Modal';
@@ -16,15 +16,16 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   title: {
     id: 'feature.nightlyBuilds.title',
-    defaultMessage: '!!!Nightly Builds',
+    defaultMessage: 'Nightly Builds',
   },
   info: {
     id: 'feature.nightlyBuilds.info',
-    defaultMessage: '!!!Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don\'t know what you are doing, we suggest not activating nightly builds.',
+    defaultMessage:
+      "Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don't know what you are doing, we suggest not activating nightly builds.",
   },
   activate: {
     id: 'feature.nightlyBuilds.activate',
-    defaultMessage: '!!!Activate',
+    defaultMessage: 'Activate',
   },
 });
 
@@ -52,11 +53,10 @@ const styles = () => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class NightlyBuildsModal extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class NightlyBuildsModal extends Component {
   close() {
     ModalState.isModalVisible = false;
 
@@ -84,11 +84,9 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -132,3 +130,5 @@ NightlyBuildsModal.wrappedComponent.propTypes = {
   }).isRequired,
   classes: PropTypes.object.isRequired,
 };
+
+export default injectIntl(NightlyBuildsModal);
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 5387bd358..5b5036752 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -2,7 +2,7 @@ import { H1 } from '@meetfranz/ui';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import { state as ModalState } from './store';
 import { sendAuthRequest } from '../../api/utils/auth';
@@ -18,35 +18,37 @@ const debug = require('debug')('Ferdi:feature:publishDebugInfo');
 const messages = defineMessages({
   title: {
     id: 'feature.publishDebugInfo.title',
-    defaultMessage: '!!!Publish debug information',
+    defaultMessage: 'Publish debug information',
   },
   info: {
     id: 'feature.publishDebugInfo.info',
-    defaultMessage: '!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger\'s privacy policy and terms of service',
+    defaultMessage:
+      "Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger's privacy policy and terms of service",
   },
   error: {
     id: 'feature.publishDebugInfo.error',
-    defaultMessage: '!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
+    defaultMessage:
+      'There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
   },
   privacy: {
     id: 'feature.publishDebugInfo.privacy',
-    defaultMessage: '!!!Privacy policy',
+    defaultMessage: 'Privacy policy',
   },
   terms: {
     id: 'feature.publishDebugInfo.terms',
-    defaultMessage: '!!!Terms of service',
+    defaultMessage: 'Terms of service',
   },
   publish: {
     id: 'feature.publishDebugInfo.publish',
-    defaultMessage: '!!!Accept and publish',
+    defaultMessage: 'Accept and publish',
   },
   published: {
     id: 'feature.publishDebugInfo.published',
-    defaultMessage: '!!!Your debug log was published and is now availible at',
+    defaultMessage: 'Your debug log was published and is now availible at',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   container: {
     minWidth: '70vw',
   },
@@ -69,7 +71,8 @@ const styles = (theme) => ({
     width: '100%',
 
     '& div': {
-      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+      fontFamily:
+        'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
     },
 
     '& input': {
@@ -81,20 +84,19 @@ const styles = (theme) => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class PublishDebugLogModal extends Component {
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class PublishDebugLogModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     log: null,
     error: false,
     isSendingLog: false,
-  }
+  };
 
   // Close this modal
   close() {
@@ -109,12 +111,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
     const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);
 
-    const request = await sendAuthRequest(`${DEBUG_API}/create`, {
-      method: 'POST',
-      body: JSON.stringify({
-        log: debugInfo,
-      }),
-    }, false);
+    const request = await sendAuthRequest(
+      `${DEBUG_API}/create`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          log: debugInfo,
+        }),
+      },
+      false,
+    );
 
     debug(`debugInfo: publishing status: ${request.status}`);
     if (request.status === 200) {
@@ -140,17 +146,11 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const {
-      log,
-      error,
-      isSendingLog,
-    } = this.state;
+    const { log, error, isSendingLog } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -159,12 +159,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         close={() => this.close()}
       >
         <div className={classes.container}>
-          <H1>
-            {intl.formatMessage(messages.title)}
-          </H1>
-          { log && (
+          <H1>{intl.formatMessage(messages.title)}</H1>
+          {log && (
             <>
-              <p className={classes.info}>{intl.formatMessage(messages.published)}</p>
+              <p className={classes.info}>
+                {intl.formatMessage(messages.published)}
+              </p>
               <Input
                 className={classes.url}
                 showLabel={false}
@@ -184,12 +184,24 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
           {!log && !error && (
             <>
-              <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
-
-              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link} rel="noreferrer">
+              <p className={classes.info}>
+                {intl.formatMessage(messages.info)}
+              </p>
+
+              <a
+                href={`${DEBUG_API}/privacy.html`}
+                target="_blank"
+                className={classes.link}
+                rel="noreferrer"
+              >
                 {intl.formatMessage(messages.privacy)}
               </a>
-              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link} rel="noreferrer">
+              <a
+                href={`${DEBUG_API}/terms.html`}
+                target="_blank"
+                className={classes.link}
+                rel="noreferrer"
+              >
                 {intl.formatMessage(messages.terms)}
               </a>
 
@@ -216,3 +228,5 @@ PublishDebugLogModal.wrappedComponent.propTypes = {
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
 };
+
+export default injectIntl(PublishDebugLogModal);
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 78d5d94a0..df2bf968d 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { reaction } from 'mobx';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Input } from '@meetfranz/forms';
 import { H1 } from '@meetfranz/ui';
 
@@ -16,19 +16,20 @@ import ServicesStore from '../../stores/ServicesStore';
 const messages = defineMessages({
   title: {
     id: 'feature.quickSwitch.title',
-    defaultMessage: '!!!QuickSwitch',
+    defaultMessage: 'QuickSwitch',
   },
   search: {
     id: 'feature.quickSwitch.search',
-    defaultMessage: '!!!Search...',
+    defaultMessage: 'Search...',
   },
   info: {
     id: 'feature.quickSwitch.info',
-    defaultMessage: '!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.',
+    defaultMessage:
+      'Select a service with TAB, ↑ and ↓. Open a service with ENTER.',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   modal: {
     width: '80%',
     maxWidth: 600,
@@ -80,20 +81,19 @@ const styles = (theme) => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class QuickSwitchModal extends Component {
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class QuickSwitchModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     selected: 0,
     search: '',
     wasPrevVisible: false,
-  }
+  };
 
   ARROW_DOWN = 40;
 
@@ -118,9 +118,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     this.openService = this.openService.bind(this);
 
     reaction(
-      () => (
-        ModalState.isModalVisible
-      ),
+      () => ModalState.isModalVisible,
       () => {
         this._handleVisibilityChange();
       },
@@ -140,10 +138,17 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   // Get currently shown services
   services() {
     let services = [];
-    if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) {
+    if (
+      this.state.search &&
+      compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0
+    ) {
       // Apply simple search algorythm to list of all services
       services = this.props.stores.services.allDisplayed;
-      services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
+      services = services.filter(
+        service =>
+          service.name.toLowerCase().search(this.state.search.toLowerCase()) !==
+          -1,
+      );
     } else {
       // Add the currently active service first
       const currentService = this.props.stores.services.active;
@@ -186,14 +191,14 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   // Change the selected service
   // factor should be -1 or 1
   changeSelected(factor) {
-    this.setState((state) => {
+    this.setState(state => {
       let newSelected = state.selected + factor;
       const services = this.services().length;
 
       // Roll around when on edge of list
       if (state.selected < 1 && factor === -1) {
         newSelected = services - 1;
-      } else if ((state.selected >= (services - 1)) && factor === 1) {
+      } else if (state.selected >= services - 1 && factor === 1) {
         newSelected = 0;
       }
 
@@ -286,17 +291,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      openService,
-    } = this;
+    const { openService } = this;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
     const services = this.services();
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -318,12 +319,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         </div>
 
         <div className={classes.services}>
-          { services.map((service, index) => (
+          {services.map((service, index) => (
             <div
-              className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`}
+              className={`${classes.service} ${
+                this.state.selected === index
+                  ? `${classes.activeService} active`
+                  : ''
+              } service`}
               onClick={() => openService(index)}
               key={service.id}
-              ref={(el) => {
+              ref={el => {
                 this.serviceElements[index] = el;
               }}
             >
@@ -332,9 +337,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
                 className={classes.serviceIcon}
                 alt={service.recipe.name}
               />
-              <div>
-                { service.name }
-              </div>
+              <div>{service.name}</div>
             </div>
           ))}
         </div>
@@ -356,3 +359,5 @@ QuickSwitchModal.wrappedComponent.propTypes = {
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
 };
+
+export default injectIntl(QuickSwitchModal);
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index bebf52c08..97fa20dcc 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import {
   mdiReload,
@@ -16,23 +16,23 @@ import {
 const messages = defineMessages({
   goHome: {
     id: 'webControls.goHome',
-    defaultMessage: '!!!Home',
+    defaultMessage: 'Home',
   },
   openInBrowser: {
     id: 'webControls.openInBrowser',
-    defaultMessage: '!!!Open in Browser',
+    defaultMessage: 'Open in Browser',
   },
   back: {
     id: 'webControls.back',
-    defaultMessage: '!!!Back',
+    defaultMessage: 'Back',
   },
   forward: {
     id: 'webControls.forward',
-    defaultMessage: '!!!Forward',
+    defaultMessage: 'Forward',
   },
   reload: {
     id: 'webControls.reload',
-    defaultMessage: '!!!Reload',
+    defaultMessage: 'Reload',
   },
 });
 
@@ -109,10 +109,6 @@ class WebControls extends Component {
     navigate: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static getDerivedStateFromProps(props, state) {
     const { url } = props;
     const { editUrl } = state;
@@ -148,7 +144,7 @@ class WebControls extends Component {
 
     const { inputUrl, editUrl } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -241,4 +237,4 @@ class WebControls extends Component {
   }
 }
 
-export default WebControls;
+export default injectIntl(WebControls);
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 15b97121d..c9b05b87f 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
 import Form from '../../../lib/Form';
@@ -11,11 +11,11 @@ import { workspaceStore } from '../index';
 const messages = defineMessages({
   submitButton: {
     id: 'settings.workspace.add.form.submitButton',
-    defaultMessage: '!!!Create workspace',
+    defaultMessage: 'Create workspace',
   },
   name: {
     id: 'settings.workspace.add.form.name',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
 });
 
@@ -32,12 +32,9 @@ const styles = () => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class CreateWorkspaceForm extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static propTypes = {
     classes: PropTypes.object.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -45,7 +42,7 @@ class CreateWorkspaceForm extends Component {
   };
 
   form = (() => {
-    const { intl } = this.context;
+    const { intl } = this.props;
     return new Form({
       fields: {
         name: {
@@ -61,7 +58,7 @@ class CreateWorkspaceForm extends Component {
   submitForm() {
     const { form } = this;
     form.submit({
-      onSuccess: async (f) => {
+      onSuccess: async f => {
         const { onSubmit } = this.props;
         const values = f.values();
         onSubmit(values);
@@ -70,7 +67,7 @@ class CreateWorkspaceForm extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { classes, isSubmitting } = this.props;
     const { form } = this;
     return (
@@ -95,4 +92,4 @@ class CreateWorkspaceForm extends Component {
   }
 }
 
-export default CreateWorkspaceForm;
+export default injectIntl(CreateWorkspaceForm);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index c97d4bd9c..cae95e9ed 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
@@ -20,40 +20,40 @@ import Toggle from '../../../components/ui/Toggle';
 const messages = defineMessages({
   buttonDelete: {
     id: 'settings.workspace.form.buttonDelete',
-    defaultMessage: '!!!Delete workspace',
+    defaultMessage: 'Delete workspace',
   },
   buttonSave: {
     id: 'settings.workspace.form.buttonSave',
-    defaultMessage: '!!!Save workspace',
+    defaultMessage: 'Save workspace',
   },
   name: {
     id: 'settings.workspace.form.name',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
   yourWorkspaces: {
     id: 'settings.workspace.form.yourWorkspaces',
-    defaultMessage: '!!!Your workspaces',
+    defaultMessage: 'Your workspaces',
   },
   keepLoaded: {
     id: 'settings.workspace.form.keepLoaded',
-    defaultMessage: '!!!Keep this workspace loaded*',
+    defaultMessage: 'Keep this workspace loaded*',
   },
   keepLoadedInfo: {
     id: 'settings.workspace.form.keepLoadedInfo',
     defaultMessage:
-      '!!!*This option will be overwritten by the global "Keep all workspaces loaded" option.',
+      '*This option will be overwritten by the global "Keep all workspaces loaded" option.',
   },
   servicesInWorkspaceHeadline: {
     id: 'settings.workspace.form.servicesInWorkspaceHeadline',
-    defaultMessage: '!!!Services in this Workspace',
+    defaultMessage: 'Services in this Workspace',
   },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
-    defaultMessage: '!!!Start by adding a service.',
+    defaultMessage: 'Start by adding a service.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
-    defaultMessage: '!!!Discover services',
+    defaultMessage: 'Discover services',
   },
 });
 
@@ -72,10 +72,6 @@ const styles = () => ({
 @injectSheet(styles)
 @observer
 class EditWorkspaceForm extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static propTypes = {
     classes: PropTypes.object.isRequired,
     onDelete: PropTypes.func.isRequired,
@@ -97,7 +93,7 @@ class EditWorkspaceForm extends Component {
   }
 
   prepareWorkspaceForm(workspace) {
-    const { intl } = this.context;
+    const { intl } = this.props;
     return new Form({
       fields: {
         name: {
@@ -120,7 +116,7 @@ class EditWorkspaceForm extends Component {
 
   save(form) {
     form.submit({
-      onSuccess: async (f) => {
+      onSuccess: async f => {
         const { onSave } = this.props;
         const values = f.values();
         onSave(values);
@@ -146,7 +142,7 @@ class EditWorkspaceForm extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       classes,
       workspace,
@@ -194,7 +190,7 @@ class EditWorkspaceForm extends Component {
               </div>
             ) : (
               <>
-                {services.map((s) => (
+                {services.map(s => (
                   <WorkspaceServiceListItem
                     key={s.id}
                     service={s}
@@ -233,4 +229,4 @@ class EditWorkspaceForm extends Component {
   }
 }
 
-export default EditWorkspaceForm;
+export default injectIntl(EditWorkspaceForm);
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 1138f23d7..03a829a64 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
@@ -14,27 +14,27 @@ import { workspaceStore } from '../index';
 const messages = defineMessages({
   headline: {
     id: 'workspaceDrawer.headline',
-    defaultMessage: '!!!Workspaces',
+    defaultMessage: 'Workspaces',
   },
   allServices: {
     id: 'workspaceDrawer.allServices',
-    defaultMessage: '!!!All services',
+    defaultMessage: 'All services',
   },
   workspacesSettingsTooltip: {
     id: 'workspaceDrawer.workspacesSettingsTooltip',
-    defaultMessage: '!!!Workspaces settings',
+    defaultMessage: 'Workspaces settings',
   },
   workspaceFeatureInfo: {
     id: 'workspaceDrawer.workspaceFeatureInfo',
-    defaultMessage: '!!!Info about workspace feature',
+    defaultMessage: 'Info about workspace feature',
   },
   addNewWorkspaceLabel: {
     id: 'workspaceDrawer.addNewWorkspaceLabel',
-    defaultMessage: '!!!add new workspace',
+    defaultMessage: 'add new workspace',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
@@ -85,34 +85,26 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceDrawer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     getServicesForWorkspace: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentDidMount() {
     ReactTooltip.rebuild();
   }
 
   render() {
-    const {
-      classes,
-      getServicesForWorkspace,
-    } = this.props;
-    const { intl } = this.context;
-    const {
-      activeWorkspace,
-      isSwitchingWorkspace,
-      nextWorkspace,
-      workspaces,
-    } = workspaceStore;
-    const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
+    const { classes, getServicesForWorkspace } = this.props;
+    const { intl } = this.props;
+    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } =
+      workspaceStore;
+    const actualWorkspace = isSwitchingWorkspace
+      ? nextWorkspace
+      : activeWorkspace;
     return (
       <div className={`${classes.drawer} workspaces-drawer`}>
         <H1 className={classes.headline}>
@@ -122,7 +114,9 @@ class WorkspaceDrawer extends Component {
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
             }}
-            data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
+            data-tip={`${intl.formatMessage(
+              messages.workspacesSettingsTooltip,
+            )}`}
           >
             <Icon
               icon={mdiSettings}
@@ -152,7 +146,9 @@ class WorkspaceDrawer extends Component {
                 workspaceActions.activate({ workspace });
                 workspaceActions.toggleWorkspaceDrawer();
               }}
-              onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
+              onContextMenuEditClick={() =>
+                workspaceActions.edit({ workspace })
+              }
               services={getServicesForWorkspace(workspace)}
               shortcutIndex={index + 1}
             />
@@ -168,9 +164,7 @@ class WorkspaceDrawer extends Component {
               size={1}
               className={classes.workspacesSettingsButtonIcon}
             />
-            <span>
-              {intl.formatMessage(messages.addNewWorkspaceLabel)}
-            </span>
+            <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
           </div>
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
@@ -179,4 +173,4 @@ class WorkspaceDrawer extends Component {
   }
 }
 
-export default WorkspaceDrawer;
+export default injectIntl(WorkspaceDrawer);
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 252158364..82e1b81a4 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -4,17 +4,17 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { altKey, cmdOrCtrlShortcutKey } from '../../../environment';
 
 const messages = defineMessages({
   noServicesAddedYet: {
     id: 'workspaceDrawer.item.noServicesAddedYet',
-    defaultMessage: '!!!No services added yet',
+    defaultMessage: 'No services added yet',
   },
   contextMenuEdit: {
     id: 'workspaceDrawer.item.contextMenuEdit',
-    defaultMessage: '!!!edit',
+    defaultMessage: 'edit',
   },
 });
 
@@ -82,10 +82,6 @@ class WorkspaceDrawerItem extends Component {
     onContextMenuEditClick: null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       classes,
@@ -96,7 +92,8 @@ class WorkspaceDrawerItem extends Component {
       services,
       shortcutIndex,
     } = this.props;
-    const { intl } = this.context;
+
+    const { intl } = this.props;
 
     const contextMenuTemplate = [
       {
@@ -125,7 +122,11 @@ class WorkspaceDrawerItem extends Component {
           onContextMenuEditClick && contextMenu.popup(getCurrentWindow())
         }
         data-tip={`${
-          shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(false)}+${shortcutIndex})` : ''
+          shortcutIndex <= 9
+            ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(
+              false,
+            )}+${shortcutIndex})`
+            : ''
         }`}
       >
         <span
@@ -151,4 +152,4 @@ class WorkspaceDrawerItem extends Component {
   }
 }
 
-export default WorkspaceDrawerItem;
+export default injectIntl(WorkspaceDrawerItem);
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index 85fc02d51..ec7b19add 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
 
-const styles = (theme) => ({
+const styles = theme => ({
   row: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
@@ -17,7 +16,8 @@ const styles = (theme) => ({
   columnName: {},
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -25,18 +25,12 @@ class WorkspaceItem extends Component {
     onItemClick: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, workspace, onItemClick } = this.props;
 
     return (
       <tr className={classes.row}>
-        <td onClick={() => onItemClick(workspace)}>
-          {workspace.name}
-        </td>
+        <td onClick={() => onItemClick(workspace)}>{workspace.name}</td>
       </tr>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index c8ec0bc4c..33a82cf4b 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -4,14 +4,14 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { Loader } from '@meetfranz/ui';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   switchingTo: {
     id: 'workspaces.switchingIndicator.switchingTo',
-    defaultMessage: '!!!Switching to',
+    defaultMessage: 'Switching to',
   },
 });
 
@@ -61,13 +61,9 @@ class WorkspaceSwitchingIndicator extends Component {
     theme: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, theme } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace
@@ -89,4 +85,4 @@ class WorkspaceSwitchingIndicator extends Component {
   }
 }
 
-export default WorkspaceSwitchingIndicator;
+export default injectIntl(WorkspaceSwitchingIndicator);
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 5f34204f1..fd279f896 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox } from '@meetfranz/ui';
 
@@ -16,35 +16,35 @@ import UIStore from '../../../stores/UIStore';
 const messages = defineMessages({
   headline: {
     id: 'settings.workspaces.headline',
-    defaultMessage: '!!!Your workspaces',
+    defaultMessage: 'Your workspaces',
   },
   noServicesAdded: {
     id: 'settings.workspaces.noWorkspacesAdded',
-    defaultMessage: "!!!You haven't created any workspaces yet.",
+    defaultMessage: "You haven't created any workspaces yet.",
   },
   workspacesRequestFailed: {
     id: 'settings.workspaces.workspacesRequestFailed',
-    defaultMessage: '!!!Could not load your workspaces',
+    defaultMessage: 'Could not load your workspaces',
   },
   tryReloadWorkspaces: {
     id: 'settings.workspaces.tryReloadWorkspaces',
-    defaultMessage: '!!!Try again',
+    defaultMessage: 'Try again',
   },
   updatedInfo: {
     id: 'settings.workspaces.updatedInfo',
-    defaultMessage: '!!!Your changes have been saved',
+    defaultMessage: 'Your changes have been saved',
   },
   deletedInfo: {
     id: 'settings.workspaces.deletedInfo',
-    defaultMessage: '!!!Workspace has been deleted',
+    defaultMessage: 'Workspace has been deleted',
   },
   workspaceFeatureInfo: {
     id: 'settings.workspaces.workspaceFeatureInfo',
-    defaultMessage: '!!!Info about workspace feature',
+    defaultMessage: 'Info about workspace feature',
   },
   workspaceFeatureHeadline: {
     id: 'settings.workspaces.workspaceFeatureHeadline',
-    defaultMessage: '!!!Less is More: Introducing Ferdi Workspaces',
+    defaultMessage: 'Less is More: Introducing Ferdi Workspaces',
   },
 });
 
@@ -83,10 +83,6 @@ class WorkspacesDashboard extends Component {
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       classes,
@@ -99,7 +95,7 @@ class WorkspacesDashboard extends Component {
       workspaces,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -193,7 +189,7 @@ class WorkspacesDashboard extends Component {
   }
 }
 
-export default WorkspacesDashboard;
+export default injectIntl(WorkspacesDashboard);
 
 WorkspacesDashboard.wrappedComponent.propTypes = {
   stores: PropTypes.shape({