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

1 files changed, 189 insertions, 0 deletions

diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
new file mode 100644
index 000000000..bba4485ff
--- /dev/null
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -0,0 +1,189 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+
+import Workspace from '../models/Workspace';
+import Service from '../../../models/Service';
+import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
+import WorkspaceServiceListItem from './WorkspaceServiceListItem';
+import Request from '../../../stores/lib/Request';
+import { gaEvent } from '../../../lib/analytics';
+import { GA_CATEGORY_WORKSPACES } from '../index';
+
+const messages = defineMessages({
+  buttonDelete: {
+    id: 'settings.workspace.form.buttonDelete',
+    defaultMessage: '!!!Delete workspace',
+  },
+  buttonSave: {
+    id: 'settings.workspace.form.buttonSave',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+  yourWorkspaces: {
+    id: 'settings.workspace.form.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
+  servicesInWorkspaceHeadline: {
+    id: 'settings.workspace.form.servicesInWorkspaceHeadline',
+    defaultMessage: '!!!Services in this Workspace',
+  },
+});
+
+const styles = () => ({
+  nameInput: {
+    height: 'auto',
+  },
+  serviceList: {
+    height: 'auto',
+  },
+});
+
+@injectSheet(styles) @observer
+class EditWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
+    deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
+  };
+
+  form = this.prepareWorkspaceForm(this.props.workspace);
+
+  componentWillReceiveProps(nextProps) {
+    const { workspace } = this.props;
+    if (workspace.id !== nextProps.workspace.id) {
+      this.form = this.prepareWorkspaceForm(nextProps.workspace);
+    }
+  }
+
+  prepareWorkspaceForm(workspace) {
+    const { intl } = this.context;
+    return new Form({
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+          validators: [required],
+        },
+        services: {
+          value: workspace.services.slice(),
+        },
+      },
+    });
+  }
+
+  save(form) {
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSave } = this.props;
+        const values = f.values();
+        onSave(values);
+        gaEvent(GA_CATEGORY_WORKSPACES, 'save');
+      },
+      onError: async () => {},
+    });
+  }
+
+  delete() {
+    const { onDelete } = this.props;
+    onDelete();
+    gaEvent(GA_CATEGORY_WORKSPACES, 'delete');
+  }
+
+  toggleService(service) {
+    const servicesField = this.form.$('services');
+    const serviceIds = servicesField.value;
+    if (serviceIds.includes(service.id)) {
+      serviceIds.splice(serviceIds.indexOf(service.id), 1);
+    } else {
+      serviceIds.push(service.id);
+    }
+    servicesField.set(serviceIds);
+  }
+
+  render() {
+    const { intl } = this.context;
+    const {
+      classes,
+      workspace,
+      services,
+      deleteWorkspaceRequest,
+      updateWorkspaceRequest,
+    } = this.props;
+    const { form } = this;
+    const workspaceServices = form.$('services').value;
+    const isDeleting = deleteWorkspaceRequest.isExecuting;
+    const isSaving = updateWorkspaceRequest.isExecuting;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/workspaces">
+              {intl.formatMessage(messages.yourWorkspaces)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {workspace.name}
+          </span>
+        </div>
+        <div className="settings__body">
+          <div className={classes.nameInput}>
+            <Input {...form.$('name').bind()} />
+          </div>
+          <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
+          <div className={classes.serviceList}>
+            {services.map(s => (
+              <WorkspaceServiceListItem
+                key={s.id}
+                service={s}
+                isInWorkspace={workspaceServices.includes(s.id)}
+                onToggle={() => this.toggleService(s)}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="settings__controls">
+          {/* ===== Delete Button ===== */}
+          <Button
+            label={intl.formatMessage(messages.buttonDelete)}
+            loaded={false}
+            busy={isDeleting}
+            buttonType={isDeleting ? 'secondary' : 'danger'}
+            className="settings__delete-button"
+            disabled={isDeleting}
+            onClick={this.delete.bind(this)}
+          />
+          {/* ===== Save Button ===== */}
+          <Button
+            type="submit"
+            label={intl.formatMessage(messages.buttonSave)}
+            busy={isSaving}
+            buttonType={isSaving ? 'secondary' : 'primary'}
+            onClick={this.save.bind(this, form)}
+            disabled={isSaving}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EditWorkspaceForm;