From 6fb07bcb716af76ec2e96345f37624d12d0d1af0 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 12 Mar 2019 21:36:10 +0100
Subject: implements basic release announcement feature

---
 src/components/layout/AppLayout.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 593149e72..2bda91f73 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -13,6 +13,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import AnnouncementScreen from '../../features/announcements/Component';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -64,6 +65,7 @@ export default @observer class AppLayout extends Component {
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    isAnnouncementVisible: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -93,6 +95,7 @@ export default @observer class AppLayout extends Component {
       areRequiredRequestsLoading,
       darkMode,
       isDelayAppScreenVisible,
+      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -166,6 +169,7 @@ export default @observer class AppLayout extends Component {
                 {isDelayAppScreenVisible && (<DelayApp />)}
                 <BasicAuth />
                 <ShareFranz />
+                {isAnnouncementVisible && (<AnnouncementScreen />)}
                 {services}
               </div>
             </div>
-- 
cgit v1.2.3-70-g09d2


From e4f1862644d5921e2ee77078c10e16efa3e58c7b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 19 Mar 2019 19:38:56 +0100
Subject: add workspace drawer

---
 packages/theme/src/themes/dark/index.ts            |  9 +++
 packages/theme/src/themes/default/index.ts         | 10 +++
 src/components/layout/AppLayout.js                 | 24 +++++-
 src/components/layout/Sidebar.js                   | 42 +++++++++-
 src/components/services/content/ServiceView.js     |  1 +
 src/containers/layout/AppLayoutContainer.js        | 14 ++++
 src/features/workspaces/actions.js                 |  6 +-
 .../workspaces/components/WorkspaceDrawer.js       | 94 ++++++++++++++++++++++
 .../workspaces/components/WorkspaceDrawerItem.js   | 88 ++++++++++++++++++++
 src/features/workspaces/state.js                   |  1 +
 src/features/workspaces/store.js                   | 12 ++-
 src/i18n/locales/defaultMessages.json              | 57 +++++++++++++
 src/i18n/locales/en-US.json                        |  8 +-
 .../messages/src/components/layout/AppLayout.json  | 24 +++---
 .../messages/src/components/layout/Sidebar.json    | 26 ++++++
 .../workspaces/components/WorkspaceDrawer.json     | 28 +++++++
 src/lib/Menu.js                                    |  4 +-
 src/styles/layout.scss                             | 12 ++-
 18 files changed, 435 insertions(+), 25 deletions(-)
 create mode 100644 src/features/workspaces/components/WorkspaceDrawer.js
 create mode 100644 src/features/workspaces/components/WorkspaceDrawerItem.js
 create mode 100644 src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json

(limited to 'src/components/layout/AppLayout.js')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 3a56719b2..eaa552961 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -63,3 +63,12 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+
+// Workspace Drawer
+export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
+export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
+export const workspaceDrawerNameColor = colorText;
+export const workspaceDrawerNameActiveColor = 'white';
+export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
+export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 8a71e61cf..fc03b67de 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -140,3 +140,13 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+
+// Workspace Drawer
+export const workspaceDrawerWidth = '220px';
+export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
+export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
+export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
+export const workspaceDrawerNameColor = colorText;
+export const workspaceDrawerNameActiveColor = colorText;
+export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
+export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 593149e72..e06192f87 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
+import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
@@ -13,6 +14,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import { workspacesState } from '../../features/workspaces/state';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -45,10 +47,23 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AppLayout extends Component {
+const styles = theme => ({
+  appContent: {
+    width: `calc(100% + ${theme.workspaceDrawerWidth})`,
+    transition: 'transform 0.5s ease',
+    transform() {
+      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)';
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class AppLayout extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
     sidebar: PropTypes.element.isRequired,
+    workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -76,7 +91,9 @@ export default @observer class AppLayout extends Component {
 
   render() {
     const {
+      classes,
       isFullScreen,
+      workspacesDrawer,
       sidebar,
       services,
       children,
@@ -102,7 +119,8 @@ export default @observer class AppLayout extends Component {
         <div className={(darkMode ? 'theme__dark' : '')}>
           <div className="app">
             {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
-            <div className="app__content">
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
               {sidebar}
               <div className="app__service">
                 {news.length > 0 && news.map(item => (
@@ -176,3 +194,5 @@ export default @observer class AppLayout extends Component {
     );
   }
 }
+
+export default AppLayout;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index fcc5b0001..de379875e 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -24,6 +24,14 @@ const messages = defineMessages({
     id: 'sidebar.unmuteApp',
     defaultMessage: '!!!Enable notifications & audio',
   },
+  openWorkspaceDrawer: {
+    id: 'sidebar.openWorkspaceDrawer',
+    defaultMessage: '!!!Open workspace drawer',
+  },
+  closeWorkspaceDrawer: {
+    id: 'sidebar.closeWorkspaceDrawer',
+    defaultMessage: '!!!Close workspace drawer',
+  },
 });
 
 export default @observer class Sidebar extends Component {
@@ -31,6 +39,8 @@ export default @observer class Sidebar extends Component {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
+    isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
+    toggleWorkspaceDrawer: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -53,9 +63,23 @@ export default @observer class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
+  updateToolTip() {
+    this.disableToolTip();
+    setTimeout(this.enableToolTip.bind(this));
+  }
+
   render() {
-    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
+    const {
+      openSettings,
+      toggleMuteApp,
+      isAppMuted,
+      isWorkspaceDrawerOpen,
+      toggleWorkspaceDrawer,
+    } = this.props;
     const { intl } = this.context;
+    const workspaceToggleMessage = (
+      isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
+    );
 
     return (
       <div className="sidebar">
@@ -66,7 +90,21 @@ export default @observer class Sidebar extends Component {
         />
         <button
           type="button"
-          onClick={toggleMuteApp}
+          onClick={() => {
+            toggleWorkspaceDrawer();
+            this.updateToolTip();
+          }}
+          className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+          data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+Shift+D)`}
+        >
+          <i className="mdi mdi-view-grid" />
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            toggleMuteApp();
+            this.updateToolTip();
+          }}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
         >
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 5afc54f9d..ada920cb6 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -37,6 +37,7 @@ export default @observer class ServiceView extends Component {
 
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
+      if (!this.isMounted) return;
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
         setTimeout(() => {
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 5a05ce431..772458eab 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,6 +20,9 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
+import { workspacesState } from '../../features/workspaces/state';
+import { workspaceActions } from '../../features/workspaces/actions';
+import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -82,6 +85,14 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       );
     }
 
+    const workspacesDrawer = (
+      <WorkspaceDrawer
+        getServicesForWorkspace={workspace => (
+          workspace ? workspace.services.map(id => services.one(id).name) : services.all.map(s => s.name)
+        )}
+      />
+    );
+
     const sidebar = (
       <Sidebar
         services={services.allDisplayed}
@@ -96,6 +107,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         deleteService={deleteService}
         updateService={updateService}
         toggleMuteApp={toggleMuteApp}
+        toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
+        isWorkspaceDrawerOpen={workspacesState.isWorkspaceDrawerOpen}
         showMessageBadgeWhenMutedSetting={settings.all.app.showMessageBadgeWhenMuted}
         showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
       />
@@ -122,6 +135,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
           appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
           sidebar={sidebar}
+          workspacesDrawer={workspacesDrawer}
           services={servicesContainer}
           news={news.latest}
           removeNewsItem={hide}
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
index 25246de09..a85f8f57f 100644
--- a/src/features/workspaces/actions.js
+++ b/src/features/workspaces/actions.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import Workspace from './models/Workspace';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
-export default createActionsFromDefinitions({
+export const workspaceActions = createActionsFromDefinitions({
   edit: {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
@@ -19,4 +19,8 @@ export default createActionsFromDefinitions({
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
   deactivate: {},
+  toggleWorkspaceDrawer: {},
+  openWorkspaceSettings: {},
 }, PropTypes.checkPropTypes);
+
+export default workspaceActions;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
new file mode 100644
index 000000000..27bf08361
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1, Icon } from '@meetfranz/ui';
+import { workspacesState } from '../state';
+import WorkspaceDrawerItem from './WorkspaceDrawerItem';
+import { workspaceActions } from '../actions';
+
+const messages = defineMessages({
+  headline: {
+    id: 'workspaceDrawer.headline',
+    defaultMessage: '!!!Workspaces',
+  },
+  allServices: {
+    id: 'workspaceDrawer.allServices',
+    defaultMessage: '!!!All services',
+  },
+});
+
+const styles = theme => ({
+  drawer: {
+    backgroundColor: theme.workspaceDrawerBackground,
+    width: theme.workspaceDrawerWidth,
+  },
+  headline: {
+    fontSize: '24px',
+    marginTop: '38px',
+    marginBottom: '25px',
+    marginLeft: '10px',
+  },
+  addWorkspaceButton: {
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '2px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawer extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    getServicesForWorkspace: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      classes,
+      getServicesForWorkspace,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.drawer}>
+        <H1 className={classes.headline}>
+          {intl.formatMessage(messages.headline)}
+          <span
+            className={classes.addWorkspaceButton}
+            onClick={workspaceActions.openWorkspaceSettings}
+          >
+            <Icon
+              icon="mdiPlusBox"
+              size={1.5}
+            />
+          </span>
+        </H1>
+        <div className={classes.workspaces}>
+          <WorkspaceDrawerItem
+            name={intl.formatMessage(messages.allServices)}
+            onClick={() => workspaceActions.deactivate()}
+            services={getServicesForWorkspace(null)}
+            isActive={workspacesState.activeWorkspace == null}
+          />
+          {workspacesState.workspaces.map(workspace => (
+            <WorkspaceDrawerItem
+              key={workspace.id}
+              name={workspace.name}
+              isActive={workspacesState.activeWorkspace === workspace}
+              onClick={() => workspaceActions.activate({ workspace })}
+              services={getServicesForWorkspace(workspace)}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawer;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
new file mode 100644
index 000000000..00207d323
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  item: {
+    height: '67px',
+    padding: '15px 10px',
+    borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    '&:first-child': {
+      borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    },
+  },
+  isActiveItem: {
+    backgroundColor: theme.workspaceDrawerItemActiveBackground,
+  },
+  name: {
+    marginTop: '4px',
+    color: theme.workspaceDrawerNameColor,
+  },
+  activeName: {
+    color: theme.workspaceDrawerNameActiveColor,
+  },
+  services: {
+    display: 'block',
+    fontSize: '11px',
+    marginTop: '5px',
+    color: theme.workspaceDrawerServicesColor,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    lineHeight: '15px',
+  },
+  activeServices: {
+    color: theme.workspaceDrawerServicesActiveColor,
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawerItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.string).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isActive,
+      name,
+      onClick,
+      services,
+    } = this.props;
+    return (
+      <div
+        className={classnames([
+          classes.item,
+          isActive ? classes.isActiveItem : null,
+        ])}
+        onClick={onClick}
+      >
+        <span
+          className={classnames([
+            classes.name,
+            isActive ? classes.activeName : null,
+          ])}
+        >
+          {name}
+        </span>
+        <span
+          className={classnames([
+            classes.services,
+            isActive ? classes.activeServices : null,
+          ])}
+        >
+          {services.join(', ')}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawerItem;
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index 963b96f81..68a7d8d91 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -4,6 +4,7 @@ const defaultState = {
   activeWorkspace: null,
   isLoading: false,
   isFeatureActive: false,
+  isWorkspaceDrawerOpen: false,
   workspaces: [],
   workspaceBeingEdited: null,
 };
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a2997a0d2..1b57ba2da 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -3,7 +3,7 @@ import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
 import Workspace from './models/Workspace';
 import { matchRoute } from '../../helpers/routing-helpers';
-import workspaceActions from './actions';
+import { workspaceActions } from './actions';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
@@ -55,6 +55,8 @@ export default class WorkspacesStore extends Store {
     workspaceActions.update.listen(this._update);
     workspaceActions.activate.listen(this._setActiveWorkspace);
     workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
+    workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
+    workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
   }
 
   _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
@@ -111,4 +113,12 @@ export default class WorkspacesStore extends Store {
   @action _deactivateActiveWorkspace = () => {
     this.state.activeWorkspace = null;
   };
+
+  @action _toggleWorkspaceDrawer = () => {
+    this.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen;
+  };
+
+  @action _openWorkspaceSettings = () => {
+    this.actions.ui.openSettings({ path: 'workspaces' });
+  };
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c8bb03ded..4bf9a8c0a 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -755,6 +755,32 @@
           "column": 10,
           "line": 23
         }
+      },
+      {
+        "defaultMessage": "!!!Open workspace drawer",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.openWorkspaceDrawer",
+        "start": {
+          "column": 23,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Close workspace drawer",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.closeWorkspaceDrawer",
+        "start": {
+          "column": 24,
+          "line": 31
+        }
       }
     ],
     "path": "src/components/layout/Sidebar.json"
@@ -3276,6 +3302,37 @@
     ],
     "path": "src/features/workspaces/components/EditWorkspaceForm.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Workspaces",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.headline",
+        "start": {
+          "column": 12,
+          "line": 12
+        }
+      },
+      {
+        "defaultMessage": "!!!All services",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.allServices",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
+      }
+    ],
+    "path": "src/features/workspaces/components/WorkspaceDrawer.json"
+  },
   {
     "descriptors": [
       {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 1041a8b5f..94c6fcf32 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -249,7 +249,9 @@
   "settings.workspaces.headline": "Your workspaces",
   "settings.workspaces.noWorkspacesAdded": "You haven't added any workspaces yet.",
   "sidebar.addNewService": "Add new service",
+  "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
   "sidebar.muteApp": "Disable notifications & audio",
+  "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.settings": "Settings",
   "sidebar.unmuteApp": "Enable notifications & audio",
   "signup.company.label": "Company",
@@ -294,5 +296,7 @@
   "validation.required": "{field} is required",
   "validation.url": "{field} is not a valid URL",
   "welcome.loginButton": "Login to your account",
-  "welcome.signupButton": "Create a free account"
-}
\ No newline at end of file
+  "welcome.signupButton": "Create a free account",
+  "workspaceDrawer.allServices": "All services",
+  "workspaceDrawer.headline": "Workspaces"
+}
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 07603d062..85d3e8696 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 22,
+      "line": 24,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 13
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 38,
+      "line": 40,
       "column": 23
     },
     "end": {
-      "line": 41,
+      "line": 43,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 42,
+      "line": 44,
       "column": 26
     },
     "end": {
-      "line": 45,
+      "line": 47,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json
index 7aa00a186..0254af8da 100644
--- a/src/i18n/messages/src/components/layout/Sidebar.json
+++ b/src/i18n/messages/src/components/layout/Sidebar.json
@@ -50,5 +50,31 @@
       "line": 26,
       "column": 3
     }
+  },
+  {
+    "id": "sidebar.openWorkspaceDrawer",
+    "defaultMessage": "!!!Open workspace drawer",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 27,
+      "column": 23
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "sidebar.closeWorkspaceDrawer",
+    "defaultMessage": "!!!Close workspace drawer",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 31,
+      "column": 24
+    },
+    "end": {
+      "line": 34,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
new file mode 100644
index 000000000..c875b82cb
--- /dev/null
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "workspaceDrawer.headline",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 12,
+      "column": 12
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "workspaceDrawer.allServices",
+    "defaultMessage": "!!!All services",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index b21a62b4d..7b224802f 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -4,7 +4,7 @@ import { defineMessages } from 'react-intl';
 
 import { isMac, ctrlKey, cmdKey } from '../environment';
 import { workspacesState } from '../features/workspaces/state';
-import workspaceActions from '../features/workspaces/actions';
+import { workspaceActions } from '../features/workspaces/actions';
 
 const { app, Menu, dialog } = remote;
 
@@ -785,7 +785,7 @@ export default class FranzMenu {
       label: intl.formatMessage(menuItems.addNewWorkspace),
       accelerator: `${cmdKey}+Shift+N`,
       click: () => {
-        this.actions.ui.openSettings({ path: 'workspaces' });
+        workspaceActions.openWorkspaceSettings();
       },
       enabled: this.stores.user.isLoggedIn,
     }, {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 9a003a922..78e9e68f1 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -18,8 +18,14 @@ html { overflow: hidden; }
       font-size: 22px;
 
       &:hover,
-      &:active { color: $dark-theme-gray-smoke; }
-      &.is-muted { color: $theme-brand-primary; }
+      &:active {
+        color: $dark-theme-gray-smoke;
+      }
+
+      &.is-muted,
+      &.is-active {
+        color: $theme-brand-primary;
+      }
     }
   }
 
@@ -84,7 +90,7 @@ html { overflow: hidden; }
 
     &:hover,
     &:active { color: lighten($theme-gray-light, 10%); }
-    &.is-muted { color: $theme-brand-primary; }
+    &.is-muted, &.is-active { color: $theme-brand-primary; }
     &--new-service { padding-bottom: 6px; }
   }
 
-- 
cgit v1.2.3-70-g09d2


From a9734f24bf15ab322c8244fbb8e86c37caf30f4a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 21 Mar 2019 15:04:31 +0100
Subject: improve workspace switching ux

---
 src/components/layout/AppLayout.js                 |  3 ++
 src/components/ui/FullscreenLoader/index.js        |  4 +-
 src/components/ui/WebviewLoader/index.js           |  2 +-
 .../workspaces/components/WorkspaceDrawer.js       |  7 +--
 .../components/WorkspaceSwitchingIndicator.js      | 56 ++++++++++++++++++++++
 .../workspaces/components/WorkspacesDashboard.js   |  4 +-
 .../workspaces/containers/WorkspacesScreen.js      |  2 +-
 src/features/workspaces/index.js                   | 11 +++--
 src/features/workspaces/state.js                   |  4 +-
 src/features/workspaces/store.js                   | 25 ++++++++--
 .../messages/src/components/layout/AppLayout.json  | 24 +++++-----
 src/styles/layout.scss                             |  1 +
 12 files changed, 112 insertions(+), 31 deletions(-)
 create mode 100644 src/features/workspaces/components/WorkspaceSwitchingIndicator.js

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index e06192f87..284a2523a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -15,6 +15,8 @@ import ErrorBoundary from '../util/ErrorBoundary';
 
 import { isWindows } from '../../environment';
 import { workspacesState } from '../../features/workspaces/state';
+import FullscreenLoader from '../ui/FullscreenLoader';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -123,6 +125,7 @@ class AppLayout extends Component {
               {workspacesDrawer}
               {sidebar}
               <div className="app__service">
+                <WorkspaceSwitchingIndicator />
                 {news.length > 0 && news.map(item => (
                   <InfoBar
                     key={item.id}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 6ecf4d395..06dab1eb6 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
-  }
+  };
 
   static defaultProps = {
     className: null,
     spinnerColor: null,
     children: null,
-  }
+  };
 
   render() {
     const {
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 3a3dbbe49..d200b8193 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -11,7 +11,7 @@ export default @observer @injectSheet(styles) class WebviewLoader extends Compon
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
-  }
+  };
 
   render() {
     const { classes, name } = this.props;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 27bf08361..c9c4d3bc9 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -54,7 +54,8 @@ class WorkspaceDrawer extends Component {
       getServicesForWorkspace,
     } = this.props;
     const { intl } = this.context;
-
+    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
       <div className={classes.drawer}>
         <H1 className={classes.headline}>
@@ -74,13 +75,13 @@ class WorkspaceDrawer extends Component {
             name={intl.formatMessage(messages.allServices)}
             onClick={() => workspaceActions.deactivate()}
             services={getServicesForWorkspace(null)}
-            isActive={workspacesState.activeWorkspace == null}
+            isActive={actualWorkspace == null}
           />
           {workspacesState.workspaces.map(workspace => (
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
-              isActive={workspacesState.activeWorkspace === workspace}
+              isActive={actualWorkspace === workspace}
               onClick={() => workspaceActions.activate({ workspace })}
               services={getServicesForWorkspace(workspace)}
             />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
new file mode 100644
index 000000000..4a279afaf
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { workspacesState } from '../state';
+import LoaderComponent from '../../../components/ui/Loader';
+
+const styles = () => ({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    position: 'absolute',
+    width: '100%',
+    marginTop: '20px',
+  },
+  component: {
+    background: 'rgba(20, 20, 20, 0.4)',
+    padding: 20,
+    width: 'auto',
+    height: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+    alignItems: 'flex-start',
+    zIndex: 200,
+  },
+  name: {
+    fontSize: 35,
+    marginBottom: '10px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceSwitchingIndicator extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    if (!isSwitchingWorkspace) return null;
+    const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
+    return (
+      <div className={classes.wrapper}>
+        <div className={classes.component}>
+          <h1 className={classes.name}>
+            {`Switching to ${nextWorkspaceName}`}
+          </h1>
+          <LoaderComponent />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceSwitchingIndicator;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 917807302..df35b3590 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -30,7 +30,7 @@ const styles = () => ({
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    isLoading: PropTypes.bool.isRequired,
+    isLoadingWorkspaces: PropTypes.bool.isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -60,7 +60,7 @@ class WorkspacesDashboard extends Component {
             <div className={classes.createForm}>
               <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
             </div>
-            {isLoading ? (
+            {isLoadingWorkspaces ? (
               <Loader />
             ) : (
               <table className="workspace-table">
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 94e714255..99241210e 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -21,7 +21,7 @@ class WorkspacesScreen extends Component {
       <ErrorBoundary>
         <WorkspacesDashboard
           workspaces={workspacesState.workspaces}
-          isLoading={workspacesState.isLoading}
+          isLoading={workspacesState.isLoadingWorkspaces}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index 26cadea64..1644c0e2f 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -8,10 +8,13 @@ const debug = require('debug')('Franz:feature:workspaces');
 let store = null;
 
 export const filterServicesByActiveWorkspace = (services) => {
-  const { isFeatureActive, activeWorkspace } = workspacesState;
-  if (isFeatureActive && activeWorkspace) {
-    return services.filter(s => activeWorkspace.services.includes(s.id));
-  }
+  const {
+    activeWorkspace,
+    isFeatureActive,
+  } = workspacesState;
+
+  if (!isFeatureActive) return services;
+  if (activeWorkspace) return services.filter(s => activeWorkspace.services.includes(s.id));
   return services;
 };
 
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index 68a7d8d91..c916480c0 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -2,8 +2,10 @@ import { observable } from 'mobx';
 
 const defaultState = {
   activeWorkspace: null,
-  isLoading: false,
+  nextWorkspace: null,
+  isLoadingWorkspaces: false,
   isFeatureActive: false,
+  isSwitchingWorkspace: false,
   isWorkspaceDrawerOpen: false,
   workspaces: [],
   workspaceBeingEdited: null,
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 1b57ba2da..f6b9b2ff4 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -31,7 +31,7 @@ export default class WorkspacesStore extends Store {
      */
     reaction(
       () => this.allWorkspacesRequest.isExecuting,
-      isExecuting => this._setIsLoading(isExecuting),
+      isExecuting => this._setIsLoadingWorkspaces(isExecuting),
     );
     /**
      * Update the state with the workspace to be edited when route matches.
@@ -66,8 +66,8 @@ export default class WorkspacesStore extends Store {
     this.state.workspaces = workspaces.map(data => new Workspace(data));
   };
 
-  @action _setIsLoading = (isLoading) => {
-    this.state.isLoading = isLoading;
+  @action _setIsLoadingWorkspaces = (isLoading) => {
+    this.state.isLoadingWorkspaces = isLoading;
   };
 
   @action _edit = ({ workspace }) => {
@@ -107,11 +107,26 @@ export default class WorkspacesStore extends Store {
   };
 
   @action _setActiveWorkspace = ({ workspace }) => {
-    this.state.activeWorkspace = workspace;
+    Object.assign(this.state, {
+      isSwitchingWorkspace: true,
+      nextWorkspace: workspace,
+    });
+    setTimeout(() => { this.state.activeWorkspace = workspace; }, 100);
+    setTimeout(() => {
+      Object.assign(this.state, {
+        isSwitchingWorkspace: false,
+        nextWorkspace: null,
+      });
+    }, 1000);
   };
 
   @action _deactivateActiveWorkspace = () => {
-    this.state.activeWorkspace = null;
+    Object.assign(this.state, {
+      isSwitchingWorkspace: true,
+      nextWorkspace: null,
+    });
+    setTimeout(() => { this.state.activeWorkspace = null; }, 100);
+    setTimeout(() => { this.state.isSwitchingWorkspace = false; }, 1000);
   };
 
   @action _toggleWorkspaceDrawer = () => {
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 85d3e8696..4dd354afc 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 24,
+      "line": 26,
       "column": 19
     },
     "end": {
-      "line": 27,
+      "line": 29,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 28,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 31,
+      "line": 33,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 32,
+      "line": 34,
       "column": 24
     },
     "end": {
-      "line": 35,
+      "line": 37,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 36,
+      "line": 38,
       "column": 13
     },
     "end": {
-      "line": 39,
+      "line": 41,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 40,
+      "line": 42,
       "column": 23
     },
     "end": {
-      "line": 43,
+      "line": 45,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 44,
+      "line": 46,
       "column": 26
     },
     "end": {
-      "line": 47,
+      "line": 49,
       "column": 3
     }
   }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 78e9e68f1..e858b7904 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -39,6 +39,7 @@ html { overflow: hidden; }
   .app__content { display: flex; }
 
   .app__service {
+    position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;
-- 
cgit v1.2.3-70-g09d2


From 1c5c54515fce5911b062474b41035f1f3dce1143 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 21 Mar 2019 15:55:38 +0100
Subject: improve workspace drawer layout

---
 packages/theme/src/themes/default/index.ts               |  3 ++-
 src/components/layout/AppLayout.js                       |  4 ++--
 src/features/workspaces/components/WorkspaceDrawer.js    |  6 +++---
 .../workspaces/components/WorkspaceDrawerItem.js         |  2 +-
 .../workspaces/components/WorkspaceSwitchingIndicator.js | 16 +++++++++++++---
 .../workspaces/components/WorkspacesDashboard.js         |  2 +-
 6 files changed, 22 insertions(+), 11 deletions(-)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index e6785ec5e..2290b18e3 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -142,7 +142,8 @@ export const badgeBorderRadius = 50;
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
 
 // Workspace Drawer
-export const workspaceDrawerWidth = '220px';
+export const workspaceDrawerWidth = 300;
+export const workspaceDrawerPadding = 20;
 export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
 export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
 export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 284a2523a..4e897e623 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -51,10 +51,10 @@ const messages = defineMessages({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaceDrawerWidth})`,
+    width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)';
+      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
     },
   },
 });
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 7bf3684c0..28e74b287 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -22,17 +22,17 @@ const messages = defineMessages({
 const styles = theme => ({
   drawer: {
     backgroundColor: theme.workspaceDrawerBackground,
-    width: theme.workspaceDrawerWidth,
+    width: `${theme.workspaceDrawerWidth}px`,
   },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
     marginBottom: '25px',
-    marginLeft: '10px',
+    marginLeft: `${theme.workspaceDrawerPadding}px`,
   },
   addWorkspaceButton: {
     float: 'right',
-    marginRight: '10px',
+    marginRight: `${theme.workspaceDrawerPadding}px`,
     marginTop: '2px',
   },
   addWorkspaceButtonIcon: {
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 935508943..d2cdf1c0a 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 const styles = theme => ({
   item: {
     height: '67px',
-    padding: '15px 10px',
+    padding: `15px ${theme.workspaceDrawerPadding}px`,
     borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 4a279afaf..f68ac1b00 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -2,17 +2,22 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import classnames from 'classnames';
 import { workspacesState } from '../state';
 import LoaderComponent from '../../../components/ui/Loader';
 
-const styles = () => ({
+const styles = theme => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
     position: 'absolute',
+    transition: 'width 0.5s ease',
     width: '100%',
     marginTop: '20px',
   },
+  wrapperWhenDrawerIsOpen: {
+    width: `calc(100% - ${theme.workspaceDrawerWidth}px)`,
+  },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
     padding: 20,
@@ -37,11 +42,16 @@ class WorkspaceSwitchingIndicator extends Component {
 
   render() {
     const { classes } = this.props;
-    const { isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
-      <div className={classes.wrapper}>
+      <div
+        className={classnames([
+          classes.wrapper,
+          isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null,
+        ])}
+      >
         <div className={classes.component}>
           <h1 className={classes.name}>
             {`Switching to ${nextWorkspaceName}`}
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index df35b3590..17b3755d7 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -43,7 +43,7 @@ class WorkspacesDashboard extends Component {
   render() {
     const {
       workspaces,
-      isLoading,
+      isLoadingWorkspaces,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
       classes,
-- 
cgit v1.2.3-70-g09d2


From 22400d97f5b85fa7e20721df73dba5dff0f57ad4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 21 Mar 2019 16:07:17 +0100
Subject: add i18n messages for service loading and workspace switching

---
 src/components/layout/AppLayout.js                 |  1 -
 src/components/ui/WebviewLoader/index.js           | 16 +++++-
 .../components/WorkspaceSwitchingIndicator.js      | 16 +++++-
 src/i18n/locales/defaultMessages.json              | 60 +++++++++++++++++-----
 src/i18n/locales/en-US.json                        |  6 ++-
 .../messages/src/components/layout/AppLayout.json  | 24 ++++-----
 .../src/components/ui/WebviewLoader/index.json     | 15 ++++++
 .../components/WorkspaceSwitchingIndicator.json    | 15 ++++++
 8 files changed, 123 insertions(+), 30 deletions(-)
 create mode 100644 src/i18n/messages/src/components/ui/WebviewLoader/index.json
 create mode 100644 src/i18n/messages/src/features/workspaces/components/WorkspaceSwitchingIndicator.json

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4e897e623..4dd5ff686 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -15,7 +15,6 @@ import ErrorBoundary from '../util/ErrorBoundary';
 
 import { isWindows } from '../../environment';
 import { workspacesState } from '../../features/workspaces/state';
-import FullscreenLoader from '../ui/FullscreenLoader';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 
 function createMarkup(HTMLString) {
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index d200b8193..58b6b6f1b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,23 +2,35 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
-
 import styles from './styles';
 
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: '!!!Loading',
+  },
+});
+
 export default @observer @injectSheet(styles) class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   render() {
     const { classes, name } = this.props;
+    const { intl } = this.context;
     return (
       <FullscreenLoader
         className={classes.component}
-        title={`Loading ${name}`}
+        title={`${intl.formatMessage(messages.loading)} ${name}`}
       />
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index f68ac1b00..68ce6fd87 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -3,9 +3,18 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
+import { defineMessages, intlShape } from 'react-intl';
+
 import { workspacesState } from '../state';
 import LoaderComponent from '../../../components/ui/Loader';
 
+const messages = defineMessages({
+  switchingTo: {
+    id: 'workspaces.switchingIndicator.switchingTo',
+    defaultMessage: '!!!Switching to',
+  },
+});
+
 const styles = theme => ({
   wrapper: {
     display: 'flex',
@@ -40,8 +49,13 @@ class WorkspaceSwitchingIndicator extends Component {
     classes: PropTypes.object.isRequired,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   render() {
     const { classes } = this.props;
+    const { intl } = this.context;
     const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
@@ -54,7 +68,7 @@ class WorkspaceSwitchingIndicator extends Component {
       >
         <div className={classes.component}>
           <h1 className={classes.name}>
-            {`Switching to ${nextWorkspaceName}`}
+            {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}
           </h1>
           <LoaderComponent />
         </div>
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 1c6c6c969..9171c3592 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -625,78 +625,78 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!A new update for Franz is available.",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.updateAvailable",
         "start": {
           "column": 19,
-          "line": 28
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 32
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 40
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonChangelog",
         "start": {
           "column": 13,
-          "line": 36
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 44
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 40
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 48
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 44
+          "line": 45
         }
       }
     ],
@@ -2547,6 +2547,24 @@
     ],
     "path": "src/components/ui/PremiumFeatureContainer/index.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Loading",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/ui/WebviewLoader/index.js",
+        "id": "service.webviewLoader.loading",
+        "start": {
+          "column": 11,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/components/ui/WebviewLoader/index.json"
+  },
   {
     "descriptors": [
       {
@@ -3364,6 +3382,24 @@
     ],
     "path": "src/features/workspaces/components/WorkspacesDashboard.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Switching to",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/features/workspaces/components/WorkspaceSwitchingIndicator.js",
+        "id": "workspaces.switchingIndicator.switchingTo",
+        "start": {
+          "column": 15,
+          "line": 12
+        }
+      }
+    ],
+    "path": "src/features/workspaces/components/WorkspaceSwitchingIndicator.json"
+  },
   {
     "descriptors": [
       {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 9716c3717..231e8f261 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -115,6 +115,7 @@
   "service.errorHandler.headline": "Oh no!",
   "service.errorHandler.message": "Error",
   "service.errorHandler.text": "{name} has failed to load.",
+  "service.webviewLoader.loading": "Loading",
   "services.getStarted": "Get started",
   "services.welcome": "Welcome to Franz",
   "settings.account.account.editButton": "Edit account",
@@ -300,5 +301,6 @@
   "welcome.loginButton": "Login to your account",
   "welcome.signupButton": "Create a free account",
   "workspaceDrawer.allServices": "All services",
-  "workspaceDrawer.headline": "Workspaces"
-}
+  "workspaceDrawer.headline": "Workspaces",
+  "workspaces.switchingIndicator.switchingTo": "Switching to"
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 4dd354afc..92593ed5c 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 25,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 28,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 29,
       "column": 19
     },
     "end": {
-      "line": 33,
+      "line": 32,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 33,
       "column": 24
     },
     "end": {
-      "line": 37,
+      "line": 36,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 38,
+      "line": 37,
       "column": 13
     },
     "end": {
-      "line": 41,
+      "line": 40,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 42,
+      "line": 41,
       "column": 23
     },
     "end": {
-      "line": 45,
+      "line": 44,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 46,
+      "line": 45,
       "column": 26
     },
     "end": {
-      "line": 49,
+      "line": 48,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/WebviewLoader/index.json b/src/i18n/messages/src/components/ui/WebviewLoader/index.json
new file mode 100644
index 000000000..ef3e4b593
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/WebviewLoader/index.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "service.webviewLoader.loading",
+    "defaultMessage": "!!!Loading",
+    "file": "src/components/ui/WebviewLoader/index.js",
+    "start": {
+      "line": 11,
+      "column": 11
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceSwitchingIndicator.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceSwitchingIndicator.json
new file mode 100644
index 000000000..4f3e6d55c
--- /dev/null
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceSwitchingIndicator.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "workspaces.switchingIndicator.switchingTo",
+    "defaultMessage": "!!!Switching to",
+    "file": "src/features/workspaces/components/WorkspaceSwitchingIndicator.js",
+    "start": {
+      "line": 12,
+      "column": 15
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 0af622e6e81a5aee64f839eeadd23b4a62b3cf62 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 23 Mar 2019 14:15:57 +0100
Subject: refactor state management for workspace feature

---
 src/components/layout/AppLayout.js                 |   4 +-
 src/components/services/content/ServiceView.js     |   6 +-
 src/components/ui/AppLoader/index.js               |   4 +-
 src/containers/layout/AppLayoutContainer.js        |   4 +-
 src/containers/settings/SettingsWindow.js          |   4 +-
 src/features/workspaces/api.js                     |  51 ++++--
 .../workspaces/components/WorkspaceDrawer.js       |  11 +-
 .../components/WorkspaceSwitchingIndicator.js      |   4 +-
 .../workspaces/containers/EditWorkspaceScreen.js   |   8 +-
 .../workspaces/containers/WorkspacesScreen.js      |   7 +-
 src/features/workspaces/index.js                   |  51 +-----
 src/features/workspaces/state.js                   |  18 --
 src/features/workspaces/store.js                   | 196 +++++++++++++--------
 src/lib/Menu.js                                    |   6 +-
 src/stores/ServicesStore.js                        |   6 +-
 15 files changed, 199 insertions(+), 181 deletions(-)
 delete mode 100644 src/features/workspaces/state.js

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4dd5ff686..0c72c1413 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -14,8 +14,8 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
-import { workspacesState } from '../../features/workspaces/state';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import { workspaceStore } from '../../features/workspaces';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -53,7 +53,7 @@ const styles = theme => ({
     width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
     },
   },
 });
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index ada920cb6..13148b9b3 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -35,12 +35,13 @@ export default @observer class ServiceView extends Component {
 
   autorunDisposer = null;
 
+  forceRepaintTimeout = null;
+
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
-      if (!this.isMounted) return;
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
-        setTimeout(() => {
+        this.forceRepaintTimeout = setTimeout(() => {
           this.setState({ forceRepaint: false });
         }, 100);
       }
@@ -49,6 +50,7 @@ export default @observer class ServiceView extends Component {
 
   componentWillUnmount() {
     this.autorunDisposer();
+    clearTimeout(this.forceRepaintTimeout);
   }
 
   updateTargetUrl = (event) => {
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 61053f6d1..b0c7fed7b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
-  }
+  };
 
   state = {
     step: 0,
-  }
+  };
 
   interval = null;
 
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 772458eab..4329c3097 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,9 +20,9 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
-import { workspacesState } from '../../features/workspaces/state';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
+import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -108,7 +108,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         updateService={updateService}
         toggleMuteApp={toggleMuteApp}
         toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
-        isWorkspaceDrawerOpen={workspacesState.isWorkspaceDrawerOpen}
+        isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen}
         showMessageBadgeWhenMutedSetting={settings.all.app.showMessageBadgeWhenMuted}
         showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
       />
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 8cbde24c1..663b9e2e4 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -7,7 +7,7 @@ import ServicesStore from '../../stores/ServicesStore';
 import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
-import { workspacesState } from '../../features/workspaces/state';
+import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
   render() {
@@ -17,7 +17,7 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
-        workspaceCount={workspacesState.workspaces.length}
+        workspaceCount={workspaceStore.workspaces.length}
       />
     );
 
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 733cb5593..4e076d233 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -1,39 +1,60 @@
 import { pick } from 'lodash';
 import { sendAuthRequest } from '../../api/utils/auth';
 import { API, API_VERSION } from '../../environment';
+import Request from '../../stores/lib/Request';
+import CachedRequest from '../../stores/lib/CachedRequest';
+import Workspace from './models/Workspace';
 
-export default {
+const debug = require('debug')('Franz:feature:workspaces:api');
+
+export const workspaceApi = {
   getUserWorkspaces: async () => {
     const url = `${API}/${API_VERSION}/workspace`;
-    const request = await sendAuthRequest(url, { method: 'GET' });
-    if (!request.ok) throw request;
-    return request.json();
+    debug('getUserWorkspaces GET', url);
+    const result = await sendAuthRequest(url, { method: 'GET' });
+    debug('getUserWorkspaces RESULT', result);
+    if (!result.ok) throw result;
+    const workspaces = await result.json();
+    return workspaces.map(data => new Workspace(data));
   },
 
   createWorkspace: async (name) => {
     const url = `${API}/${API_VERSION}/workspace`;
-    const request = await sendAuthRequest(url, {
+    const options = {
       method: 'POST',
       body: JSON.stringify({ name }),
-    });
-    if (!request.ok) throw request;
-    return request.json();
+    };
+    debug('createWorkspace POST', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('createWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return new Workspace(await result.json());
   },
 
   deleteWorkspace: async (workspace) => {
     const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
-    const request = await sendAuthRequest(url, { method: 'DELETE' });
-    if (!request.ok) throw request;
-    return request.json();
+    debug('deleteWorkspace DELETE', url);
+    const result = await sendAuthRequest(url, { method: 'DELETE' });
+    debug('deleteWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return (await result.json()).deleted;
   },
 
   updateWorkspace: async (workspace) => {
     const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
-    const request = await sendAuthRequest(url, {
+    const options = {
       method: 'PUT',
       body: JSON.stringify(pick(workspace, ['name', 'services'])),
-    });
-    if (!request.ok) throw request;
-    return request.json();
+    };
+    debug('updateWorkspace UPDATE', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('updateWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return new Workspace(await result.json());
   },
 };
+
+export const getUserWorkspacesRequest = new CachedRequest(workspaceApi, 'getUserWorkspaces');
+export const createWorkspaceRequest = new Request(workspaceApi, 'createWorkspace');
+export const deleteWorkspaceRequest = new Request(workspaceApi, 'deleteWorkspace');
+export const updateWorkspaceRequest = new Request(workspaceApi, 'updateWorkspace');
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index c18eb0e11..6dc779be9 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -6,9 +6,9 @@ import { defineMessages, intlShape } from 'react-intl';
 import { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
-import { workspacesState } from '../state';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
+import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   headline: {
@@ -70,7 +70,12 @@ class WorkspaceDrawer extends Component {
       getServicesForWorkspace,
     } = this.props;
     const { intl } = this.context;
-    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const {
+      activeWorkspace,
+      isSwitchingWorkspace,
+      nextWorkspace,
+      workspaces,
+    } = workspaceStore;
     const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
       <div className={classes.drawer}>
@@ -95,7 +100,7 @@ class WorkspaceDrawer extends Component {
             services={getServicesForWorkspace(null)}
             isActive={actualWorkspace == null}
           />
-          {workspacesState.workspaces.map(workspace => (
+          {workspaces.map(workspace => (
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 68ce6fd87..c012ab008 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -5,8 +5,8 @@ import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
 
-import { workspacesState } from '../state';
 import LoaderComponent from '../../../components/ui/Loader';
+import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   switchingTo: {
@@ -56,7 +56,7 @@ class WorkspaceSwitchingIndicator extends Component {
   render() {
     const { classes } = this.props;
     const { intl } = this.context;
-    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState;
+    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 1b13bc2d4..1c4633e71 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
-import { workspacesState } from '../state';
 import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
+import { workspaceStore } from '../index';
 
 @inject('stores', 'actions') @observer
 class EditWorkspaceScreen extends Component {
@@ -22,14 +22,14 @@ class EditWorkspaceScreen extends Component {
   };
 
   onDelete = () => {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
     if (!workspaceBeingEdited) return null;
     actions.workspaces.delete({ workspace: workspaceBeingEdited });
   };
 
   onSave = (values) => {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
     const workspace = new Workspace(
       Object.assign({}, workspaceBeingEdited, values),
@@ -38,7 +38,7 @@ class EditWorkspaceScreen extends Component {
   };
 
   render() {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { stores } = this.props;
     if (!workspaceBeingEdited) return null;
     return (
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index bd1ddcd43..5fdea217e 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { workspacesState } from '../state';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { workspaceStore } from '../index';
+import { getUserWorkspacesRequest } from '../api';
 
 @inject('actions') @observer
 class WorkspacesScreen extends Component {
@@ -20,8 +21,8 @@ class WorkspacesScreen extends Component {
     return (
       <ErrorBoundary>
         <WorkspacesDashboard
-          workspaces={workspacesState.workspaces}
-          isLoadingWorkspaces={workspacesState.isLoadingWorkspaces}
+          workspaces={workspaceStore.workspaces}
+          isLoadingWorkspaces={getUserWorkspacesRequest.isExecuting}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index 1644c0e2f..68f82bdee 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -1,26 +1,9 @@
-import { reaction, runInAction } from 'mobx';
+import { reaction } from 'mobx';
 import WorkspacesStore from './store';
-import api from './api';
-import { workspacesState, resetState } from './state';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
-let store = null;
-
-export const filterServicesByActiveWorkspace = (services) => {
-  const {
-    activeWorkspace,
-    isFeatureActive,
-  } = workspacesState;
-
-  if (!isFeatureActive) return services;
-  if (activeWorkspace) return services.filter(s => activeWorkspace.services.includes(s.id));
-  return services;
-};
-
-export const getActiveWorkspaceServices = services => (
-  filterServicesByActiveWorkspace(services)
-);
+export const workspaceStore = new WorkspacesStore();
 
 export default function initWorkspaces(stores, actions) {
   const { features, user } = stores;
@@ -33,38 +16,16 @@ export default function initWorkspaces(stores, actions) {
       )
     ),
     (isEnabled) => {
-      if (isEnabled) {
+      if (isEnabled && !workspaceStore.isFeatureActive) {
         debug('Initializing `workspaces` feature');
-        store = new WorkspacesStore(stores, api, actions, workspacesState);
-        store.initialize();
-        runInAction(() => { workspacesState.isFeatureActive = true; });
-      } else if (store) {
+        workspaceStore.start(stores, actions);
+      } else if (workspaceStore.isFeatureActive) {
         debug('Disabling `workspaces` feature');
-        runInAction(() => { workspacesState.isFeatureActive = false; });
-        store.teardown();
-        store = null;
-        resetState(); // Reset state to default
+        workspaceStore.stop();
       }
     },
     {
       fireImmediately: true,
     },
   );
-
-  // Update active service on workspace switches
-  reaction(() => ({
-    isFeatureActive: workspacesState.isFeatureActive,
-    activeWorkspace: workspacesState.activeWorkspace,
-  }), ({ isFeatureActive, activeWorkspace }) => {
-    if (!isFeatureActive) return;
-    if (activeWorkspace) {
-      const services = stores.services.allDisplayed;
-      const activeService = services.find(s => s.isActive);
-      const workspaceServices = filterServicesByActiveWorkspace(services);
-      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
-      if (!isActiveServiceInWorkspace) {
-        actions.service.setActive({ serviceId: workspaceServices[0].id });
-      }
-    }
-  });
 }
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
deleted file mode 100644
index c916480c0..000000000
--- a/src/features/workspaces/state.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { observable } from 'mobx';
-
-const defaultState = {
-  activeWorkspace: null,
-  nextWorkspace: null,
-  isLoadingWorkspaces: false,
-  isFeatureActive: false,
-  isSwitchingWorkspace: false,
-  isWorkspaceDrawerOpen: false,
-  workspaces: [],
-  workspaceBeingEdited: null,
-};
-
-export const workspacesState = observable(defaultState);
-
-export function resetState() {
-  Object.assign(workspacesState, defaultState);
-}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index f6b9b2ff4..883f36ffb 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,54 +1,39 @@
-import { observable, reaction, action } from 'mobx';
-import Store from '../../stores/lib/Store';
-import CachedRequest from '../../stores/lib/CachedRequest';
-import Workspace from './models/Workspace';
+import {
+  computed,
+  observable,
+  action,
+} from 'mobx';
+import Reaction from '../../stores/lib/Reaction';
 import { matchRoute } from '../../helpers/routing-helpers';
 import { workspaceActions } from './actions';
+import {
+  createWorkspaceRequest,
+  deleteWorkspaceRequest,
+  getUserWorkspacesRequest,
+  updateWorkspaceRequest,
+} from './api';
 
-const debug = require('debug')('Franz:feature:workspaces');
+const debug = require('debug')('Franz:feature:workspaces:store');
 
-export default class WorkspacesStore extends Store {
-  @observable allWorkspacesRequest = new CachedRequest(this.api, 'getUserWorkspaces');
+export default class WorkspacesStore {
+  @observable isFeatureActive = false;
 
-  constructor(stores, api, actions, state) {
-    super(stores, api, actions);
-    this.state = state;
-  }
+  @observable activeWorkspace = null;
+
+  @observable nextWorkspace = null;
+
+  @observable workspaceBeingEdited = null;
+
+  @observable isSwitchingWorkspace = false;
 
-  setup() {
-    debug('fetching workspaces');
-    this.allWorkspacesRequest.execute();
-
-    /**
-     * Update the state workspaces array when workspaces request has results.
-     */
-    reaction(
-      () => this.allWorkspacesRequest.result,
-      workspaces => this._setWorkspaces(workspaces),
-    );
-    /**
-     * Update the loading state when workspace request is executing.
-     */
-    reaction(
-      () => this.allWorkspacesRequest.isExecuting,
-      isExecuting => this._setIsLoadingWorkspaces(isExecuting),
-    );
-    /**
-     * Update the state with the workspace to be edited when route matches.
-     */
-    reaction(
-      () => ({
-        pathname: this.stores.router.location.pathname,
-        workspaces: this.state.workspaces,
-      }),
-      ({ pathname }) => {
-        const match = matchRoute('/settings/workspaces/edit/:id', pathname);
-        if (match) {
-          this.state.workspaceBeingEdited = this._getWorkspaceById(match.id);
-        }
-      },
-    );
+  @observable isWorkspaceDrawerOpen = false;
 
+  @computed get workspaces() {
+    return getUserWorkspacesRequest.execute().result || [];
+  }
+
+  constructor() {
+    // Wire-up action handlers
     workspaceActions.edit.listen(this._edit);
     workspaceActions.create.listen(this._create);
     workspaceActions.delete.listen(this._delete);
@@ -57,28 +42,62 @@ export default class WorkspacesStore extends Store {
     workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
     workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
     workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
+
+    // Register and start reactions
+    this._registerReactions([
+      this._updateWorkspaceBeingEdited,
+      this._updateActiveServiceOnWorkspaceSwitch,
+    ]);
   }
 
-  _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
+  start(stores, actions) {
+    debug('WorkspacesStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this._reactions.forEach(r => r.start());
+    this.isFeatureActive = true;
+  }
 
-  @action _setWorkspaces = (workspaces) => {
-    debug('setting user workspaces', workspaces.slice());
-    this.state.workspaces = workspaces.map(data => new Workspace(data));
-  };
+  stop() {
+    debug('WorkspacesStore::stop');
+    this._reactions.forEach(r => r.stop());
+    this.isFeatureActive = false;
+  }
 
-  @action _setIsLoadingWorkspaces = (isLoading) => {
-    this.state.isLoadingWorkspaces = isLoading;
+  filterServicesByActiveWorkspace = (services) => {
+    const { activeWorkspace, isFeatureActive } = this;
+
+    if (!isFeatureActive) return services;
+    if (activeWorkspace) {
+      return services.filter(s => (
+        activeWorkspace.services.includes(s.id)
+      ));
+    }
+    return services;
   };
 
+  // ========== PRIVATE ========= //
+
+  _reactions = [];
+
+  _registerReactions(reactions) {
+    reactions.forEach(r => this._reactions.push(new Reaction(r)));
+  }
+
+  _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
+
+  // Actions
+
   @action _edit = ({ workspace }) => {
     this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
   };
 
   @action _create = async ({ name }) => {
     try {
-      const result = await this.api.createWorkspace(name);
-      const workspace = new Workspace(result);
-      this.state.workspaces.push(workspace);
+      const workspace = await createWorkspaceRequest.execute(name);
+      await getUserWorkspacesRequest.patch((result) => {
+        result.push(workspace);
+      });
       this._edit({ workspace });
     } catch (error) {
       throw error;
@@ -87,8 +106,10 @@ export default class WorkspacesStore extends Store {
 
   @action _delete = async ({ workspace }) => {
     try {
-      await this.api.deleteWorkspace(workspace);
-      this.state.workspaces.remove(workspace);
+      await deleteWorkspaceRequest.execute(workspace);
+      await getUserWorkspacesRequest.patch((result) => {
+        result.remove(workspace);
+      });
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;
@@ -97,9 +118,11 @@ export default class WorkspacesStore extends Store {
 
   @action _update = async ({ workspace }) => {
     try {
-      await this.api.updateWorkspace(workspace);
-      const localWorkspace = this.state.workspaces.find(ws => ws.id === workspace.id);
-      Object.assign(localWorkspace, workspace);
+      await updateWorkspaceRequest.execute(workspace);
+      await getUserWorkspacesRequest.patch((result) => {
+        const localWorkspace = result.find(ws => ws.id === workspace.id);
+        Object.assign(localWorkspace, workspace);
+      });
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;
@@ -107,33 +130,56 @@ export default class WorkspacesStore extends Store {
   };
 
   @action _setActiveWorkspace = ({ workspace }) => {
-    Object.assign(this.state, {
-      isSwitchingWorkspace: true,
-      nextWorkspace: workspace,
-    });
-    setTimeout(() => { this.state.activeWorkspace = workspace; }, 100);
+    // 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; }, 100);
+    // Indicate that we are done switching to the next workspace
     setTimeout(() => {
-      Object.assign(this.state, {
-        isSwitchingWorkspace: false,
-        nextWorkspace: null,
-      });
+      this.isSwitchingWorkspace = false;
+      this.nextWorkspace = null;
     }, 1000);
   };
 
   @action _deactivateActiveWorkspace = () => {
-    Object.assign(this.state, {
-      isSwitchingWorkspace: true,
-      nextWorkspace: null,
-    });
-    setTimeout(() => { this.state.activeWorkspace = null; }, 100);
-    setTimeout(() => { this.state.isSwitchingWorkspace = false; }, 1000);
+    // Indicate that we are switching to default workspace
+    this.isSwitchingWorkspace = true;
+    this.nextWorkspace = 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.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen;
+    this.isWorkspaceDrawerOpen = !this.isWorkspaceDrawerOpen;
   };
 
   @action _openWorkspaceSettings = () => {
     this.actions.ui.openSettings({ path: 'workspaces' });
   };
+
+  // Reactions
+
+  _updateWorkspaceBeingEdited = () => {
+    const { pathname } = this.stores.router.location;
+    const match = matchRoute('/settings/workspaces/edit/:id', pathname);
+    if (match) {
+      this.workspaceBeingEdited = this._getWorkspaceById(match.id);
+    }
+  };
+
+  _updateActiveServiceOnWorkspaceSwitch = () => {
+    if (!this.isFeatureActive) return;
+    if (this.activeWorkspace) {
+      const services = this.stores.services.allDisplayed;
+      const activeService = services.find(s => s.isActive);
+      const workspaceServices = this.filterServicesByActiveWorkspace(services);
+      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
+      if (!isActiveServiceInWorkspace) {
+        this.actions.service.setActive({ serviceId: workspaceServices[0].id });
+      }
+    }
+  };
 }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 2a88515f4..3435e04f7 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -3,7 +3,7 @@ import { observable, autorun } from 'mobx';
 import { defineMessages } from 'react-intl';
 
 import { isMac, ctrlKey, cmdKey } from '../environment';
-import { workspacesState } from '../features/workspaces/state';
+import { workspaceStore } from '../features/workspaces/index';
 import { workspaceActions } from '../features/workspaces/actions';
 
 const { app, Menu, dialog } = remote;
@@ -784,7 +784,7 @@ export default class FranzMenu {
   }
 
   workspacesMenu() {
-    const { workspaces, activeWorkspace } = workspacesState;
+    const { workspaces, activeWorkspace, isWorkspaceDrawerOpen } = workspaceStore;
     const { intl } = window.franz;
     const menu = [];
 
@@ -800,7 +800,7 @@ export default class FranzMenu {
 
     // Open workspace drawer:
     const drawerLabel = (
-      workspacesState.isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
+      isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
     );
     menu.push({
       label: intl.formatMessage(drawerLabel),
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index cc8eed65b..0ec6bf550 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -12,7 +12,7 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent } from '../lib/analytics';
-import { filterServicesByActiveWorkspace, getActiveWorkspaceServices } from '../features/workspaces';
+import { workspaceStore } from '../features/workspaces';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -109,7 +109,7 @@ export default class ServicesStore extends Store {
 
   @computed get allDisplayed() {
     const services = this.stores.settings.all.app.showDisabledServices ? this.all : this.enabled;
-    return filterServicesByActiveWorkspace(services);
+    return workspaceStore.filterServicesByActiveWorkspace(services);
   }
 
   // This is just used to avoid unnecessary rerendering of resource-heavy webviews
@@ -117,7 +117,7 @@ export default class ServicesStore extends Store {
     const { showDisabledServices } = this.stores.settings.all.app;
     const services = this.allServicesRequest.execute().result || [];
     const filteredServices = showDisabledServices ? services : services.filter(service => service.isEnabled);
-    return getActiveWorkspaceServices(filteredServices);
+    return workspaceStore.filterServicesByActiveWorkspace(filteredServices);
   }
 
   @computed get filtered() {
-- 
cgit v1.2.3-70-g09d2


From 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 10 Apr 2019 11:22:25 +0200
Subject: refactors workspace theme vars into object structure

---
 packages/theme/src/themes/dark/index.ts            | 49 +++++++++---------
 packages/theme/src/themes/default/index.ts         | 60 +++++++++++-----------
 src/components/layout/AppLayout.js                 |  4 +-
 .../workspaces/components/WorkspaceDrawer.js       | 20 ++++----
 .../workspaces/components/WorkspaceDrawerItem.js   | 20 ++++----
 .../components/WorkspaceSwitchingIndicator.js      |  2 +-
 6 files changed, 78 insertions(+), 77 deletions(-)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 73ffa7f5e..fd04b106c 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -76,6 +76,13 @@ export const services = merge({}, defaultStyles.services, {
   },
 });
 
+// Service Icon
+export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
+  isCustom: {
+    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+  },
+});
+
 // Workspaces
 const drawerBg = color(colorBackground).lighten(0.3).hex();
 
@@ -105,27 +112,21 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
   },
 });
 
-// Workspace settings
-export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
-  listItemBorderColor: legacyStyles.darkThemeGrayDarker,
-  listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
-});
-
-// Workspace Drawer
-export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
-export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
-export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
-export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
-export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
-export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
-export const workspaceDrawerItemNameColor = colorText;
-export const workspaceDrawerItemNameActiveColor = 'white';
-export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
-export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
-
-// Service Icon
-export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
-  isCustom: {
-    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
-  },
-});
+// // Workspace settings
+// export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
+//   listItemBorderColor: legacyStyles.darkThemeGrayDarker,
+//   listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
+// });
+//
+// // Workspace Drawer
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
+// export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = 'white';
+// export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
+// export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
+//
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index eb7e80b9f..48111d22b 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -157,6 +157,16 @@ export const services = {
   },
 };
 
+// Service Icon
+export const serviceIcon = {
+  width: 35,
+  isCustom: {
+    border: `1px solid ${legacyStyles.themeGrayLighter}`,
+    borderRadius: legacyStyles.themeBorderRadius,
+    width: 37,
+  },
+};
+
 // Workspaces
 const drawerBg = color(colorBackground).lighten(0.1).hex();
 
@@ -168,7 +178,7 @@ export const workspaces = {
     width: 300,
     padding: 20,
     background: drawerBg,
-    addButton: {
+    buttons: {
       color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
       hoverColor: legacyStyles.themeGrayLight,
     },
@@ -188,32 +198,22 @@ export const workspaces = {
   },
 };
 
-export const workspaceSettings = {
-  listItemHeight: 57,
-  listItemBorderColor: legacyStyles.themeGrayLightest,
-  listItemHoverBgColor: legacyStyles.themeGrayLightest,
-};
-
-// Workspace Drawer
-export const workspaceDrawerWidth = 300;
-export const workspaceDrawerPadding = 20;
-export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
-export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
-export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
-export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
-export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
-export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
-export const workspaceDrawerItemNameColor = colorText;
-export const workspaceDrawerItemNameActiveColor = colorText;
-export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
-export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;
-
-// Service Icon
-export const serviceIcon = {
-  width: 35,
-  isCustom: {
-    border: `1px solid ${legacyStyles.themeGrayLighter}`,
-    borderRadius: legacyStyles.themeBorderRadius,
-    width: 37,
-  },
-};
+// export const workspaceSettings = {
+//   listItemHeight: 57,
+//   listItemBorderColor: legacyStyles.themeGrayLightest,
+//   listItemHoverBgColor: legacyStyles.themeGrayLightest,
+// };
+//
+// // Workspace Drawer
+// export const workspaceDrawerWidth = 300;
+// export const workspaceDrawerPadding = 20;
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
+// export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
+// export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = colorText;
+// export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
+// export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 0c72c1413..b7f7722dd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -50,10 +50,10 @@ const messages = defineMessages({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
+    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
     },
   },
 });
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index ae67b9ea4..d48b55f12 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -45,24 +45,24 @@ const messages = defineMessages({
 
 const styles = theme => ({
   drawer: {
-    backgroundColor: theme.workspaceDrawerBackground,
-    width: `${theme.workspaceDrawerWidth}px`,
+    background: theme.workspaces.drawer.background,
+    width: `${theme.workspaces.drawer.width}px`,
   },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
     marginBottom: '25px',
-    marginLeft: theme.workspaceDrawerPadding,
+    marginLeft: theme.workspaces.drawer.padding,
   },
   workspacesSettingsButton: {
     float: 'right',
-    marginRight: theme.workspaceDrawerPadding,
+    marginRight: theme.workspaces.drawer.padding,
     marginTop: '2px',
   },
   workspacesSettingsButtonIcon: {
-    fill: theme.workspaceDrawerAddButtonColor,
+    fill: theme.workspaces.drawer.buttons.color,
     '&:hover': {
-      fill: theme.workspaceDrawerAddButtonHoverColor,
+      fill: theme.workspaces.drawer.buttons.hoverColor,
     },
   },
   workspaces: {
@@ -80,11 +80,11 @@ const styles = theme => ({
   },
   addNewWorkspaceLabel: {
     height: 'auto',
-    color: theme.workspaces.drawer.addButton.color,
+    color: theme.workspaces.drawer.buttons.color,
     marginTop: 40,
     textAlign: 'center',
     '& > svg': {
-      fill: theme.workspaces.drawer.addButton.color,
+      fill: theme.workspaces.drawer.buttons.color,
     },
     '& > span': {
       fontSize: '13px',
@@ -93,9 +93,9 @@ const styles = theme => ({
       top: -3,
     },
     '&:hover': {
-      color: theme.workspaces.drawer.addButton.hoverColor,
+      color: theme.workspaces.drawer.buttons.hoverColor,
       '& > svg': {
-        fill: theme.workspaces.drawer.addButton.hoverColor,
+        fill: theme.workspaces.drawer.buttons.hoverColor,
       },
     },
   },
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 0be485504..57f0754d9 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -15,41 +15,41 @@ const messages = defineMessages({
 const styles = theme => ({
   item: {
     height: '67px',
-    padding: `15px ${theme.workspaceDrawerPadding}px`,
-    borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    padding: `15px ${theme.workspaces.drawer.padding}px`,
+    borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     transition: 'background-color 300ms ease-out',
     '&:first-child': {
-      borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
+      borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     },
     '&:hover': {
-      backgroundColor: theme.workspaceDrawerItemHoverBackground,
+      backgroundColor: theme.workspaces.drawer.listItem.hoverBackground,
     },
   },
   isActiveItem: {
-    backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    backgroundColor: theme.workspaces.drawer.listItem.activeBackground,
     '&:hover': {
-      backgroundColor: theme.workspaceDrawerItemActiveBackground,
+      backgroundColor: theme.workspaces.drawer.listItem.activeBackground,
     },
   },
   name: {
     marginTop: '4px',
-    color: theme.workspaceDrawerItemNameColor,
+    color: theme.workspaces.drawer.listItem.name.color,
   },
   activeName: {
-    color: theme.workspaceDrawerItemNameActiveColor,
+    color: theme.workspaces.drawer.listItem.name.activeColor,
   },
   services: {
     display: 'block',
     fontSize: '11px',
     marginTop: '5px',
-    color: theme.workspaceDrawerServicesColor,
+    color: theme.workspaces.drawer.listItem.services.color,
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     lineHeight: '15px',
   },
   activeServices: {
-    color: theme.workspaceDrawerServicesActiveColor,
+    color: theme.workspaces.drawer.listItem.services.active,
   },
 });
 
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 8aba5bbd9..ded6b8f2a 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -25,7 +25,7 @@ const styles = theme => ({
     marginTop: '20px',
   },
   wrapperWhenDrawerIsOpen: {
-    width: `calc(100% - ${theme.workspaceDrawerWidth}px)`,
+    width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
   },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
-- 
cgit v1.2.3-70-g09d2


From ca9d5863f9067f2a32498da763cd536e0bcc5c77 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Apr 2019 12:53:16 +0200
Subject: refactor announcements to newest feature pattern

---
 src/components/layout/AppLayout.js                 |  2 +-
 src/containers/layout/AppLayoutContainer.js        |  5 +-
 src/features/announcements/Component.js            | 77 ---------------------
 src/features/announcements/api.js                  |  6 +-
 .../announcements/components/AnnouncementScreen.js | 79 ++++++++++++++++++++++
 src/features/announcements/index.js                | 17 ++---
 src/features/announcements/state.js                | 17 -----
 src/features/announcements/store.js                | 49 ++++++++------
 src/i18n/locales/defaultMessages.json              | 18 +++++
 .../components/AnnouncementScreen.json             | 15 ++++
 10 files changed, 156 insertions(+), 129 deletions(-)
 delete mode 100644 src/features/announcements/Component.js
 create mode 100644 src/features/announcements/components/AnnouncementScreen.js
 delete mode 100644 src/features/announcements/state.js
 create mode 100644 src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 985475c8d..eb3f03f12 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -14,7 +14,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
-import AnnouncementScreen from '../../features/announcements/Component';
+import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 0357f63bd..8a0e105e7 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,10 +20,11 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
-import { announcementsState } from '../../features/announcements/state';
+import {  } from '../../features/announcements/store';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
+import { announcementsStore } from '../../features/announcements';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -150,7 +151,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
           darkMode={settings.all.app.darkMode}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
-          isAnnouncementVisible={announcementsState.isAnnouncementVisible}
+          isAnnouncementVisible={announcementsStore.isAnnouncementVisible}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
diff --git a/src/features/announcements/Component.js b/src/features/announcements/Component.js
deleted file mode 100644
index 5d95f5d84..000000000
--- a/src/features/announcements/Component.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { Component } from 'react';
-import marked from 'marked';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-import injectSheet from 'react-jss';
-import { themeSidebarWidth } from '@meetfranz/theme/lib/themes/legacy';
-import state from './state';
-
-const messages = defineMessages({
-  headline: {
-    id: 'feature.announcements.headline',
-    defaultMessage: '!!!What\'s new in Franz {version}?',
-  },
-});
-
-const styles = theme => ({
-  container: {
-    background: theme.colorBackground,
-    position: 'absolute',
-    top: 0,
-    zIndex: 140,
-    width: `calc(100% - ${themeSidebarWidth})`,
-    display: 'flex',
-    'flex-direction': 'column',
-    'align-items': 'center',
-    'justify-content': 'center',
-  },
-  headline: {
-    color: theme.colorHeadline,
-    margin: [25, 0, 40],
-    'max-width': 500,
-    'text-align': 'center',
-    'line-height': '1.3em',
-  },
-  body: {
-    '& h3': {
-      fontSize: '24px',
-      margin: '1.5em 0 1em 0',
-    },
-    '& li': {
-      marginBottom: '1em',
-    },
-  },
-});
-
-
-@inject('actions') @injectSheet(styles) @observer
-class AnnouncementScreen extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { intl } = this.context;
-    return (
-      <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>
-          {intl.formatMessage(messages.headline, { version: state.currentVersion })}
-        </h1>
-        <div
-          className={classes.body}
-          dangerouslySetInnerHTML={{
-            __html: marked(state.announcement, { sanitize: true }),
-          }}
-        />
-      </div>
-    );
-  }
-}
-
-export default AnnouncementScreen;
diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js
index ec16066a6..09fcb8235 100644
--- a/src/features/announcements/api.js
+++ b/src/features/announcements/api.js
@@ -1,8 +1,9 @@
 import { remote } from 'electron';
+import Request from '../../stores/lib/Request';
 
 const debug = require('debug')('Franz:feature:announcements:api');
 
-export default {
+export const announcementsApi = {
   async getCurrentVersion() {
     debug('getting current version of electron app');
     return Promise.resolve(remote.app.getVersion());
@@ -17,3 +18,6 @@ export default {
     return data.body;
   },
 };
+
+export const getCurrentVersionRequest = new Request(announcementsApi, 'getCurrentVersion');
+export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncementForVersion');
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
new file mode 100644
index 000000000..5b3e7aeaa
--- /dev/null
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import marked from 'marked';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy';
+import { announcementsStore } from '../index';
+
+const messages = defineMessages({
+  headline: {
+    id: 'feature.announcements.headline',
+    defaultMessage: '!!!What\'s new in Franz {version}?',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    background: theme.colorBackground,
+    position: 'absolute',
+    top: 0,
+    zIndex: 140,
+    width: `calc(100% - ${themeSidebarWidth})`,
+    display: 'flex',
+    'flex-direction': 'column',
+    'align-items': 'center',
+    'justify-content': 'center',
+  },
+  headline: {
+    color: theme.colorHeadline,
+    margin: [25, 0, 40],
+    'max-width': 500,
+    'text-align': 'center',
+    'line-height': '1.3em',
+  },
+  body: {
+    '& h3': {
+      fontSize: '24px',
+      margin: '1.5em 0 1em 0',
+    },
+    '& li': {
+      marginBottom: '1em',
+    },
+  },
+});
+
+
+@inject('actions') @injectSheet(styles) @observer
+class AnnouncementScreen extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { intl } = this.context;
+    return (
+      <div className={`${classes.container}`}>
+        <h1 className={classes.headline}>
+          {intl.formatMessage(messages.headline, {
+            version: announcementsStore.currentVersion,
+          })}
+        </h1>
+        <div
+          className={classes.body}
+          dangerouslySetInnerHTML={{
+            __html: marked(announcementsStore.announcement, { sanitize: true }),
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default AnnouncementScreen;
diff --git a/src/features/announcements/index.js b/src/features/announcements/index.js
index 5ea74e0af..c087689a7 100644
--- a/src/features/announcements/index.js
+++ b/src/features/announcements/index.js
@@ -1,11 +1,9 @@
-import { reaction, runInAction } from 'mobx';
+import { reaction } from 'mobx';
 import { AnnouncementsStore } from './store';
-import api from './api';
-import state, { resetState } from './state';
 
 const debug = require('debug')('Franz:feature:announcements');
 
-let store = null;
+export const announcementsStore = new AnnouncementsStore();
 
 export default function initAnnouncements(stores, actions) {
   // const { features } = stores;
@@ -19,15 +17,10 @@ export default function initAnnouncements(stores, actions) {
     (isEnabled) => {
       if (isEnabled) {
         debug('Initializing `announcements` feature');
-        store = new AnnouncementsStore(stores, api, actions, state);
-        store.initialize();
-        runInAction(() => { state.isFeatureActive = true; });
-      } else if (store) {
+        announcementsStore.start(stores, actions);
+      } else if (announcementsStore.isFeatureActive) {
         debug('Disabling `announcements` feature');
-        runInAction(() => { state.isFeatureActive = false; });
-        store.teardown();
-        store = null;
-        resetState(); // Reset state to default
+        announcementsStore.stop();
       }
     },
     {
diff --git a/src/features/announcements/state.js b/src/features/announcements/state.js
deleted file mode 100644
index 81b632253..000000000
--- a/src/features/announcements/state.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { observable } from 'mobx';
-
-const defaultState = {
-  announcement: null,
-  currentVersion: null,
-  lastUsedVersion: null,
-  isAnnouncementVisible: false,
-  isFeatureActive: false,
-};
-
-export const announcementsState = observable(defaultState);
-
-export function resetState() {
-  Object.assign(announcementsState, defaultState);
-}
-
-export default announcementsState;
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index 004a44062..c59700926 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -1,28 +1,39 @@
 import { action, observable, reaction } from 'mobx';
 import semver from 'semver';
-
-import Request from '../../stores/lib/Request';
-import Store from '../../stores/lib/Store';
+import { FeatureStore } from '../utils/FeatureStore';
+import { getAnnouncementRequest, getCurrentVersionRequest } from './api';
 
 const debug = require('debug')('Franz:feature:announcements:store');
 
-export class AnnouncementsStore extends Store {
-  @observable getCurrentVersion = new Request(this.api, 'getCurrentVersion');
+export class AnnouncementsStore extends FeatureStore {
 
-  @observable getAnnouncement = new Request(this.api, 'getAnnouncementForVersion');
+  @observable announcement = null;
 
-  constructor(stores, api, actions, state) {
-    super(stores, api, actions);
-    this.state = state;
-  }
+  @observable currentVersion = null;
+
+  @observable lastUsedVersion = null;
+
+  @observable isAnnouncementVisible = false;
 
-  async setup() {
+  @observable isFeatureActive = false;
+
+  async start(stores, actions) {
+    debug('AnnouncementsStore::start');
+    this.stores = stores;
+    this.actions = actions;
     await this.fetchLastUsedVersion();
     await this.fetchCurrentVersion();
     await this.fetchReleaseAnnouncement();
     this.showAnnouncementIfNotSeenYet();
 
     this.actions.announcements.show.listen(this._showAnnouncement.bind(this));
+    this.isFeatureActive = true;
+  }
+
+  stop() {
+    debug('AnnouncementsStore::stop');
+    this.isFeatureActive = false;
+    this.isAnnouncementVisible = false;
   }
 
   // ====== PUBLIC ======
@@ -35,14 +46,14 @@ export class AnnouncementsStore extends Store {
 
   async fetchCurrentVersion() {
     debug('getting current version from api');
-    const version = await this.getCurrentVersion.execute();
+    const version = await getCurrentVersionRequest.execute();
     this._setCurrentVersion(version);
   }
 
   async fetchReleaseAnnouncement() {
     debug('getting release announcement from api');
     try {
-      const announcement = await this.getAnnouncement.execute(this.state.currentVersion);
+      const announcement = await getAnnouncementRequest.execute(this.currentVersion);
       this._setAnnouncement(announcement);
     } catch (error) {
       this._setAnnouncement(null);
@@ -50,7 +61,7 @@ export class AnnouncementsStore extends Store {
   }
 
   showAnnouncementIfNotSeenYet() {
-    const { announcement, currentVersion, lastUsedVersion } = this.state;
+    const { announcement, currentVersion, lastUsedVersion } = this;
     if (announcement && semver.gt(currentVersion, lastUsedVersion)) {
       debug(`${currentVersion} < ${lastUsedVersion}: announcement is shown`);
       this._showAnnouncement();
@@ -64,21 +75,21 @@ export class AnnouncementsStore extends Store {
 
   @action _setCurrentVersion(version) {
     debug(`setting current version to ${version}`);
-    this.state.currentVersion = version;
+    this.currentVersion = version;
   }
 
   @action _setLastUsedVersion(version) {
     debug(`setting last used version to ${version}`);
-    this.state.lastUsedVersion = version;
+    this.lastUsedVersion = version;
   }
 
   @action _setAnnouncement(announcement) {
     debug(`setting announcement to ${announcement}`);
-    this.state.announcement = announcement;
+    this.announcement = announcement;
   }
 
   @action _showAnnouncement() {
-    this.state.isAnnouncementVisible = true;
+    this.isAnnouncementVisible = true;
     this.actions.service.blurActive();
     const dispose = reaction(
       () => this.stores.services.active,
@@ -90,6 +101,6 @@ export class AnnouncementsStore extends Store {
   }
 
   @action _hideAnnouncement() {
-    this.state.isAnnouncementVisible = false;
+    this.isAnnouncementVisible = false;
   }
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 698698515..1dd31324e 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3097,6 +3097,24 @@
     ],
     "path": "src/features/announcements/Component.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!What's new in Franz {version}?",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/announcements/components/AnnouncementScreen.js",
+        "id": "feature.announcements.headline",
+        "start": {
+          "column": 12,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/features/announcements/components/AnnouncementScreen.json"
+  },
   {
     "descriptors": [
       {
diff --git a/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
new file mode 100644
index 000000000..225670ee2
--- /dev/null
+++ b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "feature.announcements.headline",
+    "defaultMessage": "!!!What's new in Franz {version}?",
+    "file": "src/features/announcements/components/AnnouncementScreen.js",
+    "start": {
+      "line": 11,
+      "column": 12
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9620db3443c70d6f92b55725ed07a17adda8cea4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 12 Apr 2019 17:18:19 +0200
Subject: link to in-app changelog on new update notification

---
 src/components/layout/AppLayout.js                 | 12 +++++++++--
 src/containers/layout/AppLayoutContainer.js        |  1 +
 src/electron/ipc-api/autoUpdate.js                 |  7 +++++--
 src/i18n/locales/defaultMessages.json              | 24 +++++++++++-----------
 .../messages/src/components/layout/AppLayout.json  | 24 +++++++++++-----------
 src/stores/AppStore.js                             |  4 +++-
 src/styles/info-bar.scss                           |  4 ++++
 7 files changed, 47 insertions(+), 29 deletions(-)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index eb3f03f12..d5febfaf4 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -17,6 +17,7 @@ import { isWindows } from '../../environment';
 import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
+import { announcementActions } from '../../features/announcements/actions';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -72,6 +73,7 @@ class AppLayout extends Component {
     // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    nextAppReleaseVersion: PropTypes.string,
     removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
@@ -86,6 +88,7 @@ class AppLayout extends Component {
 
   static defaultProps = {
     children: [],
+    nextAppReleaseVersion: null,
   };
 
   static contextTypes = {
@@ -104,6 +107,7 @@ class AppLayout extends Component {
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
+      nextAppReleaseVersion,
       removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
@@ -181,9 +185,13 @@ class AppLayout extends Component {
                     <span className="mdi mdi-information" />
                     {intl.formatMessage(messages.updateAvailable)}
                     {' '}
-                    <a href="https://meetfranz.com/changelog" target="_blank">
+                    <button
+                      className="info-bar__inline-button"
+                      type="button"
+                      onClick={() => announcementActions.show({ targetVersion: nextAppReleaseVersion })}
+                    >
                       <u>{intl.formatMessage(messages.changelog)}</u>
-                    </a>
+                    </button>
                   </InfoBar>
                 )}
                 {isDelayAppScreenVisible && (<DelayApp />)}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 8c1d2dfc1..d2891a6a4 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -136,6 +136,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           isOnline={app.isOnline}
           showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
           appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
+          nextAppReleaseVersion={app.nextAppReleaseVersion}
           sidebar={sidebar}
           workspacesDrawer={workspacesDrawer}
           services={servicesContainer}
diff --git a/src/electron/ipc-api/autoUpdate.js b/src/electron/ipc-api/autoUpdate.js
index 74b718734..9a04c1958 100644
--- a/src/electron/ipc-api/autoUpdate.js
+++ b/src/electron/ipc-api/autoUpdate.js
@@ -30,9 +30,12 @@ export default (params) => {
       params.mainWindow.webContents.send('autoUpdate', { available: false });
     });
 
-    autoUpdater.on('update-available', () => {
+    autoUpdater.on('update-available', (event) => {
       debug('update-available');
-      params.mainWindow.webContents.send('autoUpdate', { available: true });
+      params.mainWindow.webContents.send('autoUpdate', {
+        version: event.version,
+        available: true,
+      });
     });
 
     autoUpdater.on('download-progress', (progressObj) => {
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 3323aa310..df7f04a06 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -625,78 +625,78 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!A new update for Franz is available.",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.updateAvailable",
         "start": {
           "column": 19,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 34
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 42
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonChangelog",
         "start": {
           "column": 13,
-          "line": 38
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 46
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 42
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 50
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 46
+          "line": 47
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 4dd354afc..26b8ce040 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 19
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 24
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 38,
+      "line": 39,
       "column": 13
     },
     "end": {
-      "line": 41,
+      "line": 42,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 42,
+      "line": 43,
       "column": 23
     },
     "end": {
-      "line": 45,
+      "line": 46,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 46,
+      "line": 47,
       "column": 26
     },
     "end": {
-      "line": 49,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index ca0c9175b..e68e797ef 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -67,6 +67,8 @@ export default class AppStore extends Store {
 
   @observable isFocused = true;
 
+  @observable nextAppReleaseVersion = null;
+
   dictionaries = [];
 
   constructor(...args) {
@@ -123,7 +125,7 @@ export default class AppStore extends Store {
     ipcRenderer.on('autoUpdate', (event, data) => {
       if (data.available) {
         this.updateStatus = this.updateStatusTypes.AVAILABLE;
-
+        this.nextAppReleaseVersion = data.version;
         if (isMac) {
           app.dock.bounce();
         }
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
index fb4917358..d3010942f 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -43,6 +43,10 @@
     }
   }
 
+  .info-bar__inline-button {
+    color: white;
+  }
+
   &.info-bar--bottom { order: 10; }
 
   &.info-bar--primary {
-- 
cgit v1.2.3-70-g09d2


From 1e38ec5e524c71ae89cd7d4956736494b8c13886 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 8 May 2019 17:02:09 +0200
Subject: fix(Announcements): Fixes issue with rendering announcments in
 workspaces

---
 packages/theme/src/themes/dark/index.ts            |  2 +-
 src/actions/service.js                             |  1 +
 src/app.js                                         |  3 ++
 src/components/layout/AppLayout.js                 |  5 +--
 src/containers/layout/AppLayoutContainer.js        |  1 -
 .../announcements/components/AnnouncementScreen.js |  2 +-
 src/features/announcements/index.js                |  4 +++
 src/features/announcements/store.js                | 41 +++++++++++-----------
 src/features/workspaces/store.js                   |  8 +++--
 src/stores/ServicesStore.js                        |  3 +-
 10 files changed, 38 insertions(+), 32 deletions(-)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index d48dbf916..bd9f001e8 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -113,7 +113,7 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
 });
 
 // Announcements
-export const announcements = merge({}, defaultStyles.workspaces, {
+export const announcements = merge({}, defaultStyles.announcements, {
   spotlight: {
     background: legacyStyles.darkThemeGrayDark,
   },
diff --git a/src/actions/service.js b/src/actions/service.js
index ce62560a9..68c62d594 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -4,6 +4,7 @@ import ServiceModel from '../models/Service';
 export default {
   setActive: {
     serviceId: PropTypes.string.isRequired,
+    keepActiveRoute: PropTypes.bool,
   },
   blurActive: {},
   setActiveNext: {},
diff --git a/src/app.js b/src/app.js
index f6092bf60..cb3e37c64 100644
--- a/src/app.js
+++ b/src/app.js
@@ -43,6 +43,8 @@ import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopup
 import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
 import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
 import { WORKSPACES_ROUTES } from './features/workspaces';
+import AnnouncementScreen from './features/announcements/components/AnnouncementScreen';
+import { ANNOUNCEMENTS_ROUTES } from './features/announcements';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -73,6 +75,7 @@ window.addEventListener('load', () => {
           <I18N>
             <Router history={history}>
               <Route path="/" component={AppLayoutContainer}>
+                <Route path={ANNOUNCEMENTS_ROUTES.TARGET} component={AnnouncementScreen} />
                 <Route path="/settings" component={SettingsWindow}>
                   <IndexRedirect to="/settings/recipes" />
                   <Route path="/settings/recipes" component={RecipesScreen} />
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index d5febfaf4..fa83842a4 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -83,7 +83,6 @@ class AppLayout extends Component {
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
-    isAnnouncementVisible: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -117,7 +116,6 @@ class AppLayout extends Component {
       areRequiredRequestsLoading,
       darkMode,
       isDelayAppScreenVisible,
-      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -197,12 +195,11 @@ class AppLayout extends Component {
                 {isDelayAppScreenVisible && (<DelayApp />)}
                 <BasicAuth />
                 <ShareFranz />
-                {isAnnouncementVisible && (<AnnouncementScreen />)}
                 {services}
+                {children}
               </div>
             </div>
           </div>
-          {children}
         </div>
       </ErrorBoundary>
     );
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index d2891a6a4..83b3c27da 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -151,7 +151,6 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
           darkMode={settings.all.app.darkMode}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
-          isAnnouncementVisible={announcementsStore.isAnnouncementVisible}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index dfce6cdd5..e7c5fe395 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -268,7 +268,7 @@ class AnnouncementScreen extends Component {
           <div className={classes.changelog}>
             <h1 className={classes.headline}>
               {intl.formatMessage(messages.headline, {
-                version: announcementsStore.currentVersion,
+                version: announcementsStore.targetVersion,
               })}
             </h1>
             <div
diff --git a/src/features/announcements/index.js b/src/features/announcements/index.js
index 4658b976f..f14e7c9a5 100644
--- a/src/features/announcements/index.js
+++ b/src/features/announcements/index.js
@@ -7,6 +7,10 @@ export const GA_CATEGORY_ANNOUNCEMENTS = 'Announcements';
 
 export const announcementsStore = new AnnouncementsStore();
 
+export const ANNOUNCEMENTS_ROUTES = {
+  TARGET: '/announcements/:id',
+};
+
 export default function initAnnouncements(stores, actions) {
   // const { features } = stores;
 
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index 6e7ca1dd7..27be86144 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -8,12 +8,13 @@ import semver from 'semver';
 import localStorage from 'mobx-localstorage';
 
 import { FeatureStore } from '../utils/FeatureStore';
-import { GA_CATEGORY_ANNOUNCEMENTS } from '.';
+import { ANNOUNCEMENTS_ROUTES, GA_CATEGORY_ANNOUNCEMENTS } from '.';
 import { getAnnouncementRequest, getChangelogRequest, getCurrentVersionRequest } from './api';
 import { announcementActions } from './actions';
 import { createActionBindings } from '../utils/ActionBinding';
 import { createReactions } from '../../stores/lib/Reaction';
 import { gaEvent } from '../../lib/analytics';
+import { matchRoute } from '../../helpers/routing-helpers';
 
 const LOCAL_STORAGE_KEY = 'announcements';
 
@@ -22,8 +23,6 @@ const debug = require('debug')('Franz:feature:announcements:store');
 export class AnnouncementsStore extends FeatureStore {
   @observable targetVersion = null;
 
-  @observable isAnnouncementVisible = false;
-
   @observable isFeatureActive = false;
 
   @computed get changelog() {
@@ -37,6 +36,7 @@ export class AnnouncementsStore extends FeatureStore {
   @computed get areNewsAvailable() {
     const isChangelogAvailable = getChangelogRequest.wasExecuted && !!this.changelog;
     const isAnnouncementAvailable = getAnnouncementRequest.wasExecuted && !!this.announcement;
+    console.log(isChangelogAvailable, isAnnouncementAvailable);
     return isChangelogAvailable || isAnnouncementAvailable;
   }
 
@@ -67,8 +67,9 @@ export class AnnouncementsStore extends FeatureStore {
     ]));
 
     this._reactions = createReactions([
-      this._fetchAnnouncements,
+      this._showAnnouncementOnRouteMatch,
       this._showAnnouncementToUsersWhoUpdatedApp,
+      this._fetchAnnouncements,
     ]);
     this._registerReactions(this._reactions);
     this.isFeatureActive = true;
@@ -78,7 +79,6 @@ export class AnnouncementsStore extends FeatureStore {
     super.stop();
     debug('AnnouncementsStore::stop');
     this.isFeatureActive = false;
-    this.isAnnouncementVisible = false;
   }
 
   // ======= HELPERS ======= //
@@ -93,33 +93,23 @@ export class AnnouncementsStore extends FeatureStore {
   // ======= ACTIONS ======= //
 
   @action _showAnnouncement = ({ targetVersion } = {}) => {
-    if (!this.areNewsAvailable) return;
+    const { router } = this.stores;
     this.targetVersion = targetVersion || this.currentVersion;
-    this.isAnnouncementVisible = true;
-    this.actions.service.blurActive();
     this._updateSettings({
       lastSeenAnnouncementVersion: this.currentVersion,
     });
-    const dispose = reaction(
-      () => this.stores.services.active,
-      () => {
-        this._hideAnnouncement();
-        dispose();
-      },
-    );
-
+    const targetRoute = `/announcements/${this.targetVersion}`;
+    if (router.location.pathname !== targetRoute) {
+      this.stores.router.push(targetRoute);
+    }
     gaEvent(GA_CATEGORY_ANNOUNCEMENTS, 'show');
   };
 
-  @action _hideAnnouncement() {
-    this.isAnnouncementVisible = false;
-  }
-
   // ======= REACTIONS ========
 
   _showAnnouncementToUsersWhoUpdatedApp = () => {
     const { announcement, isNewUser } = this;
-    // Check if there is an announcement and on't show announcements to new users
+    // Check if there is an announcement and don't show announcements to new users
     if (!announcement || isNewUser) return;
 
     // Check if the user has already used current version (= has seen the announcement)
@@ -140,5 +130,14 @@ export class AnnouncementsStore extends FeatureStore {
     } else {
       getAnnouncementRequest.reset();
     }
+  };
+
+  _showAnnouncementOnRouteMatch = () => {
+    const { router } = this.stores;
+    const match = matchRoute(ANNOUNCEMENTS_ROUTES.TARGET, router.location.pathname);
+    if (match) {
+      const targetVersion = match.id;
+      this._showAnnouncement({ targetVersion });
+    }
   }
 }
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index e11513d1f..3d7043413 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -255,13 +255,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,
+        });
       }
     }
   };
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 13f929c2f..17150a023 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -291,7 +291,8 @@ export default class ServicesStore extends Store {
     gaEvent('Service', 'clear cache');
   }
 
-  @action _setActive({ serviceId }) {
+  @action _setActive({ serviceId, keepActiveRoute }) {
+    if (!keepActiveRoute) this.stores.router.push('/');
     const service = this.one(serviceId);
 
     this.all.forEach((s, index) => {
-- 
cgit v1.2.3-70-g09d2


From e8473abae9fc905cbafcfeb1ce281fa2869b6f09 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 8 May 2019 17:04:37 +0200
Subject: fixes eslint issues

---
 src/components/layout/AppLayout.js                 |  1 -
 src/containers/layout/AppLayoutContainer.js        |  1 -
 src/features/announcements/store.js                |  1 -
 .../messages/src/components/layout/AppLayout.json  | 24 +++++++++++-----------
 4 files changed, 12 insertions(+), 15 deletions(-)

(limited to 'src/components/layout/AppLayout.js')

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index fa83842a4..b31c00f54 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -14,7 +14,6 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
-import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import { announcementActions } from '../../features/announcements/actions';
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 83b3c27da..d290a6094 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -23,7 +23,6 @@ import { state as delayAppState } from '../../features/delayApp';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
-import { announcementsStore } from '../../features/announcements';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index 27be86144..2ce33c299 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -2,7 +2,6 @@ import {
   action,
   computed,
   observable,
-  reaction,
 } from 'mobx';
 import semver from 'semver';
 import localStorage from 'mobx-localstorage';
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 26b8ce040..4dd354afc 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 27,
+      "line": 26,
       "column": 19
     },
     "end": {
-      "line": 30,
+      "line": 29,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 31,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 34,
+      "line": 33,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 35,
+      "line": 34,
       "column": 24
     },
     "end": {
-      "line": 38,
+      "line": 37,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 39,
+      "line": 38,
       "column": 13
     },
     "end": {
-      "line": 42,
+      "line": 41,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 43,
+      "line": 42,
       "column": 23
     },
     "end": {
-      "line": 46,
+      "line": 45,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 47,
+      "line": 46,
       "column": 26
     },
     "end": {
-      "line": 50,
+      "line": 49,
       "column": 3
     }
   }
-- 
cgit v1.2.3-70-g09d2