3 files changed, 60 insertions, 23 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>
             )}