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, 276 insertions, 0 deletions

diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
new file mode 100644
index 000000000..ea601700e
--- /dev/null
+++ b/src/features/workspaces/store.js
@@ -0,0 +1,276 @@
+import {
+  computed,
+  observable,
+  action,
+} from 'mobx';
+import localStorage from 'mobx-localstorage';
+import { matchRoute } from '../../helpers/routing-helpers';
+import { workspaceActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import {
+  createWorkspaceRequest,
+  deleteWorkspaceRequest,
+  getUserWorkspacesRequest,
+  updateWorkspaceRequest,
+} from './api';
+import { WORKSPACES_ROUTES } from './index';
+
+const debug = require('debug')('Franz:feature:workspaces:store');
+
+export default class WorkspacesStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  @observable isPremiumFeature = true;
+
+  @observable isPremiumUpgradeRequired = true;
+
+  @observable activeWorkspace = null;
+
+  @observable nextWorkspace = null;
+
+  @observable workspaceBeingEdited = null;
+
+  @observable isSwitchingWorkspace = false;
+
+  @observable isWorkspaceDrawerOpen = false;
+
+  @observable isSettingsRouteActive = null;
+
+  @computed get workspaces() {
+    if (!this.isFeatureActive) return [];
+    return getUserWorkspacesRequest.result || [];
+  }
+
+  @computed get settings() {
+    return localStorage.getItem('workspaces') || {};
+  }
+
+  @computed get userHasWorkspaces() {
+    return getUserWorkspacesRequest.wasExecuted && this.workspaces.length > 0;
+  }
+
+  start(stores, actions) {
+    debug('WorkspacesStore::start');
+    this.stores = stores;
+    this.actions = actions;
+
+    this._listenToActions([
+      [workspaceActions.edit, this._edit],
+      [workspaceActions.create, this._create],
+      [workspaceActions.delete, this._delete],
+      [workspaceActions.update, this._update],
+      [workspaceActions.activate, this._setActiveWorkspace],
+      [workspaceActions.deactivate, this._deactivateActiveWorkspace],
+      [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
+      [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
+    ]);
+
+    this._startReactions([
+      this._setWorkspaceBeingEditedReaction,
+      this._setActiveServiceOnWorkspaceSwitchReaction,
+      this._setFeatureEnabledReaction,
+      this._setIsPremiumFeatureReaction,
+      this._activateLastUsedWorkspaceReaction,
+      this._openDrawerWithSettingsReaction,
+      this._cleanupInvalidServiceReferences,
+    ]);
+
+    getUserWorkspacesRequest.execute();
+    this.isFeatureActive = true;
+  }
+
+  stop() {
+    debug('WorkspacesStore::stop');
+    this.isFeatureActive = false;
+    this.activeWorkspace = null;
+    this.nextWorkspace = null;
+    this.workspaceBeingEdited = null;
+    this.isSwitchingWorkspace = false;
+    this.isWorkspaceDrawerOpen = false;
+  }
+
+  filterServicesByActiveWorkspace = (services) => {
+    const { activeWorkspace, isFeatureActive } = this;
+    if (isFeatureActive && activeWorkspace) {
+      return this.getWorkspaceServices(activeWorkspace);
+    }
+    return services;
+  };
+
+  getWorkspaceServices(workspace) {
+    const { services } = this.stores;
+    return workspace.services.map(id => services.one(id)).filter(s => !!s);
+  }
+
+  // ========== PRIVATE ========= //
+
+  _wasDrawerOpenBeforeSettingsRoute = null;
+
+  _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
+
+  _updateSettings = (changes) => {
+    localStorage.setItem('workspaces', {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // Actions
+
+  @action _edit = ({ workspace }) => {
+    this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
+  };
+
+  @action _create = async ({ name }) => {
+    try {
+      const workspace = await createWorkspaceRequest.execute(name);
+      await getUserWorkspacesRequest.result.push(workspace);
+      this._edit({ workspace });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _delete = async ({ workspace }) => {
+    try {
+      await deleteWorkspaceRequest.execute(workspace);
+      await getUserWorkspacesRequest.result.remove(workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _update = async ({ workspace }) => {
+    try {
+      await updateWorkspaceRequest.execute(workspace);
+      // Path local result optimistically
+      const localWorkspace = this._getWorkspaceById(workspace.id);
+      Object.assign(localWorkspace, workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _setActiveWorkspace = ({ workspace }) => {
+    // Indicate that we are switching to another workspace
+    this.isSwitchingWorkspace = true;
+    this.nextWorkspace = workspace;
+    // Delay switching to next workspace so that the services loading does not drag down UI
+    setTimeout(() => {
+      this.activeWorkspace = workspace;
+      this._updateSettings({ lastActiveWorkspace: workspace.id });
+    }, 100);
+    // Indicate that we are done switching to the next workspace
+    setTimeout(() => {
+      this.isSwitchingWorkspace = false;
+      this.nextWorkspace = null;
+    }, 1000);
+  };
+
+  @action _deactivateActiveWorkspace = () => {
+    // Indicate that we are switching to default workspace
+    this.isSwitchingWorkspace = true;
+    this.nextWorkspace = null;
+    this._updateSettings({ lastActiveWorkspace: null });
+    // Delay switching to next workspace so that the services loading does not drag down UI
+    setTimeout(() => {
+      this.activeWorkspace = null;
+    }, 100);
+    // Indicate that we are done switching to the default workspace
+    setTimeout(() => { this.isSwitchingWorkspace = false; }, 1000);
+  };
+
+  @action _toggleWorkspaceDrawer = () => {
+    this.isWorkspaceDrawerOpen = !this.isWorkspaceDrawerOpen;
+  };
+
+  @action _openWorkspaceSettings = () => {
+    this.actions.ui.openSettings({ path: 'workspaces' });
+  };
+
+  // Reactions
+
+  _setFeatureEnabledReaction = () => {
+    const { isWorkspaceEnabled } = this.stores.features.features;
+    this.isFeatureEnabled = isWorkspaceEnabled;
+  };
+
+  _setIsPremiumFeatureReaction = () => {
+    const { features, user } = this.stores;
+    const { isPremium } = user.data;
+    const { isWorkspacePremiumFeature } = features.features;
+    this.isPremiumFeature = isWorkspacePremiumFeature;
+    this.isPremiumUpgradeRequired = isWorkspacePremiumFeature && !isPremium;
+  };
+
+  _setWorkspaceBeingEditedReaction = () => {
+    const { pathname } = this.stores.router.location;
+    const match = matchRoute('/settings/workspaces/edit/:id', pathname);
+    if (match) {
+      this.workspaceBeingEdited = this._getWorkspaceById(match.id);
+    }
+  };
+
+  _setActiveServiceOnWorkspaceSwitchReaction = () => {
+    if (!this.isFeatureActive) return;
+    if (this.activeWorkspace) {
+      const services = this.stores.services.allDisplayed;
+      const activeService = services.find(s => s.isActive);
+      const workspaceServices = this.getWorkspaceServices(this.activeWorkspace);
+      if (workspaceServices.length <= 0) return;
+      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
+      if (!isActiveServiceInWorkspace) {
+        this.actions.service.setActive({ serviceId: workspaceServices[0].id });
+      }
+    }
+  };
+
+  _activateLastUsedWorkspaceReaction = () => {
+    if (!this.activeWorkspace && this.userHasWorkspaces) {
+      const { lastActiveWorkspace } = this.settings;
+      if (lastActiveWorkspace) {
+        const workspace = this._getWorkspaceById(lastActiveWorkspace);
+        if (workspace) this._setActiveWorkspace({ workspace });
+      }
+    }
+  };
+
+  _openDrawerWithSettingsReaction = () => {
+    const { router } = this.stores;
+    const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT);
+    const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute;
+    const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive;
+
+    if (isSwitchingToSettingsRoute) {
+      this.isSettingsRouteActive = true;
+      this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen;
+      if (!this._wasDrawerOpenBeforeSettingsRoute) {
+        workspaceActions.toggleWorkspaceDrawer();
+      }
+    } else if (isLeavingSettingsRoute) {
+      this.isSettingsRouteActive = false;
+      if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) {
+        workspaceActions.toggleWorkspaceDrawer();
+      }
+    }
+  };
+
+  _cleanupInvalidServiceReferences = () => {
+    const { services } = this.stores;
+    let invalidServiceReferencesExist = false;
+    this.workspaces.forEach((workspace) => {
+      workspace.services.forEach((serviceId) => {
+        if (!services.one(serviceId)) {
+          invalidServiceReferencesExist = true;
+        }
+      });
+    });
+    if (invalidServiceReferencesExist) {
+      getUserWorkspacesRequest.execute();
+    }
+  };
+}