4 files changed, 135 insertions, 37 deletions

diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 2c00ea63c..cddbb2b04 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -7,7 +7,7 @@ import injectSheet from 'react-jss';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import { gaEvent } from '../../../lib/analytics';
-import { GA_CATEGORY_WORKSPACES } from '../index';
+import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
 
 const messages = defineMessages({
   submitButton: {
@@ -82,7 +82,7 @@ class CreateWorkspaceForm extends Component {
           {...form.$('name').bind()}
           showLabel={false}
           onEnterKey={this.submitForm.bind(this, form)}
-          focus
+          focus={workspaceStore.isUserAllowedToUseFeature}
         />
         <Button
           className={classes.submitButton}
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index bba4485ff..e602ebd5a 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -36,6 +36,14 @@ const messages = defineMessages({
     id: 'settings.workspace.form.servicesInWorkspaceHeadline',
     defaultMessage: '!!!Services in this Workspace',
   },
+  noServicesAdded: {
+    id: 'settings.services.noServicesAdded',
+    defaultMessage: '!!!You haven\'t added any services yet.',
+  },
+  discoverServices: {
+    id: 'settings.services.discoverServices',
+    defaultMessage: '!!!Discover services',
+  },
 });
 
 const styles = () => ({
@@ -150,14 +158,29 @@ class EditWorkspaceForm extends Component {
           </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)}
-              />
-            ))}
+            {services.length === 0 ? (
+              <div className="align-middle settings__empty-state">
+                {/* ===== Empty state ===== */}
+                <p className="settings__empty-text">
+                  <span className="emoji">
+                    <img src="./assets/images/emoji/sad.png" alt="" />
+                  </span>
+                  {intl.formatMessage(messages.noServicesAdded)}
+                </p>
+                <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+              </div>
+            ) : (
+              <Fragment>
+                {services.map(s => (
+                  <WorkspaceServiceListItem
+                    key={s.id}
+                    service={s}
+                    isInWorkspace={workspaceServices.includes(s.id)}
+                    onToggle={() => this.toggleService(s)}
+                  />
+                ))}
+              </Fragment>
+            )}
           </div>
         </div>
         <div className="settings__controls">
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index dd4381a15..09c98ab8c 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -170,18 +170,32 @@ class WorkspacesDashboard extends Component {
                     {intl.formatMessage(messages.workspacesRequestFailed)}
                   </Infobox>
                 ) : (
-                  <table className={classes.table}>
-                    {/* ===== Workspaces list ===== */}
-                    <tbody>
-                      {workspaces.map(workspace => (
-                        <WorkspaceItem
-                          key={workspace.id}
-                          workspace={workspace}
-                          onItemClick={w => onWorkspaceClick(w)}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
+                  <Fragment>
+                    {workspaces.length === 0 ? (
+                      <div className="align-middle settings__empty-state">
+                        {/* ===== Workspaces empty state ===== */}
+                        <p className="settings__empty-text">
+                          <span className="emoji">
+                            <img src="./assets/images/emoji/sad.png" alt="" />
+                          </span>
+                          {intl.formatMessage(messages.noServicesAdded)}
+                        </p>
+                      </div>
+                    ) : (
+                      <table className={classes.table}>
+                        {/* ===== Workspaces list ===== */}
+                        <tbody>
+                          {workspaces.map(workspace => (
+                            <WorkspaceItem
+                              key={workspace.id}
+                              workspace={workspace}
+                              onItemClick={w => onWorkspaceClick(w)}
+                            />
+                          ))}
+                        </tbody>
+                      </table>
+                    )}
+                  </Fragment>
                 )}
               </Fragment>
             )}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index ea601700e..51a7f3651 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -14,6 +14,8 @@ import {
   updateWorkspaceRequest,
 } from './api';
 import { WORKSPACES_ROUTES } from './index';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
 
 const debug = require('debug')('Franz:feature:workspaces:store');
 
@@ -51,37 +53,78 @@ export default class WorkspacesStore extends FeatureStore {
     return getUserWorkspacesRequest.wasExecuted && this.workspaces.length > 0;
   }
 
+  @computed get isUserAllowedToUseFeature() {
+    return !this.isPremiumUpgradeRequired;
+  }
+
+  @computed get isAnyWorkspaceActive() {
+    return !!this.activeWorkspace;
+  }
+
+  // ========== PRIVATE PROPERTIES ========= //
+
+  _wasDrawerOpenBeforeSettingsRoute = null;
+
+  _freeUserActions = [];
+
+  _premiumUserActions = [];
+
+  _allActions = [];
+
+  _freeUserReactions = [];
+
+  _premiumUserReactions = [];
+
+  _allReactions = [];
+
+  // ========== PUBLIC API ========= //
+
   start(stores, actions) {
     debug('WorkspacesStore::start');
     this.stores = stores;
     this.actions = actions;
 
-    this._listenToActions([
+    // ACTIONS
+
+    this._freeUserActions = createActionBindings([
+      [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
+      [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
+    ]);
+    this._premiumUserActions = createActionBindings([
       [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._allActions = this._freeUserActions.concat(this._premiumUserActions);
+    this._registerActions(this._allActions);
 
-    this._startReactions([
-      this._setWorkspaceBeingEditedReaction,
-      this._setActiveServiceOnWorkspaceSwitchReaction,
+    // REACTIONS
+
+    this._freeUserReactions = createReactions([
+      this._stopPremiumActionsAndReactions,
+      this._openDrawerWithSettingsReaction,
       this._setFeatureEnabledReaction,
       this._setIsPremiumFeatureReaction,
-      this._activateLastUsedWorkspaceReaction,
-      this._openDrawerWithSettingsReaction,
       this._cleanupInvalidServiceReferences,
     ]);
+    this._premiumUserReactions = createReactions([
+      this._setActiveServiceOnWorkspaceSwitchReaction,
+      this._activateLastUsedWorkspaceReaction,
+      this._setWorkspaceBeingEditedReaction,
+    ]);
+    this._allReactions = this._freeUserReactions.concat(this._premiumUserReactions);
+
+    this._registerReactions(this._allReactions);
 
     getUserWorkspacesRequest.execute();
     this.isFeatureActive = true;
   }
 
   stop() {
+    super.stop();
     debug('WorkspacesStore::stop');
     this.isFeatureActive = false;
     this.activeWorkspace = null;
@@ -104,9 +147,7 @@ export default class WorkspacesStore extends FeatureStore {
     return workspace.services.map(id => services.one(id)).filter(s => !!s);
   }
 
-  // ========== PRIVATE ========= //
-
-  _wasDrawerOpenBeforeSettingsRoute = null;
+  // ========== PRIVATE METHODS ========= //
 
   _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
@@ -192,6 +233,14 @@ export default class WorkspacesStore extends FeatureStore {
     this.actions.ui.openSettings({ path: 'workspaces' });
   };
 
+  @action reorderServicesOfActiveWorkspace = async ({ oldIndex, newIndex }) => {
+    const { activeWorkspace } = this;
+    const { services } = activeWorkspace;
+    // Move services from the old to the new position
+    services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
+    await updateWorkspaceRequest.execute(activeWorkspace);
+  };
+
   // Reactions
 
   _setFeatureEnabledReaction = () => {
@@ -218,13 +267,15 @@ export default class WorkspacesStore extends FeatureStore {
   _setActiveServiceOnWorkspaceSwitchReaction = () => {
     if (!this.isFeatureActive) return;
     if (this.activeWorkspace) {
-      const services = this.stores.services.allDisplayed;
-      const activeService = services.find(s => s.isActive);
+      const activeService = this.stores.services.active;
       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 });
+        this.actions.service.setActive({
+          serviceId: workspaceServices[0].id,
+          keepActiveRoute: true,
+        });
       }
     }
   };
@@ -273,4 +324,14 @@ export default class WorkspacesStore extends FeatureStore {
       getUserWorkspacesRequest.execute();
     }
   };
+
+  _stopPremiumActionsAndReactions = () => {
+    if (!this.isUserAllowedToUseFeature) {
+      this._stopActions(this._premiumUserActions);
+      this._stopReactions(this._premiumUserReactions);
+    } else {
+      this._startActions(this._premiumUserActions);
+      this._startReactions(this._premiumUserReactions);
+    }
+  }
 }