Merge pull request #1426 from meetfranz/fix/announcement-not-shown-within-workspace

Fix/announcement not shown within workspace

11 files changed, 60 insertions, 63 deletions

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..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';
@@ -83,7 +82,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 +115,6 @@ class AppLayout extends Component {
       areRequiredRequestsLoading,
       darkMode,
       isDelayAppScreenVisible,
-      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -197,12 +194,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..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 = {
@@ -151,7 +150,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..0d2b68ccf 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -2,18 +2,18 @@ import {
   action,
   computed,
   observable,
-  reaction,
 } from 'mobx';
 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 +22,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() {
@@ -67,8 +65,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 +77,6 @@ export class AnnouncementsStore extends FeatureStore {
     super.stop();
     debug('AnnouncementsStore::stop');
     this.isFeatureActive = false;
-    this.isAnnouncementVisible = false;
   }
 
   // ======= HELPERS ======= //
@@ -93,33 +91,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)
@@ -134,11 +122,15 @@ export class AnnouncementsStore extends FeatureStore {
     const targetVersion = this.targetVersion || this.currentVersion;
     if (!targetVersion) return;
     getChangelogRequest.execute(targetVersion);
-    // We only fetch announcements for current / older versions
-    if (targetVersion <= this.currentVersion) {
-      getAnnouncementRequest.execute(targetVersion);
-    } else {
-      getAnnouncementRequest.reset();
+    getAnnouncementRequest.execute(targetVersion);
+  };
+
+  _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/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 632eb38fd..9524238f0 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": 30
+          "line": 29
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 27
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!A new update for Franz is available.",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 33
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.updateAvailable",
         "start": {
           "column": 19,
-          "line": 31
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 37
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 35
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 41
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonChangelog",
         "start": {
           "column": 13,
-          "line": 39
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 45
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 43
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 49
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 47
+          "line": 46
         }
       }
     ],
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
     }
   }
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) => {