ensure drawer is open on workspace settings routes

3 files changed, 34 insertions, 2 deletions

diff --git a/src/app.js b/src/app.js
index d3b540f62..fb9f1c6ab 100644
--- a/src/app.js
+++ b/src/app.js
@@ -41,6 +41,7 @@ import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
 import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
 import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
+import { WORKSPACES_ROUTES } from './features/workspaces';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -77,8 +78,8 @@ window.addEventListener('load', () => {
                   <Route path="/settings/recipes/:filter" component={RecipesScreen} />
                   <Route path="/settings/services" component={ServicesScreen} />
                   <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
-                  <Route path="/settings/workspaces" component={WorkspacesScreen} />
-                  <Route path="/settings/workspaces/:action/:id" component={EditWorkspaceScreen} />
+                  <Route path={WORKSPACES_ROUTES.ROOT} component={WorkspacesScreen} />
+                  <Route path={WORKSPACES_ROUTES.EDIT} component={EditWorkspaceScreen} />
                   <Route path="/settings/user" component={AccountScreen} />
                   <Route path="/settings/user/edit" component={EditUserScreen} />
                   <Route path="/settings/app" component={EditSettingsScreen} />
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index fb5135743..ad9023b8b 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -30,3 +30,8 @@ export default function initWorkspaces(stores, actions) {
     },
   );
 }
+
+export const WORKSPACES_ROUTES = {
+  ROOT: '/settings/workspaces',
+  EDIT: '/settings/workspaces/:action/:id',
+};
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 7bd969be0..2e1764f99 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -13,6 +13,7 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from './api';
+import { WORKSPACES_ROUTES } from './index';
 
 const debug = require('debug')('Franz:feature:workspaces:store');
 
@@ -70,6 +71,7 @@ export default class WorkspacesStore extends FeatureStore {
       this._setFeatureEnabledReaction,
       this._setIsPremiumFeatureReaction,
       this._activateLastUsedWorkspaceReaction,
+      this._openDrawerWithSettingsReaction,
     ]);
 
     getUserWorkspacesRequest.execute();
@@ -100,6 +102,10 @@ export default class WorkspacesStore extends FeatureStore {
 
   // ========== PRIVATE ========= //
 
+  _wasDrawerOpenBeforeSettingsRoute = null;
+
+  _isSettingsRouteActive = null;
+
   _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
   _updateSettings = (changes) => {
@@ -229,4 +235,24 @@ export default class WorkspacesStore extends FeatureStore {
       }
     }
   };
+
+  _openDrawerWithSettingsReaction = () => {
+    const { router } = this.stores;
+    const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT);
+    const isSwitchingToSettingsRoute = !this._isSettingsRouteActive && isWorkspaceSettingsRoute;
+    const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this._isSettingsRouteActive;
+
+    if (isSwitchingToSettingsRoute) {
+      this._isSettingsRouteActive = true;
+      this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen;
+      if (!this._wasDrawerOpenBeforeSettingsRoute) {
+        workspaceActions.toggleWorkspaceDrawer();
+      }
+    } else if (isLeavingSettingsRoute) {
+      this._isSettingsRouteActive = false;
+      if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) {
+        workspaceActions.toggleWorkspaceDrawer();
+      }
+    }
+  };
 }