8 files changed, 304 insertions, 1 deletions

diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
new file mode 100644
index 000000000..30866af96
--- /dev/null
+++ b/src/features/workspaces/actions.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import Workspace from './models/Workspace';
+
+export default {
+  edit: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+};
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
new file mode 100644
index 000000000..b2c2a4830
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Workspace from '../models/Workspace';
+
+// const messages = defineMessages({});
+
+@observer
+class WorkspaceItem extends Component {
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspace, onItemClick } = this.props;
+    // const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'workspace-table__row': true,
+        })}
+      >
+        <td
+          className="workspace-table__column-name"
+          onClick={() => onItemClick(workspace)}
+        >
+          {workspace.name}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default WorkspaceItem;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
new file mode 100644
index 000000000..2a8b3a5ee
--- /dev/null
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Loader from '../../../components/ui/Loader';
+import WorkspaceItem from './WorkspaceItem';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.workspaces.headline',
+    defaultMessage: '!!!Your workspaces',
+  },
+  noServicesAdded: {
+    id: 'settings.workspaces.noWorkspacesAdded',
+    defaultMessage: '!!!You haven\'t added any workspaces yet.',
+  },
+});
+
+@observer
+class WorkspacesDashboard extends Component {
+  static propTypes = {
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onWorkspaceClick: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspaces, isLoading, onWorkspaceClick } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <table className="workspace-table">
+              <tbody>
+                {workspaces.map(workspace => (
+                  <WorkspaceItem
+                    key={workspace.id}
+                    workspace={workspace}
+                    onItemClick={w => onWorkspaceClick(w)}
+                  />
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspacesDashboard;
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
new file mode 100644
index 000000000..d8c52f586
--- /dev/null
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import Form from '../../../lib/Form';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { gaPage } from '../../../lib/analytics';
+import { state } from '../state';
+
+const messages = defineMessages({
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+  yourWorkspaces: {
+    id: 'settings.workspace.form.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class EditWorkspaceScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Workspace/Edit');
+  }
+
+  prepareForm(workspace) {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+        },
+      },
+    };
+    return new Form(config);
+  }
+
+  render() {
+    const { intl } = this.context;
+    const { workspaceBeingEdited } = state;
+    if (!workspaceBeingEdited) return null;
+
+    // const form = this.prepareForm(workspaceBeingEdited);
+
+    return (
+      <ErrorBoundary>
+        <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">
+              {workspaceBeingEdited.name}
+            </span>
+          </div>
+          <div className="settings__body">
+            test
+          </div>
+        </div>
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default EditWorkspaceScreen;
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
new file mode 100644
index 000000000..f129edec5
--- /dev/null
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { gaPage } from '../../../lib/analytics';
+import { state } from '../state';
+import WorkspacesDashboard from '../components/WorkspacesDashboard';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+
+@inject('actions') @observer
+class WorkspacesScreen extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        edit: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Workspaces Dashboard');
+  }
+
+  render() {
+    const { workspace } = this.props.actions;
+    return (
+      <ErrorBoundary>
+        <WorkspacesDashboard
+          workspaces={state.workspaces}
+          isLoading={state.isLoading}
+          onWorkspaceClick={w => workspace.edit({ workspace: w })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default WorkspacesScreen;
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
new file mode 100644
index 000000000..ede2710dc
--- /dev/null
+++ b/src/features/workspaces/models/Workspace.js
@@ -0,0 +1,25 @@
+import { observable } from 'mobx';
+
+export default class Workspace {
+  id = null;
+
+  @observable name = null;
+
+  @observable order = null;
+
+  @observable services = [];
+
+  @observable userId = null;
+
+  constructor(data) {
+    if (!data.id) {
+      throw Error('Workspace requires Id');
+    }
+
+    this.id = data.id;
+    this.name = data.name;
+    this.order = data.order;
+    this.services = data.services;
+    this.userId = data.userId;
+  }
+}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index aab66708b..ea61cec31 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,7 +1,7 @@
 import { observable, reaction } from 'mobx';
 import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
-import Workspace from '../../models/Workspace';
+import Workspace from './models/Workspace';
 import { matchRoute } from '../../helpers/routing-helpers';
 
 const debug = require('debug')('Franz:feature:workspaces');
diff --git a/src/features/workspaces/styles/workspaces-table.scss b/src/features/workspaces/styles/workspaces-table.scss
new file mode 100644
index 000000000..6d0e7b4f5
--- /dev/null
+++ b/src/features/workspaces/styles/workspaces-table.scss
@@ -0,0 +1,53 @@
+@import '../../../styles/config';
+
+.theme__dark .workspace-table {
+  .workspace-table__column-info .mdi { color: $dark-theme-gray-lightest; }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $dark-theme-gray-darker;
+
+    &:hover { background: $dark-theme-gray-darker; }
+    &.workspace-table__row--disabled { color: $dark-theme-gray; }
+  }
+}
+
+.workspace-table {
+  width: 100%;
+
+  .workspace-table__toggle {
+    width: 60px;
+
+    .franz-form__field {
+      margin-bottom: 0;
+    }
+  }
+
+  .workspace-table__column-action {
+    width: 40px
+  }
+
+  .workspace-table__column-info {
+    width: 40px;
+
+    .mdi {
+      color: $theme-gray-light;
+      display: block;
+      font-size: 18px;
+    }
+  }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $theme-gray-lightest;
+
+    &:hover {
+      cursor: initial;
+      background: $theme-gray-lightest;
+    }
+
+    &.workspace-table__row--disabled {
+      color: $theme-gray-light;
+    }
+  }
+
+  td { padding: 10px; }
+}