feat(App): Added Workspaces for all your daily routines 🥳

* merge default and fetched feature configs

* ignore intellij project files

* basic setup for workspaces feature

* define workspaces as premium feature

* add workspaces menu item in settings dialog

* basic setup of workspaces settings screen

* fix eslint error

* assign react key prop to workspace items

* add styles for workspace table

* setup logic to display workspace edit page

* consolidate workspace feature for further development

* prepare basic workspace edit form

* add on enter key handler for form input component

* add form for creating workspaces

* small fixes

* adds flow for deleting workspaces

* stop tracking google analytics in components

* pin gulp-sass-variables version to 1.1.1

* fix merge conflict

* fix bug in form input library

* improve workspace form setup

* finish basic workspace settings

* finish workspaces mvp

* fix eslint issues

* remove dev logs

* detach service when underlying webview unmounts

* disable no-param-reassign eslint rule

* add workspace drawer

* change workspace switch shortcuts to start with zero

* add workspace drawer toggle menu item and shortcut

* improve workspace switching ux

* style add workspace icon in drawer like the sidebar icons

* improve workspace drawer layout

* add i18n messages for service loading and workspace switching

* small fixes

* add tooltip to add workspace button in drawer

* add workspaces count badge in settings navigation

* fix merge conflicts with latest develop

* refactor state management for workspace feature

* reset api requests when workspace feature is stopped

* hide workspace feature if it is disabled

* handle get workspaces request errors in the ui

* show infobox when updating workspaces

* indicate any server interaction with spinners and infoboxes

* add analytic events for workspace actions

* improve styling of workspace switch indicator

* add workspace premium notice to dashboard

* add workspace feature info in drawer for free users

* add workspace premium badge in settings nav

* fix premium workspace badge in settings menu for light theme

* fix active workspaces settings premium badge in light theme

* give upgrade account button a bit more padding

* add open last used workspace logic

* use mobx-localstorage directly in the store

* fix wrong workspace tooltip shortcut in sidebar

* fix bug in workspace feature initialization

* show workspaces intro in drawer when user has none yet

* fix issues for users that have workspace but downgraded to free

* border radius for premium intro in workspace settings

* close workspace drawer after clicking on a workspace

* add hover effect for drawer workspace items

* ensure drawer is open on workspace settings routes

* add small text label for adding new workspace to drawer

* make workspace settings list items taller

* refactor workspace table css away from legacy styles

* render workspace service list like services + toggle

* change plus icon in workspace drawer to settings icon

* autofocus create workspace input field

* add css transition to drawer workspace item hover

* fix drawer add workspace label styles

* refactors workspace theme vars into object structure

* improve contrast of workspace switching indicator

* added generic pro badge component for settings nav

* add premium badge to workspace drawer headline

* add context menu for workspace drawer items

* handle deleted services that are attached to workspaces

4 files changed, 38 insertions, 4 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 953f702f8..993b0a44a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -2,8 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
+import { ProBadge } from '@meetfranz/ui';
 
 import Link from '../../ui/Link';
+import { workspaceStore } from '../../../features/workspaces';
+import UIStore from '../../../stores/UIStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -14,6 +17,10 @@ const messages = defineMessages({
     id: 'settings.navigation.yourServices',
     defaultMessage: '!!!Your services',
   },
+  yourWorkspaces: {
+    id: 'settings.navigation.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
   account: {
     id: 'settings.navigation.account',
     defaultMessage: '!!!Account',
@@ -34,7 +41,11 @@ const messages = defineMessages({
 
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
     serviceCount: PropTypes.number.isRequired,
+    workspaceCount: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -42,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount } = this.props;
+    const { serviceCount, workspaceCount, stores } = this.props;
+    const { isDarkThemeActive } = stores.ui;
     const { intl } = this.context;
 
     return (
@@ -63,6 +75,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
+        {workspaceStore.isFeatureEnabled ? (
+          <Link
+            to="/settings/workspaces"
+            className="settings-navigation__link"
+            activeClassName="is-active"
+          >
+            {intl.formatMessage(messages.yourWorkspaces)}
+            {' '}
+            {workspaceStore.isPremiumUpgradeRequired ? (
+              <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} />
+            ) : (
+              <span className="badge">{workspaceCount}</span>
+            )}
+          </Link>
+        ) : null}
         <Link
           to="/settings/user"
           className="settings-navigation__link"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 21616b5de..4ba2eb844 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -341,14 +341,20 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer condition={isSpellcheckerPremiumFeature}>
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+            >
               <div className="settings__settings-group">
                 <Select field={form.$('spellcheckerLanguage')} />
               </div>
             </PremiumFeatureContainer>
 
             {isProxyFeatureEnabled && (
-              <PremiumFeatureContainer condition={isProxyPremiumFeature}>
+              <PremiumFeatureContainer
+                condition={isProxyPremiumFeature}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
+              >
                 <div className="settings__settings-group">
                   <h3>
                     {intl.formatMessage(messages.headlineProxy)}
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a12df7372..53bae12df 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -65,7 +65,7 @@ export default @observer class ServicesDashboard extends Component {
 
   static defaultProps = {
     searchNeedle: '',
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a92e559f3..8429d0ecb 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -170,6 +170,7 @@ export default @observer class EditSettingsForm extends Component {
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
                 <Toggle