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

2 files changed, 22 insertions, 4 deletions

diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..41881e044 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -19,14 +20,14 @@ export default theme => ({
     color: theme.colorSubscriptionContainerActionButtonColor,
     'margin-left': 'auto',
     'border-radius': theme.borderRadiusSmall,
-    padding: [2, 4],
+    padding: [4, 8],
     'font-size': 12,
     pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },